/* ============================================================
   Lai Lai Pro — Service Chatbot
   Shared across all location pages.
   Auto-detects service + city from page H1.
============================================================ */

#service-chatbot-button {
    position: fixed; bottom: 20px; right: 20px;
    background: url('/assets/chat-with-me.png') no-repeat center center;
    background-size: contain;
    color: transparent; border: none; padding: 0;
    width: 150px; height: 50px;
    cursor: pointer; z-index: 1001;
    transition: transform .2s ease;
    animation: service-bounce 2s infinite;
}
#service-chatbot-button:hover { transform: scale(1.05); }

/* Product pages: lift the button + panel above the sticky buy bar so they
   never cover the Buy button. (On mobile the button is hidden; the panel
   auto-opens after 30s and is lifted clear of the bar.) */
body.sc-mode-product #service-chatbot-button { bottom: 96px; }
body.sc-mode-product #service-chatbot-interface { bottom: 156px; }
@media (max-width: 600px) {
    body.sc-mode-product #service-chatbot-interface { bottom: 84px; }
}

/* Chatbot panel — Liquid Glass (dark translucent material) */
#service-chatbot-interface {
    position: fixed; bottom: 80px; right: 20px;
    width: 340px; max-width: calc(100vw - 30px);
    background: rgba(28,28,30,.68);
    backdrop-filter: blur(36px) saturate(200%);
    -webkit-backdrop-filter: blur(36px) saturate(200%);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 18px 60px rgba(0,0,0,.5);
    display: none; flex-direction: column; z-index: 1001;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #fff;
    overflow: hidden;
}
#service-chatbot-interface.active { display: flex; animation: service-slideUp .3s ease-out; }

#service-chatbot-header {
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(37,211,102,.92), rgba(18,140,126,.92));
    color: #fff; border-top-left-radius: 17px; border-top-right-radius: 17px;
    font-size: 16px; font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
#service-chatbot-header small { display: block; font-size: 12px; font-weight: 400; opacity: .9; margin-top: 2px; }

#service-chatbot-body {
    padding: 16px 18px; flex-grow: 1; overflow-y: auto;
    color: rgba(255,255,255,.92); font-size: 14px; max-height: 460px;
    background: transparent;
}
#service-chatbot-body p { margin: 0 0 10px; color: rgba(255,255,255,.92); line-height: 1.5; }

/* GLASS option buttons */
#service-chatbot-body button {
    display: block; width: 100%;
    padding: 12px 14px; margin: 6px 0;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px; cursor: pointer; text-align: left;
    color: #fff; font-size: 14px; font-weight: 500;
    font-family: inherit;
    transition: background .2s, transform .15s, border-color .2s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
#service-chatbot-body button:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.24);
}
#service-chatbot-body button:active { transform: scale(.98); }

#service-chatbot-body button[data-option="back"] {
    background: transparent; color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.12); font-weight: 400;
    box-shadow: none;
}
#service-chatbot-body button[data-option="back"]:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

#service-chatbot-body button.service-whatsapp-btn {
    background: linear-gradient(135deg, rgba(37,211,102,.95), rgba(18,140,126,.95));
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    text-align: center; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
#service-chatbot-body button.service-whatsapp-btn:hover {
    background: linear-gradient(135deg, #1fba59, #0e6e63);
}

/* Form inputs on glass */
#service-chatbot-body input[type="text"],
#service-chatbot-body input[type="email"],
#service-chatbot-body input[type="tel"],
#service-chatbot-body select,
#service-chatbot-body textarea {
    width: 100%; padding: 10px 12px; margin: 4px 0 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    box-sizing: border-box; font-size: 14px;
    font-family: inherit;
    color: #fff;
    background: rgba(255,255,255,.06);
}
#service-chatbot-body input::placeholder,
#service-chatbot-body textarea::placeholder { color: rgba(255,255,255,.4); }
#service-chatbot-body select option { background: #1C1C1E; color: #fff; }
#service-chatbot-body input:focus, #service-chatbot-body select:focus, #service-chatbot-body textarea:focus {
    outline: none; border-color: rgba(10,132,255,.6);
    box-shadow: 0 0 0 3px rgba(10,132,255,.18);
    background: rgba(255,255,255,.1);
}
#service-chatbot-body textarea { resize: vertical; min-height: 70px; }

#service-chatbot-body label {
    display: block; font-size: 12px; color: rgba(255,255,255,.6);
    margin: 8px 0 2px; font-weight: 500;
}

#service-chatbot-body .booking-context {
    background: rgba(10,132,255,.18);
    border: 1px solid rgba(10,132,255,.24);
    border-radius: 8px;
    padding: 8px 10px; font-size: 12px;
    color: rgba(255,255,255,.92);
    margin-bottom: 12px; text-align: center;
}
#service-chatbot-body .booking-context strong { font-weight: 600; color: #fff; }

#service-chatbot-footer {
    padding: 10px 14px; text-align: right;
    border-top: 1px solid rgba(255,255,255,.08);
}
#service-chatbot-footer button {
    background: transparent; color: rgba(255,255,255,.6); border: none;
    border-radius: 6px; padding: 6px 12px; cursor: pointer;
    font-family: inherit; font-size: 13px;
}
#service-chatbot-footer button:hover { color: #fff; }

