/**
 * JobCV – Mobile and tablet styles
 * Premium, professional experience across all devices
 */

/* ========== Premium mobile design system ========== */
@media (max-width: 900px) {
    :root {
        --mobile-space-xs: 0.5rem;
        --mobile-space-sm: 0.75rem;
        --mobile-space-md: 1rem;
        --mobile-space-lg: 1.25rem;
        --mobile-space-xl: 1.5rem;
        --mobile-space-2xl: 2rem;
        --mobile-radius-sm: 10px;
        --mobile-radius-md: 12px;
        --mobile-radius-lg: 16px;
        --mobile-radius-xl: 20px;
        --mobile-shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
        --mobile-shadow-elevated: 0 4px 6px -1px rgba(0,0,0,0.07), 0 10px 24px -4px rgba(0,0,0,0.08);
        --mobile-shadow-header: 0 1px 3px rgba(0,0,0,0.06);
        --mobile-touch: 44px;
        --mobile-input-height: 48px;
    }
}

/* ========== Global mobile foundation ========== */
@media (max-width: 900px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        overflow-x: hidden;
        -webkit-tap-highlight-color: transparent;
        font-size: 16px;
        line-height: 1.5;
    }
    /* Minimum touch target 44px for interactive elements */
    a.btn, button.btn, .btn-primary, .btn-secondary, .search-button,
    .header-dots-item, .header-dots-dropdown-close, .header-dots-btn,
    .category-pill, .job-card .btn-block, .action-btn, .quick-action-btn {
        min-height: 44px !important;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    input[type="text"], input[type="email"], input[type="password"], input[type="search"],
    select.form-select, .form-input, .search-input {
        min-height: 48px !important;
        font-size: 16px !important; /* prevents zoom on focus iOS */
    }
    select.form-select, .form-select, .hero-category-select {
        padding: 0.75rem 1rem !important;
        min-height: 48px !important;
    }
}

