/**
 * Wholesale Upgrade Styles - یکپارچه با Elementor
 * استفاده از متغیرهای Elementor برای سازگاری کامل
 */

/* ============================================================
   متغیرهای سفارشی (Fallback اگر Elementor متغیر نداشت)
   ============================================================ */
:root {
    /* رنگ‌ها */
    --zin-primary: var(--e-global-color-primary, #0073aa);
    --zin-secondary: var(--e-global-color-secondary, #6c757d);
    --zin-success: var(--e-global-color-success, #28a745);
    --zin-warning: var(--e-global-color-warning, #ffc107);
    --zin-danger: var(--e-global-color-danger, #dc3545);
    --zin-info: var(--e-global-color-info, #17a2b8);
    
    --zin-text: var(--e-global-color-text, #333);
    --zin-bg: var(--e-global-color-3377c05, #fff);
    --zin-border: var(--e-global-color-c1a414c, #ddd);
    
    /* فاصله‌ها - سیستم 8px */
    --zin-space-xs: 4px;
    --zin-space-sm: 8px;
    --zin-space-md: 16px;
    --zin-space-lg: 24px;
    --zin-space-xl: 32px;
    
    /* گردی حاشیه‌ها */
    --zin-radius-sm: 4px;
    --zin-radius-md: 8px;
    --zin-radius-lg: 12px;
    
    /* سایه‌ها */
    --zin-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --zin-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --zin-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
    
    /* انتقال‌ها */
    --zin-transition: all 0.3s ease;
}

/* ============================================================
   بنر ارتقا در داشبورد
   ============================================================ */
.zin-wholesale-upgrade-banner {
    margin: 0 0 var(--zin-space-lg);
}

.zin-wholesale-upgrade-banner .upgrade-banner {
    display: flex;
    align-items: center;
    gap: var(--zin-space-md);
    padding: var(--zin-space-lg);
    border-radius: var(--zin-radius-md);
    background: var(--zin-bg);
    border: 2px solid var(--zin-border);
    box-shadow: var(--zin-shadow-sm);
    transition: var(--zin-transition);
}

.zin-wholesale-upgrade-banner .upgrade-banner:hover {
    box-shadow: var(--zin-shadow-md);
    transform: translateY(-2px);
}

/* وضعیت‌های مختلف بنر */
.zin-wholesale-upgrade-banner .upgrade-banner.pending {
    background: #fffbf0;
    border-color: var(--zin-warning);
}

.zin-wholesale-upgrade-banner .upgrade-banner.rejected {
    background: #fff5f5;
    border-color: var(--zin-danger);
}

.zin-wholesale-upgrade-banner .upgrade-banner.default {
    background: #f0f9ff;
    border-color: var(--zin-info);
}

.zin-wholesale-upgrade-banner .banner-icon {
    font-size: 48px;
    line-height: 1;
    flex-shrink: 0;
}

.zin-wholesale-upgrade-banner .banner-content {
    flex: 1;
}

.zin-wholesale-upgrade-banner .banner-content h3 {
    margin: 0 0 var(--zin-space-sm);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--zin-text);
}

.zin-wholesale-upgrade-banner .banner-content p {
    margin: 0 0 var(--zin-space-md);
    color: var(--zin-text);
    opacity: 0.9;
    line-height: 1.6;
}

/* ============================================================
   دکمه‌ها - یکپارچه
   ============================================================ */
.zin-wholesale-upgrade-banner .button,
.zin-wholesale-upgrade-form-wrapper .button,
.zin-wholesale-upgrade-form-wrapper button[type="submit"] {
    display: inline-block;
    padding: 12px 24px;
    background: var(--zin-primary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--zin-radius-md);
    border: none;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--zin-transition);
    box-shadow: var(--zin-shadow-sm);
}

.zin-wholesale-upgrade-banner .button:hover,
.zin-wholesale-upgrade-form-wrapper .button:hover,
.zin-wholesale-upgrade-form-wrapper button[type="submit"]:hover {
    background: var(--e-global-color-770d2d0, #005a87);
    box-shadow: var(--zin-shadow-md);
    transform: translateY(-1px);
}

.zin-wholesale-upgrade-form-wrapper button[type="submit"]:disabled {
    background: var(--zin-secondary);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

/* ============================================================
   فرم ارتقا
   ============================================================ */
.zin-wholesale-upgrade-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.upgrade-form-header {
    margin-bottom: var(--zin-space-xl);
    text-align: center;
    padding: var(--zin-space-lg);
    background: var(--zin-bg);
    border-radius: var(--zin-radius-md);
    border: 1px solid var(--zin-border);
}

.upgrade-form-header h2 {
    font-size: 2rem;
    margin: 0 0 var(--zin-space-md);
    color: var(--zin-text);
    font-weight: 700;
}

.upgrade-form-header p {
    color: var(--zin-text);
    opacity: 0.8;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

/* فرم */
#zin-wholesale-upgrade-form {
    background: var(--zin-bg);
    padding: var(--zin-space-xl);
    border-radius: var(--zin-radius-md);
    border: 1px solid var(--zin-border);
    box-shadow: var(--zin-shadow-sm);
}

#zin-wholesale-upgrade-form .form-fields {
    display: grid;
    gap: var(--zin-space-lg);
    margin-bottom: var(--zin-space-lg);
}

#zin-wholesale-upgrade-form .form-row {
    width: 100%;
}

/* برچسب‌ها */
#zin-wholesale-upgrade-form .form-row label {
    display: block;
    margin-bottom: var(--zin-space-sm);
    font-weight: 600;
    color: var(--zin-text);
    font-size: 0.95rem;
}

#zin-wholesale-upgrade-form .form-row .required {
    color: var(--zin-danger);
    text-decoration: none;
    margin-right: 2px;
}

/* فیلدهای ورودی - یکپارچه با سایت */
#zin-wholesale-upgrade-form .input-text,
#zin-wholesale-upgrade-form select,
#zin-wholesale-upgrade-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--zin-border);
    border-radius: var(--zin-radius-md);
    font-size: 1rem;
    color: var(--zin-text);
    background-color: var(--zin-bg);
    transition: var(--zin-transition);
    font-family: inherit;
    line-height: 1.5;
}

#zin-wholesale-upgrade-form .input-text:focus,
#zin-wholesale-upgrade-form select:focus,
#zin-wholesale-upgrade-form textarea:focus {
    outline: none;
    border-color: var(--zin-primary);
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

#zin-wholesale-upgrade-form .input-text:hover,
#zin-wholesale-upgrade-form select:hover,
#zin-wholesale-upgrade-form textarea:hover {
    border-color: var(--zin-primary);
}

#zin-wholesale-upgrade-form textarea.input-text {
    resize: vertical;
    min-height: 100px;
}

/* Select سفارشی */
#zin-wholesale-upgrade-form select {
    appearance: none;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0ic2l6ZS01Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjIyIDguMjJhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMCAxMS45NGwzLjcyLTMuNzJhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNC4yNSA0LjI1YS43NS43NSAwIDAgMS0xLjA2IDBMNS4yMiA5LjI4YS43NS43NSAwIDAgMSAwLTEuMDZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIC8+Cjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px;
    padding-left: 36px;
}

/* دکمه ارسال */
#zin-wholesale-upgrade-form button[type="submit"] {
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: var(--zin-space-md);
}

