/* HN Job Reels 2.0 */

.hn-fullscreen-reel,
.hn-fullscreen-reel * {
    box-sizing: border-box;
}

.hn-fullscreen-reel {
    display: none;
}

@media (max-width: 768px) {

    .hn-fullscreen-reel {
        position: fixed !important;
        top: var(--hn-header-height, 0px) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100vw !important;
        height: calc(100dvh - var(--hn-header-height, 0px)) !important;

        display: block !important;
        overflow: hidden !important;

        padding: 10px !important;

        z-index: 999999 !important;

        background:
            radial-gradient(circle at 10% 0%, rgba(37,99,235,.14), transparent 30%),
            radial-gradient(circle at 90% 100%, rgba(124,58,237,.14), transparent 35%),
            #eef2f7 !important;

        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    .hn-fullscreen-reel.hn-story-closed {
        display: none !important;
    }

    .hn-reel-track {
        display: flex !important;
        width: max-content !important;
        height: 100% !important;

        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;

        transform: translate3d(0,0,0);
        will-change: transform;

        touch-action: pan-y !important;
    }

    .hn-reel-screen {
        position: relative !important;

        flex: 0 0 calc(100vw - 20px) !important;
        width: calc(100vw - 20px) !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 78px 28px 62px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        overflow: hidden !important;

        border: 1px solid rgba(255,255,255,.96) !important;
        border-radius: 32px !important;

        background:
            linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;

        box-shadow:
            0 25px 60px rgba(15,23,42,.18),
            0 5px 20px rgba(15,23,42,.08) !important;

        isolation: isolate !important;
    }

    .hn-reel-screen::before {
        content: "" !important;

        position: absolute !important;
        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 4px !important;

        background: linear-gradient(90deg,#2563eb,#4f46e5,#7c3aed) !important;
    }

    .hn-reel-progress {
        position: absolute !important;

        top: 20px !important;
        left: 28px !important;
        right: 28px !important;

        height: 4px !important;

        display: flex !important;
        gap: 7px !important;

        z-index: 20 !important;
    }

    .hn-reel-progress span {
        flex: 1 !important;
        height: 4px !important;

        border-radius: 10px !important;
        background: #e2e8f0 !important;
    }

    .hn-reel-progress span.active {
        background: linear-gradient(90deg,#2563eb,#4f46e5) !important;
    }

    .hn-reel-number {
        position: absolute !important;

        top: 42px !important;
        right: 28px !important;

        color: #94a3b8 !important;
        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 900 !important;

        z-index: 20 !important;
    }

    .hn-reel-close {
        position: absolute !important;

        top: 46px !important;
        left: 28px !important;

        width: 54px !important;
        height: 54px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid #e2e8f0 !important;
        border-radius: 50% !important;

        background: #ffffff !important;
        color: #111827 !important;

        font-size: 34px !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        box-shadow: 0 10px 28px rgba(15,23,42,.15) !important;

        z-index: 100 !important;

        cursor: pointer !important;
        appearance: none !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .hn-featured-image {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        aspect-ratio: 16 / 9 !important;
        max-height: 300px !important;

        object-fit: cover !important;

        margin: 0 0 26px !important;
        padding: 0 !important;

        border: 1px solid #e2e8f0 !important;
        border-radius: 24px !important;

        box-shadow: 0 20px 45px rgba(15,23,42,.15) !important;
    }

    .hn-reel-title {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #0f172a !important;

        font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif !important;

        font-size: clamp(30px, 8vw, 48px) !important;
        line-height: 1.03 !important;

        font-weight: 950 !important;
        letter-spacing: -1.7px !important;
    }

    .hn-reel-badge {
        display: inline-flex !important;
        align-items: center !important;

        width: fit-content !important;

        margin: 0 0 15px !important;
        padding: 9px 14px !important;

        border: 0 !important;
        border-radius: 30px !important;

        background: #eff6ff !important;
        color: #2563eb !important;

        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    .hn-reel-screen h2 {
        margin: 0 0 18px !important;
        padding: 0 !important;

        color: #0f172a !important;

        font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif !important;

        font-size: clamp(35px, 9vw, 52px) !important;
        line-height: 1 !important;

        font-weight: 950 !important;
        letter-spacing: -2px !important;
    }

    .hn-job-company {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;

        margin: 0 0 13px !important;
    }

    .hn-company-logo {
        width: 50px !important;
        min-width: 50px !important;
        height: 50px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: 1px solid #e5e7eb !important;
        border-radius: 15px !important;

        background: #ffffff !important;

        box-shadow: 0 8px 20px rgba(15,23,42,.08) !important;

        font-size: 22px !important;
    }

    .hn-company-name {
        color: #172033 !important;
        font-size: 19px !important;
        font-weight: 950 !important;
    }

    .hn-company-type {
        color: #94a3b8 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    .hn-reel-excerpt {
        margin: 0 0 14px !important;
        padding: 0 !important;

        color: #64748b !important;

        font-size: 15px !important;
        line-height: 1.45 !important;
        font-weight: 700 !important;
    }

    .hn-reel-row {
        min-height: 48px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 12px !important;

        padding: 8px 0 !important;

        border-bottom: 1px solid #e8edf2 !important;
    }

    .hn-reel-row strong {
        color: #172033 !important;
        font-size: 15px !important;
        font-weight: 950 !important;
    }

    .hn-reel-row span {
        max-width: 60% !important;

        color: #64748b !important;

        font-size: 14px !important;
        font-weight: 800 !important;

        text-align: right !important;
    }

    .hn-reel-screen ul,
    .hn-reel-screen ol {
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .hn-reel-screen li {
        position: relative !important;

        margin: 0 0 10px !important;
        padding: 14px 14px 14px 49px !important;

        border: 1px solid #e5eaf0 !important;
        border-radius: 17px !important;

        background: #ffffff !important;

        color: #334155 !important;

        font-size: 14px !important;
        line-height: 1.32 !important;
        font-weight: 800 !important;

        box-shadow: 0 7px 18px rgba(15,23,42,.045) !important;
    }

    .hn-reel-screen li::before {
        content: "✓" !important;

        position: absolute !important;

        left: 13px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        width: 27px !important;
        height: 27px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        background: #eff6ff !important;
        color: #2563eb !important;

        font-weight: 950 !important;
    }

    .hn-reel-final-copy {
        margin: 0 0 10px !important;
        padding: 0 !important;

        color: #64748b !important;

        font-size: 15px !important;
        line-height: 1.45 !important;
        font-weight: 700 !important;
    }

    .hn-reel-apply,
    .hn-whatsapp {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 59px !important;

        margin-top: 10px !important;
        padding: 14px !important;

        border: 0 !important;
        border-radius: 18px !important;

        color: #ffffff !important;

        font-size: 15px !important;
        font-weight: 950 !important;

        text-decoration: none !important;
    }

    .hn-reel-apply {
        background: linear-gradient(135deg,#2563eb,#1d4ed8,#4338ca) !important;
        box-shadow: 0 15px 32px rgba(37,99,235,.25) !important;
    }

    .hn-whatsapp {
        background: linear-gradient(135deg,#25d366,#16a34a) !important;
    }

    .hn-other-opportunities {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 52px !important;
        margin-top: 12px !important;
        padding: 12px 14px !important;
        border: 1px solid #dbe3ee !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        color: #2563eb !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        font-weight: 950 !important;
        text-align: center !important;
        cursor: pointer !important;
        box-shadow: 0 8px 20px rgba(15,23,42,.06) !important;
        appearance: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .hn-other-opportunities:active {
        transform: translateY(1px) !important;
    }

    .hn-reel-swipe {
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 18px !important;

        text-align: center !important;

        color: #94a3b8 !important;

        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;

        pointer-events: none !important;
    }

    .hn-reel-swipe strong {
        color: #2563eb !important;
    }

    .hn-reel-swipe span {
        margin-left: 4px !important;
    }

    @media (max-width: 380px) {
        .hn-reel-screen {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        .hn-featured-image {
            max-height: 235px !important;
        }

        .hn-reel-title {
            font-size: 29px !important;
            letter-spacing: -1.2px !important;
        }
    }
}

@media (min-width: 769px) {
    .hn-fullscreen-reel {
        display: none !important;
    }
}