/* ==========================================================================
   Certified Appliance Care - visual refresh layer
   --------------------------------------------------------------------------
   Loaded AFTER online_s.css on every page. It only restyles classes that
   already exist in the markup, so no HTML structure changes and the booking
   calendar keeps working exactly as before.

   Palette is the site's own:
     #2c5aa0 / #4a7bc8  header blue        #28a745  cash-discount green
     #1a1a2e #16213e #0f3460  page gradient
     #e8f0fe  body text        #b8c5d6  muted text
   ========================================================================== */

:root {
    --cac-brand:       #2c5aa0;
    --cac-brand-light: #4a7bc8;
    --cac-green:       #28a745;
    --cac-text:        #e8f0fe;
    --cac-muted:       #b8c5d6;
    --cac-surface:     rgba(255, 255, 255, 0.055);
    --cac-surface-hi:  rgba(255, 255, 255, 0.09);
    --cac-line:        rgba(255, 255, 255, 0.13);
    --cac-radius:      16px;
    --cac-shadow:      0 12px 34px rgba(0, 0, 0, 0.3);
}

html { scroll-behavior: smooth; }

body {
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

/* ---------- header / nav ------------------------------------------------ */

header {
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(4px);
}

.logo h1 {
    font-size: clamp(1rem, 2.6vw, 1.65rem);
    line-height: 1.15;
}

nav { gap: 6px; }

nav .nav-link {
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
nav .nav-link:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); }
nav .nav-link.active { background: rgba(255, 255, 255, 0.24); }

@media (max-width: 820px) {
    header .container { flex-direction: column; gap: 12px; text-align: center; }
    nav { justify-content: center; flex-wrap: wrap; }
}

/* ---------- section headings -------------------------------------------- */

.page-section > h2,
.scheduling-section > h2 {
    font-size: clamp(1.75rem, 4.5vw, 2.55rem);
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}

/* accent rule under the main page heading */
.page-section > h2::after,
.scheduling-section > h2::after {
    content: "";
    display: block;
    width: 76px; height: 4px;
    margin: 16px auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--cac-brand-light), var(--cac-green));
}

.page-section > p,
.scheduling-section > p { color: var(--cac-muted); }

/* ---------- cards: services, payment, contact, pricing ------------------- */

.service-card,
.payment-card,
.contact-card,
.pricing-category,
.virtual-terminal-card,
.pricing-benefits {
    background: var(--cac-surface) !important;
    border: 1px solid var(--cac-line) !important;
    border-radius: var(--cac-radius) !important;
    box-shadow: var(--cac-shadow);
    backdrop-filter: blur(6px);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.service-card:hover,
.payment-card:hover,
.contact-card:hover,
.pricing-category:hover {
    transform: translateY(-5px);
    border-color: rgba(74, 123, 200, 0.55) !important;
    background: var(--cac-surface-hi) !important;
}

/* icon badges */
.service-icon,
.payment-icon,
.terminal-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--cac-brand), var(--cac-brand-light));
    box-shadow: 0 8px 20px rgba(44, 90, 160, 0.42);
    margin-bottom: 6px;
}
.service-icon i,
.payment-icon i,
.terminal-icon i { color: #fff; font-size: 1.6rem; }

.contact-icon {
    color: var(--cac-brand-light);
    width: 26px; text-align: center;
}

/* tick marks on card lists */
.service-card ul,
.pricing-category ul,
.payment-methods { list-style: none; padding-left: 0; }

.service-card ul li,
.pricing-category ul li {
    position: relative;
    padding: 7px 0 7px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--cac-muted);
}
.service-card ul li:last-child,
.pricing-category ul li:last-child { border-bottom: 0; }

.service-card ul li::before,
.pricing-category ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute; left: 0; top: 7px;
    color: var(--cac-green);
    font-size: 0.8rem;
}

/* ---------- pricing emphasis -------------------------------------------- */