#zin-wholesale-upgrade-form .button-loader {
    display: none;
}

/* پیام‌ها */
.form-messages {
    margin-top: var(--zin-space-lg);
    padding: var(--zin-space-md);
    border-radius: var(--zin-radius-md);
    border: 1px solid;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-messages.success,
.woocommerce-message {
    background: #f0fdf4;
    border-color: var(--zin-success);
    color: #166534;
}

.form-messages.error,
.woocommerce-error {
    background: #fef2f2;
    border-color: var(--zin-danger);
    color: #991b1b;
}

.form-messages p,
.woocommerce-message p,
.woocommerce-error p {
    margin: 0;
    line-height: 1.6;
}

/* پیام‌های WooCommerce */
.woocommerce-info {
    padding: var(--zin-space-md);
    background: #f0f9ff;
    border: 1px solid var(--zin-info);
    color: #0c4a6e;
    border-radius: var(--zin-radius-md);
}

.woocommerce-info a {
    color: var(--zin-primary);
    text-decoration: underline;
}

/* ============================================================
   ریسپانسیو
   ============================================================ */
@media (max-width: 768px) {
    .zin-wholesale-upgrade-banner .upgrade-banner {
        flex-direction: column;
        text-align: center;
        gap: var(--zin-space-md);
    }
    
    .upgrade-form-header h2 {
        font-size: 1.5rem;
    }
    
    .upgrade-form-header p {
        font-size: 1rem;
    }
    
    #zin-wholesale-upgrade-form {
        padding: var(--zin-space-lg);
    }
    
    #zin-wholesale-upgrade-form .form-fields {
        gap: var(--zin-space-md);
    }
}

@media (max-width: 480px) {
    .zin-wholesale-upgrade-banner {
        margin-right: calc(-1 * var(--zin-space-md));
        margin-left: calc(-1 * var(--zin-space-md));
    }
    
    .zin-wholesale-upgrade-banner .upgrade-banner {
        border-radius: 0;
        border-right: none;
        border-left: none;
    }
    
    #zin-wholesale-upgrade-form {
        padding: var(--zin-space-md);
        border-radius: var(--zin-radius-sm);
    }
}

/* ============================================================
   حالت چاپ
   ============================================================ */
@media print {
    .zin-wholesale-upgrade-banner .button,
    #zin-wholesale-upgrade-form button[type="submit"] {
        display: none;
    }
}