:root {
    --customer-card-bg: rgba(2, 6, 23, 0.5);
    --customer-card-border: rgba(51, 65, 85, 0.78);
    --customer-card-title: #f8fafc;
    --customer-card-muted: #94a3b8;
    --payment-label: #94a3b8;
    --payment-plan: #a5b4fc;
    --payment-primary: #34d399;
    --payment-secondary: #94a3b8;
    --customer-results-max-width: 44rem;
    --customer-results-gap: 0.875rem;
    --customer-result-title-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
    --customer-result-status-size: clamp(0.875rem, 0.84rem + 0.1vw, 0.9375rem);
    --customer-result-body-size: clamp(0.875rem, 0.84rem + 0.1vw, 0.9375rem);
    --customer-result-meta-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.875rem);
}

html[data-theme="light"] {
    --customer-card-bg: rgba(255, 255, 255, 0.92);
    --customer-card-border: rgba(148, 163, 184, 0.48);
    --customer-card-title: #0f172a;
    --customer-card-muted: #64748b;
    --payment-label: #64748b;
    --payment-plan: #4f46e5;
    --payment-primary: #059669;
    --payment-secondary: #64748b;
}

body {
    font-family: 'Vazirmatn', sans-serif;
    background-color: #090D16;
    color: #F8FAFC;
    user-select: none;
    -webkit-user-select: none;
}

/* Custom smooth transition */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* Keep the complete navigation tab clickable in every visual state. */
#main-tabs > [data-app-tab]:not(:disabled):not([aria-disabled="true"]) {
    cursor: pointer;
}

#main-tabs > [data-app-tab]:is(:disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
}

button:not(:disabled):not([aria-disabled="true"]),
[role="button"]:not([aria-disabled="true"]),
summary {
    cursor: pointer;
}

button:is(:disabled, [aria-disabled="true"]),
[role="button"][aria-disabled="true"] {
    cursor: not-allowed;
}

/* Customer-facing service cards keep provider identifiers out of view. */
.service-selection-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--customer-card-title);
    font-size: clamp(0.875rem, 0.84rem + 0.12vw, 1rem);
    font-weight: 800;
    line-height: 1.5;
}

.service-selection-heading i {
    color: #22d3ee;
}

.service-card {
    --service-accent-rgb: 34, 211, 238;
    position: relative;
    z-index: 30;
    min-width: 0;
    min-height: 138px;
    padding: 0.9rem 0.65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 2px solid var(--customer-card-border);
    border-radius: 1rem;
    background: var(--customer-card-bg);
    color: var(--customer-card-title);
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.service-card-pro { --service-accent-rgb: 52, 211, 153; }
.service-card-smart { --service-accent-rgb: 129, 140, 248; }
.service-card-edge { --service-accent-rgb: 251, 191, 36; }
.service-card-rust { --service-accent-rgb: 251, 146, 60; }
.service-card-default { --service-accent-rgb: 148, 163, 184; }

.service-card:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: rgba(var(--service-accent-rgb), 0.52);
    box-shadow: 0 12px 28px rgba(var(--service-accent-rgb), 0.1);
    transform: translateY(-2px);
}

.service-card.is-selected {
    border-color: rgba(var(--service-accent-rgb), 0.82);
    background:
        linear-gradient(rgba(var(--service-accent-rgb), 0.1), rgba(var(--service-accent-rgb), 0.04)),
        var(--customer-card-bg);
    box-shadow: 0 14px 32px rgba(var(--service-accent-rgb), 0.16);
    transform: translateY(-2px);
}

.service-card:focus-visible {
    outline: 3px solid rgba(var(--service-accent-rgb), 0.3);
    outline-offset: 3px;
}

