/* ============================================================
   VakilRate Dashboard Design System — Trust & Authority
   Navy #1E3A8A + Gold #D4A017 on soft slate #F8FAFC
   Shared across: client-dashboard, lawyer-dashboard, admin-*, support-*
   ============================================================ */

:root {
    --vkr-navy: #1E3A8A;
    --vkr-navy-deep: #0F1B3D;
    --vkr-navy-bright: #2447B0;
    --vkr-gold: #D4A017;
    --vkr-gold-deep: #B45309;
    --vkr-gold-soft: #FEF3C7;
    --vkr-bg: #F8FAFC;
    --vkr-surface: #FFFFFF;
    --vkr-border: #CBD5E1;
    --vkr-muted: #E9EEF5;
}

/* ---- Base ---- */
body {
    font-family: 'Vazirmatn', 'Inter', sans-serif;
    background-color: var(--vkr-bg);
}

/* ---- Gradients ---- */
.vkr-grad-navy {
    background: linear-gradient(135deg, var(--vkr-navy-deep) 0%, var(--vkr-navy) 55%, var(--vkr-navy-bright) 100%);
}
.vkr-grad-gold {
    background: linear-gradient(135deg, var(--vkr-gold-deep) 0%, var(--vkr-gold) 100%);
}
.vkr-gold-line {
    background: linear-gradient(90deg, var(--vkr-gold), var(--vkr-gold-soft));
}

/* ---- Cards ---- */
.vkr-card-shadow {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -14px rgba(30, 58, 138, 0.22);
}
.vkr-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.vkr-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -16px rgba(30, 58, 138, 0.32);
}

/* ---- Entrance animation ---- */
.vkr-rise {
    animation: vkrRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes vkrRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.vkr-d1 { animation-delay: 0.05s; }
.vkr-d2 { animation-delay: 0.10s; }
.vkr-d3 { animation-delay: 0.15s; }
.vkr-d4 { animation-delay: 0.20s; }
.vkr-d5 { animation-delay: 0.25s; }
.vkr-d6 { animation-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
    .vkr-rise, .vkr-hover-lift, .tab-content.active { animation: none !important; transition: none !important; }
    .vkr-hover-lift:hover { transform: none; }
}

/* ============================================================
   Select / Combobox RTL (v14.43)
   در حالت RTL فلش بازشو باید سمت چپ فیلد باشد و padding بین متن و
   فلش به‌اندازهٔ کافی باشد تا هرگز با هم تداخل نکنند. این قواعد با
   specificity بالاتر بر utility های Tailwind (p-3، pl-4، pr-10 و...)
   غلبه می‌کنند و روی تمام صفحات سایت اعمال می‌شوند.
   ============================================================ */
html[dir="rtl"] select,
[dir="rtl"] select {
    background-position: left 0.625rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 0.75rem;
    padding-left: 2.5rem;
}

/* selectهایی که آیکون اختصاصی (نقشه/مکان و...) سمت راست دارند:
   فضای راست اضافه می‌شود تا متن زیر آیکون نرود */
html[dir="rtl"] select.vkr-select-icon {
    padding-right: 2.75rem;
}

/* ---- Accessibility: visible focus rings ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--vkr-navy);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C7D2E0; border-radius: 8px; border: 2px solid var(--vkr-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--vkr-navy); }
/* ---- v14.40: Order-review modal ---- */
.vkr-modal-panel { animation: vkr-modal-in 0.22s ease-out; }
@keyframes vkr-modal-in {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#pay-modal:not(.hidden) { display: flex !important; }
#pay-modal .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20; }
@media (prefers-reduced-motion: reduce) {
    .vkr-modal-panel { animation: none; }
}