/* Responsive safeguards shared by all customer-facing pages. */
html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
    overflow-x: clip;
}

img,
iframe,
svg {
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
    font: inherit;
}

.container,
.nav-container,
.hero-content,
.profile-grid,
.profile-sidebar,
.profile-content,
.appointment-container,
.appointment-form-section,
.appointment-summary,
.service-detail-grid,
.service-info-section,
.services-grid,
.contact-grid {
    min-width: 0;
}

.info-item,
.service-name,
.service-description,
.service-detail-name,
.service-detail-description,
.summary-service-item,
.appointment-item,
.invoice-item {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    :root {
        --mobile-header-height: 64px;
        --mobile-nav-height: 66px;
    }

    .container {
        width: 100%;
        padding-inline: clamp(16px, 4vw, 24px);
    }

    .navbar {
        min-height: calc(var(--mobile-header-height) + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 0 0;
    }

    .nav-container {
        width: 100%;
        min-height: var(--mobile-header-height);
        padding: 0 16px;
        gap: 10px;
    }

    .nav-logo {
        flex: 0 1 auto;
        min-width: 0;
        gap: 8px;
        font-size: 20px;
        line-height: 1;
        text-decoration: none;
    }

    .nav-logo img {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        object-fit: cover;
        border-radius: 50%;
    }

    .nav-logo span {
        white-space: nowrap;
    }

    .nav-right {
        flex: 0 0 auto;
        margin-left: auto;
        gap: 7px;
    }

    .theme-toggle-btn,
    .mobile-menu-btn {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .mobile-menu-btn {
        display: flex;
        color: var(--white);
    }

    .lang-btn,
    .user-btn {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        justify-content: center;
        border-radius: 19px;
    }

    .user-btn > .fa-chevron-down {
        display: none;
    }

    .nav-menu {
        position: fixed;
        top: calc(var(--mobile-header-height) + env(safe-area-inset-top) + 8px);
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100dvh - var(--mobile-header-height) - env(safe-area-inset-top) - 24px);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(212, 175, 55, 0.25);
        border-radius: 16px;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.2);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px) scale(0.98);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
        z-index: 1002;
    }

    .nav-menu.show {
        left: 12px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .nav-menu .nav-link,
    .navbar.scrolled .nav-menu .nav-link,
    .is-subpage .nav-menu .nav-link,
    body.dark-theme .nav-menu .nav-link {
        width: 100%;
        padding: 13px 14px;
        color: #232725 !important;
        border-radius: 10px;
        font-size: 14px;
    }

    .nav-menu .nav-link:hover,
    .nav-menu .nav-link:focus-visible {
        color: var(--primary-green) !important;
        background: #f5f5f0;
    }

    .nav-menu .nav-link::after {
        display: none;
    }

    .lang-dropdown,
    .user-dropdown {
        max-width: calc(100vw - 24px);
        z-index: 1003;
    }

    body.menu-open {
        overflow: hidden;
    }

    .mobile-bottom-nav {
        display: flex;
        height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
        padding: 0 8px env(safe-area-inset-bottom);
    }

    body {
        padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    }

    .mobile-nav-item {
        min-width: 0;
        min-height: 48px;
    }

    .mobile-nav-item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero-section {
        height: auto;
        min-height: 100svh;
    }

    .hero-video {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
    }

    .hero-content {
        width: 100%;
        padding: calc(var(--mobile-header-height) + env(safe-area-inset-top) + 34px) 16px calc(var(--mobile-nav-height) + 28px);
    }

    .hero-title {
        margin-bottom: 26px;
        font-size: clamp(30px, 8vw, 42px);
        line-height: 1.22;
        letter-spacing: 0.5px;
    }

    .hero-buttons {
        width: min(100%, 500px);
        margin-inline: auto;
        gap: 12px;
    }

    .hero-buttons .btn {
        min-height: 50px;
        padding: 12px 22px;
        justify-content: center;
    }

    .hero-badges {
        width: min(100%, 560px);
        margin: 22px auto 0;
        gap: 8px;
    }

    .glass-badge {
        min-width: 0;
        padding: 7px 12px;
        font-size: 12px;
    }

    .section-title {
        margin-bottom: 34px;
        font-size: clamp(28px, 7vw, 36px);
        line-height: 1.25;
    }

    .services-section,
    .contact-section {
        padding: 64px 0;
    }

    .why-us-section,
    .testimonials-section {
        padding: 56px 0;
    }

    .services-grid,
    .why-us-grid,
    .testimonials-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
        gap: 18px;
    }

    .smart-filters,
    .filter-categories {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        margin-inline: -16px;
        padding: 2px 16px 12px;
    }

    .smart-filters::-webkit-scrollbar,
    .filter-categories::-webkit-scrollbar {
        display: none;
    }

    .filter-chip,
    .filter-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .map-column iframe {
        display: block;
        height: min(70vw, 360px);
        min-height: 260px;
    }

    .location-card,
    .about-content {
        padding: 24px 18px;
    }

    .info-item {
        gap: 10px;
    }

    .breadcrumb-section {
        padding-top: calc(var(--mobile-header-height) + env(safe-area-inset-top) + 20px);
    }

    .breadcrumb-section .container,
    .breadcrumb {
        flex-wrap: wrap;
    }

    .services-header {
        padding: calc(var(--mobile-header-height) + env(safe-area-inset-top) + 50px) 0 48px;
    }

    .services-header h1 {
        font-size: clamp(29px, 7vw, 38px);
        line-height: 1.2;
    }

    .services-header p {
        font-size: 15px;
    }

    .services-filter-section,
    .services-grid-section {
        padding: 32px 0 50px;
    }

    .filter-controls {
        align-items: stretch;
    }

    .search-box,
    #sortSelect {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .search-box input {
        min-width: 0;
    }

    .service-detail-section {
        padding: 34px 0 48px;
    }

    .service-detail-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .service-main-image {
        height: auto;
        max-height: 440px;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .service-info-section {
        padding: 26px 22px;
    }

    .service-detail-name {
        font-size: clamp(28px, 7vw, 34px);
    }

    .service-detail-price {
        font-size: clamp(24px, 6vw, 30px);
    }

    .service-actions-detail {
        flex-direction: column;
    }

    .service-actions-detail > * {
        width: 100%;
    }

    .related-services-section,
    .related-services {
        margin-top: 0;
        padding: 48px 0;
    }

    .appointment-section {
        padding: calc(var(--mobile-header-height) + env(safe-area-inset-top) + 26px) 0 48px;
    }

    .appointment-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .appointment-form-section,
    .appointment-summary {
        padding: 24px;
    }

    .appointment-summary {
        position: static;
    }

    .booking-wizard-steps {
        width: 100%;
        padding: 13px 14px;
        border-radius: 22px;
    }

    .wizard-line {
        min-width: 12px;
        margin-inline: 6px;
    }

    .wizard-label {
        font-size: 11px;
        text-align: center;
    }

    .selected-services,
    .selected-service-tag,
    .summary-service-item {
        max-width: 100%;
    }

    .selected-service-tag,
    .summary-service-item {
        flex-wrap: wrap;
        gap: 8px;
    }

    .login-required-modal,
    .invoice-details-modal,
    .quick-view-modal {
        padding: 16px;
    }

    .login-required-modal .modal-content,
    .invoice-details-modal .modal-content,
    .quick-view-content {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        padding: 24px 18px;
    }

    .login-required-modal .modal-content > div {
        flex-wrap: wrap;
    }

    .login-required-modal .modal-content > div .btn {
        flex: 1 1 180px;
        justify-content: center;
    }

    .profile-container {
        width: 100%;
        margin: calc(var(--mobile-header-height) + env(safe-area-inset-top) + 26px) auto 36px;
        padding: 0 16px;
    }

    .profile-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .profile-sidebar,
    .profile-content {
        padding: 22px 18px;
    }

    .profile-sidebar {
        position: static;
    }

    .avatar-wrapper {
        width: 112px;
        height: 112px;
    }

    .profile-menu {
        display: flex;
        gap: 8px;
        margin: 0 -4px;
        padding: 2px 4px 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .profile-menu::-webkit-scrollbar {
        display: none;
    }

    .profile-menu li {
        flex: 0 0 auto;
        margin: 0;
    }

    .profile-menu a {
        white-space: nowrap;
        border: 1px solid #e8e8e3;
    }

    .profile-content .section-title {
        align-items: flex-start;
        font-size: 22px;
    }

    .appointment-header,
    .invoice-header,
    .invoice-info,
    .btn-group,
    .invoice-actions {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .detail-item {
        flex-wrap: wrap;
        gap: 6px 12px;
    }

    .detail-name {
        flex-basis: 100%;
    }

    .chat-float,
    #chatButton {
        right: 16px;
        bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 16px);
    }

    .music-float {
        left: 16px;
        bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 16px);
    }

    .chat-box,
    #chatBox {
        top: env(safe-area-inset-top);
        right: 0;
        bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
        left: 0;
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        border-radius: 0;
    }

    .quick-view-grid {
        grid-template-columns: 1fr;
    }

    .quick-view-img-box img {
        min-height: 0;
        max-height: 260px;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 640px) {
    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-badges {
        align-items: stretch;
        flex-direction: column;
    }

    .glass-badge {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
    }

    .services-grid,
    .why-us-grid,
    .testimonials-grid,
    .related-services .services-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-content,
    .why-card,
    .testimonial-card {
        padding: 20px 18px;
    }

    .service-meta-info {
        flex-direction: column;
        gap: 12px;
    }

    .form-actions,
    .btn-group {
        flex-direction: column;
    }

    .form-actions .btn,
    .btn-group .btn,
    .invoice-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding-inline: 12px;
        gap: 6px;
    }

    .nav-right {
        gap: 5px;
    }

    .lang-btn,
    .user-btn {
        padding-inline: 9px;
    }

    .lang-btn > .fa-globe,
    .lang-btn > .fa-chevron-down {
        display: none;
    }

    .appointment-form-section,
    .appointment-summary,
    .profile-sidebar,
    .profile-content {
        padding: 20px 16px;
    }

    .page-title {
        font-size: clamp(28px, 9vw, 34px);
        line-height: 1.2;
    }

    .step-title {
        align-items: flex-start;
        gap: 10px;
        font-size: 20px;
    }

    .wizard-circle {
        width: 36px;
        height: 36px;
    }

    .wizard-label {
        font-size: 10px;
    }
}

@media (max-width: 350px) {
    .filter-container {
        align-items: stretch;
    }

    .filter-controls {
        width: 100%;
        flex-direction: column;
    }

    .nav-logo span {
        display: none;
    }

    .mobile-nav-item {
        font-size: 10px;
    }

    .mobile-nav-icon-circle {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
    .hero-section {
        min-height: 620px;
    }

    .hero-content {
        padding-top: calc(var(--mobile-header-height) + 28px);
    }
}