/* ============================================================
   checkout.css - استایل مدرن صفحه تسویه‌حساب
   (بدون تغییر در ساختار کد)
   بازنویسی شده با استفاده از variables.css
   آخرین به‌روزرسانی: 2026-08-13
   ============================================================ */

/* ==========================================================
   1. هدر صفحه
   ========================================================== */
#checkout-checkout h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xl) 0;
    padding: 0 0 var(--spacing-lg) 0;
    border-bottom: 2px solid var(--bg-light);
    position: relative;
}

#checkout-checkout h1::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 60px;
    height: 3px;
    background: var(--color-secondary-gradient);
    border-radius: var(--radius-sm);
}

/* ==========================================================
   2. پنل‌های آکاردئونی
   ========================================================== */
#accordion .panel {
    border: none !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: var(--spacing-lg) !important;
    background: var(--bg-white) !important;
    border: 1px solid var(--border-soft) !important;
    overflow: hidden !important;
    transition: all var(--transition-base) !important;
}

#accordion .panel:hover {
    box-shadow: var(--shadow-md) !important;
}

#accordion .panel-heading {
    background: linear-gradient(135deg, var(--bg-light), var(--bg-pink-light)) !important;
    border: none !important;
    padding: var(--spacing-lg) var(--spacing-xl) !important;
    border-bottom: 1px solid var(--border-soft) !important;
}

#accordion .panel-title {
    font-size: var(--font-size-md) !important;
    font-weight: var(--font-bold) !important;
    color: var(--text-primary) !important;
}

#accordion .panel-title a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    transition: color var(--transition-base) !important;
}

#accordion .panel-title a:hover {
    color: var(--color-secondary) !important;
}

#accordion .panel-title .fa-caret-down {
    color: var(--text-light) !important;
    transition: transform var(--transition-base) !important;
    font-size: var(--font-size-base) !important;
}

#accordion .panel-title a[aria-expanded="true"] .fa-caret-down {
    transform: rotate(180deg) !important;
}

#accordion .panel-collapse {
    border: none !important;
}

#accordion .panel-body {
    padding: var(--spacing-xl) var(--spacing-2xl) !important;
    background: var(--bg-white) !important;
}

/* ==========================================================
   3. فرم‌ها و فیلدها
   ========================================================== */
#accordion .form-group {
    margin-bottom: var(--spacing-lg) !important;
}

#accordion .form-group label {
    font-weight: var(--font-semibold) !important;
    font-size: var(--font-size-sm) !important;
    color: var(--text-secondary) !important;
    display: block !important;
    margin-bottom: var(--spacing-xs) !important;
}

#accordion .form-control {
    border: 2px solid var(--border-medium) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: var(--font-size-base) !important;
    color: var(--text-secondary) !important;
    width: 100% !important;
    transition: all var(--transition-base) !important;
    background: var(--bg-white) !important;
}

#accordion .form-control:focus {
    border-color: var(--color-secondary) !important;
    box-shadow: 0 0 0 4px var(--bg-secondary-transparent) !important;
    outline: none !important;
}

#accordion .form-control.error,
#accordion .has-error .form-control {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 4px rgba(229, 62, 62, 0.08) !important;
}

#accordion .text-danger {
    font-size: var(--font-size-sm) !important;
    color: var(--color-danger) !important;
    margin-top: var(--spacing-xs) !important;
    display: block !important;
}

#accordion .help-block {
    font-size: var(--font-size-sm) !important;
    color: var(--text-light) !important;
    margin-top: var(--spacing-xs) !important;
}

/* ==========================================================
   4. دکمه‌ها
   ========================================================== */
#accordion .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--spacing-sm) !important;
    padding: var(--spacing-sm) var(--spacing-2xl) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-semibold) !important;
    cursor: pointer !important;
    transition: all var(--transition-base) !important;
    text-decoration: none !important;
}

#accordion .btn-primary {
    background: var(--color-secondary-gradient) !important;
    color: var(--text-white) !important;
    box-shadow: var(--shadow-secondary) !important;
}