.service-card:disabled,
.service-card[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.service-card-indicator {
    position: absolute;
    inset-block-start: 0.55rem;
    inset-inline-end: 0.55rem;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(var(--service-accent-rgb), 0.18);
    color: rgb(var(--service-accent-rgb));
    font-size: 0.65rem;
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 160ms ease, transform 160ms ease;
}

.service-card.is-selected .service-card-indicator {
    opacity: 1;
    transform: scale(1);
}

.service-card-icon {
    width: 2.8rem;
    height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--service-accent-rgb), 0.25);
    border-radius: 0.9rem;
    background: rgba(var(--service-accent-rgb), 0.1);
    color: rgb(var(--service-accent-rgb));
    font-size: 1.15rem;
}

.service-card-name {
    color: var(--customer-card-title);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    font-weight: 900;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.service-card-description {
    color: var(--customer-card-muted);
    font-size: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
    font-weight: 500;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* Payment values retain both currencies and swap only visual priority. */
.payment-summary-row {
    flex-wrap: wrap;
}

.payment-summary-copy {
    flex: 1 1 11rem;
}

.payment-summary-label {
    color: var(--payment-label);
    font-size: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
    line-height: 1.5;
}

.payment-plan-name {
    display: block;
    color: var(--payment-plan);
    font-size: clamp(0.875rem, 0.84rem + 0.12vw, 1rem);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.payment-currency-summary {
    min-width: 7.5rem;
    margin-inline-start: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
}

.payment-amount {
    display: block;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
}

.payment-amount-toman {
    order: 1;
    color: var(--payment-primary);
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
    font-weight: 900;
}

.payment-amount-usdt {
    order: 2;
    color: var(--payment-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.875rem);
    font-weight: 500;
}

html[data-language="en"] .payment-amount-usdt {
    order: 1;
    color: var(--payment-primary);
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
    font-weight: 900;
}

html[data-language="en"] .payment-amount-toman {
    order: 2;
    color: var(--payment-secondary);
    font-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.875rem);
    font-weight: 500;
}

@media (max-width: 520px) {
    .service-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-card {
        min-height: 92px;
        padding: 0.75rem;
        display: grid;
        grid-template-columns: 2.8rem minmax(0, 1fr) 1.25rem;
        grid-template-rows: auto auto;
        column-gap: 0.75rem;
        row-gap: 0.1rem;
        text-align: start;
    }

    .service-card-icon {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .service-card-name {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .service-card-description {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    .service-card-indicator {
        position: static;
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-card,
    .service-card-indicator {
        transition: none;
    }

    .service-card:hover:not(:disabled):not([aria-disabled="true"]),
    .service-card.is-selected {
        transform: none;
    }
}

/* Shared customer results column and card language. */
#section-status {
    --subscription-title-size: var(--customer-result-title-size);
    --subscription-value-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
    --subscription-body-size: clamp(0.875rem, 0.84rem + 0.12vw, 1rem);
    --subscription-label-size: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
    --subscription-meta-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
}

.customer-results-list {
    width: 100%;
    max-width: var(--customer-results-max-width);
    min-width: 0;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--customer-results-gap);
}

.customer-result-card {
    width: 100%;
    max-width: none;
    inline-size: 100%;
    max-inline-size: none;
    min-width: 0;
    justify-self: stretch;
    margin: 0 !important;
    box-sizing: border-box;
    border-radius: 1.125rem;
    background: var(--customer-card-bg);
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.16);
}

.customer-subscription-card {
    border-inline-start-width: 3px;
}

.customer-subscription-card[data-order-online="online"] {
    border-inline-start-color: #34d399;
    box-shadow: 0 18px 44px rgba(16, 185, 129, 0.1);
}

.customer-subscription-card[data-order-online="unknown"] {
    border-inline-start-color: #fbbf24;
}

.customer-subscription-card > summary {
    padding: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
}

.customer-order-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    border-inline-start-width: 3px;
}

.customer-order-card[data-order-status="pending"] {
    border-inline-start-color: #fbbf24;
    box-shadow: 0 18px 44px rgba(245, 158, 11, 0.09);
}

.customer-order-card:is(
    [data-order-status="rejected"],
    [data-order-status="deleted"]
) {
    border-inline-start-color: #fb7185;
}

.customer-order-card:is(
    [data-order-status="expired"],
    [data-order-status="disabled"]
) {
    border-inline-start-color: #94a3b8;
}

html[data-theme="light"] .customer-subscription-card[data-order-online="online"] .order-summary-presence {
    color: #047857;
}

html[data-theme="light"] .customer-subscription-card[data-order-online="unknown"] .order-summary-presence {
    color: #b45309;
}

html[data-theme="light"] .customer-subscription-card[data-order-online="offline"] .order-summary-presence {
    color: #475569;
}

html[data-theme="light"] .customer-order-card[data-order-status="pending"] :is(.customer-order-status, .customer-order-card-icon) {
    color: #b45309;
}

html[data-theme="light"] .customer-order-card:is(
    [data-order-status="rejected"],
    [data-order-status="deleted"]
) :is(.customer-order-status, .customer-order-card-icon) {
    color: #be123c;
}

html[data-theme="light"] .customer-order-card:is(
    [data-order-status="expired"],
    [data-order-status="disabled"]
) :is(.customer-order-status, .customer-order-card-icon) {
    color: #475569;
}

.customer-order-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.875rem;
    min-width: 0;
}

.customer-order-card-identity {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.customer-order-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--customer-card-border);
    border-radius: 0.875rem;
    background: color-mix(in srgb, var(--customer-card-bg) 70%, transparent);
}

