/* assets/css/base.css
   Single source of truth for design tokens (colors, fonts) shared by
   layout.css, login.css, and components.css. Link this file FIRST on
   every page, before the other stylesheets. */

:root {
  --primary-green: #2e7d32;
  --primary-light: #4caf50;
  --accent-yellow: #f5a623;
  --bg-color: #f9fbf9;
  --bg-light: #fdfbf7;
  --text-main: #222222;
  --text-muted: #666666;
  --font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
}

/* Province / city / barangay pickers.
   Lives here because both the sign-up page (login.css) and the profile
   page (components.css) use it, and base.css is the only stylesheet
   every page loads. */
.address-picker { margin-bottom: 4px; }

.address-row {
    display: flex;
    gap: 14px;
}

.address-field {
    flex: 1;
    min-width: 0;
    margin-bottom: 12px;
}

/* Province / city / barangay sit on one line so the sign-up form still
   clears a 768px-tall laptop screen. */
.address-row-three .address-field {
    flex: 1 1 0;
}

.address-field .form-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text-main);
}

.address-field .form-select,
.address-field .form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
}

.address-field .form-select:disabled {
    background: #f6f7f6;
    color: #999;
    cursor: not-allowed;
}

.addr-optional {
    font-weight: 400;
    color: var(--text-muted);
}

.address-preview {
    margin: -4px 0 4px 0;
    font-size: 12px;
    color: var(--primary-green);
}

@media (max-width: 520px) {
    .address-row { display: block; }
}

/* Shared line icons (js/components/icons.js). A sensible default size so
   an icon dropped anywhere is never rendered at the SVG's full 24px
   unless its container asks for that. */
.ui-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Pre-checkout address gate */
.address-gate { border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.address-gate-ok { background: #f1f8f2; border: 1px solid #cfe5d2; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.address-gate-needed { background: #fff8e8; border: 1px solid #f3d99a; }
.address-gate-msg { margin: 0 0 10px; }
.address-gate-actions { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.address-gate .btn-link { background: none; border: none; color: var(--primary-green, #2e7d32); cursor: pointer; font-weight: 600; padding: 0; }

/* Language switcher + loading overlay */
.lang-switcher { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; color: inherit; }
.lang-switcher select { border: 1px solid rgba(0,0,0,.2); border-radius: 8px; padding: 5px 8px; font-size: 13px; background: #fff; color: #333; cursor: pointer; }
.lang-switcher.lang-floating { position: fixed; top: 12px; right: 12px; z-index: 900; background: #fff; padding: 4px 8px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.15); margin: 0; }
#i18n-loading { position: fixed; inset: 0; background: rgba(255,255,255,.75); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px; z-index: 10000; font-weight: 600; color: #2e7d32; }
#i18n-loading.show { display: flex; }
.i18n-spinner { width: 38px; height: 38px; border: 4px solid #cfe5d2; border-top-color: #2e7d32; border-radius: 50%; animation: i18n-spin .8s linear infinite; }
@keyframes i18n-spin { to { transform: rotate(360deg); } }
/* In narrow columns (cart/checkout) stack the address fields */
.address-gate .address-row { flex-direction: column; gap: 0; }