/* ============================================================
   responsive.css — fluid layout, breakpoints, touch targets,
   images, nav: burger/header strip below Bootstrap xl (~1200px); wide desktop unchanged
   Load last after page-specific CSS.
   ============================================================ */

/* ─── Global fluid media ───────────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
}

iframe,
video,
embed {
    max-width: 100%;
}

/* Icon-sized images keep authored dimensions */
.profile-avatar-img {
    max-width: none;
}

html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
}

/* ─── Smooth navbar collapse (Bootstrap) ───────────────────── */
#mainNav .navbar-collapse.collapsing {
    transition: height 0.35s ease;
}

/* Below xl (~1200px): phone-style header — burger | centered logo | bell+profile; drawer for links + Book */
@media (max-width: 1199.98px) {
    /*
     * Mobile chrome matches the expanded menu from first paint:
     * solid white bar, gold rule, full-color logo, navy links — not transparent-over-hero.
     */
    /* Taller collapsed bar so logo reads clearly; burger stays visually smaller */
    #mainNav {
        background-color: #ffffff !important;
        border-bottom: 2px solid #d8b688 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    #mainNav .nav-link,
    #mainNav .nav-icon-btn {
        color: #163654 !important;
    }

    #mainNav .nav-link.active {
        color: #d8b688 !important;
    }

    /* Burger: icon only (no chip background); keep comfortable tap target */
    #mainNav .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
        padding: 0.35rem;
        border-radius: 0;
        box-sizing: border-box;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        align-self: center;
        z-index: 2;
    }

    #mainNav .navbar-toggler:focus-visible {
        outline: 2px solid rgba(22, 54, 84, 0.35);
        outline-offset: 2px;
    }

    #mainNav .navbar-toggler-icon {
        filter: none !important;
        width: 1.35em;
        height: 1.35em;
    }

    /* Top strip only: logo stays centered here; drawer is a sibling (won’t pull logo down) */
    #mainNav .navbar > .container {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        padding-left: max(22px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(22px, env(safe-area-inset-right, 0px)) !important;
    }

    #mainNav .nav-mobile-header-row {
        position: relative;
        min-height: clamp(68px, 14vw, 112px);
        width: 100%;
    }

    #mainNav .nav-mobile-start,
    #mainNav .nav-mobile-end {
        position: relative;
        z-index: 3;
    }

    /*
     * Pin bell + profile as one tight cluster on the right. Global .nav-icon-btn
     * uses margin-left: 15px — stacked with a stretched flex area that reads as a
     * huge gap between icons unless we reset margins and shrink-wrap the group.
     */
    #mainNav .nav-mobile-end {
        display: inline-flex !important;
        align-items: center;
        justify-content: flex-end;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        width: fit-content !important;
        max-width: none;
        gap: 0.2rem !important;
    }

    #mainNav .nav-mobile-end .nav-icon-btn {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Stack links then Book at bottom of drawer (only when open — avoid breaking collapse animation) */
    #mainNav .navbar-collapse.show {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    #mainNav .navbar-collapse .navbar-nav {
        width: 100%;
    }

    /* Short centered rule + generous gap before Book (full-width border felt heavy) */
    #mainNav .nav-mobile-drawer-book {
        flex-shrink: 0;
        margin-top: 0.35rem;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
        border-top: none;
    }

    #mainNav .nav-mobile-drawer-book::before {
        content: "";
        display: block;
        width: min(200px, 52vw);
        height: 1px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5rem;
        background-color: #e5e7eb;
    }

    #mainNav .nav-mobile-drawer-book-btn {
        width: 100%;
        max-width: 280px;
        font-size: 1rem !important;
        padding: 10px 22px !important;
    }

    #mainNav .navbar-brand {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(340px, 88vw);
        height: clamp(62px, 18vw, 112px);
        margin: 0 !important;
        overflow: visible;
        z-index: 2;
        pointer-events: auto;
    }

    #mainNav .nav-logo {
        filter: none !important;
        height: clamp(76px, 20vw, 128px) !important;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        max-width: min(340px, 90vw);
    }

    #mainNav .navbar-collapse .nav-link {
        text-shadow: none;
    }

    #mainNav .navbar-nav {
        transform: none;
        padding-top: 0.15rem;
        padding-bottom: 0;
        gap: 0 !important;
        row-gap: 0 !important;
    }

    .header-right-actions {
        transform: none;
    }

    /* Drawer below header row: links + Book */
    #mainNav .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
        margin-top: 0.35rem;
        padding-bottom: 0.5rem;
        padding-top: 0.15rem;
        border-top: 1px solid #e5e7eb;
        background-color: #ffffff;
    }

    #mainNav .nav-link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        font-size: 1rem !important;
        line-height: 1.25;
    }

    #mainNav .nav-icon-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem !important;
    }

    .profile-menu {
        top: calc(84px + env(safe-area-inset-top, 0px)) !important;
    }
}

