/* css/electric-service.css
 * Aaral — Electric Service Detail Page
 * Plain CSS, no frameworks. All colours via CSS custom properties.
 * ----------------------------------------------------------------- */

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  /* Palette */
  --yellow:       #F5C518;
  --yellow-light: #FFF8D6;
  --navy:         #0D1B2A;
  --navy-mid:     #1C3047;
  --text:         #1A1A2E;
  --text-muted:   #7B8898;
  --bg:           #F6F7FB;
  --surface:      #FFFFFF;
  --border:       #E4E8EF;

  /* Combo accent */
  --combo-bg:     #FFF3CD;
  --combo-text:   #7A5500;
  --combo-border: #F5C518;

  /* Radius */
  --r-pill: 999px;
  --r-card: 14px;
  --r-sm:    8px;

  /* Typography */
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  0.25s;

  /* Sticky footer — locked height so it never scales */
  --footer-h:       66px;
  --footer-item-h:  52px;
  --footer-font:    10px;
  --footer-icon:    20px;
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
}

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

button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

button:active { transform: scale(0.97); }

svg { display: block; flex-shrink: 0; }

/* ── Floating Back / Share Buttons ────────────────────────────── */
.floating-btn {
  position: fixed;
  top: 16px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(210, 210, 210, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  color: #333;
  z-index: 900;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  -webkit-tap-highlight-color: transparent;
}

.floating-btn:active {
  background: rgba(180, 180, 180, 0.95);
  transform: scale(0.95);
}

.floating-btn--left  { left: 14px; }
.floating-btn--right { right: 14px; }

/* ── Page Title Box ────────────────────────────────────────── */
.page-title-box {
  margin: 70px 16px 0;
  background: var(--surface);
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  padding: 14px 16px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(13,27,42,.06);
}

.page-title-static {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}

/* ── Main ─────────────────────────────────────────────────────── */
.main-content {
  padding-top: 0;
  padding-bottom: calc(var(--footer-h) + 60px);
  min-height: 100dvh;
}

/* ── Service Grid (replaces chip row) ────────────────────────── */
#chip-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 12px 16px 10px;
  overflow: visible;
}

.service-tile {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(13,27,42,.18);
}

.service-tile:active { transform: scale(0.97); }

.service-tile-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.service-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13,27,42,0.72) 0%,
    rgba(13,27,42,0.18) 55%,
    transparent 100%
  );
}

.service-tile-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 10px 10px 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .01em;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ── Content Section ──────────────────────────────────────────── */
#content-section {
  padding: 4px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Expandable Card ──────────────────────────────────────────── */
.exp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: 0 1px 4px rgba(13,27,42,.06);
  overflow: hidden;
}

.exp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.exp-card-header:active { background: var(--bg); }

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.chevron-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.exp-card.open .chevron-btn { transform: rotate(180deg); }

/* Collapsible body — max-height increased to fit multi-table pricing */
.exp-card-body {
  overflow: hidden;
  max-height: 90px;
  transition: max-height 0.38s var(--ease);
  padding: 0 16px;
}

.exp-card.open .exp-card-body {
  max-height: 3600px; /* accommodates full pricing section with 3 tables */
}

.exp-card-inner {
  padding-bottom: 16px;
}

/* ── Short Description ────────────────────────────────────────── */
#desc-card .exp-card-inner p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.desc-service-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 14px;
  margin-bottom: 4px;
}

.desc-service-label:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════
   PRICING — new multi-table layout
═══════════════════════════════════════════════════════════════ */

.pricing-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Initial Visit Charge notice ─────────────────────────────── */
.pricing-visit-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--yellow-light);
  border: 1.5px solid var(--yellow);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  margin-bottom: 18px;
}

.pricing-visit-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-visit-body {
  flex: 1;
  min-width: 0;
}

.pricing-visit-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.pricing-visit-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  background: var(--yellow);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.pricing-visit-desc {
  font-size: 12px;
  color: #5A4000;
  line-height: 1.55;
}

