/* =========================================================================
   Taaboor — Customer Premium Mobile Portal
   Unified design system for: branch, ticket, join, booking, feedback, errors
   Dark navy/teal premium app shell with cyan/purple accents.
   ========================================================================= */

:root {
  /* Background */
  --cx-bg-base: #020617;
  --cx-bg-mid:  #061826;
  --cx-bg-deep: #031018;
  --cx-app-grad: linear-gradient(180deg, #071827 0%, #082235 60%, #061826 100%);
  --cx-page-grad:
    radial-gradient(circle at 50% -10%, rgba(34, 211, 238, 0.22), transparent 40%),
    radial-gradient(circle at 90% 8%, rgba(124, 58, 237, 0.18), transparent 45%),
    linear-gradient(180deg, #020617 0%, #061826 45%, #031018 100%);

  /* Brand colors */
  --cx-cyan:        #22d3ee;
  --cx-cyan-soft:   rgba(34, 211, 238, 0.18);
  --cx-cyan-line:   rgba(34, 211, 238, 0.35);
  --cx-purple:      #7c3aed;
  --cx-purple-soft: rgba(124, 58, 237, 0.22);

  /* Status */
  --cx-success:     #10b981;
  --cx-success-soft:rgba(16, 185, 129, 0.14);
  --cx-warning:     #f59e0b;
  --cx-warning-soft:rgba(245, 158, 11, 0.14);
  --cx-danger:      #ef4444;
  --cx-danger-soft: rgba(239, 68, 68, 0.14);

  /* Text */
  --cx-text:        #f8fafc;
  --cx-text-2:      #cbd5e1;
  --cx-text-3:      #94a3b8;
  --cx-text-dim:    #64748b;

  /* Glass surfaces */
  --cx-glass:       rgba(255, 255, 255, 0.06);
  --cx-glass-2:     rgba(255, 255, 255, 0.09);
  --cx-glass-3:     rgba(255, 255, 255, 0.12);
  --cx-border:      rgba(255, 255, 255, 0.10);
  --cx-border-2:    rgba(255, 255, 255, 0.16);
  --cx-inner-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Radii */
  --cx-r-sm: 12px;
  --cx-r-md: 16px;
  --cx-r-lg: 22px;
  --cx-r-xl: 28px;

  /* Shadows */
  --cx-shadow-card:   0 18px 40px rgba(0, 0, 0, 0.35);
  --cx-shadow-hover:  0 22px 50px rgba(0, 0, 0, 0.45);
  --cx-shadow-cta:    0 12px 26px rgba(124, 58, 237, 0.40), 0 6px 14px rgba(34, 211, 238, 0.20);

  /* Gradients */
  --cx-cta-grad: linear-gradient(135deg, #7c3aed 0%, #22d3ee 100%);
  --cx-cta-grad-hover: linear-gradient(135deg, #6d28d9 0%, #0ea5e9 100%);
  --cx-hero-grad: linear-gradient(180deg, rgba(34, 211, 238, 0.10) 0%, rgba(124, 58, 237, 0.05) 100%);

  --cx-font: 'Inter', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =========================================================================
   Base reset & shell
   ========================================================================= */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
}

body.premium-customer-portal,
body.customer-body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--cx-bg-base);
  background-image: var(--cx-page-grad);
  background-attachment: fixed;
  color: var(--cx-text);
  font-family: var(--cx-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Hide the legacy public brand strip on customer pages — single logo only */
body.customer-body > .public-brand-strip,
body.premium-customer-portal > .public-brand-strip { display: none !important; }

/* App shell — mobile fullscreen, desktop centered */
.portal-container,
.customer-app-shell {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  padding: 12px 14px 20px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

/* Prevent duplicate nested borders/backgrounds on desktop and padding doubling on mobile */
.customer-app-shell .portal-container {
  max-width: 100% !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Lucide icons */
.lucide,
[class^="lucide-"],
[class*=" lucide-"] {
  display: inline-block;
  font-family: 'lucide' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

[class^="lucide-"]::before,
[class*=" lucide-"]::before {
  font-family: 'lucide' !important;
}

/* Map legacy SVG class names to the corresponding Webfont content glyphs */
.lucide-ticket::before { content: "\e205"; }
.lucide-user::before { content: "\e192"; }
.lucide-chevron-down::before { content: "\e077"; }
.lucide-chevron-up::before { content: "\e07a"; }
.lucide-calendar::before { content: "\e070"; }
.lucide-shield-check::before { content: "\e1f6"; }
.lucide-plus-circle::before { content: "\e13e"; }
.lucide-clock::before { content: "\e083"; }
.lucide-megaphone::before { content: "\e22c"; }
.lucide-user-check::before { content: "\e193"; }
.lucide-check-circle::before { content: "\e075"; }
.lucide-x-circle::before { content: "\e1a6"; }
.lucide-alert-triangle::before { content: "\e03e"; }
.lucide-arrow-up-right::before { content: "\e058"; }
.lucide-share-2::before { content: "\e158"; }
.lucide-refresh-cw::before { content: "\e147"; }
.lucide-map-pin::before { content: "\e10b"; }
.lucide-link::before { content: "\e0ff"; }
.lucide-star::before { content: "\e16b"; }
.lucide-copy::before { content: "\e098"; }
.lucide-arrow-left::before { content: "\e050"; }

a { color: inherit; }
button { font-family: inherit; }

[hidden] { display: none !important; }

/* =========================================================================
   Header — single logo + branch name + open/closed badge
   ========================================================================= */

.portal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: start;
  gap: 16px;
  padding: 8px 4px 4px;
  width: 100%;
}

.portal-header__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: 2px;
}

.portal-header .brand-wrapper { gap: 0 !important; }
.portal-header .brand-logo {
  max-height: 44px !important;
  height: 44px !important;
  width: auto !important;
  filter: drop-shadow(0 6px 14px rgba(34, 211, 238, 0.25));
}
.portal-header .brand-text { display: none !important; }

.portal-header .branch-name,
.cx-branch-name {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--cx-text);
}

.cx-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--cx-text-3);
  letter-spacing: 0.4px;
}

/* Status badge — open/closed/busy */
.status-badge,
.cx-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  background: var(--cx-glass-2);
  color: var(--cx-text-2);
}
.status-badge::before,
.cx-status-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.status-badge.open,
.cx-status-pill.is-open {
  background: var(--cx-success-soft);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.30);
}
.status-badge.closed,
.cx-status-pill.is-closed {
  background: var(--cx-danger-soft);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.30);
}
.status-badge.busy,
.cx-status-pill.is-busy {
  background: var(--cx-warning-soft);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.30);
}

