/* ==========================================================================
   Aria Smile Design - Landing Page V2 Styles
   Extracted from the inline <style> block for caching and maintainability.
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Karla', sans-serif;
    background-color: #F8F9FA;
}

/* Hero background with dark gradient overlay */
.bg-hero {
    background-image: linear-gradient(rgba(6, 6, 6, 0.74), rgba(6, 6, 6, 0.66)), url('/themes/aria/images/dental-clinic-bg2.jpg');
    background-size: cover;
    background-position: center;
}

/* Wizard step fade / slide transition */
.step-transition {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Video Modal Styles */
#video-modal,
#clinic-video-modal {
    backdrop-filter: blur(5px);
}

/* Hide scrollbar for smooth internal scrolling */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Reserve space so the mobile sticky CTA bar never covers page content */
@media (max-width: 639.98px) {
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

/* Step 2 quick-location selected state */
#btn-quick-miami.is-active, #btn-quick-fl.is-active, #btn-quick-outofstate.is-active {
    background: #B89759 !important;
    border-color: #B89759 !important;
    color: #fff !important;
}


/* V2 readability + mobile tap-target polish */
.form-hero { background: rgba(12, 12, 12, 0.98) !important; }

@media (max-width: 639.98px) {
    #step-2 button[id^="btn-quick-"] { min-height: 44px; }
    #step-2 [id^="btn-quick-"] { font-size: 0.875rem; }
}

#state-select-hint,
#location-error,
#user-name-error,
#user-phone-error,
#user-email-error,
#user-language-error {
    color: #7f1d1d !important;
    background: rgba(254, 226, 226, 0.92);
    border: 1px solid rgba(248, 113, 113, 0.55);
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 600;
}

/* V3-like controls used in V2 step 2 */
.input-v3 {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    background: #FFFFFF;
    border: 1px solid #E4DDCF;
    border-radius: 12px;
    color: #1C1B19;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.input-v3::placeholder { color: #A39D92; }

.input-v3:focus {
    outline: none;
    border-color: #B89759;
    box-shadow: 0 0 0 3px rgba(184, 151, 89, 0.18);
}

.pill-v3 {
    min-height: 44px;
    background: #FFFFFF;
    border: 1px solid #E4DDCF;
    border-radius: 999px;
    color: #1C1B19;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.pill-v3:hover,
.pill-v3.is-active {
    border-color: #B89759;
    background: #F3EBDD;
}

#location-dropdown-menu {
    background: #FFFFFF;
    color: #1C1B19;
}

#location-dropdown-menu > div:hover {
    background: #F3EBDD;
}