#accordion .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-secondary-lg) !important;
    color: var(--text-white) !important;
}

#accordion .btn-primary:active {
    transform: translateY(0) !important;
}

#accordion .btn-default {
    background: var(--border-soft) !important;
    color: var(--text-secondary) !important;
}

#accordion .btn-default:hover {
    background: var(--border-medium) !important;
    color: var(--text-primary) !important;
    transform: translateY(-2px) !important;
}

#accordion .btn-danger {
    background: var(--color-danger) !important;
    color: var(--text-white) !important;
}

#accordion .btn-danger:hover {
    background: var(--color-danger-dark) !important;
    transform: translateY(-2px) !important;
}

#accordion .btn-success {
    background: var(--color-success) !important;
    color: var(--text-white) !important;
}

#accordion .btn-success:hover {
    background: var(--color-success-dark) !important;
    transform: translateY(-2px) !important;
}

#accordion .btn-link {
    color: var(--color-secondary) !important;
    background: transparent !important;
    padding: var(--spacing-xs) var(--spacing-sm) !important;
}

#accordion .btn-link:hover {
    color: var(--color-secondary-dark) !important;
    text-decoration: underline !important;
}

/* ==========================================================
   5. رادیو و چک‌باکس
   ========================================================== */
#accordion input[type="radio"],
#accordion input[type="checkbox"] {
    margin-left: var(--spacing-sm) !important;
    accent-color: var(--color-secondary) !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

#accordion .radio,
#accordion .checkbox {
    margin-bottom: var(--spacing-sm) !important;
}

#accordion .radio label,
#accordion .checkbox label {
    font-weight: var(--font-normal) !important;
    font-size: var(--font-size-base) !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
}

/* ==========================================================
   6. هشدارها (Alerts)
   ========================================================== */
#checkout-checkout .alert {
    border-radius: var(--radius-xl) !important;
    padding: var(--spacing-md) var(--spacing-xl) !important;
    border: none !important;
    margin-bottom: var(--spacing-lg) !important;
    font-size: var(--font-size-base) !important;
}

#checkout-checkout .alert-danger {
    background: var(--color-danger-light) !important;
    color: var(--color-danger) !important;
    border-right: 4px solid var(--color-danger) !important;
}

#checkout-checkout .alert-success {
    background: var(--color-success-light) !important;
    color: var(--color-success-dark) !important;
    border-right: 4px solid var(--color-success-dark) !important;
}

#checkout-checkout .alert-info {
    background: var(--color-info-light) !important;
    color: var(--color-info) !important;
    border-right: 4px solid var(--color-info) !important;
}

#checkout-checkout .alert-warning {
    background: var(--color-warning-light) !important;
    color: #d69e2e !important;
    border-right: 4px solid #d69e2e !important;
}

#checkout-checkout .alert .close {
    color: inherit !important;
    opacity: 0.6 !important;
    transition: opacity var(--transition-base) !important;
}

#checkout-checkout .alert .close:hover {
    opacity: 1 !important;
}

/* ==========================================================
   7. جدول خلاصه
   ========================================================== */
#checkout-checkout .table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: var(--font-size-base) !important;
}

#checkout-checkout .table-bordered {
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden !important;
}

#checkout-checkout .table-bordered > thead > tr > th,
#checkout-checkout .table-bordered > tbody > tr > td {
    border: 1px solid var(--border-soft) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
}

#checkout-checkout .table-bordered > thead > tr > th {
    background: var(--bg-light) !important;
    font-weight: var(--font-bold) !important;
    color: var(--text-secondary) !important;
}

#checkout-checkout .table-bordered > tbody > tr:hover {
    background: var(--bg-light) !important;
}

/* ==========================================================
   8. ماژول‌های اضافی
   ========================================================== */
#checkout-checkout .panel-group {
    margin-bottom: 0 !important;
}

