/* Lowongan Page Mobile Fixes */

/* ===== HEADER SEARCH SECTION MOBILE ===== */
@media (max-width: 768px) {
    /* Fix header container */
    div[style*="background: white"][style*="height: 120px"] {
        height: auto !important;
        min-height: 100px !important;
        padding: 15px 0 !important;
    }
    
    /* Fix row height */
    div[style*="height: 120px"][style*="align-items: flex-start"] {
        height: auto !important;
        padding-top: 15px !important;
    }
    
    /* Fix padding for mobile */
    div[style*="padding-left: 95px"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Hide header image on mobile */
    img[style*="position: absolute"][style*="right: 0"] {
        display: none !important;
    }
    
    /* Fix search form wrapper */
    div[style*="max-width: 300px"] {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Header title mobile */
    h4[style*="font-size: 16px"][style*="color: #333"] {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    
    /* Search input mobile */
    input[placeholder*="cari lowongan"],
    input[name="keyword"] {
        padding: 8px 12px !important;
        font-size: 14px !important;
        width: 100% !important;
    }
    
    /* Search button mobile */
    button[type="submit"],
    form[action*="lowongan"] button {
        padding: 8px 16px !important;
        font-size: 14px !important;
        min-width: 70px !important;
        min-height: 38px !important; /* Touch target size */
        white-space: nowrap !important;
        cursor: pointer !important;
    }
    
    /* Search form container */
    form[action*="lowongan"] {
        margin: 0 !important;
    }
}

/* Extra small mobile header */
@media (max-width: 480px) {
    div[style*="background: white"][style*="height: 120px"] {
        min-height: 90px !important;
        padding: 12px 0 !important;
    }
    
    h4[style*="font-size: 16px"][style*="color: #333"] {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    
    input[placeholder*="cari lowongan"],
    input[name="keyword"] {
        padding: 7px 10px !important;
        font-size: 13px !important;
    }
    
    button[type="submit"],
    form[action*="lowongan"] button {
        padding: 7px 14px !important;
        font-size: 13px !important;
        min-width: 65px !important;
    }
}

/* ===== MAIN SECTION TITLE MOBILE ===== */
@media (max-width: 768px) {
    /* Title section */
    .text-doff.fs-4 {
        font-size: 1.25rem !important;
        margin-top: 1rem !important;
        padding: 0 15px !important;
        line-height: 1.4 !important;
    }
}

@media (max-width: 480px) {
    .text-doff.fs-4 {
        font-size: 1.1rem !important;
        margin-top: 0.75rem !important;
        padding: 0 10px !important;
    }
}

/* ===== LAYOUT STACKING MOBILE ===== */
@media (max-width: 768px) {
    /* Main content column */
    .col-xl-8.col-lg-8.col-md-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Sidebar column - move below main content */
    .col-xl-4.col-lg-4.col-md-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-top: 20px !important;
    }
}

/* ===== CARD STYLING MOBILE ===== */
@media (max-width: 768px) {
    /* Card spacing */
    .card.mt-3 {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* Card body padding */
    .card-body {
        padding: 15px !important;
    }
    
    /* Profile row mobile */
    .row .col-2 {
        flex: 0 0 50px !important;
        max-width: 50px !important;
    }
    
    .row .col-10 {
        flex: 0 0 calc(100% - 50px) !important;
        max-width: calc(100% - 50px) !important;
        padding-left: 12px !important;
    }
    
    /* Profile image mobile */
    img.rounded-circle[style*="width: 40px"] {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Profile info mobile */
    .fs-5.text-doff {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
    }
    
    /* Date text mobile */
    .card-body p:not(.fs-5) {
        font-size: 0.85rem !important;
        color: #6b6b6b !important;
        margin-bottom: 0 !important;
    }
    
    /* Job title mobile */
    .fs-5.text-doff.mb-3 {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }
    
    /* Deadline text mobile */
    p.mb-4 {
        font-size: 0.9rem !important;
        margin-bottom: 15px !important;
        color: #555 !important;
    }
    
    /* Apply button mobile */
    .btn.btn-basic.d-inline {
        padding: 10px 20px !important;
        font-size: 0.95rem !important;
        border-radius: 6px !important;
        margin-bottom: 15px !important;
        display: inline-block !important;
        width: auto !important;
        min-height: 44px !important; /* Touch target size */
        cursor: pointer !important;
    }
    
    /* Thumbnail image mobile - full width */
    .thumbnail-lowongan,
    .img-fluid.thumbnail-lowongan,
    .card-body img[src*="thumbnail-lowongan"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        border-radius: 8px !important;
        margin-top: 15px !important;
        display: block !important;
    }
    
    /* Summernote content mobile */
    .summernote-content {
        padding: 12px !important;
        margin-top: 15px !important;
    }
    
    .summernote-output {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        color: #333 !important;
    }
    
    .summernote-output p {
        margin-bottom: 10px !important;
    }
    
    .summernote-output ul,
    .summernote-output ol {
        padding-left: 20px !important;
        margin-bottom: 12px !important;
    }
    
    /* Card footer mobile */
    .card-footer {
        padding: 12px 15px !important;
        text-align: center !important;
    }
    
    /* Share button mobile */
    .btn.btn-outline-success.py-0 {
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
        width: 100% !important;
        max-width: 200px !important;
        min-height: 44px !important; /* Touch target size */
        cursor: pointer !important;
    }
}

/* Extra small mobile cards */
@media (max-width: 480px) {
    .card.mt-3 {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .card-body {
        padding: 12px !important;
    }
    
    .fs-5.text-doff {
        font-size: 0.95rem !important;
    }
    
    .fs-5.text-doff.mb-3 {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
    }
    
    p.mb-4 {
        font-size: 0.85rem !important;
        margin-bottom: 12px !important;
    }
    
    .btn.btn-basic.d-inline {
        padding: 9px 18px !important;
        font-size: 0.9rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .summernote-content {
        padding: 10px !important;
        margin-top: 12px !important;
    }
    
    .summernote-output {
        font-size: 0.85rem !important;
    }
}

/* ===== SIDEBAR (BERITA TERBARU) MOBILE ===== */
@media (max-width: 768px) {
    /* Sidebar card */
    .col-xl-4 .card.mt-3 {
        margin-top: 0 !important;
    }
    
    /* Sidebar title */
    h4.text-doff.text-center {
        font-size: 1.1rem !important;
        margin-bottom: 15px !important;
        padding: 0 !important;
    }
    
    /* Berita list */
    .berita_wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .berita_wrapper li {
        margin-bottom: 15px !important;
        padding-bottom: 15px !important;
        border-bottom: 1px solid #eee !important;
    }
    
    .berita_wrapper li:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Berita image mobile */
    .berita_image {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        border-radius: 6px !important;
    }
    
    /* Berita content mobile */
    .berita {
        align-items: flex-start !important;
    }
    
    .berita a {
        flex: 0 0 60px !important;
        max-width: 60px !important;
        margin-right: 12px !important;
    }
    
    .berita div {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .berita div h6 {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
        color: #333 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .berita div h6[style*="color: #6b6b6b"] {
        font-size: 0.8rem !important;
        color: #6b6b6b !important;
        margin-bottom: 0 !important;
    }
}

/* Extra small sidebar */
@media (max-width: 480px) {
    h4.text-doff.text-center {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }
    
    .berita_image {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
    }
    
    .berita a {
        flex: 0 0 50px !important;
        max-width: 50px !important;
        margin-right: 10px !important;
    }
    
    .berita div h6 {
        font-size: 0.85rem !important;
    }
    
    .berita div h6[style*="color: #6b6b6b"] {
        font-size: 0.75rem !important;
    }
}

/* ===== PAGINATION MOBILE ===== */
@media (max-width: 768px) {
    /* Pagination container */
    .mb-5.mt-5 {
        margin-top: 25px !important;
        margin-bottom: 25px !important;
        padding: 0 15px !important;
    }
    
    /* Pagination wrapper */
    .pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Pagination items */
    .pagination .page-item {
        margin: 0 !important;
        display: inline-block !important;
    }
    
    /* Pagination links */
    .pagination .page-link {
        padding: 8px 12px !important;
        font-size: 0.875rem !important;
        min-width: 38px !important;
        text-align: center !important;
        border-radius: 6px !important;
        margin: 0 !important;
        border: 1px solid #dee2e6 !important;
    }
    
    /* Active page */
    .pagination .page-item.active .page-link {
        font-weight: 600 !important;
    }
    
    /* Disabled items */
    .pagination .page-item.disabled .page-link {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
    }
    
    /* Previous/Next buttons */
    .pagination .page-link:hover:not(.disabled) {
        background-color: #f8f9fa !important;
    }
}

/* Extra small pagination */
@media (max-width: 480px) {
    .mb-5.mt-5 {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        padding: 0 10px !important;
    }
    
    .pagination {
        gap: 4px !important;
    }
    
    .pagination .page-link {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        min-width: 34px !important;
    }
}

/* ===== EMPTY STATE MOBILE ===== */
@media (max-width: 768px) {
    .text-center.py-5 {
        padding: 30px 15px !important;
    }
    
    .text-center.py-5 h4 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }
    
    .text-center.py-5 p {
        font-size: 0.9rem !important;
    }
}

/* ===== MODAL MOBILE ===== */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 1rem !important;
        max-width: calc(100% - 2rem) !important;
    }
    
    .modal-content {
        border-radius: 8px !important;
    }
    
    .modal-header {
        padding: 15px !important;
    }
    
    .modal-title {
        font-size: 1.1rem !important;
    }
    
    .modal-body {
        padding: 15px !important;
    }
    
    /* Share buttons mobile */
    .d-flex.justify-content-around {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .d-flex.justify-content-around .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 0.9rem !important;
        margin: 0 !important;
    }
}

/* ===== CONTAINER & ROW FIXES MOBILE ===== */
@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Container fixes */
    .container {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Row fixes */
    .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
    
    .row > * {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Section fixes */
    section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Ensure no overflow */
    section[style*="min-height: 100vh"] {
        overflow-x: hidden !important;
    }
    
    /* Column width fixes */
    .col-12 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* ===== SHOW PAGE SPECIFIC MOBILE ===== */
@media (max-width: 768px) {
    /* Profile image larger on show page */
    img.rounded-circle[style*="width: 63px"],
    img.rounded-circle[style*="63px"] {
        width: 50px !important;
        height: 50px !important;
    }
    
    /* Title on show page */
    .fs-4.text-doff {
        font-size: 1.15rem !important;
        margin-bottom: 8px !important;
        padding: 0 10px !important;
    }
    
    /* Apply button centered */
    .text-center .btn.btn-basic,
    .mt-4.text-center .btn.btn-basic {
        width: 100% !important;
        max-width: 300px !important;
        padding: 12px 24px !important;
        font-size: 1rem !important;
        margin-top: 15px !important;
        display: inline-block !important;
    }
    
    /* Image on show page */
    .w-100[style*="max-height: 300px"],
    img[src*="thumbnail-lowongan"][style*="max-height: 300px"] {
        max-height: none !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 8px !important;
        width: 100% !important;
    }
    
    /* Content wrapper on show page */
    .mt-4.p-0 {
        padding: 0 !important;
        margin-top: 15px !important;
    }
    
    /* Description wrapper */
    .summernote-content.p-4 {
        padding: 15px !important;
    }
}

@media (max-width: 480px) {
    .text-center .btn.btn-basic {
        max-width: 100% !important;
        padding: 11px 20px !important;
        font-size: 0.95rem !important;
    }
}

/* ===== APPLY PAGE MOBILE ===== */
@media (max-width: 768px) {
    /* Welcome title mobile */
    h3.text-doff.text-center {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        padding: 0 15px !important;
        margin-bottom: 20px !important;
    }
    
    /* Form card mobile */
    .custom-container .card {
        margin: 15px 0 !important;
        border-radius: 8px !important;
        border: 1px solid #dee2e6 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        overflow: visible !important;
    }
    
    .custom-container .card-body {
        padding: 20px 15px !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 400px !important; /* CRITICAL: Ensure enough height for form */
        max-height: none !important;
        display: block !important;
        flex-shrink: 0 !important;
        flex-grow: 1 !important;
        align-self: stretch !important;
    }
    
    /* Fix for flex container issues */
    .custom-container .card {
        display: block !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Form container mobile */
    #FormPelamar {
        width: 100% !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 350px !important;
        display: block !important;
    }
    
    .bs-stepper {
        width: 100% !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 300px !important;
        display: block !important;
    }
    
    /* Step visibility - CRITICAL FIX - HIGHEST PRIORITY */
    .bs-stepper .step,
    .step {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        height: 0 !important;
        min-height: 0 !important;
    }
    
    .bs-stepper .step.active,
    .step.active,
    div.step.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 300px !important; /* CRITICAL: Ensure step has enough height */
        max-height: none !important;
        animation: fadeIn 0.3s ease-in !important;
        position: relative !important;
        z-index: 10 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Form inputs mobile - ENSURE VISIBILITY */
    .form-control,
    .form-select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px 14px !important;
        border-radius: 6px !important;
        border: 1px solid #ced4da !important;
        background-color: #ffffff !important;
        color: #333 !important;
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
    
    .form-control:focus,
    .form-select:focus {
        border-color: #F43D00 !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(244, 61, 0, 0.25) !important;
    }
    
    .form-control::placeholder {
        color: #6c757d !important;
        opacity: 1 !important;
    }
    
    /* Form labels mobile */
    .form-label {
        font-size: 0.95rem !important;
        margin-bottom: 8px !important;
        font-weight: 500 !important;
        color: #333 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Textarea mobile */
    textarea.form-control {
        min-height: 100px !important;
        resize: vertical !important;
        line-height: 1.5 !important;
    }
    
    /* File input mobile */
    input[type="file"].form-control {
        padding: 10px !important;
        font-size: 14px !important;
        cursor: pointer !important;
    }
    
    /* Progress bar mobile */
    .progress {
        height: 8px !important;
        margin-bottom: 20px !important;
        border-radius: 4px !important;
        background-color: #e9ecef !important;
        overflow: visible !important;
    }
    
    .progress-bar {
        background-color: #F43D00 !important;
        border-radius: 4px !important;
    }
    
    /* Step title mobile */
    .step p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
        padding: 0 10px !important;
        color: #333 !important;
        visibility: visible !important;
    }
    
    .step p strong {
        color: #F43D00 !important;
        font-weight: 600 !important;
    }
    
    .step p a {
        color: #007bff !important;
        text-decoration: underline !important;
        word-break: break-all !important;
    }
    
    /* Form row mobile */
    .step .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    .step .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .step .mb-3 {
        margin-bottom: 1rem !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    /* Navigation buttons mobile */
    .form-footer {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 25px !important;
        padding-top: 20px !important;
        border-top: 1px solid #dee2e6 !important;
        width: 100% !important;
    }
    
    #nextBtn,
    #prevBtn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 1rem !important;
        min-height: 48px !important; /* Touch target */
        margin-top: 0 !important;
        border-radius: 6px !important;
        font-weight: 500 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Help text mobile */
    .form-text {
        font-size: 0.85rem !important;
        margin-top: 6px !important;
        color: #6c757d !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Container mobile */
    .custom-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    
    /* ULTIMATE FIX - Force everything visible with maximum specificity */
    .custom-container .card .card-body .bs-stepper .step.active,
    .card .card-body form .bs-stepper .step.active,
    #FormPelamar .bs-stepper .step.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 300px !important;
        max-height: none !important;
        width: 100% !important;
        position: relative !important;
        z-index: 999 !important;
    }
    
    /* CRITICAL: Fix card-body height issue */
    body .custom-container .card .card-body,
    body .card-body {
        height: auto !important;
        min-height: 400px !important;
        max-height: none !important;
        display: block !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
        flex-grow: 1 !important;
        align-self: stretch !important;
    }
    
    /* Fix flex parent if exists */
    body .custom-container .card[style*="display: flex"],
    body .card[style*="display: flex"] {
        display: block !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Force form elements visible */
    .custom-container .card .card-body .bs-stepper .step.active input,
    .custom-container .card .card-body .bs-stepper .step.active textarea,
    .custom-container .card .card-body .bs-stepper .step.active select,
    .custom-container .card .card-body .bs-stepper .step.active .form-control,
    .custom-container .card .card-body .bs-stepper .step.active .form-select {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        position: relative !important;
        z-index: 1000 !important;
    }
    
    /* Section mobile */
    section[style*="padding: 20px 0"],
    section {
        padding: 15px 0 !important;
        overflow: visible !important;
        width: 100% !important;
    }
    
    /* Ensure all form elements are visible */
    .step.active input,
    .step.active textarea,
    .step.active select,
    .step.active label {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    /* Row and column fixes */
    .step.active .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .step.active [class*="col-"] {
        position: relative !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Invalid input styling */
    .form-control.invalid,
    input.invalid {
        border-color: #ffaba5 !important;
        background-color: #fff5f5 !important;
    }
}

/* Extra small apply page */
@media (max-width: 480px) {
    h3.text-doff.text-center {
        font-size: 1rem !important;
        padding: 0 10px !important;
    }
    
    .custom-container .card {
        margin: 10px 0 !important;
        display: block !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    .custom-container .card-body {
        padding: 15px 12px !important;
        height: auto !important;
        min-height: 400px !important; /* CRITICAL: Maintain height */
        max-height: none !important;
        display: block !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
        flex-grow: 1 !important;
    }
    
    /* Ensure step has enough height */
    .step.active {
        min-height: 300px !important;
        height: auto !important;
    }
    
    .form-control,
    .form-select {
        font-size: 16px !important;
        padding: 11px 12px !important;
    }
    
    .form-label {
        font-size: 0.9rem !important;
    }
    
    .step p {
        font-size: 0.95rem !important;
        padding: 0 5px !important;
        margin-bottom: 12px !important;
    }
    
    #nextBtn,
    #prevBtn {
        padding: 12px 18px !important;
        font-size: 0.95rem !important;
        min-height: 46px !important;
    }
    
    .step .mb-3 {
        margin-bottom: 0.875rem !important;
    }
}