/**
 * VENDOR MODAL MASTER FIX - FINAL VERSION
 * This file takes ABSOLUTE CONTROL over vendor modal styling
 * Overrides ALL conflicting CSS from other files
 * Last loaded = highest priority
 */

/* =====================================================
   CRITICAL FIX 1: HIDE DUPLICATE CLOSE BUTTONS
   ===================================================== */

/* Hide ALL modal-close buttons except the branded one */
#vendorRegistrationModal .modal-close,
#vendorRegistrationModal button[class*="modal-close"],
#vendorRegistrationModal button[class*="close"],
.modal-content.vendor-registration .modal-close,
.modal-content.vendor-registration button[class*="close"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ONLY show our branded close button */
#vendorModalClose,
button#vendorModalClose {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
    position: absolute !important;
    left: auto !important;
    right: 1.5rem !important;
    top: 1.5rem !important;
}

/* =====================================================
   CRITICAL FIX 2: REMOVE DUPLICATE TEXT (::after)
   ===================================================== */

/* Kill ALL ::after pseudo-elements on step labels */
.progress-step .step-label::after,
.progress-step[data-step] .step-label::after,
.progress-step[data-step="1"] .step-label::after,
.progress-step[data-step="2"] .step-label::after,
.progress-step[data-step="3"] .step-label::after,
.progress-step[data-step="4"] .step-label::after {
    content: none !important;
    display: none !important;
}

/* Kill ALL ::before pseudo-elements on step labels */
.progress-step .step-label::before {
    content: none !important;
    display: none !important;
}

/* =====================================================
   CRITICAL FIX 3: HIDE STEP NUMBERS
   ===================================================== */

.progress-step .step-number,
.progress-step span.step-number {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* =====================================================
   FIX 4: MODAL SCROLLING
   ===================================================== */

#vendorRegistrationModal.modal-overlay {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: flex-start !important;
    padding: 2rem 1rem !important;
}

#vendorRegistrationModal .modal-content.vendor-registration {
    max-height: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

/* =====================================================
   FIX 5: MOBILE STEP LABELS - PROPER SIZING
   ===================================================== */