/* ── Per-service section ─────────────────────────────────────── */
.pricing-service-section {
  margin-bottom: 0;
}

.pricing-service-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .02em;
  margin-bottom: 8px;
  padding: 0 1px;
}

.pricing-service-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  border: 1.5px solid rgba(13,27,42,.15);
  flex-shrink: 0;
}

/* ── Table wrapper — allows horizontal scroll on very narrow screens */
.pricing-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  margin-bottom: 0;
}

/* ── Pricing table ───────────────────────────────────────────── */
.pricing-table {
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  table-layout: fixed;
}

/* thead */
.pricing-table thead tr {
  background: var(--navy);
}

.pricing-table th {
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  text-align: left;
  white-space: nowrap;
}

/* Service column: wider */
.pricing-table th:first-child,
.pricing-table td:first-child {
  width: 44%;
}

/* Regular price */
.pricing-table th:nth-child(2),
.pricing-table td:nth-child(2) {
  width: 28%;
}

/* Combo price */
.pricing-table th:nth-child(3),
.pricing-table td:nth-child(3) {
  width: 28%;
}

/* Combo column header — highlighted */
.pricing-table th.th-combo {
  color: var(--yellow);
  display: flex;          /* inline flex won't work on th; use display:table-cell override */
}

/* th is table-cell by default; flex on th is not reliable cross-browser.
   Use a flex wrapper inside the th instead. */
.pricing-table th.th-combo {
  display: table-cell; /* reset */
}

.pricing-table .th-combo svg,
.pricing-table .th-combo span {
  display: inline;
  vertical-align: middle;
}

.pricing-table .th-combo svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  margin-top: -1px;
}

/* tbody rows */
.pricing-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.pricing-table tbody tr:last-child {
  border-bottom: none;
}

.pricing-table tbody tr:nth-child(even) {
  background: var(--bg);
}

.pricing-table td {
  padding: 9px 10px;
  font-size: 13px;
  vertical-align: middle;
}

/* Column: service name */
.td-service {
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}

/* Column: regular price */
.td-regular {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Column: combo price — visually emphasised */
.td-combo {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--combo-text);
  background: var(--combo-bg);
  white-space: nowrap;
  border-left: 2px solid var(--combo-border);
}

/* Divider between service sections */
.pricing-section-divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

/* ── Combo discount explanation note ────────────────────────── */
.pricing-combo-note {
  margin-top: 14px;
  padding: 11px 13px;
  background: #EEF6FF;
  border-left: 3px solid #4A9EF5;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12px;
  color: #1A3A5C;
  line-height: 1.6;
}

.pricing-combo-note strong {
  font-weight: 700;
  color: #0D2B47;
}

.pricing-combo-note em {
  font-style: italic;
}

/* ── (legacy single-list pricing — kept for fallback) ─────────── */
.pricing-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pricing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--r-sm);
  gap: 12px;
}

.pricing-pkg {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  min-width: 72px;
}

.pricing-note {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
}

.pricing-price {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  background: var(--yellow-light);
  padding: 3px 8px;
  border-radius: var(--r-sm);
}

.pricing-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 14px;
  margin-bottom: 6px;
}

.pricing-group-label:first-child { margin-top: 0; }

/* ── Key Benefits ─────────────────────────────────────────────── */
.benefits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.benefit-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 11px;
}

/* ── How It Works ─────────────────────────────────────────────── */
.steps-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.step-badge {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.step-content {}

.step-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}

.step-detail {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── FAQ Accordion ────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item + .faq-item {
  border-top: 1px solid var(--border);
}

.faq-q-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.faq-q-row:active { opacity: .7; }

.faq-q {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  flex: 1;
}

.faq-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--dur) var(--ease);
}

.faq-item.open .faq-chevron { transform: rotate(90deg); }

.faq-answer-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s var(--ease), padding 0.3s var(--ease);
}