/* =========================================================================
   Glass card
   ========================================================================= */

.glass-card,
.cx-card {
  background: var(--cx-glass);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-lg);
  padding: 22px 18px;
  box-shadow: var(--cx-shadow-card), var(--cx-inner-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.cx-card--accent {
  background: var(--cx-hero-grad), var(--cx-glass);
  border-color: var(--cx-cyan-line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.40), 0 0 0 1px var(--cx-cyan-line) inset;
}

/* =========================================================================
   Hero (Take a number) card
   ========================================================================= */

.hero-card {
  text-align: center;
  padding: 28px 18px 22px;
  position: relative;
}

.cx-hero-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 16px;
  background: var(--cx-glass-2);
  border: 1px solid var(--cx-cyan-line);
  color: var(--cx-cyan);
  display: grid;
  place-items: center;
}
.cx-hero-icon i { font-size: 26px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; }

.hero-title,
.cx-hero-title {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  color: var(--cx-cyan);
  letter-spacing: -0.5px;
}

.hero-subtitle,
.cx-hero-sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--cx-text-2);
  line-height: 1.55;
}

/* =========================================================================
   Service cards — name + description + time block + status badge
   ========================================================================= */

.service-grid,
.cx-service-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}

.service-card,
.cx-service-card {
  position: relative;
  display: block;
  padding: 16px;
  border-radius: var(--cx-r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cx-border);
  color: var(--cx-text);
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.service-card:hover,
.cx-service-card:hover {
  border-color: var(--cx-border-2);
  background: rgba(255, 255, 255, 0.06);
}
.service-card.selected,
.cx-service-card.is-selected {
  border-color: var(--cx-cyan-line);
  background: rgba(34, 211, 238, 0.06);
  box-shadow: 0 0 0 1px var(--cx-cyan-line) inset, 0 10px 24px rgba(34, 211, 238, 0.12);
}
.service-card.is-disabled,
.cx-service-card.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cx-service-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: stretch;
}