.customer-order-card-copy {
    min-width: 0;
}

.customer-order-status {
    display: block;
    font-size: var(--customer-result-status-size) !important;
    font-weight: 850;
    line-height: 1.45;
}

.customer-result-title {
    margin-block-start: 0.25rem;
    color: var(--customer-card-title);
    font-size: var(--customer-result-title-size) !important;
    font-weight: 850;
    line-height: 1.5;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.customer-result-reference {
    display: block;
    margin-block-start: 0.3rem;
    color: var(--customer-card-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--customer-result-meta-size) !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
    overflow-wrap: anywhere;
}

.customer-result-metadata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.customer-result-metadata > span {
    min-height: 1.75rem;
    padding: 0.25rem 0.55rem;
    border-radius: 0.6rem;
    font-size: var(--customer-result-meta-size) !important;
    line-height: 1.35;
}

.customer-result-description {
    margin: 0;
    color: var(--customer-card-muted);
    font-size: var(--customer-result-body-size) !important;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.customer-result-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--customer-card-border);
}

.customer-result-action {
    min-height: 2.5rem;
    padding-inline: 0.875rem;
    border-radius: 0.75rem;
    font-size: var(--customer-result-body-size) !important;
    font-weight: 700;
    line-height: 1.4;
}

.customer-result-action-danger {
    border: 1px solid color-mix(in srgb, #fb7185 28%, transparent);
    background: color-mix(in srgb, #fb7185 9%, transparent);
    color: #fb7185;
}

.customer-result-action-danger:hover {
    background: color-mix(in srgb, #fb7185 16%, transparent);
}

html[data-theme="light"] .customer-result-action-danger {
    color: #be123c;
}

#vpn-orders-pagination {
    width: 100%;
    max-width: var(--customer-results-max-width);
    margin-inline: auto;
}

/* Match the readable Admin Orders filter scale without recreating its toolbar. */
#vpn-orders-toolbar {
    --customer-filter-font-size: var(--ma-readable-label, clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem));
    width: 100%;
}

#vpn-orders-toolbar :is(input, select, button) {
    min-height: 2.625rem;
    font-family: inherit;
    font-size: var(--customer-filter-font-size) !important;
    line-height: 1.45;
}

#vpn-orders-toolbar select option {
    font-size: var(--customer-filter-font-size);
}