@media (max-width: 900px) {
    /* Reserve space for fixed header so content doesn’t sit under it */
    #page {
        padding-top: 56px !important;
    }
    body.admin-bar #page {
        padding-top: calc(56px + 46px) !important;
    }
    .site-header,
    #masthead.site-header,
    header.site-header {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Header bar – fixed at top, always visible, smooth premium animation
       Note: no transform on header so position:fixed dropdowns escape to viewport (three-dot menu). */
    .site-header,
    #masthead.site-header,
    header.site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 56px !important;
        padding: 0 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        background: #fff !important;
        z-index: 1000 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body.admin-bar .site-header,
    body.admin-bar #masthead.site-header {
        top: 46px !important;
    }
    /* Scrolled state: elevated look with smooth transition */
    .site-header.scrolled,
    #masthead.site-header.scrolled {
        box-shadow: 0 4px 14px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
        background: rgba(255,255,255,0.97) !important;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
    /* Never hide header on mobile – override any .hide behavior (no transform so dropdowns work) */
    .site-header.hide,
    #masthead.site-header.hide,
    header.site-header.hide {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .header-container {
        min-height: 56px;
        height: 56px;
        padding: 0 0.75rem;
        padding-top: 0;
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }

    .site-branding {
        flex-shrink: 0;
        min-width: 0;
        background: transparent !important;
    }

    .site-branding .site-logo img,
    .site-logo img.site-logo-img {
        height: 40px !important;
        max-height: 44px !important;
        width: auto !important;
        display: block;
        background: transparent !important;
    }

    /* Hide only desktop-specific language block if any; show compact lang next to bell */
    .header-container .header-lang-desktop {
        display: none !important;
    }

    /* Mobile: hide language from header; it appears in the three-dot dropdown */
    .header-container .header-lang-right {
        display: none !important;
    }

    /* Mobile: hide bell and messenger buttons; notifications open from three-dot menu */
    .header-container .header-notification-menu .notification-bell,
    .header-container .header-messenger-btn {
        display: none !important;
    }
    /* Keep notification menu in DOM so dropdown can open from dots menu; no layout space */
    .header-container .header-notification-menu {
        width: 0;
        min-width: 0;
        overflow: visible;
        position: relative;
    }
    /* Notification dropdown on mobile: full-width panel below header; ensure visible when open */
    .header-container #header-notification-dropdown {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(70vh, 400px) !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(99, 102, 241, 0.08) !important;
        z-index: 100002;
        pointer-events: auto;
    }
    .header-container #header-notification-dropdown.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .header-container #header-notification-dropdown .notification-dropdown-list {
        max-height: min(280px, 55vh) !important;
    }
    /* Backdrop when notification panel is open on mobile (below dropdown) */
    .header-notification-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 100001;
        opacity: 0;
        transition: opacity 0.25s ease;
    }
    .header-notification-backdrop.is-visible {
        display: block !important;
        opacity: 1;
        pointer-events: auto;
    }

    /* Header actions */
    .header-container .header-actions {
        display: flex;
        align-items: center;
        gap: 0.2rem;
        margin-left: 0;
        flex-shrink: 0;
        min-width: 0;
    }

    /* Three-dot menu button */
    .header-dots-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        transition: background 0.2s ease, transform 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .header-dots-btn:focus-visible {
        background: rgba(99, 102, 241, 0.08);
        outline: none;
    }
    .header-dots-btn:active {
        background: rgba(99, 102, 241, 0.08);
    }

    .header-dots-btn .header-dot {
        width: 5px;
        height: 5px;
        background: var(--primary-color, #6366f1);
    }

    /* Three-dot button: alert state when there are unread notifications/messages */
    .header-dots-btn {
        position: relative;
    }
    .header-dots-btn .header-dots-alert-badge {
        display: flex !important;
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 0.7rem;
        font-weight: 700;
        color: #fff;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        border-radius: 9px;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45);
        border: 2px solid #fff;
    }
    .header-dots-btn.has-alerts {
        background: rgba(239, 68, 68, 0.06);
    }
    .header-dots-btn.has-alerts .header-dot {
        background: #dc2626;
    }

    /* Mobile-only dropdown items: Notifications & Messages at top of menu */
    .header-dots-item-mobile-only,
    .header-dots-divider-mobile-only {
        display: flex !important;
    }
    .header-dots-divider-mobile-only {
        display: block !important;
        height: 1px;
        background: #e5e7eb;
        margin: 0.25rem 1rem;
        padding: 0;
        min-height: 0;
    }
    .header-dots-item-mobile-only {
        align-items: center;
        gap: 12px;
        padding: 0.75rem 1rem;
    }
    .header-dots-item-mobile-only .header-dots-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color, #6366f1);
        flex-shrink: 0;
    }
    .header-dots-item-mobile-only .header-dots-item-text {
        flex: 1;
        font-weight: 600;
    }
    .header-dots-item-mobile-only .header-dots-badge {
        flex-shrink: 0;
    }

    /* When three-dot or notification dropdown is open: lock horizontal scroll – vertical only */
    html.header-dots-menu-open,
    html.header-dropdown-open {
        overflow-x: hidden !important;
        touch-action: pan-y;
    }
    body.header-dots-menu-open,
    body.header-dropdown-open {
        overflow-x: hidden !important;
        touch-action: pan-y;
        max-width: 100vw;
    }
    body.header-dots-menu-open #page,
    body.header-dropdown-open #page,
    body.header-dots-menu-open .site,
    body.header-dropdown-open .site {
        overflow-x: hidden !important;
        max-width: 100%;
    }

    /* Three-dot dropdown */
    #header-user-menu .header-dots-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        min-width: 0;
        width: 100%;
        max-height: 78vh;
        border-radius: var(--mobile-radius-xl, 20px) var(--mobile-radius-xl, 20px) 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(0,0,0,0.06);
        border-bottom: none;
        padding: 0.5rem 0 max(1rem, env(safe-area-inset-bottom));
        padding-top: 0.5rem;
        background: #fff;
        z-index: 1100;
        transform: translateY(100%);
        transform-origin: bottom;
        opacity: 0;
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                    opacity 0.25s ease,
                    visibility 0.35s,
                    box-shadow 0.35s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #header-user-menu .header-dots-dropdown.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.15);
    }

    #header-user-menu .header-dots-dropdown::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #e2e8f0;
        margin: 0 auto 0.5rem;
    }

    /* Mobile: close button at top of dropdown */
    .header-dots-dropdown-close-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 1rem 0.75rem;
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        flex-shrink: 0;
    }
    .header-dots-dropdown-title {
        font-size: 1.125rem;
        font-weight: 700;
        color: #0f172a;
    }
    .header-dots-dropdown-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: #f1f5f9;
        color: #475569;
        border-radius: 12px;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease, color 0.2s ease;
    }
    .header-dots-dropdown-close:focus,
    .header-dots-dropdown-close:active {
        background: #e2e8f0;
        color: #1e293b;
    }

    .header-dots-lang-wrap {
        padding: 0.5rem 1rem 0.75rem;
    }

    .header-dots-lang-label {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        margin-bottom: 0.5rem;
    }

    .header-dots-lang-wrap .language-switcher-dropdown {
        width: 100%;
    }

    .header-dots-lang-wrap .lang-dropdown-btn {
        width: 100%;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        min-height: 48px;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        background: #fff;
        font-size: 1rem;
        font-weight: 500;
    }

    .header-dots-item {
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
        font-weight: 500;
        min-height: 48px;
        display: flex;
        align-items: center;
        border-radius: 12px;
        margin: 0 0.5rem;
    }

    .header-dots-divider {
        margin: 0.5rem 1rem;
    }

    .header-dots-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        z-index: 1099;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .header-dots-dropdown.is-open ~ .header-dots-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Notification bell dropdown */
    /* Notification: same look and behavior as desktop (absolute dropdown, no overrides on bell) */
    .header-notification-menu {
        position: relative;
        z-index: 100;
    }
    .header-notification-menu .header-notification-dropdown {
        max-width: min(360px, calc(100vw - 1rem));
        max-height: min(380px, 70vh);
    }
    .header-notification-menu .header-notification-dropdown .notification-dropdown-list {
        max-height: min(300px, 50vh);
    }
    .notification-bell {
        -webkit-tap-highlight-color: transparent;
    }

    /* Mobile: hide hamburger; nav is in three-dot menu only */
    .mobile-menu-toggle {
        display: none !important;
    }
    /* Nav drawer and overlay hidden when hamburger removed; keep for any JS that might reference */
    .header-nav-wrap {
        display: none !important;
    }
    .mobile-drawer-overlay {
        display: none !important;
    }
    /* Three-dot menu at far right (where hamburger was): order so dots are rightmost */
    .header-actions {
        margin-left: auto;
    }
    .header-user-menu,
    .header-user-menu-guest {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        gap: 0.25rem;
    }
    .header-user-menu .header-dots-btn,
    .header-user-menu-guest .header-dots-btn {
        margin-left: 0;
    }
    .header-user-menu .header-avatar-link {
        order: -1;
    }
    /* Drawer overlay (kept in DOM for scripts but not shown) */
    .mobile-drawer-overlay {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1098;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .mobile-drawer-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    /* Nav drawer panel – premium slide-out */
    .header-nav-wrap {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(300px, 85vw);
        max-width: 300px;
        padding: max(1.25rem, env(safe-area-inset-top)) 1rem 2rem 1rem;
        padding-left: max(1rem, env(safe-area-inset-left));
        background: #fff;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
        z-index: 1099;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .header-nav-wrap.active {
        transform: translateX(0);
        box-shadow: 8px 0 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0,0,0,0.04);
    }
    .header-nav-wrap .main-navigation {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        margin: 0;
        padding: 0;
    }
    .header-nav-wrap .main-navigation a,
    .header-nav-wrap .main-navigation .nav-link {
        display: flex;
        align-items: center;
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
        font-weight: 600;
        color: #0f172a;
        border-radius: var(--mobile-radius-md, 12px);
        margin-bottom: 0;
        transition: background 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: rgba(99, 102, 241, 0.08);
    }
    .header-nav-wrap .main-navigation a:hover,
    .header-nav-wrap .main-navigation .nav-link:hover {
        background: rgba(99, 102, 241, 0.08);
        color: var(--primary-color, #6366f1);
    }
    .header-nav-wrap .main-navigation a.current-menu-item {
        background: rgba(99, 102, 241, 0.1);
        color: var(--primary-color, #6366f1);
    }
    .header-nav-wrap .header-drawer-lang {
        display: block !important;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e2e8f0;
    }
    .header-nav-wrap .header-drawer-lang-label {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        margin-bottom: 0.5rem;
    }

    /* Logged-out: show guest three-dot menu in bar */
    .header-actions .header-login-link,
    .header-actions .header-register-btn {
        display: none !important;
    }

    .header-actions .header-user-menu-guest {
        display: block !important;
    }

    /* Guest three-dot dropdown */
    #header-user-menu-guest .header-dots-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 78vh;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
        background: #fff;
        z-index: 1100;
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease, visibility 0.35s;
        overflow-y: auto;
        padding: 0.5rem 0 max(1rem, env(safe-area-inset-bottom));
    }

    #header-user-menu-guest .header-dots-dropdown.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    #header-user-menu-guest .header-dots-dropdown::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #e2e8f0;
        margin: 0 auto 0.5rem;
    }

    /* Guest dropdown uses same .header-dots-dropdown-close-wrap (styled above) */

    #header-user-menu-guest .header-dots-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        z-index: 1099;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    #header-dots-dropdown-guest.is-open ~ .header-dots-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Guest menu: “Browse jobs” link */
    #header-dots-dropdown-guest .header-dots-item-browse-jobs {
        font-weight: 600;
        color: var(--primary-color, #6366f1);
    }
    #header-dots-dropdown-guest .header-dots-item-browse-jobs:hover {
        color: var(--primary-color, #6366f1);
        background: rgba(99, 102, 241, 0.08);
    }

    .header-dots-item-primary {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: #fff !important;
        justify-content: center;
        font-weight: 600;
    }
    /* Login = secondary (outline); Sign Up = primary (filled) */
    #header-dots-dropdown-guest .header-dots-item-secondary {
        background: transparent;
        color: var(--primary-color, #6366f1) !important;
        justify-content: center;
        font-weight: 600;
        border: 2px solid var(--primary-color, #6366f1);
    }
    #header-dots-dropdown-guest .header-dots-item-secondary:hover {
        background: rgba(99, 102, 241, 0.08);
        color: var(--primary-color, #6366f1) !important;
    }
}

/* Hero: premium mobile */
@media (max-width: 900px) {
    .hero-section {
        padding: 2.5rem 1rem 3rem !important;
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .hero-container {
        padding: 0 0.5rem;
    }

    .hero-title {
        font-size: 1.875rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.75rem !important;
        letter-spacing: -0.03em;
    }

    .hero-subtitle {
        font-size: 1rem !important;
        margin-bottom: 1.75rem !important;
        line-height: 1.6;
    }

    .hero-search {
        margin-bottom: 1.75rem;
    }

    .search-form {
        flex-direction: column;
        padding: 0.75rem;
        border-radius: var(--mobile-radius-lg, 16px);
        box-shadow: var(--mobile-shadow-elevated, 0 4px 6px -1px rgba(0,0,0,0.07), 0 10px 24px -4px rgba(0,0,0,0.08));
        border: 1px solid rgba(0,0,0,0.06);
    }

    .search-inputs {
        flex-direction: column;
        gap: 0.625rem;
    }

    .search-field {
        min-width: 0;
    }

    .search-input {
        min-height: var(--mobile-input-height, 48px) !important;
        font-size: 16px !important;
        border-radius: var(--mobile-radius-sm, 10px) !important;
    }

    .search-button {
        width: 100%;
        min-height: var(--mobile-input-height, 48px);
        border-radius: var(--mobile-radius-sm, 10px) !important;
        font-weight: 600;
    }

    .hero-stats {
        gap: 1.75rem;
        margin-top: 1.75rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .stat-number {
        font-size: 1.5rem !important;
    }

    .stat-label {
        font-size: 0.8125rem !important;
    }
}

/* Sections and cards – premium mobile */
@media (max-width: 900px) {
    .latest-jobs-section,
    .content-section {
        padding: 2rem 1rem 2.5rem !important;
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .section-container {
        padding: 0 0;
    }

    .section-title {
        font-size: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        letter-spacing: -0.02em;
    }

    .section-subtitle {
        font-size: 0.9375rem;
    }

    .card-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .job-card {
        padding: 1.25rem !important;
        border-radius: var(--mobile-radius-lg, 16px);
        box-shadow: var(--mobile-shadow-card, 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04));
        border: 1px solid rgba(0,0,0,0.04);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .job-card:active {
        transform: scale(0.99);
    }

    .job-card .card-header {
        gap: 0.875rem;
    }

    .job-card .company-logo {
        width: 48px;
        height: 48px;
        min-width: 48px;
        font-size: 1.125rem;
    }

    .job-card .card-title {
        font-size: 1.0625rem;
        line-height: 1.35;
    }

    .job-card .card-subtitle {
        font-size: 0.875rem;
    }

    .job-card .card-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .job-card .meta-badge {
        padding: 0.375rem 0.625rem;
        font-size: 0.8125rem;
    }

    .job-card .card-excerpt {
        font-size: 0.875rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .job-card .btn-block {
        min-height: var(--mobile-touch, 44px);
        font-size: 0.9375rem;
        border-radius: var(--mobile-radius-md, 12px);
    }

    .home-section {
        padding: 2rem 1rem !important;
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .categories-section .section-title {
        font-size: 1.375rem !important;
    }

    .categories-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }

    .category-pill {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        min-height: var(--mobile-touch, 44px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        border-radius: var(--mobile-radius-md, 12px);
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        border: 1px solid rgba(0,0,0,0.06);
    }

    .category-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .home-cta-section {
        padding: 2.5rem 1rem !important;
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .home-cta-title {
        font-size: 1.5rem !important;
    }

    .home-cta-buttons {
        flex-direction: column;
        gap: 0.875rem;
    }

    .home-cta-buttons .btn {
        width: 100%;
        min-height: var(--mobile-input-height, 48px);
        justify-content: center;
        border-radius: var(--mobile-radius-md, 12px);
    }
}

/* ---- Extra small: tighter, still readable ---- */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.5rem !important;
    }

    .categories-grid {
        grid-template-columns: 1fr;
    }

    .header-container {
        padding: 0 0.75rem;
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }
}

/* ---- Prevent body scroll when menu open ---- */
body.menu-open {
    overflow: hidden;
    touch-action: none;
}

/* Touch targets */
@media (max-width: 900px) {
    .job-card a,
    .category-pill,
    .btn {
        -webkit-tap-highlight-color: rgba(99, 102, 241, 0.08);
    }
}

/* Dashboard: mobile */
@media (max-width: 900px) {
    /* Page container */
    .jobcv-dashboard-page .content-section,
    .jobcv-dashboard-page .content-section > div,
    .jobcv-dashboard-page .jobcv-dashboard-outer {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
        padding-top: 1rem !important;
        padding-bottom: 2rem !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .jobcv-dashboard-page .dashboard-wrapper,
    .dashboard-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    /* Dashboard menu dropdown (tab strip hidden on mobile) */
    .dashboard-nav-mobile-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        margin-bottom: 1.25rem;
        box-sizing: border-box;
        position: relative;
    }
    .dashboard-nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        min-height: 52px;
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
        font-weight: 600;
        color: #0f172a;
        background: #fff;
        border: 2px solid #e2e8f0;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .dashboard-nav-toggle:focus {
        outline: none;
        border-color: var(--primary-color, #6366f1);
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
    }
    .dashboard-nav-toggle.open {
        border-color: var(--primary-color, #6366f1);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .dashboard-nav-toggle-chevron {
        flex-shrink: 0;
        transition: transform 0.2s ease;
        color: #64748b;
    }
    .dashboard-nav-toggle.open .dashboard-nav-toggle-chevron {
        transform: rotate(180deg);
    }
    .dashboard-nav-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 50;
        background: #fff;
        border: 2px solid var(--primary-color, #6366f1);
        border-top: 1px solid #e2e8f0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
        overflow: hidden;
        max-height: 70vh;
        overflow-y: auto;
    }
    .dashboard-nav-dropdown-item {
        display: block;
        padding: 0.875rem 1.25rem;
        font-size: 0.9375rem;
        font-weight: 500;
        color: #334155;
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
        border-bottom: 1px solid #f1f5f9;
    }
    .dashboard-nav-dropdown-item:last-child {
        border-bottom: none;
    }
    .dashboard-nav-dropdown-item:hover,
    .dashboard-nav-dropdown-item:focus {
        background: #f8fafc;
        color: var(--primary-color, #6366f1);
    }
    .dashboard-nav-dropdown-item.active {
        background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
        color: var(--primary-color, #6366f1);
        font-weight: 600;
    }
    /* Hide desktop tab strip on mobile */
    .dashboard-nav {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        clip: rect(0, 0, 0, 0) !important;
    }

    /* Welcome header card */
    .jobcv-dashboard-page .dashboard-header,
    .dashboard-header {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 1.5rem 1.25rem !important;
        margin-bottom: 1.5rem;
        border-radius: var(--mobile-radius-lg, 16px);
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: var(--mobile-shadow-card, 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04));
        overflow: visible;
        box-sizing: border-box;
    }
    .jobcv-dashboard-page .dashboard-header-compact,
    .dashboard-header-compact {
        padding: 1.5rem 1.25rem !important;
        margin-bottom: 1.5rem;
    }
    .dashboard-header h1 {
        font-size: 1.375rem !important;
        line-height: 1.3;
        word-break: break-word;
        margin: 0 0 0.35rem 0 !important;
        color: #0f172a;
    }
    .dashboard-header p {
        font-size: 0.9375rem !important;
        margin: 0 !important;
        color: #64748b;
        line-height: 1.5;
    }

    .dashboard-header-with-cv {
        flex-direction: column !important;
        align-items: stretch;
        gap: 1.25rem !important;
        min-height: 0 !important;
    }
    .dashboard-header-left {
        min-width: 0 !important;
    }
    .dashboard-header-cv {
        flex-direction: row !important;
        flex-wrap: wrap;
        padding: 1.25rem 0 0 !important;
        gap: 1rem !important;
        border-top: 1px solid #f1f5f9;
        margin-top: 0.25rem;
        padding-top: 1.25rem !important;
    }
    .dashboard-header-avatar,
    .dashboard-header-avatar-placeholder {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px;
        min-height: 64px;
        flex-shrink: 0;
    }
    .dashboard-header-cv-info {
        flex: 1 1 160px;
        min-width: 0;
    }
    .dashboard-header-cv-label {
        font-size: 0.6875rem !important;
    }
    .dashboard-header-cv-name {
        font-size: 1.0625rem !important;
        font-weight: 700;
    }
    .dashboard-header-cv-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .dashboard-header-cv-actions .btn-cv-full,
    .dashboard-header-cv-actions .btn {
        min-height: 46px;
        font-size: 0.875rem;
    }

    /* Stats row */
    .dashboard-stats {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        margin-top: 1rem !important;
    }
    .dashboard-stat-card {
        min-width: 0 !important;
        flex: 1 1 calc(50% - 0.375rem);
        box-sizing: border-box;
    }

    /* Grid */
    .dashboard-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        margin-bottom: 1.5rem !important;
        box-sizing: border-box;
    }
    .dashboard-sidebar,
    .dashboard-main {
        width: 100%;
        min-width: 0;
        gap: 1.25rem !important;
    }
    .dashboard-sidebar > .dashboard-card:last-child,
    .dashboard-main > .dashboard-card:last-child {
        min-height: 0 !important;
    }

    /* Dashboard cards */
    .jobcv-dashboard-page .dashboard-card,
    .dashboard-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 1.5rem 1.25rem !important;
        margin-bottom: 0 !important;
        border-radius: 16px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        min-height: 0 !important;
        overflow: visible;
        box-sizing: border-box;
    }
    .dashboard-card h3 {
        font-size: 1.0625rem !important;
        margin-bottom: 1rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
        color: #0f172a;
    }
    .dashboard-card h3 .count-badge {
        font-size: 0.8125rem;
    }

    /* Jobs table scroll */
    .dashboard-jobs-table-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        max-height: none !important;
        min-height: 0 !important;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        margin: 0 0 0.75rem 0 !important;
        padding: 0.5rem !important;
        box-sizing: border-box;
    }
    .dashboard-jobs-table-wrap .jobs-table {
        min-width: 480px;
        font-size: 0.875rem;
    }
    .dashboard-jobs-table-wrap .jobs-table thead th {
        padding: 0.75rem 0.875rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    .dashboard-jobs-table-wrap .jobs-table tbody td {
        padding: 0.875rem !important;
    }
    .job-title-cell a {
        word-break: break-word;
        font-weight: 600;
    }
    .action-buttons {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .action-btn {
        min-height: 44px;
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
    }

    .quick-action-btn {
        min-height: 50px;
        padding: 1rem 1.25rem;
        font-size: 0.9375rem;
        border-radius: 12px;
    }

    .empty-state {
        padding: 2.5rem 1.25rem !important;
        font-size: 0.9375rem;
        color: #64748b;
    }

    .jobcv-dashboard-page .alert,
    .alert {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 1rem 1.25rem !important;
        margin-bottom: 1.25rem;
        border-radius: 14px;
    }

    /* Notification history: premium, touch-friendly */
    .jobcv-dashboard-page .dashboard-card-notifications .dashboard-notifications-subtitle {
        margin-bottom: 1rem;
    }
    .jobcv-dashboard-page .dashboard-card-notifications .dashboard-notifications-list {
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
    }
    .jobcv-dashboard-page .dashboard-notifications-empty {
        padding: 2rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left));
    }
    .jobcv-dashboard-page .dashboard-notification-link {
        padding: 1rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
        gap: 0.875rem;
        min-height: 56px;
        -webkit-tap-highlight-color: transparent;
    }
    .jobcv-dashboard-page .dashboard-notification-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
    .jobcv-dashboard-page .dashboard-notification-preview {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .jobcv-dashboard-page .dashboard-notification-item:active .dashboard-notification-link {
        background: #f1f5f9;
    }

    .jobcv-create-cv-under-dashboard .dashboard-wrapper,
    .jobcv-dashboard-page .jobcv-dashboard-outer {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }
}

/* Desktop: hide mobile dropdown, show tab nav */
@media (min-width: 901px) {
    .dashboard-nav-mobile-wrap {
        display: none !important;
    }
    .dashboard-nav {
        display: flex !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .jobcv-dashboard-page .content-section > div,
    .jobcv-dashboard-page .jobcv-dashboard-outer {
        padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
    }
    .dashboard-nav-toggle {
        min-height: 48px;
        font-size: 0.9375rem;
    }
    .dashboard-header h1 {
        font-size: 1.25rem !important;
    }
    .dashboard-card {
        padding: 1.25rem 1rem !important;
    }
    .dashboard-jobs-table-wrap .jobs-table {
        min-width: 420px;
    }
}

/* ========== Single job page – premium mobile ========== */
@media (max-width: 900px) {
    .single-job_listing .content-section,
    .single-job_listing .content-section > div {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
        padding-top: 1.25rem !important;
        padding-bottom: 2rem !important;
        max-width: 100% !important;
    }
    .single-job_listing .single-job-header-card {
        padding: 1.5rem 1.25rem !important;
        margin-bottom: 1.5rem !important;
        border-radius: var(--mobile-radius-lg, 16px) !important;
        margin-left: max(0, env(safe-area-inset-left));
        margin-right: max(0, env(safe-area-inset-right));
        box-shadow: var(--mobile-shadow-card, 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04));
        border: 1px solid rgba(0,0,0,0.04);
    }
    .single-job_listing .single-job-header-inner {
        flex-direction: column !important;
        gap: 1.25rem !important;
        align-items: stretch !important;
    }
    .single-job_listing .single-job-logo-cell {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .single-job_listing .single-job-header-card h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.35rem !important;
    }
    .single-job_listing .card-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .single-job_listing .card-tags {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .single-job_listing .single-job-header-card .btn,
    .single-job_listing .single-job-header-card .card-actions .btn,
    .single-job_listing .content-section .btn {
        width: 100% !important;
        min-height: var(--mobile-input-height, 48px) !important;
        justify-content: center;
        font-size: 1rem;
        font-weight: 600;
        border-radius: var(--mobile-radius-md, 12px);
    }
    /* Apply Now + Save Job row: share space so neither overflows or is cut off */
    .single-job_listing .single-job-actions {
        display: flex !important;
        gap: 0.75rem;
        flex-wrap: nowrap;
        min-width: 0;
    }
    .single-job_listing .single-job-actions > *:first-child {
        width: auto !important;
        min-width: 0;
        flex: 1 1 0%;
    }
    .single-job_listing .single-job-actions > *:last-child {
        width: auto !important;
        min-width: 0;
        flex: 0 1 auto;
    }
    .single-job_listing .single-job-actions > *:only-child {
        flex: 1 1 100%;
    }
    .single-job_listing .single-job-rating-box,
    .single-job_listing .single-job-rating-box * {
        box-sizing: border-box;
    }
    .single-job_listing .single-job-rating-box {
        padding: 1.25rem 1rem !important;
        margin-top: 1.25rem !important;
        border-radius: var(--mobile-radius-lg, 16px) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        border: 1px solid rgba(0,0,0,0.05);
    }
    .single-job_listing .content-section .card-meta .meta-item {
        font-size: 0.9375rem;
    }
}

@media (max-width: 480px) {
    .single-job_listing .single-job-header-card {
        padding: 1.25rem 1rem !important;
    }
    .single-job_listing .single-job-header-card h1 {
        font-size: 1.375rem !important;
    }
}

/* ========== Related Jobs – mobile: centered section and buttons ========== */
@media (max-width: 900px) {
    .related-jobs-section.content-section {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }
    .related-jobs-section .section-title {
        text-align: center;
    }
    .related-jobs-grid {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }
    .related-job-card {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .related-job-card .related-job-view-btn {
        display: block !important;
        width: calc(100% - 2.5rem) !important;
        max-width: none;
        margin: 1rem auto 1.25rem auto !important;
        padding: 0.75rem 1rem !important;
        text-align: center !important;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* ========== Archive / Jobs list – premium mobile ========== */
@media (max-width: 900px) {
    .archive-job_listing .content-section,
    .page-jobs .content-section,
    .jobs-archive.content-section {
        padding: 1.5rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left)) !important;
    }
    .archive-job_listing .content-section > div[style*="padding"],
    .page-jobs .content-section > div[style*="padding"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .archive-job_listing h1,
    .page-jobs .content-section h1,
    .jobs-archive-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .jobs-archive-inner {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    .jobs-archive-search-row-main,
    .jobs-archive-search-row-filters {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }
    .jobs-archive-search-row-main {
        margin-bottom: 0.5rem;
    }
    .jobs-archive-search-row-filters {
        padding-top: 0.625rem;
    }
    .jobs-archive-search {
        padding: 1rem max(0.75rem, env(safe-area-inset-right)) 1rem max(0.75rem, env(safe-area-inset-left));
        margin-bottom: 1.25rem;
    }
    .jobs-archive-input,
    .jobs-archive-select,
    .jobs-archive-search-btn {
        min-height: var(--mobile-input-height, 48px) !important;
        font-size: 16px !important;
        width: 100%;
    }
    .jobs-archive-search-btn {
        min-width: 0;
    }
    .archive-job_listing form[method="GET"],
    .page-jobs .content-section form[method="GET"] {
        padding: 1.25rem !important;
        border-radius: var(--mobile-radius-lg, 16px) !important;
        box-shadow: var(--mobile-shadow-card, 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04));
        border: 1px solid rgba(0,0,0,0.04);
    }
    .archive-job_listing form .form-group,
    .page-jobs .content-section form .form-group {
        min-width: 0;
    }
    .archive-job_listing form .form-group input,
    .archive-job_listing form .form-group select,
    .page-jobs .content-section form .form-input,
    .page-jobs .content-section form .form-select {
        min-height: var(--mobile-input-height, 48px) !important;
        font-size: 16px !important;
        width: 100%;
    }
    .archive-job_listing .card-grid,
    .page-jobs .card-grid {
        gap: 1.25rem;
    }
}

/* ========== Footer – premium mobile ========== */
@media (max-width: 900px) {
    .site-footer .footer-inner {
        padding: 2.5rem max(1.25rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)) !important;
    }
    .footer-grid {
        gap: 2rem !important;
        margin-bottom: 2rem !important;
    }
    .footer-brand {
        padding-right: 0;
        margin-bottom: 0.5rem;
    }
    .footer-logo-img {
        height: 36px !important;
        width: auto !important;
    }
    .footer-heading {
        font-size: 0.75rem !important;
        letter-spacing: 0.06em;
        margin-bottom: 1rem !important;
    }
    .footer-links li {
        margin-bottom: 0.5rem;
    }
    .footer-links a {
        display: inline-block;
        padding: 0.5rem 0;
        min-height: var(--mobile-touch, 44px);
        line-height: 1.4;
        font-size: 0.9375rem;
        -webkit-tap-highlight-color: rgba(99, 102, 241, 0.08);
    }
    .footer-bottom {
        padding-top: 1.5rem !important;
        border-top: 1px solid rgba(0,0,0,0.06);
    }
    .footer-copy {
        font-size: 0.8125rem;
        text-align: center;
    }
}

@media (max-width: 560px) {
    .site-footer .footer-inner {
        padding: 2rem max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)) !important;
    }
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
        text-align: center;
    }
    .footer-brand {
        text-align: center;
    }
    .footer-links {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* ========== Auth pages (login, register) – premium mobile ========== */
@media (max-width: 900px) {
    .auth-page-section.content-section,
    .page-login .content-section,
    .page-register .content-section {
        padding: 1.5rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left)) !important;
    }
    .auth-page-section .auth-card,
    .page-login .content-section > div,
    .page-register .content-section > div {
        max-width: 100% !important;
        padding: 1.75rem 1.25rem !important;
        border-radius: var(--mobile-radius-lg, 16px) !important;
        box-shadow: var(--mobile-shadow-elevated, 0 4px 6px -1px rgba(0,0,0,0.07), 0 10px 24px -4px rgba(0,0,0,0.08));
        border: 1px solid rgba(0,0,0,0.05);
    }
    .auth-page-section input[type="text"],
    .auth-page-section input[type="email"],
    .auth-page-section input[type="password"],
    .page-login input:not([type="submit"]):not([type="hidden"]),
    .page-register input:not([type="submit"]):not([type="hidden"]) {
        min-height: var(--mobile-input-height, 48px) !important;
        font-size: 16px !important;
        border-radius: var(--mobile-radius-sm, 10px);
    }
    .auth-page-section .btn-primary,
    .page-login .btn-primary,
    .page-register .btn-primary {
        min-height: var(--mobile-input-height, 48px) !important;
        width: 100%;
        font-size: 1rem;
        border-radius: var(--mobile-radius-md, 12px);
    }
}

/* ========== Post job / Create CV / Forms – premium mobile ========== */
@media (max-width: 900px) {
    .page-post-job .content-section,
    .page-create-cv .content-section,
    .jobcv-dashboard-page .content-section {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }
    .page-post-job .form-group label,
    .page-post-job .form-group input,
    .page-post-job .form-group select,
    .page-post-job .form-group textarea {
        min-height: var(--mobile-input-height, 48px) !important;
        font-size: 16px !important;
    }
    .page-post-job .form-group textarea {
        min-height: 120px !important;
        padding: 1rem !important;
        border-radius: var(--mobile-radius-sm, 10px);
    }
    .page-post-job .btn-primary {
        min-height: var(--mobile-input-height, 48px) !important;
        width: 100%;
        border-radius: var(--mobile-radius-md, 12px);
    }

    /* CV creation page: no horizontal scroll, premium profile section and actions */
    .jobcv-create-cv-under-dashboard .dashboard-cv-form-area,
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap {
        overflow-x: hidden;
        max-width: 100%;
    }
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap .jobcv-cv-section-profile {
        padding: 1.25rem max(1rem, env(safe-area-inset-right)) 1.25rem max(1rem, env(safe-area-inset-left)) !important;
        margin-left: 0;
        margin-right: 0;
        overflow-x: hidden;
    }
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap .jobcv-cv-section-profile h3 {
        font-size: 0.6875rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        color: var(--primary-color, #6366f1) !important;
        margin-bottom: 1rem !important;
    }
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap .jobcv-profile-editor {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 1.5rem 1.25rem !important;
        border-radius: var(--mobile-radius-lg, 16px) !important;
        box-shadow: var(--mobile-shadow-card, 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04)) !important;
        border: 1px solid #e2e8f0 !important;
        overflow: hidden;
    }
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap .jobcv-profile-left {
        align-items: center;
        margin-bottom: 0.5rem;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap .jobcv-profile-controls {
        display: flex !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap .jobcv-profile-controls button {
        min-height: 44px !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        border-radius: 10px !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap .jobcv-profile-hint,
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap .jobcv-profile-editor .form-hint {
        font-size: 0.8125rem !important;
        color: #64748b !important;
        text-align: center !important;
        max-width: none !important;
        margin: 0.25rem 0 0 !important;
        overflow-wrap: break-word;
        word-wrap: break-word;
        width: 100%;
        box-sizing: border-box;
    }
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap .jobcv-profile-download-wrap {
        margin-left: 0 !important;
        margin-top: 1rem !important;
        padding-top: 1rem !important;
        border-top: 1px solid #e2e8f0 !important;
    }
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap .jobcv-profile-cv-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        justify-content: center !important;
    }
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap .jobcv-download-cv-btn,
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap .jobcv-print-cv-btn {
        flex: 1 1 140px !important;
        min-height: 48px !important;
        padding: 0.875rem 1rem !important;
        font-size: 0.9375rem !important;
        border-radius: 12px !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .jobcv-create-cv-under-dashboard .jobcv-cv-form-wrap .profile-photo-upload {
        padding: 1.5rem 1rem !important;
        border-radius: 14px !important;
    }
}

/* ========== Messages page / Messenger – full viewport, typing box always visible ========== */
@media (max-width: 900px) {
    .page-messages .content-section {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100dvh !important;
    }

    /* Messenger full-screen on mobile: hide theme header/footer so messenger has full viewport */
    body.jobcv-messages-page #masthead,
    body.jobcv-messages-page .site-header,
    body.jobcv-messages-page .site-footer,
    body.jobcv-messages-page footer {
        display: none !important;
    }
    body.jobcv-messages-page #page {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: 100% !important;
    }
    body.jobcv-messages-page .site-main,
    body.jobcv-messages-page .content-section,
    body.jobcv-messages-page .entry-content {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }
    /* Messenger outer: full viewport height (dvh so keyboard can shrink), flex column so only messages scroll */
    body.jobcv-messages-page .messenger-page-outer {
        position: relative !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    body.jobcv-messages-page .messages-page-wrapper {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body.jobcv-messages-page .messages-container {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    /* Remove purple stripe at top on mobile – clean header only */
    body.jobcv-messages-page .messages-container::before {
        display: none !important;
    }
    /* List view: list fills space, empty state stays compact (no huge gap below) */
    body.jobcv-messages-page .messages-container:not(.mobile-chat-open) .conversations-sidebar {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    body.jobcv-messages-page .messages-container:not(.mobile-chat-open) .chat-area {
        flex: 0 0 auto !important;
        min-height: 0 !important;
    }
    /* Chat view: flex column so messages scroll and input stays at bottom; use dvh so keyboard can reflow */
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-area {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        height: 100% !important;
    }
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-messages {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        overflow-anchor: auto;
    }
    /* Typing box pinned at bottom, always visible with safe-area; touch-friendly */
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-input-area,
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-applicant-cannot-reply-state {
        flex: 0 0 auto !important;
        padding: 12px 14px max(16px, env(safe-area-inset-bottom)) !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
        background: #fff !important;
        border-top: 1px solid #e2e8f0;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    /* Chat input: correct caret position and premium look */
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-input-wrapper {
        display: flex !important;
        align-items: stretch !important;
        min-height: 48px !important;
        padding: 0 !important;
        padding-left: 16px !important;
        border-radius: 24px !important;
        border: 2px solid #e2e8f0 !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-input-wrapper:focus-within {
        border-color: rgba(99, 102, 241, 0.45) !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
    }
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-input-wrapper textarea {
        flex: 1 !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 12px 12px 12px 0 !important;
        margin: 0 !important;
        border: none !important;
        font-size: 16px !important;
        line-height: 1.375 !important;
        box-sizing: border-box !important;
        resize: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    /* Back bar: show and fix at top at 900px (plugin only does this at 768px) so layout is correct */
    body.jobcv-messages-page .messenger-back-home {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        min-height: 44px;
        padding: max(env(safe-area-inset-top), 10px) 12px 10px;
        margin: 0;
        color: #475569;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        background: #fff;
        border-bottom: 1px solid #e2e8f0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    body.jobcv-messages-page .messenger-back-home:hover {
        color: #6366f1;
        background: #f8fafc;
    }
    body.jobcv-messages-page .messenger-back-home,
    body.jobcv-messages-page .messenger-back-home * {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    body.jobcv-messages-page .messages-page-wrapper {
        padding-top: calc(44px + max(env(safe-area-inset-top), 10px)) !important;
    }
    body.jobcv-messages-page .messenger-back-home {
        font-size: 14px;
    }

    /* Conversations header: single-line "Messages", hide duplicate Back link, minimal padding */
    body.jobcv-messages-page .conversations-header {
        padding: 10px 12px 10px !important;
        padding-top: max(10px, env(safe-area-inset-top)) !important;
        border-bottom: 1px solid #e2e8f0;
        flex-shrink: 0;
    }
    body.jobcv-messages-page .conversations-header h2 {
        margin: 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
    }
    /* Keep Back to home visible in header so it's always available (fixed bar + this link) */
    body.jobcv-messages-page .conversations-header .messages-back-to-home {
        display: inline-flex !important;
        min-height: 40px;
        touch-action: manipulation;
    }

    /* Conversation list: fills sidebar, scrolls, tight padding */
    body.jobcv-messages-page .conversations-list {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 6px 10px 12px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Conversation items: compact rows, smaller gaps, smooth tap feedback */
    body.jobcv-messages-page .conversation-item {
        padding: 10px 12px !important;
        min-height: 52px !important;
        margin-bottom: 2px !important;
        border-radius: 10px !important;
        gap: 10px !important;
        transition: background 0.2s ease, transform 0.15s ease;
    }
    body.jobcv-messages-page .conversation-item:active {
        background: #f1f5f9 !important;
    }
    body.jobcv-messages-page .conversation-avatar,
    body.jobcv-messages-page .conversation-avatar > img,
    body.jobcv-messages-page .conversation-avatar > .message-avatar-initial,
    body.jobcv-messages-page .conversation-avatar > .message-avatar-frame {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    body.jobcv-messages-page .conversation-name {
        font-size: 14px !important;
    }
    body.jobcv-messages-page .conversation-preview {
        font-size: 12px !important;
    }

    /* Empty state (right panel when no chat selected): compact, no huge padding */
    body.jobcv-messages-page .chat-empty-state {
        padding: 16px 20px !important;
        justify-content: flex-start;
        min-height: 0;
    }
    body.jobcv-messages-page .chat-empty-state svg {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 10px !important;
        opacity: 0.4;
    }
    body.jobcv-messages-page .chat-empty-state h3 {
        font-size: 15px !important;
        margin: 0 0 4px 0 !important;
    }
    body.jobcv-messages-page .chat-empty-state p {
        font-size: 13px !important;
        margin: 0 !important;
        color: #94a3b8;
    }

    /* Back button (mobile): visible and tappable at 900px – plugin only shows at 768px otherwise */
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-header-back.mobile-visible {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 4px 0 -4px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #0f172a !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        position: relative !important;
        z-index: 10 !important;
        transition: background 0.2s ease, color 0.2s ease;
    }
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-header-back.mobile-visible:hover {
        background: #f1f5f9 !important;
        color: #6366f1 !important;
    }
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-header-back.mobile-visible:active {
        background: #e2e8f0 !important;
    }

    /* Chat header (open conversation): prevent overlap, compact layout */
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-header {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 8px 10px 10px 8px !important;
        padding-top: max(8px, env(safe-area-inset-top)) !important;
        min-height: 52px;
        overflow: hidden;
        flex-wrap: nowrap;
        flex-shrink: 0 !important;
    }
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-header .chat-user-info {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        overflow: hidden;
    }
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-header .chat-user-info h3,
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-header .chat-user-status {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-header .chat-user-avatar {
        flex-shrink: 0;
        width: 40px !important;
        height: 40px !important;
    }
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-header-actions {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center;
        gap: 6px;
    }
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-view-cv-btn,
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-send-contract-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-view-cv-btn svg,
    body.jobcv-messages-page .messages-container.mobile-chat-open .chat-send-contract-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ========== Generic content-section for all pages ========== */
@media (max-width: 900px) {
    .content-section {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
        padding-top: 1.25rem !important;
        padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
    }
}

/* ========== Focus and accessibility (mobile) ========== */
@media (max-width: 900px) {
    .btn:focus-visible,
    .search-button:focus-visible,
    .header-dots-btn:focus-visible,
    .mobile-menu-toggle:focus-visible,
    a:focus-visible {
        outline: 2px solid var(--primary-color, #6366f1);
        outline-offset: 2px;
    }
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 2px solid var(--primary-color, #6366f1);
        outline-offset: 0;
    }
}

/* ========== Extra small devices (e.g. iPhone SE, small Android) ========== */
@media (max-width: 380px) {
    .hero-title {
        font-size: 1.375rem !important;
    }
    .hero-subtitle {
        font-size: 0.875rem !important;
    }
    .section-title {
        font-size: 1.25rem !important;
    }
    .header-container {
        padding-left: max(0.5rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.5rem, env(safe-area-inset-right)) !important;
    }
    .site-logo img.site-logo-img {
        height: 36px !important;
        max-height: 38px !important;
    }
    .single-job_listing .single-job-header-card h1 {
        font-size: 1.25rem !important;
    }
    .footer-links a {
        font-size: 0.875rem;
    }
}

/* ========== Tablet (600–900px) – optional refinements ========== */
@media (min-width: 600px) and (max-width: 900px) {
    .hero-title {
        font-size: 2rem !important;
    }
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Post Request confirmation – mobile: full-width buttons, no clip */
@media (max-width: 900px) {
    .jobcv-individual-confirmation {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
    }
    .jobcv-individual-confirmation .btn {
        min-height: 44px !important;
        width: 100% !important;
    }
    .jobcv-individual-confirmation div[style*="flex-wrap: wrap"] {
        flex-direction: column !important;
    }
}

/* ========== Reduced motion preference ========== */
@media (max-width: 900px) {
    @media (prefers-reduced-motion: reduce) {
        .header-nav-wrap,
        .mobile-drawer-overlay,
        #header-user-menu-guest .header-dots-dropdown {
            transition-duration: 0.15s;
        }
    }
}

/* ========== Extra-small viewport fixes (320-360px) ========== */
@media (max-width: 420px) {
    .dashboard-jobs-table-wrap .jobs-table {
        min-width: 300px !important;
    }
}
@media (max-width: 360px) {
    .liked-jobs-grid {
        grid-template-columns: 1fr !important;
    }
    .latest-jobs-section .card-grid,
    .page-jobs .card-grid {
        grid-template-columns: 1fr !important;
    }
    .search-field,
    .search-field-category,
    .hero-search-bar .search-field {
        min-width: 0 !important;
    }
    .jobcv-premium-pricing {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }
    .dashboard-header-cv-label,
    .header-dots-tag,
    .notification-dropdown-title {
        font-size: 0.75rem !important;
    }
}

/* Confirm modal – better mobile spacing */
@media (max-width: 380px) {
    .jobcv-confirm-box {
        padding: 20px 16px 20px !important;
        margin: 0 0.5rem !important;
    }
    .jobcv-confirm-box .jobcv-confirm-btn {
        min-width: 0 !important;
        flex: 1;
        padding: 12px 16px !important;
    }
}

/* Premium page: stack cards at 600px for breathing room */
@media (max-width: 600px) {
    .jobcv-premium-pricing {
        grid-template-columns: 1fr !important;
        max-width: 380px !important;
    }
    .jobcv-premium-page-wrapper {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }
}