.cx-service-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.service-name,
.cx-service-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--cx-text);
  margin: 0;
  line-height: 1.25;
}

.cx-service-desc {
  margin: 0;
  font-size: 13px;
  color: var(--cx-text-3);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cx-service-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.cx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--cx-glass-2);
  border: 1px solid var(--cx-border);
  color: var(--cx-text-2);
}
.cx-pill i { width: 14px; height: 14px; }
.cx-pill--available { background: var(--cx-success-soft); border-color: rgba(16, 185, 129, 0.30); color: #34d399; }
.cx-pill--busy      { background: var(--cx-warning-soft); border-color: rgba(245, 158, 11, 0.30); color: #fde68a; }
.cx-pill--full      { background: var(--cx-danger-soft);  border-color: rgba(239, 68, 68, 0.30);  color: #f87171; }
.cx-pill--booking   { background: var(--cx-purple-soft);  border-color: rgba(124, 58, 237, 0.35); color: #c4b5fd; }

/* Time block (right side of service card) */
.cx-time-block {
  min-width: 96px;
  padding: 12px;
  border-radius: var(--cx-r-md);
  background: rgba(2, 8, 23, 0.55);
  border: 1px solid var(--cx-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.cx-time-block i { color: var(--cx-cyan); width: 16px; height: 16px; }
.cx-time-block__value {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: var(--cx-text);
  letter-spacing: -0.5px;
}
.cx-time-block__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cx-text-3);
}
.cx-time-block__row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cx-text-3);
  padding-top: 6px;
  border-top: 1px solid var(--cx-border);
  width: 100%;
  justify-content: center;
}
.cx-time-block__row i { color: var(--cx-text-3); width: 12px; height: 12px; }

/* =========================================================================
   Optional details accordion
   ========================================================================= */

.cx-accordion {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--cx-border-2);
  border-radius: var(--cx-r-lg);
  overflow: hidden;
}

.cx-accordion__toggle {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--cx-text);
  cursor: pointer;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  text-align: start;
}
.cx-accordion__icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--cx-glass-2);
  border: 1px solid var(--cx-border);
  color: var(--cx-cyan);
  display: grid;
  place-items: center;
}
.cx-accordion__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-accordion__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cx-text);
}
.cx-accordion__sub {
  font-size: 12px;
  color: var(--cx-text-3);
}
.cx-accordion__chevron {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--cx-text-3);
  transition: transform .25s ease;
}
.cx-accordion__toggle[aria-expanded="true"] .cx-accordion__chevron { transform: rotate(180deg); }
.cx-accordion__body {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* =========================================================================
   Form fields
   ========================================================================= */

.input-group,
.cx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.input-group label,
.cx-field > label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cx-text-3);
  letter-spacing: 0.2px;
}
.input-field,
.cx-input,
.cx-field input[type="text"],
.cx-field input[type="tel"],
.cx-field input[type="email"],
.cx-field input[type="date"],
.cx-field select,
.cx-field textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--cx-r-md);
  background: rgba(3, 7, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--cx-text);
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  font-family: inherit;
}
.input-field::placeholder,
.cx-input::placeholder,
.cx-field input::placeholder,
.cx-field textarea::placeholder { color: var(--cx-text-3); }

