/* Final mobile polish layer shared by public pages and dashboards. */
.panel-mobile-nav {
    display: none;
}

@media (max-width: 760px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    :where(.container) {
        width: 100%;
        max-width: 100%;
        padding-inline: 18px;
    }

    :where(img, video, iframe, canvas, svg) {
        max-width: 100%;
    }

    :where(.btn, .btn-primary, .btn-outline, .btn-muted, button, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        min-height: 44px;
    }

    :where(.btn, .btn-primary, .btn-outline, .btn-muted) {
        justify-content: center;
        max-width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.35;
    }

    body:not(.panel-body) :where(.topbar) {
        display: none;
    }

    body:not(.panel-body) :where(.navbar) {
        position: sticky;
        top: 0;
        z-index: 280;
        border-bottom: 1px solid rgba(226, 232, 240, .9);
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(16px);
    }

    body:not(.panel-body) :where(.nav-inner) {
        min-height: 66px;
        gap: 10px;
        padding-block: 8px;
    }

    body:not(.panel-body) :where(.platform-logo--header) {
        max-width: 148px;
        height: auto;
    }

    body:not(.panel-body) :where(.nav-links) {
        max-height: calc(100dvh - 78px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.panel-body) :where(.nav-links a, .dropdown-toggle, .account-trigger, .cart-link) {
        min-height: 46px;
    }

    body:not(.panel-body) :where(.hero, .page-hero, .modern-courses-hero, .modern-contact-hero, .modern-interior-hero) {
        min-height: auto;
        padding-block: 48px 42px;
    }

    body:not(.panel-body) :where(.hero, .page-hero, .courses-hero, .modern-courses-hero, .modern-contact-hero, .modern-interior-hero) h1 {
        font-size: 2.12rem;
        line-height: 1.18;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    body:not(.panel-body) :where(.hero, .page-hero, .modern-courses-hero, .modern-contact-hero, .modern-interior-hero) p {
        font-size: 1rem;
        line-height: 1.85;
        overflow-wrap: anywhere;
    }

    body:not(.panel-body) :where(.hero-actions, .section-actions, .modern-courses-hero-actions, .modern-contact-hero-actions, .modern-instructor-hero-actions, .modern-course-actions) {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 10px;
    }

    body:not(.panel-body) :where(.hero-actions .btn, .section-actions .btn, .modern-courses-hero-actions .btn, .modern-contact-hero-actions .btn, .modern-instructor-hero-actions .btn, .modern-course-actions .btn, .modern-course-actions form) {
        width: 100%;
    }

    body:not(.panel-body) :where(.card, .service-card, .course-card, .modern-course-card, .modern-testimonial-card, .modern-service-summary-card, .modern-contact-form-card, .modern-contact-details-card) {
        border-radius: 8px;
    }

    body:not(.panel-body) :where(.services-grid, .courses-grid, .modern-course-grid, .modern-service-related-grid, .modern-testimonials-grid, .modern-about-pillar-grid, .modern-contact-layout, .modern-contact-process-grid) {
        grid-template-columns: 1fr;
    }

    body:not(.panel-body) :where(.modern-catalog-filter, .admin-filter-form, .toolbar, .filter-form) {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body:not(.panel-body) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        width: 100%;
        font-size: 1rem;
    }

    body:not(.panel-body) :where(table) {
        min-width: 680px;
    }

    body:not(.panel-body) :where(.table-responsive, .admin-table-wrap, .orders-table-wrap) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.panel-body) .chatbot-widget {
        inset-inline: 14px;
        bottom: 14px;
        z-index: 260;
    }

    body:not(.panel-body) .chatbot-toggle {
        width: 54px;
        height: 54px;
        padding: 0;
        border-radius: 999px;
    }

    body:not(.panel-body) .chatbot-toggle span {
        display: none;
    }

    body:not(.panel-body) .chatbot-panel {
        position: fixed;
        inset-inline: 12px;
        right: 12px;
        left: 12px;
        bottom: 78px;
        width: auto;
        max-height: min(620px, calc(100dvh - 102px));
        border-radius: 8px;
    }

    body:not(.panel-body) .back-to-top {
        right: auto;
        left: 14px;
        bottom: 18px;
        width: 46px;
        height: 46px;
    }

    body:not(.panel-body) footer.site-footer {
        padding-bottom: 28px;
    }

    body:not(.panel-body) footer.site-footer :where(.site-footer-lead, .site-footer-content, .site-footer-bottom) {
        text-align: start;
    }

    .panel-body .panel-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 10px 12px !important;
        border-radius: 0 0 14px 14px !important;
    }

    .panel-body .panel-title {
        min-width: 0;
    }

    .panel-body .panel-title h1 {
        font-size: 1.05rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .panel-body .panel-title .eyebrow,
    .panel-body .panel-command,
    .panel-body .panel-topnav {
        display: none !important;
    }

    .panel-body .panel-actions {
        justify-self: end;
    }

    .panel-body .panel-notification-panel,
    .panel-body .panel-user-menu-panel,
    .panel-body .panel-dropdown-menu {
        position: fixed !important;
        inset-inline: 12px !important;
        top: 72px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-height: calc(100dvh - 92px);
        overflow-y: auto;
        border-radius: 18px !important;
    }

    .panel-body .panel-notification-head {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .panel-body .panel-notification-list article {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 13px 14px;
    }

    .panel-body .panel-notification-item-icon {
        width: 40px;
        height: 40px;
    }

    .panel-body .panel-notification-item-actions {
        flex-wrap: wrap;
    }

    .panel-body .panel-content {
        padding-inline: 14px !important;
        padding-top: 16px !important;
    }

    .panel-body :where(.panel-page-actions, .admin-form-footer, .dashboard-actions, .learning-action-buttons) {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-body :where(.panel-page-actions .btn, .admin-form-footer .btn, .dashboard-actions .btn, .learning-action-buttons .btn) {
        width: 100%;
    }

    .panel-body :where(.admin-table-card, .table-card, .panel-table-card) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        touch-action: pan-x pan-y;
    }

    .panel-body :where(table) {
        min-width: 720px;
    }

    .panel-body:not(.admin-panel-body) {
        --panel-mobile-nav-height: 68px;
        padding-bottom: calc(var(--panel-mobile-nav-height) + env(safe-area-inset-bottom) + 12px);
    }

    .panel-body:not(.admin-panel-body) .panel-content {
        padding-bottom: calc(var(--panel-mobile-nav-height) + 24px) !important;
    }

    .panel-body:not(.admin-panel-body) .panel-notification-panel,
    .panel-body:not(.admin-panel-body) .panel-user-menu-panel,
    .panel-body:not(.admin-panel-body) .panel-dropdown-menu {
        bottom: calc(var(--panel-mobile-nav-height) + env(safe-area-inset-bottom) + 14px) !important;
        max-height: calc(100dvh - 164px);
    }

    .panel-mobile-nav {
        position: fixed;
        inset-inline: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        z-index: 340;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-height: var(--panel-mobile-nav-height);
        padding: 6px;
        border: 1px solid rgba(203, 213, 225, .92);
        border-radius: 18px;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 16px 42px rgba(15, 23, 42, .18);
        backdrop-filter: blur(18px);
        transition: opacity .18s ease, transform .18s ease;
    }

    .panel-body #panel-nav-toggle:checked ~ .panel-mobile-nav {
        opacity: 0;
        pointer-events: none;
        transform: translateY(18px);
    }

    .panel-mobile-nav a {
        display: grid;
        place-items: center;
        align-content: center;
        gap: 3px;
        min-width: 0;
        min-height: 54px;
        padding: 4px 2px;
        border-radius: 13px;
        color: #64748b;
        -webkit-tap-highlight-color: transparent;
    }

    .panel-mobile-nav a.is-active {
        color: #064cca;
        background: #eaf2ff;
    }

    .panel-mobile-nav span {
        display: grid;
        width: 23px;
        height: 23px;
        place-items: center;
    }

    .panel-mobile-nav svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        stroke-width: 1.8;
    }

    .panel-mobile-nav strong {
        max-width: 100%;
        overflow: hidden;
        font-size: .66rem;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Unified small-screen safeguards for every public and panel page. */
@media (max-width: 760px) {
    :where(main, section, article, aside, form, fieldset, header, footer, nav, div) {
        min-width: 0;
    }

    :where(h1, h2, h3, h4, p, a, strong, small, label, td, th) {
        overflow-wrap: anywhere;
    }

    :where(dialog) {
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        margin: auto;
    }

    body:not(.panel-body) :where(.page-section, .content-section, .modern-section, .section) {
        padding-block: 42px;
    }

    body:not(.panel-body) :where(
        .modern-cart-layout,
        .modern-consultation-layout,
        .modern-contact-layout,
        .modern-course-layout,
        .modern-instructor-layout,
        .checkout-layout,
        .order-detail-layout,
        .payment-status-layout,
        .modern-about-story-grid,
        .modern-testimonials-trust-grid,
        .quiz-exam-layout
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:not(.panel-body) :where(
        .modern-contact-form,
        .consultation-fields-grid,
        .consultation-type-grid,
        .consultation-channel-options,
        .form-grid,
        .checkout-form-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:not(.panel-body) :where(
        .modern-cart-item,
        .modern-cart-empty,
        .order-item,
        .checkout-item,
        .quiz-exam-header,
        .quiz-result-panel
    ) {
        max-width: 100%;
    }

    body:not(.panel-body) :where(.modern-cart-actions, .checkout-actions, .order-actions, .auth-actions) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        gap: 9px;
    }

    body:not(.panel-body) :where(.modern-cart-actions, .checkout-actions, .order-actions, .auth-actions) :where(a, button, form) {
        width: 100%;
    }

    body:not(.panel-body) :where(.card, .checkout-panel, .cart-summary, .order-status-panel, .modern-contact-form-card, .modern-contact-details-card) {
        max-width: 100%;
    }

    .panel-body :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        font-size: 1rem;
    }

    .panel-body :where(.panel-page, .dashboard-page, .admin-page, .panel-card, .admin-form-section, .dashboard-card) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .panel-body :where(.dashboard-section-tabs, .panel-tabs, .admin-tabs) {
        display: flex;
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .panel-body :where(.dashboard-section-tabs, .panel-tabs, .admin-tabs)::-webkit-scrollbar {
        display: none;
    }

    .panel-body :where(.dashboard-section-tab, .panel-tab, .admin-tab) {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .panel-body :where(.admin-form-grid, .form-grid, .modal-form-grid, .settings-grid, .profile-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .panel-body :where(.admin-form-grid, .form-grid, .modal-form-grid, .settings-grid, .profile-grid) > .wide {
        grid-column: 1 !important;
    }
}

@media (max-width: 480px) {
    :where(.container) {
        padding-inline: 14px;
    }

    body:not(.panel-body) :where(.hero, .page-hero, .modern-courses-hero, .modern-contact-hero, .modern-interior-hero) {
        padding-block: 38px 34px;
    }

    body:not(.panel-body) :where(.hero, .page-hero, .courses-hero, .modern-courses-hero, .modern-contact-hero, .modern-interior-hero) h1 {
        font-size: 1.82rem;
        line-height: 1.22;
    }

    body:not(.panel-body) :where(.section-title h2, .modern-service-copy h2, .modern-service-head h2, .modern-catalog-heading h2, .modern-contact-heading h2) {
        font-size: 1.55rem;
        line-height: 1.3;
    }

    body:not(.panel-body) .chatbot-panel {
        inset-inline: 8px;
        right: 8px;
        left: 8px;
        bottom: 74px;
    }

    body:not(.panel-body) :where(.card, .checkout-panel, .cart-summary, .modern-contact-form-card, .modern-contact-details-card) {
        border-radius: 12px;
    }

    body:not(.panel-body) :where(.modern-cart-item, .modern-cart-empty) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:not(.panel-body) :where(.modern-cart-item img, .checkout-item img) {
        width: 100%;
        max-height: 210px;
        object-fit: cover;
    }
}