#vpn-orders-search {
    padding-inline-start: 2.25rem !important;
    padding-inline-end: 0.75rem !important;
}

#vpn-orders-toolbar select {
    padding-inline-start: 0.75rem !important;
    padding-inline-end: 2.25rem !important;
}

#vpn-orders-toolbar .relative > .fa-magnifying-glass {
    right: auto !important;
    left: auto !important;
    inset-inline-start: 0.75rem;
}

#vpn-orders-toolbar .relative > .fa-chevron-down {
    right: auto !important;
    left: auto !important;
    inset-inline-end: 0.75rem;
}

#vpn-orders-toolbar :is(.fa-magnifying-glass, .fa-chevron-down) {
    font-size: 0.75rem !important;
}

#vpn-orders-toolbar > div:last-child {
    font-size: var(--ma-readable-meta, 0.75rem) !important;
    line-height: 1.5;
}

#section-status [data-order-id][data-order-status] h3 {
    overflow: visible;
    font-size: var(--subscription-title-size);
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

#section-status .customer-subscription-card .order-summary-presence {
    font-size: var(--customer-result-status-size);
    line-height: 1.4;
}

#section-status [data-order-id][data-order-status] strong.text-xs {
    font-size: var(--subscription-body-size);
    line-height: 1.5;
}

#section-status [data-order-id][data-order-status] .text-\[8px\] {
    font-size: var(--subscription-meta-size);
    line-height: 1.55;
}

#section-status [data-order-id][data-order-status] .text-\[9px\] {
    font-size: var(--subscription-label-size);
    line-height: 1.55;
}

#section-status [data-order-id][data-order-status] .font-mono.text-\[9px\] {
    font-size: var(--subscription-meta-size);
}

#section-status [data-order-id][data-order-status] .text-\[10px\] {
    font-size: var(--subscription-body-size);
    line-height: 1.5;
}

#section-status [data-order-id][data-order-status] :is(
    .order-used-traffic,
    .order-total-traffic,
    .order-remaining-days,
    .order-usage-percent,
    .order-online-status,
    .order-last-online,
    .order-expiry-date
) {
    overflow: visible;
    font-size: var(--subscription-value-size);
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

@media (max-width: 520px) {
    .customer-results-list {
        max-width: none;
        gap: 0.75rem;
    }

    .customer-result-card {
        border-radius: 1rem;
    }

    .customer-order-card,
    .customer-subscription-card > summary {
        padding: 0.875rem;
    }

    .customer-order-card-header {
        gap: 0.625rem;
    }

    .customer-result-actions {
        align-items: stretch;
    }

    .customer-result-action {
        flex: 1 1 auto;
        justify-content: center;
    }

    #vpn-orders-toolbar :is(input, select, button) {
        min-height: 2.75rem;
    }
}

/* ==========================================
   Custom Modern Scrollbar (هم‌رنگ با تم ایران‌کینو)
   ========================================== */

/* ۱. تنظیمات برای فایرفاکس (Firefox) */
* {
    scrollbar-width: thin;
    scrollbar-color: #0e7490 #020617; /* رنگ دستگیره (Cyan) و پس‌زمینه (Slate 950) */
}

/* ۲. تنظیمات برای مرورگرهای Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 6px;              /* عرض اسکرول‌بار عمودی */
    height: 6px;             /* ارتفاع اسکرول‌بار افقی */
}

/* پس‌زمینه ریل اسکرول */
::-webkit-scrollbar-track {
    background: #020617;     /* همان Slate-950 تم اصلی */
    border-radius: 8px;
}

/* دستگیره اسکرول (Thumb) */
::-webkit-scrollbar-thumb {
    background: #0e7490;     /* سایان تیره تراز (Cyan 700) */
    border-radius: 8px;
    border: 1px solid rgba(6, 182, 212, 0.15); /* هاله ظریف نیونی */
}