.input-field:focus,
.cx-input:focus,
.cx-field input:focus,
.cx-field select:focus,
.cx-field textarea:focus {
  border-color: var(--cx-cyan);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.35);
  background: rgba(3, 7, 18, 0.85);
}

.cx-field--error .cx-input,
.cx-field--error input,
.cx-field--error select { border-color: rgba(239, 68, 68, 0.5); }
.cx-field__error {
  margin: 0;
  font-size: 12px;
  color: #f87171;
}

.checkbox-group,
.cx-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--cx-text-2);
  cursor: pointer;
  padding: 4px 0;
}
.checkbox-field,
.cx-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--cx-cyan);
  cursor: pointer;
  flex: none;
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn-primary,
.cx-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 22px;
  border-radius: 18px;
  border: 0;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  background: var(--cx-cta-grad);
  cursor: pointer;
  box-shadow: var(--cx-shadow-cta);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  text-decoration: none;
  letter-spacing: -0.2px;
}
.btn-primary:hover,
.cx-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-primary:active,
.cx-btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-primary:disabled,
.cx-btn-primary:disabled {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
  box-shadow: none;
  cursor: not-allowed;
  color: #94a3b8;
}
.btn-primary i,
.cx-btn-primary i { width: 20px; height: 20px; }

.btn-secondary,
.cx-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cx-border-2);
  color: var(--cx-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  text-decoration: none;
}
.btn-secondary:hover,
.cx-btn-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); }
.btn-secondary:active,
.cx-btn-secondary:active { transform: scale(0.98); }

.cx-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cx-border-2);
  color: var(--cx-text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.cx-btn-outline:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--cx-cyan-line); color: var(--cx-cyan); }

.cx-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  color: var(--cx-text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.cx-btn-ghost:hover { color: var(--cx-cyan); }

.cx-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.cx-btn-danger:hover { background: rgba(239, 68, 68, 0.14); }

/* =========================================================================
   Secondary booking card (need an appointment?)
   ========================================================================= */

.cx-booking-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.28);
}
.cx-booking-card__text { display: flex; flex-direction: column; gap: 4px; }
.cx-booking-card__title { margin: 0; font-size: 15px; font-weight: 800; color: var(--cx-text); }
.cx-booking-card__sub   { margin: 0; font-size: 12px; color: var(--cx-text-3); line-height: 1.5; }
.cx-booking-card__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--cx-purple-soft);
  border: 1px solid rgba(124, 58, 237, 0.4);
  color: #c4b5fd;
  display: grid; place-items: center;
}
.cx-booking-card__icon i { font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; }
.cx-booking-card__action { grid-column: 1 / -1; display: flex; justify-content: center; padding-top: 4px; }

/* =========================================================================
   Lost-link / info card
   ========================================================================= */

.cx-info-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-lg);
}
.cx-info-card__icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--cx-glass-2);
  border: 1px solid var(--cx-border);
  color: var(--cx-cyan);
  display: grid; place-items: center;
  flex: none;
}
.cx-info-card__icon i { font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; }
.cx-info-card__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--cx-text); }
.cx-info-card__body  { margin: 4px 0 0; font-size: 12px; color: var(--cx-text-3); line-height: 1.6; }

/* =========================================================================
   Ticket tracking — big number, status pill, timeline, action grid
   ========================================================================= */

.ticket-card,
.cx-ticket-card {
  text-align: center;
  padding: 28px 20px 32px;
  background: var(--cx-hero-grad), var(--cx-glass);
  border: 1px solid var(--cx-cyan-line);
  position: relative;
  overflow: hidden;
}
.ticket-card::before,
.cx-ticket-card::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 160px;
  background: radial-gradient(circle, var(--cx-cyan) 0%, transparent 60%);
  opacity: 0.18;
  filter: blur(40px);
  z-index: 0;
}
.ticket-card > *,
.cx-ticket-card > * { position: relative; z-index: 1; }

