/**
 * Universal Supplier Pricing Modal Styles
 * Used on Host an Event, Become a Supplier, and other pages
 */

/* ========================================
   PRICING MODAL STYLES
   ======================================== */

.modal-template-outer.supplier-pricing-modal .modal-container {
    max-width: 70vw;
    width: 70%;
    padding: 2rem;
    overflow: visible;
}

.modal-template-outer.supplier-pricing-modal .modal-inner {
    overflow: visible;
    max-height: 100%;
    padding: 2rem 0;
}

/* Modal Header Layout - Text Left, Button Right */
.modal-template-outer.supplier-pricing-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
}

.modal-template-outer.supplier-pricing-modal .modal-header-inner {
    flex: 1;
}

.modal-template-outer.supplier-pricing-modal .modal-header-button {
    flex-shrink: 0;
    align-self: center;
}

/* Pricing Content Container */
.modal-template-outer.supplier-pricing-modal .modal-pricing-content {
    margin: 0 auto;
    max-width: 1400px;
}

.modal-template-outer.supplier-pricing-modal .supplier-pricing-table {
    margin: 2rem auto;
}

/* Learn More Button */
.modal-template-outer.supplier-pricing-modal .modal-learn-more {
    min-width: 200px;
    text-align: center;
    white-space: nowrap;
}

/* Pricing Column Buttons */
.modal-template-outer .button-become-supplier,
.supplier-pricing-table .button-become-supplier {
    margin-top: 1.5rem;
    width: 100%;
    text-align: center;
}

/* ========================================
   FORM MODAL STYLES
   ======================================== */

.modal-template-outer.supplier-modal .modal-container {
    max-width: 45rem;
    width: 90%;
}

.modal-template-outer.supplier-modal .modal-header {
    position: relative;
    padding-top: 2rem;
}

/* Back to Pricing Button */
.modal-template-outer.supplier-modal .modal-back-button {
    margin-bottom: 2rem !important;
    padding: 0.5rem 1rem 0.5rem 2rem !important;
}
.modal-template-outer.supplier-modal .modal-back-button:before {
    content: "";
    width: 1rem;
    height: 1rem;
    position: absolute;
    background: url(/wp-content/uploads/2025/07/icon-arrow-r-w.svg) no-repeat center center;
    left: 0.8rem;
    top: 0.6rem;
    background-size: 0.7rem;
    rotate: 180deg;
    opacity: 0.8;
}

/* Form Groups */
.modal-template-outer.supplier-modal .form-group.input-form-group {
    height: 4rem !important;
}

/* Form Input Styles */
.modal-template-outer.supplier-modal .modal-form input.input-text {
    background-color: rgba(210, 255, 239, 0.1) !important;
    color: var(--color-white) !important;
    margin-bottom: 0.6rem;
    outline: none !important;
    border: none !important;
}

/* Select2 Dropdown Styles */
.modal-template-outer.supplier-modal .select2-container--default .select2-selection--single {
    background-color: rgba(210, 255, 239, 0.1) !important;
    color: var(--color-white) !important;
    margin-bottom: 0.6rem;
    border: none !important;
}

.modal-template-outer.supplier-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-white) !important;
    line-height: normal;
    padding: 0;
}

.modal-template-outer.supplier-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 1rem;
}

.modal-template-outer.supplier-modal .error-message {
    display: block;
    color: var(--color-error, #ff4444);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    min-height: 1.2rem;
}

.modal-template-outer.supplier-modal .input-text.error,
.modal-template-outer.supplier-modal .modal-dropdown.error {
    border-color: var(--color-error, #ff4444) !important;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 1000px) {
    .modal-template-outer.supplier-pricing-modal .modal-container {
        padding: 1.5rem;
    }

    .modal-template-outer.supplier-pricing-modal .modal-inner {
        padding: 1rem 0;
    }
}

@media (max-width: 640px) {
    .modal-template-outer.supplier-pricing-modal .modal-container {
        padding: 1rem;
    }

    .modal-template-outer.supplier-pricing-modal .modal-inner {
        padding: 0.5rem 0;
    }

    /* Stack header on mobile */
    .modal-template-outer.supplier-pricing-modal .modal-header {
        flex-direction: column;
        gap: 1rem;
    }

    .modal-template-outer.supplier-pricing-modal .modal-header-button {
        align-self: flex-start;
        width: 100%;
    }

    .modal-template-outer.supplier-pricing-modal .modal-learn-more {
        width: 100%;
    }

    .modal-template-outer.supplier-pricing-modal .supplier-pricing-table {
        margin: 1rem auto;
    }
}