@keyframes service-slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes service-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@media (max-width: 600px) {
    #service-chatbot-button { width: 120px; height: 40px; bottom: 12px; right: 12px; }
    #service-chatbot-interface { width: calc(100vw - 24px); right: 12px; bottom: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    #service-chatbot-button { animation: none; }
}

/* ============================================================
   Site-wide overrides (loaded everywhere chatbot.css is loaded)
============================================================ */

/* Hide the dark "trust strip" on mobile — cramped & heavy on small screens. */
@media (max-width: 600px) {
    .trust { display: none; }
}

/* ============================================================
   APPLE-TIER TYPOGRAPHY REFINEMENTS
   Applies Apple's actual letter-spacing & line-height tokens.
   Subtle but cumulative — gives the whole site a more polished feel.
============================================================ */

/* Sharper render on retina displays */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Body: subtle negative tracking + tighter line-height (Apple body spec: 17px / 1.47 / -0.1px) */
body {
    letter-spacing: -0.006em;
}

/* Paragraphs: Apple's body line-height (1.47 — tighter than the loose 1.6 default) */
p {
    line-height: 1.47;
}

/* Headings: progressively tighter at larger sizes (Apple's signature) */
h1 { letter-spacing: -0.022em; }    /* 56-96px range */
h2 { letter-spacing: -0.018em; }    /* 32-44px range */
h3 { letter-spacing: -0.015em; }    /* 20-24px range */

/* Section headings (used across all pages): tighten to Apple's 40px spec */
.section-heading {
    letter-spacing: -0.018em;
}

/* Section labels (uppercase eyebrows): slightly tighter overall but keep wide tracking */
.section-label {
    letter-spacing: 0.08em;
    font-feature-settings: "ss01";
}

/* ============================================================
   MOBILE NAV — Liquid Glass overlay (replaces solid black)
============================================================ */
.nav-mobile {
    background: rgba(0,0,0,.55) !important;
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
}

/* ============================================================
   APPLE HIGH-IMPACT POLISH (4 specs)
   1. Card radius 28px  ·  2. Bigger section gaps  ·  3. Hero up to 96px  ·  4. Tabular numerals
============================================================ */

/* 1. Card radius — Apple spec is 28px for content cards (vs our 16-20px) */
.review-card,
.svc-card,
.repair-card,
.rs-card,
.sec-card,
.qc-card,
.faq-item,
.step,
.feat,
.other-card,
.repair-starter-card {
    border-radius: 20px;
}

/* True Apple feature cards (large showcase) get 28px */
.svc-card,
.review-card,
.qc-card,
.other-card {
    border-radius: 28px;
}

/* 2. Section gap — Apple uses up to 120px between major sections (we max at 80) */
.about, .reviews, .location, .workshop, .our-services,
.cta, .faq, .process, .details, .intro, .related,
.repair-services, .secondary-services, .core-services,
.how, .repair-starter, .booking, .features,
.tiktok, .visit-us, .quick-contact {
    padding-top: clamp(64px, 8vw, 120px) !important;
    padding-bottom: clamp(64px, 8vw, 120px) !important;
}

/* 3. Hero — Apple's display goes 80-96px (we max at 76px) */
.hero h1,
.about-hero h1,
.contact-hero h1,
.page-hero h1,
section.cta .section-heading {
    font-size: clamp(44px, 7vw, 88px) !important;
    letter-spacing: -0.022em !important;
    line-height: 1.04 !important;
}

/* 4. Tabular numerals — prices and numbers align consistently */
body {
    font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ============================================================
   APPLE MEDIUM-IMPACT POLISH
   5. Strict 4px spacing tokens · 6. 260ms ease-out hovers · 7. Per-size letter-spacing
============================================================ */

/* 5. 4px spacing scale — exposed as CSS variables for future use */
:root {
    --space-4:   4px;
    --space-8:   8px;
    --space-12:  12px;
    --space-16:  16px;
    --space-20:  20px;
    --space-24:  24px;
    --space-28:  28px;
    --space-32:  32px;
    --space-40:  40px;
    --space-44:  44px;
    --space-48:  48px;
    --space-52:  52px;
    --space-80:  80px;
    --space-120: 120px;
    --space-144: 144px;
    --ease-apple: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-hover: 260ms;
}

/* 6. Apple's 260ms ease-out for common interactive hover transitions */
a, button, .btn, .btn-primary, .btn-outline, .btn-whatsapp, .btn-dark, .btn-dark-full,
.svc-card, .review-card, .repair-card, .rs-card, .sec-card, .qc-card, .other-card,
.faq-item, .step, .feat, .repair-starter-card,
.nav-links a, .footer-col a, .footer-social a,
.qc-icon, .qc-card .value,
.dropdown-trigger, .dropdown-panel, .dropdown-panel a,
.estimate-btn, .btn-book-now, .btn-submit-inline {
    transition-duration: var(--duration-hover);
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 7. Per-size letter-spacing precision (Apple's actual values) */
/* 14px body-sm */
.tagline-final, .footer-bottom p, .nav-mobile .wa-link,
small, .caption, footer p {
    letter-spacing: -0.003em;
}
/* 20px subheading */
.section-heading, .visit-info h2, .glass-card h3 {
    letter-spacing: -0.010em;
}
/* 24px heading-sm */
h3, .qc-card .value, .feat h3, .step h3 {
    letter-spacing: -0.015em;
}