.ticket-label,
.cx-ticket-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cx-cyan);
}
.ticket-number,
.cx-ticket-number {
  margin: 8px 0 0;
  font-size: 76px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -3px;
  color: var(--cx-text);
  text-shadow: 0 6px 24px rgba(34, 211, 238, 0.25);
  word-break: break-all;
}
.ticket-service,
.cx-ticket-service {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--cx-text);
}
.cx-ticket-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--cx-text-3);
  font-weight: 600;
}

.ticket-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-top: 14px;
  border: 1px solid transparent;
}
.status-waiting     { background: rgba(34, 211, 238, 0.14);  color: #67e8f9;  border-color: rgba(34, 211, 238, 0.3); }
.status-called      { background: rgba(245, 158, 11, 0.16);  color: #fde68a;  border-color: rgba(245, 158, 11, 0.35); animation: cx-pulse 2s ease-in-out infinite; }
.status-serving     { background: rgba(124, 58, 237, 0.18);  color: #c4b5fd;  border-color: rgba(124, 58, 237, 0.38); }
.status-completed   { background: rgba(16, 185, 129, 0.16);  color: #34d399;  border-color: rgba(16, 185, 129, 0.35); }
.status-cancelled,
.status-no_show,
.status-noshow      { background: rgba(239, 68, 68, 0.14);   color: #fca5a5;  border-color: rgba(239, 68, 68, 0.30); }
.status-deferred,
.status-skipped     { background: rgba(245, 158, 11, 0.12);  color: #fde68a;  border-color: rgba(245, 158, 11, 0.28); }
.status-scheduled,
.status-confirmed   { background: rgba(34, 211, 238, 0.14);  color: #67e8f9;  border-color: rgba(34, 211, 238, 0.3); }

@keyframes cx-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  50%      { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
}

/* Sync indicator */
.cx-sync,
.ticket-sync-status,
#ticket-sync-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95) !important;
}
.ticket-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cx-cyan);
  box-shadow: 0 0 10px var(--cx-cyan);
  transition: all .25s ease;
}
.ticket-sync-dot.is-pulse,
.ticket-sync-dot.is-loading { animation: cx-sync-pulse 1.4s ease-in-out infinite; }
.ticket-sync-dot.is-live    { background: var(--cx-success); box-shadow: 0 0 10px var(--cx-success); }
.ticket-sync-dot.is-error,
.ticket-sync-dot.is-retry   { background: var(--cx-danger);  box-shadow: 0 0 10px var(--cx-danger); animation: cx-sync-pulse 1s ease-in-out infinite; }
@keyframes cx-sync-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(0.7); opacity: 0.45; }
}

/* Proximity tile pair */
.proximity-card,
.cx-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}
.proximity-item,
.cx-stat {
  padding: 16px 12px;
  background: rgba(2, 8, 23, 0.55);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-md);
  text-align: center;
}
.prox-value,
.cx-stat__value,
#people-ahead,
#estimated-wait {
  display: block;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.prox-label,
.cx-stat__label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

@keyframes cx-dot-pulse {
  0% { box-shadow: 0 0 8px rgba(34, 211, 238, 0.35); }
  50% { box-shadow: 0 0 20px rgba(34, 211, 238, 0.65), 0 0 0 4px rgba(34, 211, 238, 0.20); }
  100% { box-shadow: 0 0 8px rgba(34, 211, 238, 0.35); }
}