.faq-item.open .faq-answer-wrap { max-height: 400px; }

.faq-answer {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  padding-bottom: 12px;
}

/* ── Pre-footer CTA ───────────────────────────────────────────── */
#pre-footer-cta {
  margin: 12px 16px 0;
}

.consult-btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
  background: var(--yellow-light);
  border: 1.5px solid var(--yellow);
  border-radius: var(--r-pill);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.consult-btn:active {
  background: var(--yellow);
  transform: scale(0.98);
}

/* ═══════════════════════════════════════════════════════════════
   STICKY FOOTER — locked size across ALL screen widths
   Heights, font sizes, and icon sizes are all fixed in px so the
   bar never grows or shrinks regardless of viewport.
═══════════════════════════════════════════════════════════════ */
#sticky-footer {
  position: fixed;
  bottom: 16px;
  left: 14px; right: 14px;

  /* Hard-coded height — never scales */
  height: var(--footer-h);          /* 66px */
  min-height: var(--footer-h);
  max-height: var(--footer-h);

  padding: 0 6px;
  background: #1A2535;
  border-radius: var(--r-pill);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(13,27,42,0.35);
  gap: 4px;

  /* Centre pill on wide screens and cap its width */
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  /* Override left/right when max-width kicks in */
}

/* On screens wider than 508px (480 + 2×14px) we switch to centred */
@media (min-width: 508px) {
  #sticky-footer {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 452px; /* 480 - 28px gutter equivalent */
  }
}

.footer-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;

  /* Fixed height — locked */
  height: var(--footer-item-h);      /* 52px */
  min-height: var(--footer-item-h);
  max-height: var(--footer-item-h);

  padding: 0 4px;
  border: none;
  background: none;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-sans);

  /* Fixed font size — never scales */
  font-size: var(--footer-font);     /* 10px */
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur) var(--ease);
  border-radius: 24px;
  white-space: nowrap;
}

.footer-nav-item:active {
  color: #fff;
  transform: scale(0.95);
}

/* Force icon size — prevents any inherited scaling */
.footer-nav-item svg {
  width: var(--footer-icon) !important;   /* 20px */
  height: var(--footer-icon) !important;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Separated "Initiate Booking" centre button */
.footer-nav-item--booking {
  background: #243348;
  border-radius: var(--r-pill);
  padding: 0 12px;
  flex: 1.4;
  margin: 0 2px;
  color: var(--yellow);
}

.footer-nav-item--booking svg {
  stroke: var(--yellow);
}

.footer-nav-item--active {
  color: var(--yellow);
}

.footer-nav-item--active:not(.footer-nav-item--booking) svg {
  stroke: var(--yellow);
}

/* ── Popup overlay / floating card ───────────────────────────── */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,27,42,0.35);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.popup-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

/* Floating card — matches screenshot "Ask about this product" style */
.popup-card {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--footer-h) + 24px);
  background: var(--surface);
  border-radius: 18px;
  padding: 16px 16px 14px;
  z-index: 1001;
  box-shadow: 0 8px 32px rgba(13,27,42,0.22), 0 2px 8px rgba(13,27,42,0.10);
  max-width: 480px;
  margin: 0 auto;
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}

.popup-card.visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}

.popup-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.popup-handle {
  display: none;
}

.popup-close-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  border: none;
  cursor: pointer;
}

.popup-close-btn:active { background: var(--border); transform: scale(0.93); }

.popup-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.popup-subtitle {
  display: none;
}

.channel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 48px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  border: none;
  margin-bottom: 8px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.channel-btn:last-child { margin-bottom: 0; }
.channel-btn:active { filter: brightness(0.9); transform: scale(0.98); }

.channel-btn.messenger { background: #0099FF; }
.channel-btn.whatsapp  { background: #25D366; }

/* ── Toast ────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: calc(var(--footer-h) + 20px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Utility ──────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}