.price-range {
    font-weight: 800;
    letter-spacing: 0.3px;
}
.pricing-category > .price-range:first-of-type {
    font-size: 1.85rem;
    color: #fff;
}

.price { font-weight: 800; }

/* "per machine" caption under each headline price. A customer once assumed one
   fee covered three appliances, so this needs to be visible, not fine print. */
.per-machine {
    display: inline-block;
    margin: 2px 0 6px;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(74, 123, 200, 0.22);
    border: 1px solid rgba(74, 123, 200, 0.45);
    color: #dce8fb;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* These carry inline colours written for a light background (#155724 green on
   green), which are unreadable on the dark theme. Inline styles win the cascade,
   so these need !important. */
.pricing-disclaimer {
    color: #d3f0dc !important;
    border-radius: 12px;
    padding: 14px 16px;
}
.pricing-disclaimer strong { color: #ffffff !important; }
.pricing-disclaimer i { color: var(--cac-green) !important; }

.pricing-note,
.price-note {
    border-left: 3px solid #ffc107;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 0 10px 10px 0;
    padding: 12px 14px;
    color: #ffe9a8;
}

/* ---------- buttons ------------------------------------------------------ */

.pay-online-btn,
.btn-primary {
    border-radius: 999px !important;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(40, 167, 69, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pay-online-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(40, 167, 69, 0.48); }

/* ---------- grids become properly responsive ----------------------------- */

.services-grid,
.payment-grid,
.contact-grid,
.pricing-grid,
.benefits-grid {
    display: grid;
    gap: 24px;
}
.services-grid  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.payment-grid   { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.contact-grid   { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pricing-grid   { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.benefits-grid  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.benefit-item {
    background: var(--cac-surface);
    border: 1px solid var(--cac-line);
    border-radius: 12px;
    padding: 18px;
    display: flex; align-items: center; gap: 12px;
}
.benefit-item i { color: var(--cac-brand-light); font-size: 1.3rem; }

/* ---------- contact page bits -------------------------------------------- */

.contact-method { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.contact-method:last-child { border-bottom: 0; }
.contact-detail a { color: var(--cac-text); text-decoration: none; }
.contact-detail a:hover { color: var(--cac-brand-light); text-decoration: underline; }
.contact-note { color: var(--cac-muted); font-size: 0.9rem; }
.hours-item { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; color: var(--cac-muted); }

/* ---------- service area notice (coverage.js) ---------------------------- */

.cac-coverage-notice {
    margin: 10px 0 16px;
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 0.94rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.cac-coverage-notice i { margin-top: 3px; flex: 0 0 auto; }

.cac-coverage-notice.ok {
    background: rgba(40, 167, 69, 0.14);
    border: 1px solid rgba(40, 167, 69, 0.45);
    color: #cdf0d8;
}
.cac-coverage-notice.ok i { color: var(--cac-green); }

.cac-coverage-notice.warn {
    background: rgba(255, 193, 7, 0.14);
    border: 1px solid rgba(255, 193, 7, 0.5);
    color: #ffe9a8;
}
.cac-coverage-notice.warn i { color: #ffc107; }
.cac-coverage-notice.warn strong { color: #fff3cd; }
.cac-coverage-notice a { color: #ffe9a8; font-weight: 700; }

/* ---------- forms -------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.07);
    color: var(--cac-text);
    padding: 12px 14px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--cac-brand-light);
    background: rgba(255, 255, 255, 0.11);
}

/* ---------- small screens ------------------------------------------------ */

@media (max-width: 640px) {
    .container { padding: 0 14px; }
    .service-card, .payment-card, .contact-card, .pricing-category { padding: 22px 18px !important; }
    .pricing-category > .price-range:first-of-type { font-size: 1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .service-card, .payment-card, .contact-card, .pricing-category,
    .pay-online-btn, nav .nav-link { transition: none !important; }
    .service-card:hover, .payment-card:hover,
    .contact-card:hover, .pricing-category:hover { transform: none; }
}