/* Timeline */
.timeline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  padding: 0 4px;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 14px; left: 16px; right: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.timeline-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #061826;
  border: 2px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  color: var(--cx-text-dim);
  transition: all .25s ease;
}
.step-dot i { font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; }
.timeline-step.active .step-dot {
  background: var(--cx-cyan);
  border-color: var(--cx-cyan);
  color: #042027;
  animation: cx-dot-pulse 2s infinite ease-in-out;
}
.timeline-step.completed .step-dot {
  background: var(--cx-success);
  border-color: var(--cx-success);
  color: #042027;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}
.step-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--cx-text-dim);
  text-align: center;
}
.timeline-step.active .step-label { color: var(--cx-cyan); text-shadow: 0 0 8px rgba(34, 211, 238, 0.2); }
.timeline-step.completed .step-label { color: #34d399; }

/* Action grid (2x2 or 2xN buttons) */
.action-grid,
.cx-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.action-btn,
.cx-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 84px;
  padding: 14px 10px;
  border-radius: var(--cx-r-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cx-border);
  color: var(--cx-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.action-btn i,
.cx-action-btn i { width: 20px; height: 20px; color: var(--cx-cyan); }
.action-btn:hover,
.cx-action-btn:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--cx-border-2); }
.action-btn:active,
.cx-action-btn:active { transform: scale(0.97); }

/* WhatsApp inline card */
.whatsapp-card,
.cx-whatsapp-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border-inline-start: 3px solid #25d366;
}
.whatsapp-card h4, .cx-whatsapp-card h4 { margin: 0 0 4px; font-size: 14px; color: var(--cx-text); font-weight: 800; }
.whatsapp-card p,  .cx-whatsapp-card p  { margin: 0; font-size: 12px; color: var(--cx-text-3); line-height: 1.5; }
.wa-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.14);
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, 0.30);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

/* =========================================================================
   Empty / error states
   ========================================================================= */