/*
 * Tablets / iPad portrait + narrow landscape (Bootstrap sm–below-xl): burger header &
 * drawer use more generous scale — base rules above targets phones first; phones stay <576px.
 */
@media (min-width: 576px) and (max-width: 1199.98px) {
    #mainNav {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    #mainNav .navbar-toggler {
        min-width: 52px;
        min-height: 52px;
        padding: 0.45rem;
    }

    #mainNav .navbar-toggler-icon {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    #mainNav .nav-mobile-header-row {
        min-height: clamp(82px, 12vw, 136px);
    }

    #mainNav .navbar-brand {
        width: min(400px, 82vw);
        height: clamp(74px, 13vw, 128px);
    }

    #mainNav .nav-logo {
        height: clamp(92px, 15vw, 154px) !important;
        max-width: min(400px, 82vw);
    }

    /* Bell + profile in top strip only */
    #mainNav .nav-mobile-header-row .nav-icon-btn {
        min-width: 48px;
        min-height: 48px;
        font-size: 1.65rem !important;
    }

    #mainNav .navbar-collapse .nav-link {
        font-size: 1.12rem !important;
        line-height: 1.35;
        min-height: 46px;
        padding-top: 0.28rem !important;
        padding-bottom: 0.28rem !important;
    }

    #mainNav .nav-mobile-drawer-book-btn {
        font-size: 1.08rem !important;
        padding: 12px 28px !important;
    }

    .profile-menu {
        top: calc(98px + env(safe-area-inset-top, 0px)) !important;
    }
}

/* xl and up: desktop strip — unwrap mobile row into Bootstrap horizontal navbar */
@media (min-width: 1200px) {
    #mainNav .nav-mobile-header-row {
        display: contents;
    }

    /*
     * Bootstrap’s .navbar uses flex-wrap: wrap, which forces nav labels and “Book Now”
     * onto two lines when space is tight. Keep the bar on a single row.
     */
    #mainNav.navbar {
        flex-wrap: nowrap;
    }

    #mainNav .navbar > .container {
        flex-wrap: nowrap;
        align-items: center;
    }

    #mainNav .navbar-collapse {
        flex-wrap: nowrap !important;
    }

    #mainNav .navbar-nav {
        flex-wrap: nowrap;
    }

    #mainNav .navbar-nav .nav-item {
        flex-shrink: 0;
    }

    #mainNav .navbar-nav .nav-link,
    #mainNav .header-right-actions .btn-header-book {
        white-space: nowrap;
    }

    #mainNav .header-right-actions {
        flex-shrink: 0;
    }
}

