/* ============================================================================
   CYRAHOP — globals.css
   Design tokens + reset. Loaded on every page before any other stylesheet.
   Mobile-first: base styles target small screens, desktop in @media >=768px.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Mukta:wght@300;400;500;600;700&display=swap');

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Brand — Ocean Blue + Aqua on Soft White, Charcoal text (Clustr palette) */
  --primary:        #1F4B5D;   /* Ocean Blue — primary CTA / brand accent */
  --primary-dark:   #15323F;
  --primary-light:  rgba(31, 75, 93, 0.12);
  --aqua:           #68CFEB;   /* Aqua — bright highlight accent */
  --teal:           #1F1E19;   /* Charcoal — secondary brand / links */
  --mint:           #DCF1FA;   /* soft aqua tint */
  --sage:           #CDEBF6;   /* soft aqua tint */
  --peach:          #EAF6FB;   /* hero/section aqua tint */
  --yellow:         #68CFEB;   /* Aqua accent (reused as the highlight token) */
  --yellow-ink:     #11323D;   /* readable charcoal-blue text on Aqua */
  --yellow-soft:    rgba(104, 207, 235, 0.20);

  /* Text (Charcoal on the light surfaces) */
  --text-main:      #1F1E19;
  --text-muted:     #5C6B71;
  --text-hint:      #9AA9AF;

  /* Surfaces (Soft White + aqua-tinted fills) */
  --border:         rgba(31, 30, 25, 0.10);
  --border-strong:  rgba(31, 30, 25, 0.18);
  --bg-page:        #FAFAFA;   /* Soft White surface */
  --bg-card:        #FFFFFF;   /* white cards */
  --bg-elev:        #EEF6FA;   /* inputs / subtle aqua fills */

  /* Radii — airy, fully-pill buttons like the reference */
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --radius-pill:    999px;

  /* White text sits on the strong coral fills (buttons, banners) */
  --on-pastel:      #FFFFFF;

  /* Shadows (soft, blue-tinted for the light theme) */
  --shadow-card:    0 2px 10px rgba(20, 50, 70, 0.08);
  --shadow-hover:   0 10px 28px rgba(20, 50, 70, 0.16);

  /* Layout */
  --content-max:    1100px;
  --pad-x:          16px;          /* mobile */
  --gap-card:       12px;
  --gap-section:    20px;

  /* Header */
  --header-z:       100;

  /* Status colors (orders / badges) — tuned for the light theme */
  --ok:             #1E8587;
  --ok-bg:          rgba(30, 133, 135, 0.14);
  --warn:           #C96A1E;
  --warn-bg:        rgba(240, 126, 71, 0.16);
  --danger:         #C0392B;
  --danger-bg:      rgba(192, 57, 43, 0.12);

  /* Typography */
  --font-base: 'Mukta', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Poppins', 'Mukta', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@media (min-width: 768px) {
  :root { --pad-x: 24px; }
}

/* ---- Reset --------------------------------------------------------------- */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--text-main);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