.cx-state-card {
  text-align: center;
  padding: 36px 22px;
}
.cx-state-icon {
  width: 72px; height: 72px;
  margin: 0 auto 14px;
  border-radius: 22px;
  background: var(--cx-glass-2);
  border: 1px solid var(--cx-border);
  color: var(--cx-cyan);
  display: grid; place-items: center;
}
.cx-state-icon i { font-size: 32px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; }
.cx-state-card--warning .cx-state-icon { color: #fde68a; border-color: rgba(245, 158, 11, 0.35); background: var(--cx-warning-soft); }
.cx-state-card--danger  .cx-state-icon { color: #f87171; border-color: rgba(239, 68, 68, 0.35);  background: var(--cx-danger-soft); }
.cx-state-card--success .cx-state-icon { color: #34d399; border-color: rgba(16, 185, 129, 0.35); background: var(--cx-success-soft); }
.cx-state-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--cx-text); }
.cx-state-body  { margin: 8px 0 0; font-size: 14px; color: var(--cx-text-2); line-height: 1.6; }
.cx-state-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* Inline alert (errors) */
.cx-alert {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--cx-r-md);
  border: 1px solid;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.cx-alert i { flex: none; }
.cx-alert--error   { background: var(--cx-danger-soft);  border-color: rgba(239, 68, 68, 0.35); color: #fca5a5; }
.cx-alert--warning { background: var(--cx-warning-soft); border-color: rgba(245, 158, 11, 0.35); color: #fde68a; }
.cx-alert--info    { background: var(--cx-cyan-soft);    border-color: var(--cx-cyan-line);     color: #a5f3fc; }
.cx-alert--success { background: var(--cx-success-soft); border-color: rgba(16, 185, 129, 0.35); color: #6ee7b7; }

/* =========================================================================
   Booking flow specifics — slot chips, day picker
   ========================================================================= */

.cx-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.cx-slot {
  padding: 10px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cx-border);
  color: var(--cx-text);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.cx-slot:hover { border-color: var(--cx-border-2); }
.cx-slot.is-selected {
  background: rgba(34, 211, 238, 0.15);
  border-color: var(--cx-cyan-line);
  color: var(--cx-cyan);
  box-shadow: 0 0 0 1px var(--cx-cyan-line) inset;
}
.cx-slot.is-disabled { opacity: 0.4; cursor: not-allowed; }

.cx-slots-empty {
  padding: 14px;
  border-radius: var(--cx-r-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--cx-border-2);
  color: var(--cx-text-3);
  font-size: 13px;
  text-align: center;
}

/* =========================================================================
   Footer note
   ========================================================================= */

.cx-footer {
  text-align: center;
  padding: 14px 6px 6px;
  font-size: 12px;
  color: var(--cx-text-dim);
}
.cx-footer i { width: 14px; height: 14px; margin-inline-end: 4px; vertical-align: -2px; }

/* =========================================================================
   Animations
   ========================================================================= */

@keyframes cx-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: cx-fade-up .45s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* =========================================================================
   Desktop centered container — subtle, NOT a phone frame
   ========================================================================= */

@media (min-width: 520px) {
  body.premium-customer-portal,
  body.customer-body {
    padding: 32px 16px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .portal-container,
  .customer-app-shell {
    max-width: 460px;
    min-height: calc(100vh - 64px);
    padding: 26px 22px 36px;
    background: var(--cx-app-grad);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-r-xl);
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}

@media (min-width: 900px) {
  body.premium-customer-portal,
  body.customer-body { padding: 48px 24px; }
}

/* =========================================================================
   Compatibility with legacy `.page-shell` / `.card` (booking, feedback, errors)
   Rendered inside `layouts/public.php`
   ========================================================================= */

.page-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 18px 32px;
  max-width: 460px;
  margin: 0 auto;
}
.page-shell--wide { max-width: 720px; }

.page-shell .card,
.page-shell > .card {
  background: var(--cx-glass);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-lg);
  padding: 22px 18px;
  box-shadow: var(--cx-shadow-card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--cx-text);
}
.page-shell .stack-md { display: flex; flex-direction: column; gap: 14px; }

.public-flow-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--cx-text-3);
  margin-bottom: 6px;
}
.public-flow-nav .link-back {
  color: var(--cx-text-2);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cx-border);
}
.public-flow-nav .link-back:hover { color: var(--cx-cyan); border-color: var(--cx-cyan-line); }
.public-flow-nav .nav-sep { color: var(--cx-text-dim); }

.page-shell .field-hint  { color: var(--cx-text-3); font-size: 13px; margin: 0; }
.page-shell .field-error { color: #fca5a5; font-size: 12px; margin: 4px 0 0; }
.page-shell .text-muted  { color: var(--cx-text-3); }

.page-shell .form-row,
.form-stack .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cx-text-3);
}
.page-shell .form-row input,
.page-shell .form-row select,
.page-shell .form-row textarea,
.form-stack .form-row input,
.form-stack .form-row select,
.form-stack .form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--cx-r-md);
  background: rgba(2, 8, 23, 0.55);
  border: 1px solid var(--cx-border);
  color: var(--cx-text);
  font-size: 15px;
  font-weight: 500;
  outline: none;
  font-family: inherit;
}
.page-shell .form-row input:focus,
.page-shell .form-row select:focus,
.page-shell .form-row textarea:focus,
.form-stack .form-row input:focus,
.form-stack .form-row select:focus,
.form-stack .form-row textarea:focus {
  border-color: var(--cx-cyan-line);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
}

.page-shell .checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: var(--cx-text-2);
  font-size: 14px;
  font-weight: 500;
}
.page-shell .checkbox-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--cx-cyan); }

.page-shell .btn,
.page-shell .btn-primary,
.page-shell .btn-secondary,
.page-shell .btn-ghost,
.page-shell .btn-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, filter .15s ease, border-color .15s ease;
  border: 1px solid transparent;
}
.page-shell .btn-primary {
  background: var(--cx-cta-grad);
  color: #fff;
  border: 0;
  min-height: 54px;
  border-radius: 16px;
  font-size: 16px;
  box-shadow: var(--cx-shadow-cta);
}
.page-shell .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.page-shell .btn-large { min-height: 56px; font-size: 16px; }
.page-shell .btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--cx-border-2);
  color: var(--cx-text);
}
.page-shell .btn-secondary:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--cx-cyan-line); color: var(--cx-cyan); }
.page-shell .btn-ghost {
  background: transparent;
  color: var(--cx-text-2);
}
.page-shell .btn-ghost:hover { color: var(--cx-cyan); }