/* Reset progress container */
.registration-progress {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: 1.75rem 2rem !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Reset progress step */
.progress-step {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
}

/* Base step label - COMPLETE RESET */
.progress-step .step-label {
    /* Reset everything */
    all: unset !important;
    
    /* Apply our styles */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    min-width: 0 !important;
    
    /* Typography */
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.4 !important;
    color: #666 !important;
    
    /* Spacing */
    padding: 0.85rem 0.65rem !important;
    min-height: 3.5rem !important;
    
    /* Visual */
    background: #f8f9fa !important;
    border: 2px solid #e0e5e9 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    
    /* Text wrapping */
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    
    /* Animation */
    transition: all 0.3s ease !important;
    
    /* Kill pseudo-elements */
    content: normal !important;
}

/* Active state */
.progress-step.active .step-label {
    background: linear-gradient(135deg, #00A651 0%, #006837 100%) !important;
    color: #ffffff !important;
    border-color: #00A651 !important;
    box-shadow: 
        0 4px 12px rgba(0, 166, 81, 0.3) !important,
        0 0 0 3px rgba(0, 166, 81, 0.1) !important;
    transform: scale(1.05) !important;
    font-weight: 700 !important;
}

/* Completed state */
.progress-step.completed .step-label {
    background: linear-gradient(135deg, #FDB913 0%, #F7931E 100%) !important;
    color: #ffffff !important;
    border-color: #FDB913 !important;
    box-shadow: 0 4px 12px rgba(253, 185, 19, 0.3) !important;
    font-weight: 700 !important;
}

/* =====================================================
   RESPONSIVE: DESKTOP
   ===================================================== */

/* Desktop Large (≥1200px) */
@media (min-width: 1200px) {
    .progress-step .step-label {
        font-size: 1rem !important;
        padding: 0.95rem 0.85rem !important;
        min-height: 4rem !important;
    }
}

/* Desktop (1025px - 1199px) */
@media (min-width: 1025px) and (max-width: 1199px) {
    .progress-step .step-label {
        font-size: 0.95rem !important;
        padding: 0.85rem 0.75rem !important;
        min-height: 3.8rem !important;
    }
}

/* =====================================================
   RESPONSIVE: TABLET
   ===================================================== */

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .registration-progress {
        gap: 0.85rem !important;
        padding: 1.5rem 1.5rem !important;
    }
    
    .progress-step .step-label {
        font-size: 0.85rem !important;
        padding: 0.75rem 0.6rem !important;
        min-height: 4rem !important;
    }
}

/* =====================================================
   RESPONSIVE: MOBILE - FIX SQUASHING
   ===================================================== */

/* Mobile Large (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .registration-progress {
        gap: 0.7rem !important;
        padding: 1.25rem 1rem !important;
    }
    
    .progress-step {
        flex: 1 1 auto !important;
        min-width: 75px !important;
    }
    
    .progress-step .step-label {
        font-size: 0.75rem !important;
        padding: 0.7rem 0.5rem !important;
        min-height: 4.5rem !important;
        line-height: 1.35 !important;
    }
}

/* Mobile Medium (391px - 480px) - YOUR SCREENSHOT SIZE */
@media (min-width: 391px) and (max-width: 480px) {
    .registration-progress {
        gap: 0.5rem !important;
        padding: 1rem 0.75rem !important;
        overflow-x: auto !important;
        scrollbar-width: thin !important;
    }
    
    .progress-step {
        flex: 0 0 auto !important;
        min-width: 90px !important;
        max-width: 100px !important;
    }
    
    .progress-step .step-label {
        font-size: 0.7rem !important;
        padding: 0.65rem 0.45rem !important;
        min-height: 5rem !important;
        line-height: 1.3 !important;
        word-spacing: 100vw !important; /* Force line break */
    }
    
    .progress-step.active .step-label {
        transform: scale(1.02) !important;
    }
}

/* Mobile Small (361px - 390px) */
@media (min-width: 361px) and (max-width: 390px) {
    .registration-progress {
        gap: 0.4rem !important;
        padding: 0.9rem 0.6rem !important;
        overflow-x: auto !important;
    }
    
    .progress-step {
        flex: 0 0 auto !important;
        min-width: 85px !important;
        max-width: 92px !important;
    }
    
    .progress-step .step-label {
        font-size: 0.68rem !important;
        padding: 0.6rem 0.4rem !important;
        min-height: 5.2rem !important;
        line-height: 1.25 !important;
        word-spacing: 100vw !important;
    }
}

/* Mobile Extra Small (≤360px) - iPhone SE */
@media (max-width: 360px) {
    .registration-progress {
        gap: 0.35rem !important;
        padding: 0.85rem 0.5rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .progress-step {
        flex: 0 0 auto !important;
        min-width: 78px !important;
        max-width: 85px !important;
    }
    
    .progress-step .step-label {
        font-size: 0.65rem !important;
        padding: 0.55rem 0.35rem !important;
        min-height: 5.5rem !important;
        line-height: 1.2 !important;
        word-spacing: 100vw !important;
        border-radius: 10px !important;
    }
}

/* =====================================================
   MOBILE CLOSE BUTTON ADJUSTMENTS
   ===================================================== */

@media (max-width: 768px) {
    #vendorModalClose {
        top: 1rem !important;
        right: 1rem !important;
        width: 44px !important;
        height: 44px !important;
    }
}

@media (max-width: 480px) {
    #vendorModalClose {
        top: 0.75rem !important;
        right: 0.75rem !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 1.5rem !important;
        border-radius: 12px !important;
    }
    
    .registration-progress {
        margin: 0 1rem 1.5rem 1rem !important;
    }
}

/* =====================================================
   SCROLLBAR STYLING (if overflow occurs)
   ===================================================== */

.registration-progress::-webkit-scrollbar {
    height: 4px !important;
}

.registration-progress::-webkit-scrollbar-track {
    background: rgba(0, 166, 81, 0.05) !important;
    border-radius: 2px !important;
}

.registration-progress::-webkit-scrollbar-thumb {
    background: rgba(0, 166, 81, 0.3) !important;
    border-radius: 2px !important;
}

.registration-progress::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 166, 81, 0.5) !important;
}

/* =====================================================
   FORCE OVERRIDE ANY COMPETING STYLES
   ===================================================== */

/* Vendor modal specific overrides */
#vendorRegistrationModal .registration-progress .progress-step .step-label {
    font-size: inherit !important;
    padding: inherit !important;
    min-height: inherit !important;
}

/* Ensure no max-width constraints */
#vendorRegistrationModal .progress-step .step-label {
    max-width: none !important;
}

/* Kill any transforms from other CSS */
.progress-step:not(.active) .step-label {
    transform: none !important;
}


/* =====================================================
   CRITICAL FIX 3: ENSURE FORM STEPS ARE VISIBLE
   ===================================================== */

/* Force all form steps to be hidden by default */
#vendorRegistrationModal .form-step,
.modal-content.vendor-registration .form-step {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Force active form step to be visible */
#vendorRegistrationModal .form-step.active,
.modal-content.vendor-registration .form-step.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: fadeIn 0.3s ease-in !important;
}

/* Ensure form content is visible */
#vendorRegistrationModal .vendor-form,
.modal-content.vendor-registration .vendor-form {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}