/* ====== RasaPaya Partner-App Minimal UI ====== */
/* Font (Vazirmatn) را در _layout.php لود می‌کنیم */
:root {
  --bg: #0b1220;         /* پس‌زمینه اصلی */
  --panel: #111827;      /* پس‌زمینه کارت/پانل */
  --muted: #94a3b8;      /* متن فرعی */
  --text: #e2e8f0;       /* متن اصلی */
  --primary: #22c55e;    /* سبز اکشن */
  --primary-600: #16a34a;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #38bdf8;
  --border: #1f2937;
  --badge: #0ea5e9;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
* {box-sizing: border-box}
html {direction: rtl}
html, body {height: 100%}
body {margin: 0; background: var(--bg); color: var(--text); font-family: "Vazirmatn", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";}

/* Layout */
.container {max-width: 1080px; margin: 0 auto; padding: 24px}
.header {position: sticky; top: 0; backdrop-filter: blur(8px); background: rgba(11,18,32,.6); border-bottom: 1px solid var(--border); z-index: 50}
.header .row {display: flex; align-items: center; justify-content: space-between; padding: 12px 24px}
.brand {display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text)}
.brand .logo {width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg,#22c55e,#0ea5e9)}
.brand .title {font-weight: 800}
.nav a {color: var(--muted); text-decoration: none; margin-inline: 8px}
.nav a:hover {color: var(--text)}

.main {padding: 32px 24px}
.card {background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow)}
.card + .card {margin-top: 16px}
.grid {display: grid; gap: 16px}
.grid-2 {grid-template-columns: 1fr 1fr}
.grid-3 {grid-template-columns: repeat(3, 1fr)}
@media (max-width: 900px){ .grid-2, .grid-3 {grid-template-columns: 1fr} }

/* Typography */
.h1 {font-size: 24px; margin: 0 0 8px; font-weight: 900}
.h2 {font-size: 18px; margin: 0 0 10px; font-weight: 800}
.lead {color: var(--muted); margin: 0 0 16px}
.muted {color: var(--muted)}

/* Forms */
.form {display: grid; gap: 12px}
.input, .select, .textarea, .file {width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #0a0f1b; color: var(--text)}
.input:focus, .select:focus, .textarea:focus, .file:focus {outline: 2px solid rgba(34,197,94,.3)}
.row-2 {display: grid; grid-template-columns: 1fr 1fr; gap: 12px}
@media (max-width: 700px){ .row-2 {grid-template-columns: 1fr} }
.checkbox {display: flex; align-items: center; gap: 8px}

/* Buttons */
.btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; border-radius: var(--radius-sm); padding: 12px 16px; font-weight: 800}
.btn-primary {background: var(--primary); color: #062510}
.btn-primary:hover {background: var(--primary-600)}
.btn-ghost {background: transparent; color: var(--text); border: 1px solid var(--border)}
.btn-danger {background: var(--danger); color: #2f0b0b}
.btn-warning {background: var(--warning); color: #2d1b06}
.btn-info {background: var(--info); color: #062031}
.btn-block {width: 100%}

/* Alerts */
.alert {padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #0b1322}
.alert-error {border-color: #7f1d1d; background: #1b0b0b; color: #fecaca}
.alert-success {border-color: #14532d; background: #0b1f14; color: #bbf7d0}

/* Tables */
.table {width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden}
.table th, .table td {padding: 12px 10px; border-bottom: 1px solid var(--border); text-align: right}
.table th {background: #0c1323; color: var(--muted); font-weight: 700}
.table tr:hover td {background: #0c1221}
.table .actions {display: flex; gap: 8px}

/* Badges */
.badge {display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); background: #0c1426}
.badge-pending {color: #fcd34d}
.badge-approved {color: #86efac}
.badge-rejected {color: #fca5a5}

/* OTP boxes */
/* ===== OTP input – FIXED (Mobile First) ===== */
.otp {
    display: flex;
    justify-content: center;
    width: 100%;
}

.otp input.otp-input {
    width: 100%;
    max-width: 100%;
    height: 64px;
    font-size: 28px;
    text-align: center;
    letter-spacing: 14px;
    direction: ltr;
    padding: 0;
}

/* موبایل */
@media (max-width: 480px) {
    .otp input.otp-input {
        height: 72px;
        font-size: 32px;
        letter-spacing: 16px;
    }
}


.otp input.otp-input {
    width: 100%;
    max-width: 100%;
    height: 72px;         /* ارتفاع بزرگتر */
    font-size: 32px;      /* فونت بزرگتر */
    text-align: center;
    letter-spacing: 16px; /* فاصله بین کاراکترها */
    direction: ltr;
    padding: 0;           /* لغو padding کلاس عمومی */
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #0a0f1b;
    color: var(--text);
    box-sizing: border-box;  /* مهم برای موبایل */
}



/* Footer */
.footer {padding: 24px; color: var(--muted); border-top: 1px solid var(--border); text-align: center}