/* Auth / profile modals: stay within viewport width on phones */
@media (max-width: 575.98px) {
    .modal-overlay {
        padding-top: max(12px, env(safe-area-inset-top, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        box-sizing: border-box;
        align-items: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .custom-modal-content {
        width: min(500px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        padding: 28px 18px 32px;
        margin: 12px auto;
        box-sizing: border-box;
    }

    .custom-modal-content h2 {
        font-size: clamp(1.35rem, 5vw, 2rem);
    }

    .modal-logo--auth,
    .modal-logo {
        height: min(200px, 38vw) !important;
    }

    .modal-logo-wrap--auth,
    .modal-logo-wrap--auth-signup {
        margin-top: -40px !important;
        margin-bottom: -16px !important;
    }

    .small-modal-content {
        width: min(420px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        padding: 18px 16px 28px;
        box-sizing: border-box;
    }

    .profile-modal-content {
        padding: 16px 16px 24px !important;
        max-width: calc(100vw - 24px) !important;
    }
}

@media (max-width: 991.98px) {
    .section-padding {
        padding-top: clamp(48px, 8vw, 80px);
        padding-bottom: clamp(48px, 8vw, 80px);
    }

    .section-header {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }

    .hero-section {
        min-height: clamp(280px, 45vh, 70vh);
    }

    .hero-title {
        font-size: clamp(2rem, 6vw, 4rem);
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .doctor-name {
        font-size: clamp(1.75rem, 5vw, 3rem);
    }

    .doctor-text,
    .doctor-list li {
        font-size: clamp(1rem, 2.5vw, 1.4rem);
    }

    .doctor-img {
        min-height: clamp(280px, 40vw, 450px);
    }

    .footer-logo {
        width: min(350px, 85vw);
        height: auto;
        max-height: none;
    }

    .cta-floating-heading {
        font-size: clamp(1.65rem, 4vw, 2.8rem);
    }

    .cta-floating-subtext {
        font-size: clamp(1rem, 2.2vw, 1.2rem);
    }

    #modalCarousel,
    #modalCarousel img,
    .carousel-item {
        height: clamp(220px, 40vw, 350px);
    }

    /* About collage: fluid width, retain stacked layout from about.css below lg */
    .collage-main {
        width: min(90%, 95vw) !important;
        min-height: clamp(220px, 45vw, 450px);
        height: auto !important;
        max-height: none;
    }

    .collage-sub {
        width: min(65%, 60vw) !important;
        min-height: clamp(140px, 28vw, 280px);
        height: auto !important;
    }
}

/* Large phones / small tablets ─────────────────────────────── */
@media (max-width: 575.98px) {
    .container {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .contact-map-content-width {
        width: 100%;
        padding-left: 4%;
        padding-right: 4%;
    }

    .feedback-heading-sync,
    .feedback-transform-heading {
        font-size: clamp(1.6rem, 7vw, 2.4rem);
    }

    .elite-hero-inner {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

/* Very narrow (iPhone SE landscape / smallest phones) ───────── */
@media (max-width: 374.98px) {
    .hero-title {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }

    #mainNav .navbar-brand {
        width: min(270px, 92vw);
    }
}

/* Desktop unchanged: lock wide layout above 1366 reference ─── */
@media (min-width: 1367px) {
    .contact-map-content-width {
        max-width: 1400px;
    }
}

/* Touch / coarse pointers: avoid “stuck” hover transforms ─── */
@media (hover: none), (pointer: coarse) {
    #mainNav .nav-link:hover,
    #mainNav .nav-icon-btn:hover {
        transform: none;
    }

    .btn-header-book:hover {
        transform: none;
    }

    .footer-socials a:hover {
        transform: none;
    }

    .footer-links a:hover {
        transform: none !important;
    }

    .service-card-premium:hover,
    .service-card-image:hover {
        transform: none;
    }

    .contact-branch-card:hover {
        transform: none;
    }
}

/*
 * Feedback page (feedback.html only — .feedback-main): phones only (<576px).
 * Tablet / iPad uses dedicated block below — do not widen this media query or phone layout shifts.
 */
@media (max-width: 575.98px) {
    .feedback-main .feedback-transform-header-block {
        text-align: center;
    }

    .feedback-main .feedback-transform-subheading {
        max-width: 34rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* “Share Your Experience”: reduce cramped feel — padding, not desktop typography rules */
    .feedback-main .feedback-blue-section {
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }

    .feedback-main .feedback-share-ora {
        overflow: visible;
    }

    .feedback-main .feedback-share-content {
        padding: 26px 18px 30px;
        border-radius: 0 0 14px 14px;
    }

    /*
     * Typography: “Share Your Experience” used heading-scale (3rem / feedback-heading-sync)
     * while labels stayed ~0.85rem — meet in the middle on small screens only.
     */
    .feedback-main .feedback-share-title {
        font-size: clamp(1.78rem, 4.4vw, 2.05rem) !important;
        line-height: 1.22;
        text-align: center;
    }

    .feedback-main .feedback-share-intro {
        font-size: 1.06rem;
        line-height: 1.55;
        text-align: center;
    }

    .feedback-main .feedback-share-ora .feedback-label-bold {
        font-size: 0.95rem !important;
    }

    .feedback-main .feedback-share-ora .feedback-input-gold,
    .feedback-main .feedback-share-ora .feedback-textarea {
        font-size: 1.05rem !important;
    }

    .feedback-main .feedback-share-ora .char-count {
        font-size: 0.92rem;
    }

    .feedback-main .feedback-share-ora .confirm-checkbox,
    .feedback-main .feedback-share-ora .feedback-anonymous-label {
        font-size: 0.98rem;
    }

    .feedback-main .feedback-footer-row .confirm-checkbox {
        font-size: 0.98rem;
    }

    .feedback-main .feedback-share-ora .btn-header-book {
        font-size: 1.05rem !important;
    }

    /* Hide clinic photo on small screens only — desktop / tablet md+ unchanged in feedback.css */
    .feedback-main .feedback-share-body {
        min-height: 0;
    }

    .feedback-main .feedback-share-image-wrap {
        display: none !important;
    }

    .feedback-main .feedback-master-card {
        padding: 22px 14px !important;
    }

    .feedback-main .feedback-field-row {
        margin-bottom: 14px;
    }

    .feedback-main .feedback-textarea-container {
        margin-top: 12px;
    }

    .feedback-main .feedback-captcha,
    .feedback-main #feedback-hcaptcha {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        display: flex;
        justify-content: center;
        padding: 4px 0 8px;
        margin-left: -4px;
        margin-right: -4px;
        width: calc(100% + 8px);
    }

    /* Golden tooth rating: one horizontal row on narrow screens */
    .feedback-main .feedback-rating-teeth {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.28rem;
    }

    .feedback-main .feedback-rating-tooth-btn {
        font-size: clamp(1.55rem, 4.8vw, 1.95rem);
        padding: 5px 4px;
        flex: 0 0 auto;
    }

    .feedback-main .feedback-rating-tooth-btn::after {
        width: 36px;
        height: 36px;
    }

    .feedback-main .feedback-rating-hint {
        text-align: center;
    }

    /* Published / empty state: smaller footprint */
    .feedback-main .feedback-empty-title {
        font-size: 1.35rem;
    }

    .feedback-main .feedback-empty-subtitle {
        font-size: 0.92rem;
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
    }

    .feedback-main .feedback-list-empty--enhanced {
        min-height: 150px;
        padding: 1.25rem 0.85rem;
    }

    .feedback-main .feedback-empty-splash-wrap {
        width: 84px;
        height: 84px;
        margin-bottom: 6px;
    }

    .feedback-main .feedback-empty-tooth {
        font-size: 1.75rem;
    }

    .feedback-main .feedback-review-card {
        padding: 14px 14px 16px;
        min-height: 0;
    }

    .feedback-main .feedback-review-text {
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .feedback-main .feedback-review-stars {
        flex-wrap: nowrap;
        gap: 4px;
        margin-bottom: 10px;
    }

    .feedback-main .feedback-tooth-star {
        font-size: 1rem;
    }

    .feedback-main #reviews.section-header {
        font-size: clamp(1.45rem, 5vw, 2rem);
        margin-bottom: 1rem !important;
    }

    /* Patient Reviews: visually narrower card strip on small screens */
    .feedback-main .feedback-reviews-outer {
        max-width: min(400px, 92vw);
        margin-left: auto;
        margin-right: auto;
        padding-left: 4px;
        padding-right: 4px;
        box-sizing: border-box;
    }

    .feedback-main .feedback-carousel-track-holder {
        max-width: 100%;
    }
}

/*
 * Feedback: tablet / iPad (Bootstrap sm–below-lg). Restore form | image row like desktop;
 * overrides feedback.css @991px stacked layout. Phones (<576px) keep column + hidden image.
 */
@media (min-width: 576px) and (max-width: 991.98px) {
    .feedback-main .feedback-share-body {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        min-height: 0;
    }

    .feedback-main .feedback-share-content {
        flex: 1 1 58%;
        min-width: 0;
        padding: 28px 22px 32px;
        border-radius: 0;
    }

    .feedback-main .feedback-share-title,
    .feedback-main .feedback-share-intro {
        text-align: left;
    }

    .feedback-main .feedback-share-image-wrap {
        display: block !important;
        flex: 0 1 38%;
        min-width: clamp(216px, 30vw, 300px);
        max-width: 40%;
        min-height: 0;
        height: auto;
        align-self: stretch;
        border-radius: 0 12px 12px 0;
        overflow: hidden;
        box-shadow: -6px 0 18px rgba(0, 0, 0, 0.06);
    }

    .feedback-main .feedback-share-image {
        width: 100%;
        height: 100%;
        min-height: 100%;
        object-fit: cover;
        object-position: center 20%;
        display: block;
    }
}

/* Feedback Share form: midsize type for all sub-xl tablet/desktop-narrow (<1200px) */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .feedback-main .feedback-share-title.feedback-heading-sync {
        font-size: clamp(1.92rem, 2.5vw + 1.05rem, 2.42rem) !important;
        line-height: 1.15;
    }

    .feedback-main .feedback-share-intro {
        font-size: clamp(1.06rem, 1.15vw + 0.88rem, 1.3rem);
    }

    .feedback-main .feedback-share-ora .feedback-field-row .feedback-label-bold,
    .feedback-main .feedback-share-ora .feedback-textarea-container > .feedback-label-bold,
    .feedback-main .feedback-share-ora .feedback-rating-field .feedback-label-bold {
        font-size: clamp(1.02rem, 0.9vw + 0.82rem, 1.22rem) !important;
        margin-bottom: 4px;
    }

    .feedback-main .feedback-share-ora .feedback-input-gold,
    .feedback-main .feedback-share-ora .feedback-textarea {
        font-size: clamp(1.04rem, 1.05vw + 0.85rem, 1.22rem) !important;
    }

    .feedback-main .feedback-share-ora .char-count {
        font-size: clamp(0.94rem, 0.8vw + 0.82rem, 1.05rem);
    }

    .feedback-main .feedback-share-ora .feedback-anonymous-label,
    .feedback-main .feedback-share-ora .feedback-footer-row label,
    .feedback-main .feedback-share-ora .confirm-checkbox {
        font-size: clamp(0.98rem, 0.75vw + 0.82rem, 1.1rem);
    }

    .feedback-main .feedback-share-ora .feedback-rating-hint {
        font-size: clamp(0.92rem, 0.65vw + 0.76rem, 1.02rem);
    }

    .feedback-main .feedback-share-ora .btn-header-book {
        font-size: clamp(1rem, 0.85vw + 0.82rem, 1.12rem) !important;
        padding-inline: clamp(14px, 2.5vw, 22px) !important;
    }

    .feedback-main .feedback-rating-teeth .feedback-rating-tooth-btn {
        font-size: clamp(1.55rem, 2.6vw + 0.82rem, 2.08rem) !important;
    }
}

/*
 * Profile menu: duplicate .profile-menu blocks in services.css / feedback.css reload after
 * global.css and reset right:50px — recenter here (responsive.css loads last on all pages).
 */
@media (max-width: 991.98px) {
    .profile-menu {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(280px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        box-sizing: border-box !important;
    }
}