/* ==========================================
   DIVINE BEAUTY
   RESPONSIVE DESIGN
========================================== */


/* ==========================================
   TABLET — 991px
========================================== */

@media (max-width: 1100px) {

    /* ------------------------------------------
       GLOBAL
    ------------------------------------------ */

    :root {

        --section-padding: 90px;

    }


    /* ------------------------------------------
       HEADER
    ------------------------------------------ */

    header {

        min-height: 70px;

    }

    .nav-container {

        min-height: 64px;

    }

    .logo img {

        width: 155px;

    }

    header.scrolled .logo img {

        width: 140px;

    }


    /* ------------------------------------------
       DESKTOP NAV → MOBILE DRAWER
    ------------------------------------------ */

    nav {

        display: block;

    }

    .nav-links a {

        color: var(--dark);

        font-size: 1rem;

    }

    .nav-links a:hover {

        color: var(--gold);

    }


    /* ------------------------------------------
       LANGUAGE SWITCHER
    ------------------------------------------ */

    .language-switcher {

        margin-left: auto;

        margin-right: 5px;

    }

    .language-toggle {

        padding: 9px 13px;

    }


    html[dir="rtl"] .booking-info>.section-subtitle,
    html[dir="rtl"] .booking-info>.section-title {

        text-align: center;

    }

    /* ------------------------------------------
       MOBILE MENU BUTTON
    ------------------------------------------ */

    .menu-btn {

        display: flex;

        color: var(--dark);

    }

    header:not(.scrolled) .menu-btn {

        color: var(--gold);

    }


    /* ------------------------------------------
       HERO
    ------------------------------------------ */

    .hero {

        min-height: 90vh;

        height: 90vh;

    }

    .hero-content {

        max-width: 760px;

        padding: 0 30px;

    }

    .hero-title,
    .hero h1 {

        font-size:
            clamp(3.5rem, 8vw, 5.5rem);

    }

    .hero-subtitle {

        font-size: .85rem;

    }


    /* ------------------------------------------
       ABOUT
    ------------------------------------------ */

    .about-container {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .about-image {

        max-width: 750px;

        width: 100%;

        margin: 0 auto;

    }

    .about-image img {

        min-height: 500px;

    }

    .about-content {

        max-width: 750px;

        margin: 0 auto;

    }

    .about-content .section-subtitle,
    .about-content h2 {

        text-align: center;

    }

    /* ------------------------------------------
       BEFORE & AFTER
    ------------------------------------------ */

    .comparison-container {

        width: 100%;

        margin-top: 45px;

    }


    /* ------------------------------------------
       TESTIMONIALS
    ------------------------------------------ */

    .testimonial-slider {

        width: min(100%, 750px);

    }


    /* ------------------------------------------
       BOOKING
    ------------------------------------------ */

    .booking-container {

        grid-template-columns: 1fr;

    }

    .booking-info {

        max-width: 750px;

        margin: 0 auto;

    }

    .booking-info>.section-subtitle,
    .booking-info>.section-title {

        text-align: center;

    }

    .booking-map {

        min-height: 400px;

    }

    .booking-map iframe {

        height: 400px;

        min-height: 400px;

    }


    /* ------------------------------------------
       FOOTER
    ------------------------------------------ */

    .footer-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 40px;

    }

}

/* ==========================================
   MOBILE — 600px
========================================== */

