/*
 * Elkateb Online — Mobile-only responsive fix
 * This file affects screens up to 767.98px only.
 * Desktop and tablet layouts above this width remain unchanged.
 */

@media (max-width: 767.98px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip !important;
    }

    body > * {
        max-width: 100%;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    img,
    svg,
    video,
    canvas,
    iframe {
        max-width: 100%;
        height: auto;
    }

    main,
    section,
    header,
    footer,
    .container,
    .container-fluid,
    .row,
    [class*="col-"] {
        min-width: 0;
        max-width: 100%;
    }

    .container,
    .container-fluid {
        width: 100%;
        padding-inline: 16px !important;
    }

    .row {
        --bs-gutter-x: 1rem;
    }

    /* Header and mobile navigation */
    .navbar,
    .site-header,
    .main-header {
        width: 100%;
        max-width: 100%;
    }

    .navbar .container,
    .site-header .container,
    .main-header .container {
        padding-inline: 16px !important;
    }

    .navbar-brand,
    .brand-wrap {
        min-width: 0;
        max-width: calc(100vw - 96px);
    }

    .offcanvas,
    .mobile-menu,
    .navbar-collapse {
        max-width: 88vw;
    }

    /* Homepage hero */
    .hero-v4,
    .hero-section,
    .home-hero {
        width: 100%;
        max-width: 100%;
        overflow: hidden !important;
        padding-top: 32px !important;
        padding-bottom: 24px !important;
    }

    .hero-v4 .row,
    .hero-section .row,
    .home-hero .row {
        min-height: 0 !important;
        margin-inline: 0 !important;
        flex-direction: column !important;
    }

    .hero-v4 [class*="col-"],
    .hero-section [class*="col-"],
    .home-hero [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        padding-inline: 0 !important;
    }

    .hero-v4 h1,
    .hero-section h1,
    .home-hero h1 {
        max-width: 100% !important;
        margin-inline: 0 !important;
        font-size: clamp(2rem, 10vw, 2.75rem) !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere;
        word-break: normal;
        text-wrap: balance;
    }

    .hero-copy,
    .hero-v4 p,
    .hero-section p,
    .home-hero p {
        max-width: 100% !important;
        font-size: 1rem !important;
        line-height: 1.9 !important;
        overflow-wrap: anywhere;
    }

    .hero-actions,
    .hero-cta,
    .hero-buttons,
    .hero-v4 .hero-actions,
    .hero-section .hero-actions {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .hero-actions .btn,
    .hero-cta .btn,
    .hero-buttons .btn,
    .hero-v4 .btn,
    .hero-section .btn {
        width: 100%;
        max-width: 100%;
        margin-inline: 0 !important;
        white-space: normal;
    }

    .hero-stats,
    .hero-features,
    .hero-points,
    .trust-points {
        width: 100%;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    /* The decorative CV preview in the hero */
    .hero-cv-stage,
    .hero-preview-stage,
    .cv-stage,
    .hero-visual {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 24px auto 0 !important;
        padding: 0 8px 12px !important;
        overflow: hidden !important;
    }

    .hero-cv-stage > *,
    .hero-preview-stage > *,
    .cv-stage > *,
    .hero-visual > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .hero-cv-card,
    .hero-preview-card,
    .cv-preview-card,
    .showcase-preview,
    .preview-mockup {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 360px !important;
        min-width: 0 !important;
        margin-inline: auto !important;
    }

    .hero-cv-stage .cv-sheet,
    .hero-cv-stage .a4-preview,
    .hero-preview-stage .cv-sheet,
    .hero-preview-stage .a4-preview {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 210 / 297;
        overflow: hidden !important;
    }

    /* CV builder and wizard */
    .builder-shell,
    .builder-wrapper,
    .wizard-shell,
    .wizard-wrapper,
    .resume-builder,
    .builder-card,
    .wizard-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }

    .builder-content,
    .builder-main,
    .wizard-content,
    .wizard-main,
    .step-content,
    .form-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-inline: 12px !important;
    }

    .builder-grid,
    .wizard-grid,
    .template-grid,
    .templates-grid,
    .form-grid,
    .fields-grid,
    .experience-grid,
    .education-grid,
    .payment-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .template-card,
    .cv-template-card,
    .form-card,
    .repeatable-card,
    .experience-card,
    .education-card,
    .payment-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
    }

    .form-control,
    .form-select,
    textarea,
    input,
    select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .preview-column,
    .builder-preview,
    .live-preview,
    .preview-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .preview-column .cv-sheet,
    .builder-preview .cv-sheet,
    .live-preview .cv-sheet,
    .preview-panel .cv-sheet {
        max-width: 100% !important;
        transform-origin: top center !important;
    }

    /* Steps and action buttons */
    .wizard-steps,
    .steps-bar,
    .builder-steps {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .wizard-steps::-webkit-scrollbar,
    .steps-bar::-webkit-scrollbar,
    .builder-steps::-webkit-scrollbar {
        display: none;
    }

    .wizard-actions,
    .step-actions,
    .builder-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .wizard-actions .btn,
    .step-actions .btn,
    .builder-actions .btn {
        width: 100%;
        max-width: 100%;
    }

    /* Text safety */
    h1,
    h2,
    h3,
    h4,
    h5,
    p,
    span,
    a,
    label,
    button {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Decorative shapes must never widen the page */
    .glow,
    .shape,
    .blob,
    .orb,
    .decor,
    [class*="gradient-orb"],
    [class*="floating-shape"] {
        max-width: 100vw !important;
        pointer-events: none;
    }
}

@supports not (overflow: clip) {
    @media (max-width: 767.98px) {
        html,
        body {
            overflow-x: hidden !important;
        }
    }
}