.cards-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.template-card,
.service-pick-card {
  display: block;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-lg);
  color: var(--cx-text);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.template-card:hover,
.service-pick-card:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--cx-cyan-line); transform: translateY(-1px); }
.service-card-title { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--cx-text); }
.service-card-cta   { margin: 0; font-size: 13px; color: var(--cx-text-3); }

.panel-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-md);
  padding: 16px;
}

.action-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.action-bar--end { align-items: flex-end; }

/* Page header (used by booking/feedback) */
.page-header {
  text-align: center;
  padding: 8px 0 4px;
}
.page-header h1, .page-header__title {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 900;
  color: var(--cx-text);
  letter-spacing: -0.3px;
}
.page-header__eyebrow,
.page-header .eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--cx-cyan);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.page-header__subtitle,
.page-header p { margin: 6px 0 0; font-size: 14px; color: var(--cx-text-3); line-height: 1.5; }

/* Inline alerts inside page-shell */
.page-shell .alert {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--cx-r-md);
  border: 1px solid;
  font-size: 13px;
  line-height: 1.5;
}
.alert--info     { background: var(--cx-cyan-soft);    border-color: var(--cx-cyan-line);      color: #a5f3fc; }
.alert--warning  { background: var(--cx-warning-soft); border-color: rgba(245, 158, 11, 0.35);  color: #fde68a; }
.alert--error    { background: var(--cx-danger-soft);  border-color: rgba(239, 68, 68, 0.35);   color: #fca5a5; }
.alert--success  { background: var(--cx-success-soft); border-color: rgba(16, 185, 129, 0.35);  color: #6ee7b7; }

/* Feedback stars */
.feedback-stars { display: flex; justify-content: center; gap: 6px; }
.feedback-stars .star {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 34px;
  line-height: 1;
  color: #475569;
  transition: color .15s ease, transform .15s ease;
}
.feedback-stars .star:hover { transform: scale(1.15); }
.feedback-stars .star.is-active,
.feedback-stars .star[data-active="true"] { color: #fbbf24; text-shadow: 0 0 12px rgba(251, 191, 36, 0.4); }

/* Queue prompt alert (busy / capacity) */
.customer-queue-alert {
  padding: 14px 16px;
  border-radius: var(--cx-r-md);
  border: 1px solid;
  margin-top: 6px;
}
.customer-queue-alert__line1 { margin: 0; font-size: 14px; font-weight: 700; color: var(--cx-text); }
.customer-queue-alert__line2 { margin: 6px 0 0; font-size: 13px; color: var(--cx-text-2); line-height: 1.55; }
.customer-queue-alert__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.customer-queue-alert--available { background: var(--cx-success-soft); border-color: rgba(16, 185, 129, 0.30); }
.customer-queue-alert--busy      { background: var(--cx-warning-soft); border-color: rgba(245, 158, 11, 0.32); }
.customer-queue-alert--capacity_limited,
.customer-queue-alert--capacity_exceeded { background: var(--cx-danger-soft); border-color: rgba(239, 68, 68, 0.32); }
.customer-queue-alert--closed    { background: rgba(2, 8, 23, 0.45);   border-color: var(--cx-border-2); }

/* Premium Toast Notification */
.cx-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(3, 7, 18, 0.95);
  border: 1px solid rgba(34, 211, 238, 0.4);
  color: #fff;
  padding: 12px 24px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(34, 211, 238, 0.2);
  z-index: 9999;
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease;
  pointer-events: none;
}
.cx-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Spinner for refresh */
@keyframes cx-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.is-spinning {
  animation: cx-spin 0.8s linear infinite !important;
}