/* حالت Hover دستگیره */
::-webkit-scrollbar-thumb:hover {
    background: #06b6d4;     /* سایان روشن‌تر هنگام هاور (Cyan 500) */
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5); /* افکت درخشش نیونی */
}

/* گوشه اتصال دو اسکرول‌بار */
::-webkit-scrollbar-corner {
    background: #020617;
}
/* ==========================================
   Runtime theme support
   ========================================== */

html,
body,
body * {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 180ms;
    transition-timing-function: ease;
}

/* Keep motion-heavy UI transitions owned by existing utility classes. */
.fa-spin,
.fade-in,
[class*="animate-"],
[class*="transition-transform"] {
    transition-property: revert;
}

html[data-theme="light"] body {
    background-color: #f4f7fb !important;
    color: #0f172a !important;
}

html[data-theme="light"] [class*="bg-slate-950"] {
    background-color: rgba(255, 255, 255, 0.96) !important;
}

html[data-theme="light"] [class*="bg-slate-900"] {
    background-color: rgba(248, 250, 252, 0.96) !important;
}

html[data-theme="light"] [class*="bg-slate-800"] {
    background-color: rgba(241, 245, 249, 0.98) !important;
}

html[data-theme="light"] [class*="bg-slate-700"] {
    background-color: rgba(226, 232, 240, 0.98) !important;
}

html[data-theme="light"] [class*="bg-cyan-950"] {
    background-color: rgba(8, 145, 178, 0.08) !important;
}

html[data-theme="light"] [class*="bg-indigo-950"] {
    background-color: rgba(79, 70, 229, 0.07) !important;
}

html[data-theme="light"] [class*="bg-emerald-950"] {
    background-color: rgba(5, 150, 105, 0.07) !important;
}

html[data-theme="light"] [class*="bg-rose-950"] {
    background-color: rgba(225, 29, 72, 0.06) !important;
}

html[data-theme="light"] [class*="border-slate-900"],
html[data-theme="light"] [class*="border-slate-800"],
html[data-theme="light"] [class*="border-slate-700"],
html[data-theme="light"] [class*="border-slate-600"] {
    border-color: #d9e2ec !important;
}

html[data-theme="light"] [class*="text-slate-100"],
html[data-theme="light"] [class*="text-slate-200"] {
    color: #1e293b !important;
}

html[data-theme="light"] [class*="text-slate-300"] {
    color: #334155 !important;
}

html[data-theme="light"] [class*="text-slate-400"] {
    color: #475569 !important;
}

html[data-theme="light"] [class*="text-slate-500"],
html[data-theme="light"] [class*="text-slate-600"] {
    color: #64748b !important;
}

html[data-theme="light"] .text-white {
    color: #0f172a !important;
}

/* White text must remain white on strong colored actions. */
html[data-theme="light"] button[class*="bg-indigo"][class*="text-white"],
html[data-theme="light"] button[class*="bg-emerald"][class*="text-white"],
html[data-theme="light"] button[class*="bg-cyan"][class*="text-white"],
html[data-theme="light"] button[class*="bg-sky"][class*="text-white"],
html[data-theme="light"] button[class*="from-indigo"][class*="text-white"],
html[data-theme="light"] button[class*="from-emerald"][class*="text-white"],
html[data-theme="light"] button[class*="from-cyan"][class*="text-white"],
html[data-theme="light"] button[class*="from-rose"][class*="text-white"],
html[data-theme="light"] a[class*="bg-indigo"][class*="text-white"],
html[data-theme="light"] a[class*="bg-emerald"][class*="text-white"] {
    color: #ffffff !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    color: #0f172a !important;
    caret-color: #0891b2;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] .shadow-2xl,
html[data-theme="light"] .shadow-xl,
html[data-theme="light"] .shadow-lg {
    --tw-shadow-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] * {
    scrollbar-color: #0891b2 #e2e8f0;
}

html[data-theme="light"] ::-webkit-scrollbar-track,
html[data-theme="light"] ::-webkit-scrollbar-corner {
    background: #e2e8f0;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #0891b2;
    border-color: rgba(8, 145, 178, 0.16);
}

/* Direction-sensitive spacing for English mode. */
html[data-language="en"] body {
    font-family: "Vazirmatn", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-language="en"] .fa-solid.ml-1,
html[data-language="en"] .fa-brands.ml-1 {
    margin-left: 0;
    margin-right: 0.25rem;
}

/* Orders toolbar: keep embedded field icons optically centered inside controls. */
#vpn-orders-toolbar .relative > :is(.fa-magnifying-glass, .fa-chevron-down) {
    top: 50% !important;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 !important;
    display: grid !important;
    place-items: center;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
    z-index: 2;
}

