/* ============================================================
   CityWorkshop — Swiggy Theme 2026 (CWS_V_5_Fixed_7.14 rewrite)
   ============================================================
   IMPORTANT: this is CityWorkshop's own brand identity (own name, own
   logo, own colors) styled in the spirit of Swiggy's current visual
   language — not Swiggy's actual logo or copyrighted assets.

   FIX (7.14): the previous version of this file had ZERO body.role-
   customer scoping — its generic selectors (.card, input[type="text"],
   select, .muted, etc.) were bleeding into the admin/engineer/partner
   dashboards too, since the theme <link> loads on every page regardless
   of role. Every rule below is now scoped under body.role-customer,
   which fixes that bleed AND gives these rules higher specificity than
   the later role-agnostic layers (crystal-3d-upgrade.css, premium-
   saas.css) for the same elements, so this theme reliably wins for the
   customer role without needing to fight load order.

   Comprehensive pass covering the full customer journey: login, hero/
   welcome card, service category grid, search, booking form, every real
   booking-status pill, live tracking card, booking history, profile/
   avatar, support/warranty cards, empty states, toasts, and dark mode.
   Coordinates with (does not duplicate) swiggy-latest-customer.css's
   bottom nav and search-suggestion-chip behavior from CWS_V_5_Fixed_7.8.
   ============================================================ */