/* Never let any page scroll sideways on a phone. */
html, body { max-width: 100%; overflow-x: hidden; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; border: none; background: none; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

h1, h2, h3, h4 { line-height: 1.22; font-weight: 700; font-family: var(--font-head); letter-spacing: -0.01em; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- Layout utilities ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { margin-block: var(--gap-section); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-head h2 { font-size: 1.15rem; }
.section-head a { font-size: 0.85rem; color: var(--primary); font-weight: 500; }

.muted  { color: var(--text-muted); }
.hint   { color: var(--text-hint); }
.hidden { display: none !important; }

/* ---- Cards --------------------------------------------------------------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: var(--shadow-hover); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);   /* fully-pill, like the reference */
  padding: 12px 26px;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  color: var(--on-pastel);
  box-shadow: 0 8px 18px rgba(31, 75, 93, 0.30);
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(31, 75, 93, 0.36); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-secondary {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { border-color: var(--text-muted); }

.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 0.85rem; }

/* ---- Badges -------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--primary-light);
  color: var(--primary-dark);
}
.badge { background: var(--primary-light); color: var(--primary); }
.badge-open   { background: var(--ok-bg);   color: var(--ok); }
.badge-closed { background: var(--border);  color: var(--text-muted); }
.badge-eta    { background: var(--bg-elev); color: var(--text-main); }

/* ---- Forms --------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.input,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"], textarea, select {
  width: 100%;
  background: var(--bg-elev);
  color: var(--text-main);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder, input::placeholder, textarea::placeholder { color: var(--text-hint); }
.input:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(240, 126, 71, 0.20);
}

/* ---- Alerts -------------------------------------------------------------- */
.alert { border-radius: var(--radius-md); padding: 12px 16px; font-size: 0.9rem; font-weight: 500; }
.alert-ok     { background: var(--ok-bg);     color: var(--ok); }
.alert-error  { background: var(--danger-bg); color: var(--danger); }

/* ---- Horizontal scroll rails (carousels) --------------------------------- */
.rail {
  display: flex;
  gap: var(--gap-card);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ---- Skeleton / loading -------------------------------------------------- */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Accessibility ------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Shop open/closed pill + in-house delivery (customer-facing) -------- */
.shop-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; font-size: .8rem; line-height: 1;
  padding: 5px 10px; border-radius: var(--radius-pill);
}
.shop-status.is-open   { color: #1B7F4B; background: rgba(46, 158, 91, 0.15); }
.shop-status.is-closed { color: #C0392B; background: rgba(214, 69, 69, 0.15); }
/* status pinned on a card image */
.store-card-img { position: relative; }
.store-card-status { position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.18); }

.store-card-delivery, .store-delivery-info {
  font-size: .8rem; font-weight: 600; margin-top: 6px;
}
.store-card-delivery.has-inhouse, .store-delivery-info.has-inhouse { color: var(--teal); }
.store-card-delivery.no-inhouse, .store-delivery-info.no-inhouse { color: var(--text-muted, #888); font-weight: 500; }

/* ---- Next-pickup schedule line ------------------------------------------ */
.store-card-pickup, .store-schedule-line {
  font-size: .78rem; font-weight: 600; color: var(--yellow-ink);
  background: var(--yellow-soft); border-radius: var(--radius-pill);
  padding: 3px 9px; margin-top: 6px; display: inline-block;
}
.store-schedule-line { margin-top: 8px; font-size: .85rem; }

/* ---- Day picker (also used on checkout for shop-delivery day) ----------- */
.day-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.day-chip { position: relative; cursor: pointer; }
.day-chip input { position: absolute; opacity: 0; pointer-events: none; }
.day-chip span {
  display: inline-block; padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong); font-size: .85rem; font-weight: 600;
  color: var(--text-muted); transition: all .12s ease;
}
.day-chip input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---- Clickable history rows / cards ------------------------------------- */
.order-card-link { display: block; text-decoration: none; color: inherit; }
.order-card-link:hover { box-shadow: var(--shadow-hover); }
.earn-table-click tbody tr:hover { background: var(--primary-light); }

/* ---- "Coming soon" (provisioned but disabled) --------------------------- */
.is-soon { filter: grayscale(0.6) opacity(0.72); cursor: default; }
.is-soon:hover { box-shadow: var(--shadow-card) !important; transform: none !important; }
.cat-tile.is-soon, .svc-card.is-soon, .store-card.is-soon { pointer-events: auto; }
.soon-pill { display: inline-block; font-size: .62rem; font-weight: 700; color: var(--yellow-ink);
  background: var(--yellow-soft); border-radius: var(--radius-pill); padding: 1px 6px; vertical-align: middle; }
.soon-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; background: rgba(59,30,25,.18); border-radius: inherit; }
.shop-status.is-soon { color: #6B4A12; background: var(--yellow-soft); }

/* Non-live store page: keep it browsable but not orderable */
.store-soon .cart-bar, .store-soon .product-action { display: none !important; }
.store-soon .product { opacity: .85; }

/* ============================================================================
   Mobile responsive safety net (≤760px) — applies site-wide.
   ========================================================================== */
@media (max-width: 760px) {
  /* Wide data tables (admin/vendor: Users, Stores, history) scroll sideways
     inside their own box instead of stretching the whole page. */
  .earn-table {
    display: block; width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  .earn-table thead, .earn-table tbody, .earn-table tr { width: 100%; }

  /* Forms & inputs go full width and comfortable to tap. */
  .prod-form, .card.prod-form { max-width: 100%; }
  .prod-grid { grid-template-columns: 1fr; }
  input, select, textarea { max-width: 100%; }

  /* Tighter page gutters so cards use the full screen width. */
  .container { padding-left: 14px; padding-right: 14px; }

  /* Buttons in action clusters wrap rather than overflow. */
  .admin-actions, .prod-form-actions { flex-wrap: wrap; }
}