@media (max-width: 600px) {

    /* ------------------------------------------
       GLOBAL
    ------------------------------------------ */

    :root {

        --section-padding: 70px;

    }

    section {

        padding-left: 20px;

        padding-right: 20px;

    }

    .container {

        width: 100%;

        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;

    }


    /* ------------------------------------------
       HEADER
    ------------------------------------------ */

    header {

        min-height: 64px;

    }

    .nav-container {

        min-height: 58px;

        gap: 10px;

    }

    .logo img {

        width: 135px;

    }

    header.scrolled .logo img {

        width: 125px;

    }

    .language-toggle {

        padding: 8px 10px;

        gap: 5px;

        font-size: .8rem;

    }

    .language-toggle .fa-globe {

        display: none;

    }

    .language-dropdown {

        right: 0;

        min-width: 150px;

    }

    .menu-btn {

        width: 44px;

        height: 44px;

    }


    /* ------------------------------------------
       HERO
    ------------------------------------------ */

    .hero {

        min-height: 780px;

        height: 100svh;

        max-height: 900px;

    }

    .hero-content {

        width: 100%;

        padding: 0 20px;

    }

    .hero h1 {

        font-size:
            clamp(2.8rem, 13vw, 4.5rem);

        line-height: .95;

    }

    .hero-subtitle {

        margin-bottom: 14px;

        font-size: .72rem;

        letter-spacing: 2px;

    }

    .hero-content p {

        font-size: .9rem;

        line-height: 1.7;

    }

    .hero-buttons {

        width: 100%;

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {

        width: 100%;

        text-align: center;

    }


    /* ------------------------------------------
       SECTION TITLES
    ------------------------------------------ */

    .section-subtitle {

        font-size: .72rem;

        letter-spacing: 3px;

    }

    .section-title {

        margin-bottom: 35px;

        font-size:
            clamp(2.2rem, 10vw, 3rem);

    }


    /* ------------------------------------------
       ABOUT
    ------------------------------------------ */

    .about-image img {

        min-height: 400px;

    }

    .about-stats {

        grid-template-columns: 1fr;

    }

    .stat {

        padding: 20px;

    }

    /* ------------------------------------------
       GALLERY
    ------------------------------------------ */

    .gallery-filters {

        gap: 8px;

        margin-bottom: 35px;

    }

    .filter-btn {

        padding: 9px 15px;

        font-size: .78rem;

    }

    /* ------------------------------------------
       LIGHTBOX
    ------------------------------------------ */

    .lightbox {

        padding: 15px;

    }

    .lightbox-image {

        max-width: 94vw;

        max-height: 78vh;

        border-radius: 8px;

    }

    .lightbox-close {

        top: 15px;

        right: 18px;

        font-size: 36px;

    }

    .lightbox-prev,
    .lightbox-next {

        width: 42px;

        height: 42px;

        font-size: 22px;

    }

    .lightbox-prev {

        left: 10px;

    }

    .lightbox-next {

        right: 10px;

    }


    /* ------------------------------------------
       BEFORE & AFTER
    ------------------------------------------ */

    .comparison-container {

        aspect-ratio: 4 / 5;

        border-radius: 14px;

    }

    .slider-button {

        width: 48px;

        height: 48px;

        font-size: 20px;

    }


    /* ------------------------------------------
       TESTIMONIALS
    ------------------------------------------ */

    .testimonial-slider {

        margin-top: 40px;

    }

    .testimonial-card {

        padding: 32px 22px;

        border-radius: 18px;

    }

    .testimonial-card p {

        font-size: .95rem;

        line-height: 1.8;

    }

    .stars {

        font-size: 1.25rem;

    }


    /* ------------------------------------------
       INSTAGRAM
    ------------------------------------------ */

    .instagram-container p {

        font-size: .95rem;

    }


    /* ------------------------------------------
       BOOKING
    ------------------------------------------ */

    .contact-cards {

        grid-template-columns: 1fr;

    }

    .hours-grid {

        grid-template-columns: 1fr;

    }

    .booking-map iframe {

        height: 350px;

        min-height: 350px;

    }

    .whatsapp-btn {

        width: 100%;

    }


    /* ------------------------------------------
       CTA
    ------------------------------------------ */

    .cta {

        padding-top: 80px;

        padding-bottom: 80px;

    }

    .cta h2 {

        font-size:
            clamp(2.2rem, 10vw, 3rem);

    }

    .cta p {

        font-size: .95rem;

    }


    /* ------------------------------------------
       FOOTER
    ------------------------------------------ */

    footer {

        padding-left: 20px;

        padding-right: 20px;

    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .footer-brand {

        max-width: none;

    }

    .footer-social-icons {

        align-items: center;

    }

    .footer-bottom {

        line-height: 1.7;

    }

}


/* ==========================================
   EXTRA SMALL — 400px
========================================== */

@media (max-width: 400px) {

    .logo img {

        width: 120px;

    }

    header.scrolled .logo img {

        width: 115px;

    }

    .language-toggle {

        padding: 7px 8px;

    }

    .language-toggle span {

        font-size: .75rem;

    }

    .menu-btn {

        width: 40px;

        height: 40px;

    }

    .hero h1 {

        font-size: 2.65rem;

    }

    .section-title {

        font-size: 2.1rem;

    }

    .filter-btn {

        padding: 8px 12px;

    }

}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .nav-links {

        transition: none;

    }

    .menu-overlay {

        transition: none;

    }

    .lightbox {

        transition: none;

    }

    .testimonial-track {

        transition: none;

    }

}

/* ==========================================
   RTL — KURDISH / ARABIC
========================================== */

html[dir="rtl"] .nav-container {

    direction: rtl;

}

html[dir="rtl"] {

    text-align: right;

}

html[dir="rtl"] body {

    direction: rtl;

}

html[dir="rtl"] .nav-links {

    direction: rtl;

}

html[dir="rtl"] .language-dropdown button {

    text-align: right;

}

html[dir="rtl"] .nav-links a::after {

    left: auto;

    right: 50%;

    transform: translateX(50%);

}

html[dir="rtl"] .language-dropdown {

    right: auto;

    left: 0;

}

html[dir="rtl"] .about-content .section-subtitle,
html[dir="rtl"] .about-content h2 {

    text-align: right;

}

html[dir="rtl"] .footer-links a:hover {

    transform: translateX(-4px);

}

html[dir="rtl"] .booking-info>.section-subtitle,
html[dir="rtl"] .booking-info>.section-title {

    text-align: right;

}

/* ==========================================
   PREVENT HORIZONTAL OVERFLOW
========================================== */

html,
body {

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;

}

/* ==========================================
   RTL HORIZONTAL OVERFLOW PROTECTION
========================================== */

html[dir="rtl"],
html[dir="rtl"] body {

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;

}

/* ==========================================
   RTL HEADER — PREVENT SQUEEZING
========================================== */

html[dir="rtl"] .nav-container {

    display: flex;

    align-items: center;

    gap: 20px;

}

html[dir="rtl"] nav {

    flex: 1;

    min-width: 0;

}

html[dir="rtl"] .language-switcher {

    flex-shrink: 0;

}

html[dir="rtl"] .logo {

    flex-shrink: 0;

}

/* ==========================================
   RTL MOBILE BUTTON OVERFLOW
========================================== */

html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn-secondary,
html[dir="rtl"] .whatsapp-btn {

    max-width: 100%;

    box-sizing: border-box;

    white-space: normal;

    overflow-wrap: anywhere;

}


/* ==========================================
   MOBILE CONTENT WIDTH PROTECTION
========================================== */

.about-content,
.about-content>*,
.about-stats,
.stat {

    max-width: 100%;

    box-sizing: border-box;

}

html[dir="rtl"] .about-content {

    min-width: 0;

    overflow-wrap: break-word;

}


/* ==========================================
   CTA WIDTH PROTECTION
========================================== */

.cta .container {

    width: 100%;

    max-width: 850px;

    min-width: 0;

    box-sizing: border-box;

    overflow-wrap: break-word;

}

html[dir="rtl"] .cta .container {

    min-width: 0;

    overflow-wrap: break-word;

}


/* ==========================================
   TESTIMONIAL WIDTH PROTECTION
========================================== */

.testimonial-slider {

    width: 100%;

    max-width: 850px;

    overflow: hidden;

}

.testimonial-track {

    min-width: 0;

    width: 100%;

}

.testimonial-card {

    min-width: 100%;

    max-width: 100%;

    box-sizing: border-box;

    overflow-wrap: break-word;

}

/* ==========================================
   MOBILE NAVIGATION — FINAL
========================================== */

@media (max-width: 991px) {

    .nav-links {

        position: fixed;

        top: 0;
        right: 0;
        left: auto;

        width: 320px;
        max-width: 85vw;
        height: 100vh;

        margin: 0;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 35px;

        background: rgba(255, 255, 255, .96);

        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);

        box-shadow: -10px 0 40px rgba(0, 0, 0, .12);

        z-index: 1500;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity .45s ease,
            visibility .45s ease;

    }

    .nav-links.active {

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

    }

    .nav-links a {
        color: #222222 !important;
        text-shadow: none;
        font-weight: 600;
    }

     .nav-links a:hover,
    .nav-links a.active {
        color: var(--accent) !important;
    }

}

/* ==========================================
   RTL MOBILE HORIZONTAL OVERFLOW FIX
========================================== */

@media (max-width: 991px) {

    html[dir="rtl"] section:not(.hero),
    html[dir="rtl"] footer {
        overflow-x: clip;
    }

}

/* =========================================
   GALLERY RESPONSIVE GRID
   ========================================= */

/* Desktop */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.gallery-item {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 22px;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .gallery-item {
        border-radius: 16px;
    }

}


/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 420px) {

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .gallery-item {
        border-radius: 14px;
    }

}

/* ==========================================
   TESTIMONIAL RTL SLIDER FIX
========================================== */

/*
   Keep the slider movement LTR so the
   JavaScript translateX() works correctly
   in every language.
*/

.testimonial-track {
    direction: ltr;
}


/*
   Keep the actual testimonial text RTL
   when Kurdish or Arabic is selected.
*/

html[dir="rtl"] .testimonial-card {
    direction: rtl;
    text-align: center;
}