#checkout-checkout .panel-group .panel + .panel {
    margin-top: var(--spacing-md) !important;
}

/* ==========================================================
   9. ریسپانسیو - تبلت
   ========================================================== */
@media (max-width: 768px) {
    #checkout-checkout h1 {
        font-size: var(--font-size-xl);
        text-align: center;
    }

    #checkout-checkout h1::after {
        right: 50%;
        transform: translateX(50%);
    }

    #accordion .panel-heading {
        padding: var(--spacing-md) var(--spacing-lg) !important;
    }

    #accordion .panel-title {
        font-size: var(--font-size-base) !important;
    }

    #accordion .panel-body {
        padding: var(--spacing-md) var(--spacing-lg) !important;
    }

    #accordion .form-control {
        padding: var(--spacing-sm) var(--spacing-md) !important;
        font-size: var(--font-size-sm) !important;
    }

    #accordion .btn {
        padding: var(--spacing-sm) var(--spacing-lg) !important;
        font-size: var(--font-size-sm) !important;
        width: 100% !important;
        justify-content: center !important;
    }

    #accordion .btn-group .btn {
        width: auto !important;
    }

    #checkout-checkout .table-bordered > thead > tr > th,
    #checkout-checkout .table-bordered > tbody > tr > td {
        padding: var(--spacing-sm) var(--spacing-sm) !important;
        font-size: var(--font-size-sm) !important;
    }

    #checkout-checkout .alert {
        padding: var(--spacing-md) var(--spacing-md) !important;
        font-size: var(--font-size-sm) !important;
    }
}

/* ==========================================================
   10. ریسپانسیو - موبایل
   ========================================================== */
@media (max-width: 480px) {
    #checkout-checkout h1 {
        font-size: var(--font-size-xl);
    }

    #accordion .panel-heading {
        padding: var(--spacing-sm) var(--spacing-md) !important;
    }

    #accordion .panel-title {
        font-size: var(--font-size-sm) !important;
    }

    #accordion .panel-body {
        padding: var(--spacing-sm) var(--spacing-md) !important;
    }

    #accordion .form-group {
        margin-bottom: var(--spacing-md) !important;
    }

    #accordion .form-group label {
        font-size: var(--font-size-sm) !important;
    }

    #accordion .form-control {
        padding: var(--spacing-sm) var(--spacing-sm) !important;
        font-size: var(--font-size-sm) !important;
        border-radius: var(--radius-md) !important;
    }

    #accordion .btn {
        padding: var(--spacing-sm) var(--spacing-md) !important;
        font-size: var(--font-size-sm) !important;
        border-radius: var(--radius-md) !important;
    }

    #accordion input[type="radio"],
    #accordion input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
    }

    #accordion .radio label,
    #accordion .checkbox label {
        font-size: var(--font-size-sm) !important;
    }

    #checkout-checkout .table-bordered > thead > tr > th,
    #checkout-checkout .table-bordered > tbody > tr > td {
        padding: var(--spacing-sm) var(--spacing-sm) !important;
        font-size: var(--font-size-sm) !important;
    }

    #checkout-checkout .alert {
        padding: var(--spacing-sm) var(--spacing-md) !important;
        font-size: var(--font-size-sm) !important;
        border-radius: var(--radius-lg) !important;
    }
}

/* ==========================================================
   11. ریسپانسیو - موبایل خیلی کوچک
   ========================================================== */
@media (max-width: 360px) {
    #checkout-checkout h1 {
        font-size: var(--font-size-md);
    }

    #accordion .panel-title {
        font-size: var(--font-size-sm) !important;
    }

    #accordion .panel-body {
        padding: var(--spacing-sm) var(--spacing-sm) !important;
    }

    #accordion .form-control {
        padding: 5px var(--spacing-sm) !important;
        font-size: var(--font-size-xs) !important;
    }

    #accordion .btn {
        padding: 5px var(--spacing-sm) !important;
        font-size: var(--font-size-xs) !important;
    }
}