body.role-customer {
  --swiggy-orange: #FC8019;
  --swiggy-orange-dark: #E06C00;
  --swiggy-orange-light: #FFF4EB;
  --swiggy-green: #60B246;
  --swiggy-green-light: #E8F5E9;
  --swiggy-red: #E4483F;
  --swiggy-red-light: #FDEDEC;
  --swiggy-dark: #1C1C1C;
  --swiggy-gray: #686B78;
  --swiggy-light-gray: #F0F0F5;
  --swiggy-line: #EDEDED;
  --swiggy-white: #FFFFFF;
  --swiggy-card-radius: 16px;
  --swiggy-btn-radius: 12px;
  --swiggy-pill-radius: 999px;
  --cust-brand: #FC8019;
  --cust-brand-2: #FF9B43;
  --cust-brand-soft: #FFF4EB;
  --cust-green: #60B246;
  --cust-line: #EDEDED;
  --cust-text: #1C1C1C;
  --cust-muted: #686B78;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.role-customer { background: #F8F8FB !important; }

/* -------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------- */
body.role-customer h1,
body.role-customer h2,
body.role-customer h3 { color: var(--swiggy-dark) !important; font-weight: 700 !important; letter-spacing: -0.01em; }
body.role-customer .muted,
body.role-customer .swiggy-muted,
body.role-customer .footer-note,
body.role-customer .eyebrow { color: var(--swiggy-gray) !important; }
body.role-customer .eyebrow { font-weight: 600 !important; font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .06em; }

/* -------------------------------------------------------------------
   Login / auth card
   ------------------------------------------------------------------- */
body.role-customer .v910-login-card,
body.role-customer .antigravity-card,
body.role-customer .swiggy-hero-card,
body.role-customer .customer-welcome-card {
  background: var(--swiggy-white) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 24px rgba(28, 28, 28, 0.08) !important;
  border: 1px solid rgba(252, 128, 25, 0.12) !important;
}

/* -------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------- */
body.role-customer .btn:not(.secondary):not(.ghost),
body.role-customer .swiggy-cta,
body.role-customer button[type="submit"].btn,
body.role-customer .customer-category-tab.active {
  background: linear-gradient(135deg, var(--swiggy-orange), var(--swiggy-orange-dark)) !important;
  border-color: var(--swiggy-orange) !important;
  color: #fff !important;
  border-radius: var(--swiggy-btn-radius) !important;
  font-weight: 700 !important;
}
body.role-customer .btn:not(.secondary):not(.ghost):hover,
body.role-customer .swiggy-cta:hover {
  background: linear-gradient(135deg, var(--swiggy-orange-dark), #C45A00) !important;
  box-shadow: 0 6px 16px rgba(252, 128, 25, 0.35) !important;
}
body.role-customer .btn.secondary {
  background: #fff !important;
  border: 1.5px solid var(--swiggy-line) !important;
  color: var(--swiggy-dark) !important;
  border-radius: var(--swiggy-btn-radius) !important;
  font-weight: 700 !important;
}
body.role-customer .btn.secondary:hover { border-color: var(--swiggy-orange) !important; color: var(--swiggy-orange-dark) !important; }

/* -------------------------------------------------------------------
   Service category grid — Swiggy's category-tile pattern
   ------------------------------------------------------------------- */
body.role-customer .swiggy-service-tile,
body.role-customer .service-icon-card,
body.role-customer .customer-service-category-tabs .customer-category-tab {
  background: #fff !important;
  border-radius: 20px !important;
  border: 2px solid var(--swiggy-light-gray) !important;
  transition: all .22s ease !important;
}
body.role-customer .swiggy-service-tile:hover,
body.role-customer .service-icon-card:hover,
body.role-customer .customer-category-tab:hover {
  border-color: var(--swiggy-orange) !important;
  background: var(--swiggy-orange-light) !important;
  transform: translateY(-2px);
}
body.role-customer .service-icon-card.active {
  border-color: var(--swiggy-orange) !important;
  background: var(--swiggy-orange-light) !important;
  box-shadow: 0 4px 12px rgba(252,128,25,.18) !important;
}
body.role-customer .service-icon-card .service-icon { font-size: 26px; }
body.role-customer .service-icon-card strong { color: var(--swiggy-dark) !important; }
body.role-customer .service-icon-card em { color: var(--swiggy-gray) !important; font-style: normal !important; font-size: 11px !important; }

/* -------------------------------------------------------------------
   Location chip + search
   ------------------------------------------------------------------- */
body.role-customer .swiggy-location-chip {
  background: var(--swiggy-orange-light) !important;
  color: var(--swiggy-orange-dark) !important;
  border-radius: var(--swiggy-pill-radius) !important;
  font-weight: 700 !important;
}
body.role-customer .service-search-input {
  border-radius: var(--swiggy-pill-radius) !important;
  border: 1.5px solid var(--swiggy-line) !important;
  background: #fff !important;
}
body.role-customer .service-search-input:focus {
  border-color: var(--swiggy-orange) !important;
  box-shadow: 0 0 0 3px rgba(252,128,25,.14) !important;
}

/* -------------------------------------------------------------------
   Cards & sections generally
   ------------------------------------------------------------------- */
body.role-customer .card,
body.role-customer .customer-ops-card,
body.role-customer .customer-live-track-card,
body.role-customer .customer-compact-card,
body.role-customer .reg-pro-section,
body.role-customer .status-card,
body.role-customer .info-card {
  border-radius: var(--swiggy-card-radius) !important;
  border: 1px solid var(--swiggy-line) !important;
  box-shadow: 0 1px 2px rgba(28,20,10,.04), 0 6px 16px rgba(28,20,10,.05) !important;
}
body.role-customer .section-title h3 { color: var(--swiggy-dark) !important; font-weight: 700 !important; }

/* -------------------------------------------------------------------
   Inputs
   ------------------------------------------------------------------- */
body.role-customer input[type="text"],
body.role-customer input[type="tel"],
body.role-customer input[type="email"],
body.role-customer input[type="password"],
body.role-customer input[type="number"],
body.role-customer input[type="search"],
body.role-customer select,
body.role-customer textarea {
  border-radius: 12px !important;
  border: 1.5px solid #E0E0E0 !important;
  background: #fff !important;
}
body.role-customer input:focus,
body.role-customer select:focus,
body.role-customer textarea:focus {
  border-color: var(--swiggy-orange) !important;
  box-shadow: 0 0 0 3px rgba(252, 128, 25, 0.15) !important;
  outline: none !important;
}

/* -------------------------------------------------------------------
   Status pills — every real booking status this app uses
   ------------------------------------------------------------------- */
body.role-customer .pill {
  border-radius: var(--swiggy-pill-radius) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  padding: 4px 12px !important;
  letter-spacing: .01em;
}
body.role-customer .pill.status-booked,
body.role-customer .pill.status-pending,
body.role-customer .pill.status-waiting {
  background: var(--swiggy-orange-light) !important; color: var(--swiggy-orange-dark) !important;
}
body.role-customer .pill.status-accepted,
body.role-customer .pill.status-approved,
body.role-customer .pill.status-on_the_way,
body.role-customer .pill.status-live {
  background: #E7F0FF !important; color: #2A5FD9 !important;
}
body.role-customer .pill.status-working {
  background: var(--swiggy-orange-light) !important; color: var(--swiggy-orange-dark) !important;
}
body.role-customer .pill.status-completed {
  background: var(--swiggy-green-light) !important; color: #2E7D32 !important;
}
body.role-customer .pill.status-rejected,
body.role-customer .pill.status-stop {
  background: var(--swiggy-red-light) !important; color: var(--swiggy-red) !important;
}
body.role-customer .success-card,
body.role-customer .field-success,
body.role-customer .swiggy-green-badge {
  background: var(--swiggy-green-light) !important;
  color: var(--swiggy-green) !important;
  border-color: var(--swiggy-green) !important;
}

/* -------------------------------------------------------------------
   Live tracking card — Swiggy order-tracking-screen visual language
   ------------------------------------------------------------------- */
body.role-customer .customer-live-track-card { overflow: hidden; }
body.role-customer .customer-live-pill {
  background: var(--swiggy-orange) !important;
  color: #fff !important;
  border-radius: var(--swiggy-pill-radius) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
}
body.role-customer .live-track-metrics > div strong { color: var(--swiggy-orange-dark) !important; }

/* -------------------------------------------------------------------
   Booking history rows — Swiggy order-card list style
   ------------------------------------------------------------------- */
body.role-customer .customer-inline-item {
  border-radius: 14px !important;
  border: 1px solid var(--swiggy-line) !important;
  padding: 12px !important;
  margin-bottom: 8px;
  background: #fff !important;
}
body.role-customer .customer-inline-item:hover { border-color: rgba(252,128,25,.35) !important; }

/* -------------------------------------------------------------------
   Profile / avatar
   ------------------------------------------------------------------- */
body.role-customer .avatar,
body.role-customer .profile-avatar,
body.role-customer .swiggy-hero-card img[alt*="profile" i] {
  border: 2.5px solid var(--swiggy-orange-light) !important;
}

/* -------------------------------------------------------------------
   Warranty / parts cards
   ------------------------------------------------------------------- */
body.role-customer .cws-warranty-card {
  border-radius: 14px !important;
  border: 1px solid var(--swiggy-line) !important;
  background: #fff !important;
}
body.role-customer .cws-sla-pill.warn {
  background: var(--swiggy-orange-light) !important;
  color: var(--swiggy-orange-dark) !important;
  border-radius: var(--swiggy-pill-radius) !important;
}

/* -------------------------------------------------------------------
   Empty states
   ------------------------------------------------------------------- */
body.role-customer .muted:only-child { color: var(--swiggy-gray) !important; }

/* -------------------------------------------------------------------
   Toasts
   ------------------------------------------------------------------- */
body.role-customer .professional-notification {
  border-radius: 16px !important;
  border-left: 4px solid var(--swiggy-orange) !important;
}
body.role-customer .professional-notification.success { border-left-color: var(--swiggy-green) !important; }
body.role-customer .professional-notification.error { border-left-color: var(--swiggy-red) !important; }

/* -------------------------------------------------------------------
   Dark mode coordination (with premium-saas.css's html[data-mode=dark])
   ------------------------------------------------------------------- */
html[data-mode="dark"] body.role-customer { background: #0f0f11 !important; }
html[data-mode="dark"] body.role-customer .card,
html[data-mode="dark"] body.role-customer .customer-ops-card,
html[data-mode="dark"] body.role-customer .customer-inline-item,
html[data-mode="dark"] body.role-customer .cws-warranty-card,
html[data-mode="dark"] body.role-customer .swiggy-service-tile,
html[data-mode="dark"] body.role-customer .service-icon-card {
  background: #17171a !important;
  border-color: rgba(255,255,255,.08) !important;
}
html[data-mode="dark"] body.role-customer h1,
html[data-mode="dark"] body.role-customer h2,
html[data-mode="dark"] body.role-customer h3,
html[data-mode="dark"] body.role-customer .section-title h3 { color: #f4f4f5 !important; }
html[data-mode="dark"] body.role-customer input,
html[data-mode="dark"] body.role-customer select,
html[data-mode="dark"] body.role-customer textarea {
  background: #151517 !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f4f4f5 !important;
}

/* -------------------------------------------------------------------
   Mobile polish
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.role-customer .v910-login-card,
  body.role-customer .swiggy-hero-card { border-radius: 18px !important; }
  body.role-customer .btn:not(.secondary):not(.ghost),
  body.role-customer .swiggy-cta { border-radius: 10px !important; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.role-customer * { transition: none !important; animation: none !important; }
}