#vpn-orders-toolbar .relative > .fa-magnifying-glass {
    left: auto !important;
    right: auto !important;
    inset-inline-start: 0.75rem !important;
    inset-inline-end: auto !important;
}

#vpn-orders-toolbar .relative > .fa-chevron-down {
    left: auto !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0.75rem !important;
}

#vpn-orders-search {
    padding-inline-start: 2.625rem !important;
    padding-inline-end: 0.875rem !important;
}

#vpn-orders-toolbar select {
    padding-inline-start: 0.875rem !important;
    padding-inline-end: 2.625rem !important;
}

/* Orders toolbar final icon alignment: lock icons to the true vertical center. */
#vpn-orders-toolbar .relative > :is(.fa-magnifying-glass, .fa-chevron-down) {
    top: 0 !important;
    bottom: 0 !important;
    inset-block: 0 !important;
    margin-block: auto !important;
    transform: none !important;
    width: 1.25rem;
    height: 1.25rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    pointer-events: none;
    z-index: 2;
}

/* Search icon: always centered on the right side of the search field. */
#vpn-orders-toolbar .relative > .fa-magnifying-glass {
    right: 0.75rem !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
}

/* Select chevrons: always centered on the left side of each select field. */
#vpn-orders-toolbar .relative > .fa-chevron-down {
    left: 0.75rem !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
}

/* Reserve space for the physically positioned icons in both RTL and LTR. */
#vpn-orders-search {
    padding-right: 2.625rem !important;
    padding-left: 0.875rem !important;
}

#vpn-orders-toolbar select {
    padding-left: 2.625rem !important;
    padding-right: 0.875rem !important;
}

/* Orders toolbar precision offsets — matched to the actual 2.5rem controls. */
#vpn-orders-toolbar .relative > :is(.fa-magnifying-glass, .fa-chevron-down) {
    top: auto !important;
    bottom: auto !important;
    inset-block-start: auto !important;
    inset-block-end: auto !important;
    margin: 0 !important;
    transform: none !important;
    width: 1.25rem;
    height: 1.25rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    pointer-events: none;
    z-index: 2;
}

/* Search icon: exact center-right position verified in DevTools. */
#vpn-orders-toolbar .relative > .fa-magnifying-glass {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    top: 1.4rem !important;
    right: 0.75rem !important;
    left: auto !important;
}

/* Select chevrons: exact center-left position verified in DevTools. */
#vpn-orders-toolbar .relative > .fa-chevron-down {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    top: 1.2rem !important;
    left: 0.75rem !important;
    right: auto !important;
}


/* IranKino Edge service grid */
.service-card-grid.edge-enabled {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .service-card-grid.edge-enabled {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* IranKino purchase service selector: always exactly two equal cards per row. */
.service-card-grid-two {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.625rem;
    width: 100%;
    align-items: stretch;
}

.service-card-grid-two > .service-card {
    width: 100% !important;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .service-card-grid-two > .service-card {
        min-height: 9.5rem;
    }
}

@media (max-width: 639px) {
    .service-card-grid-two {
        gap: 0.5rem;
    }

    .service-card-grid-two > .service-card {
        min-height: 8.5rem;
    }
}