/* ---------------------------------------------------------------------------
   Panel overrides on top of the Metronic bundles.
   Loaded last, so everything here wins without touching the theme sources.
   --------------------------------------------------------------------------- */

/* Vazirmatn variable font: one file covers weights 100-900. */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/assets/fonts/vazirmatn.woff2') format('woff2-variations'),
         url('/assets/fonts/vazirmatn.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Persian UI switches the whole type stack; Latin text inside still renders
   correctly because Vazirmatn ships full Latin coverage. */
html[dir='rtl'] {
    --bs-font-sans-serif: 'Vazirmatn', 'Inter', Helvetica, sans-serif;
}

html[dir='rtl'] body,
html[dir='rtl'] .btn,
html[dir='rtl'] .form-control,
html[dir='rtl'] .form-select,
html[dir='rtl'] .menu,
html[dir='rtl'] .modal,
html[dir='rtl'] .dataTables_wrapper {
    font-family: var(--bs-font-sans-serif);
}

/* Persian reads better with slightly looser lines. */
html[dir='rtl'] body {
    line-height: 1.7;
}

/* Numbers, prices, SKUs and dates stay legible when they sit inside RTL text. */
.ltr-nums {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* On a table cell it must stay a cell: inline-block would fold it into its
   neighbour and shift every column after it (the orders list's number,
   total and date cells). */
td.ltr-nums,
th.ltr-nums {
    display: table-cell;
}

/* ---------------------------------------------------------------------------
   Jalali datepicker, restyled to match Metronic instead of its own theme.
   --------------------------------------------------------------------------- */
.datepicker-plot-area {
    font-family: var(--bs-font-sans-serif);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.475rem;
    box-shadow: var(--bs-dropdown-box-shadow);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    z-index: 1060;
}

.datepicker-plot-area .navigator .btn,
.datepicker-plot-area .table-days td span,
.datepicker-plot-area .table-months td span,
.datepicker-plot-area .table-years td span {
    color: var(--bs-gray-800);
    border-radius: 0.475rem;
}

.datepicker-plot-area .table-days td.selected span,
.datepicker-plot-area .table-months td.selected span,
.datepicker-plot-area .table-years td.selected span {
    background-color: var(--bs-primary);
    color: var(--bs-primary-inverse);
}

.datepicker-plot-area .table-days td:hover span,
.datepicker-plot-area .table-months td:hover span,
.datepicker-plot-area .table-years td:hover span {
    background-color: var(--bs-primary-light);
    color: var(--bs-primary);
}

.datepicker-plot-area .table-days td.disabled span,
.datepicker-plot-area .table-days td.other-month span {
    color: var(--bs-gray-400);
}

/* ---------------------------------------------------------------------------
   Small panel-specific pieces.
   --------------------------------------------------------------------------- */

/* Image grid on the product form. */
.product-image-tile {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.475rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-gray-100);
}

.product-image-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image-tile .tile-actions {
    position: absolute;
    inset-block-start: 0.35rem;
    inset-inline-end: 0.35rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.product-image-tile:hover .tile-actions,
.product-image-tile:focus-within .tile-actions {
    opacity: 1;
}

.product-image-tile.is-primary {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
}

/* Tabs that hold one input per language. */
.locale-tabs .nav-link {
    text-transform: none;
}

.locale-tabs .nav-link .locale-badge {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-inline-start: 0.35rem;
}

/* Field-level validation message, matching Metronic's own invalid-feedback. */
.form-error {
    color: var(--bs-danger);
    font-size: 0.925rem;
    font-weight: 500;
    margin-top: 0.35rem;
}

/* ---------------------------------------------------------------------------
   Metronic dropzones without Dropzone.js: a native multi-file input is layered
   over the template's drop area so files post with the surrounding form. The
   visual result is exactly the template's.
   --------------------------------------------------------------------------- */
.panel-dropzone {
    position: relative;
}

.panel-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Names of the picked files, appended by panel.js under the drop area. */
.panel-dropzone-files {
    position: relative;
    z-index: 1;
    margin-top: 0.75rem;
    font-size: 0.925rem;
    color: var(--bs-gray-700);
}

/* --- impersonation bar ---------------------------------------------------
   Sticky rather than fixed: it must survive scrolling without the theme's own
   fixed header having to know about it. The amber is not a Metronic variable
   on purpose — this bar is meant to look like it does not belong. */
.impersonation-bar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #b54708;
    border-bottom: 2px solid #7a2e0e;
}

[data-bs-theme="dark"] .impersonation-bar {
    background: #93370d;
}

/* --- server console ------------------------------------------------------
   A black box the guest draws into. Fixed height rather than growing with the
   guest's resolution, so the page does not jump around while a machine boots
   and changes mode two or three times. */
.console-screen {
    height: 70vh;
    min-height: 420px;
    background: #000;
    border-radius: .475rem;
    overflow: hidden;
}

.console-screen canvas {
    display: block;
}

/* --- charts in a right-to-left page --------------------------------------
   amCharts 5 paints to a <canvas>, and a 2D context inherits the page's CSS
   `direction`. Under direction: rtl the context's default textAlign of "start"
   means the RIGHT edge, so every label it draws is shifted left by its own
   width and the leading characters fall outside the plot: the dashboard's
   y-axis read ",000" where it should have read "1,000". amCharts measures text
   on a detached canvas, which stays LTR, so the measuring and the painting
   disagreed as well.

   These charts are left-to-right by design — a time series running from the
   older date to the newer one — so the fix is to keep their canvas LTR, not to
   mirror them. Persian labels inside a chart still render right-to-left,
   because bidi resolves each run on its own.

   ApexCharts needs nothing: it draws SVG and sets the direction on its own
   root. */
[dir="rtl"] canvas[class*="am5-"],
[dir="rtl"] .am5-html-container {
    direction: ltr;
}


/* --- sidebar drill-down ---------------------------------------------------
   Every level of the sidebar is in the HTML at once; only one is shown. The
   server marks the level that matches the current route, so with JavaScript
   off the menu still lands on the right page and a parent link is an ordinary
   link to the group's first page. sidebar-menu.js turns the same markup into
   an instant slide.

   --panel-dir flips the travel direction under RTL: "forward" means towards
   the reading direction either way. */
.menu[data-panel-menu] {
    --panel-dir: 1;
}

[dir="rtl"] .menu[data-panel-menu] {
    --panel-dir: -1;
}

.panel-menu-level {
    display: none;
}

.panel-menu-level.is-open {
    display: block;
}

.panel-menu-level.is-sliding-forward {
    animation: panel-menu-forward 0.2s ease both;
}

.panel-menu-level.is-sliding-back {
    animation: panel-menu-back 0.2s ease both;
}

@keyframes panel-menu-forward {
    from { opacity: 0; transform: translateX(calc(28px * var(--panel-dir))); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes panel-menu-back {
    from { opacity: 0; transform: translateX(calc(-28px * var(--panel-dir))); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .panel-menu-level.is-sliding-forward,
    .panel-menu-level.is-sliding-back {
        animation: none;
    }
}

/* The chevrons point the way the panel will travel, which is mirrored in RTL. */
[dir="rtl"] .panel-menu-arrow {
    transform: scaleX(-1);
}

.panel-menu-arrow-end {
    margin-inline-start: auto;
    opacity: 0.5;
}

/* The back row is a heading that happens to be clickable, so it is quieter
   than a real menu entry and separated from the group's pages. */
.panel-menu-head {
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.panel-menu-head .menu-title {
    font-size: 1.05rem;
}

.menu[data-panel-menu] .menu-link .badge {
    margin-inline-start: auto;
}


/* --- bank card -----------------------------------------------------------
   A card number is copied by hand into a banking app under time pressure, so
   it is drawn the way it is printed: four groups, wide tracking, left to right
   even on a Persian page. The chip is inline SVG — no asset, and sharp at any
   density.

   Two variants: `primary` is where the money goes, `muted` is where it comes
   from. They are deliberately different enough that nobody transfers to their
   own card by mistake. */

.bank-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    width: 100%;
    max-width: 360px;
    min-height: 210px;
    padding: 1.5rem;
    border-radius: 1rem;
    color: #fff;
    background: linear-gradient(135deg, #1b2137 0%, #2b3556 45%, #1a2036 100%);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.75);
    overflow: hidden;
}

/* The arc most cards carry, kept faint so it never fights the number. */
.bank-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -60px;
    top: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.bank-card--primary {
    background: linear-gradient(135deg, #0b3d2e 0%, #10664a 45%, #0a3a2b 100%);
}

.bank-card--muted {
    background: linear-gradient(135deg, #2a2f3a 0%, #3b414f 45%, #262b34 100%);
}

.bank-card__label {
    position: absolute;
    top: 0.9rem;
    inset-inline-start: 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.65);
}

.bank-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.bank-card__chip {
    width: 42px;
    height: 34px;
    flex: 0 0 auto;
}

.bank-card__bank {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-align: end;
}

.bank-card__number {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.bank-card__number[data-panel-copy] {
    cursor: pointer;
}

.bank-card__copy {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.bank-card__number:hover .bank-card__copy,
.bank-card__number:focus-visible .bank-card__copy {
    opacity: 0.8;
}

.bank-card__empty {
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.12em;
}

.bank-card__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.bank-card__holder-label {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.2rem;
}

.bank-card__holder-name {
    font-size: 0.95rem;
    font-weight: 600;
}

.bank-card__iban {
    font-size: 0.75rem;
    text-align: end;
    color: rgba(255, 255, 255, 0.85);
}

/* The arrow between "from" and "to", which turns two cards into a direction. */
.bank-card-flow {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.bank-card-flow__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bs-gray-200);
    color: var(--bs-gray-700);
    flex: 0 0 auto;
}

[dir="rtl"] .bank-card-flow__arrow i {
    transform: scaleX(-1);
}

@media (max-width: 767.98px) {
    .bank-card {
        max-width: 100%;
        min-height: 190px;
    }

    .bank-card__number {
        font-size: 1.08rem;
        gap: 0.6rem;
    }

    .bank-card-flow__arrow {
        transform: rotate(90deg);
        margin: 0 auto;
    }
}


/* --- announcement swatches ------------------------------------------------
   The list and the editor both show the notice as it will look. A colour is
   only judgeable next to its own text. */

.announcement-swatch,
.announcement-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.announcement-preview {
    justify-content: center;
    min-height: 46px;
    text-align: center;
}

.announcement-swatch__btn,
.announcement-preview__btn {
    flex: 0 0 auto;
    padding: 0.25rem 0.7rem;
    border-radius: 0.35rem;
    background-color: rgba(0, 0, 0, 0.12);
    font-size: 0.8rem;
}

.form-control-color {
    max-width: 58px;
    padding: 0.35rem;
}


/* --- footer banner preview ------------------------------------------------
   The same four custom properties the site's band uses, so what an operator
   sees here is what the visitor gets. */

.banner-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.75rem 1.5rem;
    border-radius: 0.75rem;
    background-color: var(--cta-bg, #da7800);
    color: var(--cta-fg, #fff);
}

.banner-preview h4 {
    color: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    white-space: pre-line;
}

.banner-preview p {
    color: inherit;
    opacity: 0.75;
    font-size: 0.9rem;
    margin: 0;
    white-space: pre-line;
}

.banner-preview__btn {
    flex: 0 0 auto;
    padding: 0.65rem 1.4rem;
    border-radius: 0.35rem;
    font-weight: 600;
    background-color: var(--cta-btn-bg, #fff);
    color: var(--cta-btn-fg, #da7800);
}


/* --- share buttons --------------------------------------------------------
   Replaces the seven dead brand icons the Metronic demo shipped. Each one is
   a real destination, so each gets its own brand colour on hover and nothing
   is shown that cannot actually be done. */

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-gray-600);
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

.share-btn svg {
    width: 18px;
    height: 18px;
}

.share-btn:hover {
    color: #fff;
}

.share-btn--telegram:hover { background-color: #229ed9; border-color: #229ed9; }
.share-btn--x:hover        { background-color: #0f1419; border-color: #0f1419; }
.share-btn--instagram:hover{ background-color: #d62976; border-color: #d62976; }
.share-btn--copy:hover     { background-color: var(--bs-primary); border-color: var(--bs-primary); }

.share-btn.is-copied {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}


/* --- office pin picker ----------------------------------------------------
   The same pin the public contact page draws, so the operator places exactly
   what visitors will see. Leaflet lays tiles out left-to-right whatever the
   page does; letting the RTL direction reach it misplaces them. */

.office-picker {
    height: 300px;
    border-radius: 0.75rem;
    border: 1px solid var(--bs-border-color);
    overflow: hidden;
    direction: ltr;
    z-index: 0;
}

.office-pin-wrap {
    background: transparent;
    border: 0;
}

.office-pin {
    position: relative;
    display: block;
    width: 34px;
    height: 44px;
}

/* A teardrop: a rotated rounded square with one sharp corner pointing down. */
.office-pin::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50% 50% 50% 0;
    background: linear-gradient(135deg, #f39a1f, #da7800);
    transform: rotate(-45deg);
    transform-origin: center;
    box-shadow: 0 6px 14px -4px rgba(218, 120, 0, 0.7);
}

.office-pin__dot {
    position: absolute;
    left: 12px;
    top: 9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}


/* --- terms bar ------------------------------------------------------------
   The first thing in the content, directly under the header. Not above the
   header: the theme's header is position:fixed, and a bar above it ends up
   drawn over it, hiding the logo and the account menu. Red rather than the
   impersonation bar's amber — this one is not a reminder, it is the reason
   nothing else in the panel will open. */

.terms-bar {
    margin-bottom: 1.75rem;
    border-radius: 0.85rem;
    background: linear-gradient(90deg, #b42318, #d92d20);
    color: #fff;
    box-shadow: 0 12px 28px -18px rgba(180, 35, 24, 0.9);
    overflow: hidden;
}

[data-bs-theme="dark"] .terms-bar {
    background: linear-gradient(90deg, #912018, #b42318);
}

/* Acceptance switched to optional: a reminder, so amber rather than red. */
.terms-bar--reminder {
    background: linear-gradient(90deg, #b54708, #dc6803);
    box-shadow: 0 12px 28px -18px rgba(181, 71, 8, 0.9);
}

.terms-bar--reminder .terms-bar__btn {
    color: #b54708;
}

.terms-bar__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 20px;
}

.terms-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.16);
    flex: 0 0 auto;
}

.terms-bar__icon i {
    color: #fff;
}

.terms-bar__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 260px;
    min-width: 0;
    font-size: 0.9rem;
}

.terms-bar__text span {
    opacity: 0.88;
    font-size: 0.82rem;
}

.terms-bar__btn {
    background: #fff;
    color: #b42318;
    font-weight: 700;
    border: 0;
}

.terms-bar__btn:hover {
    background: #fef3f2;
    color: #912018;
}

/* --- terms review ---------------------------------------------------------
   The full text of the version being accepted, in a box that scrolls on its
   own so the accept button never leaves the screen. */

.terms-review__text {
    max-height: 52vh;
    overflow-y: auto;
    padding: 1.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background-color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .terms-review__text {
    background-color: var(--bs-gray-100);
}

.terms-review__clause + .terms-review__clause {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--bs-border-color);
}

.terms-review__clause h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.terms-review__clause .rich-content {
    font-size: 0.95rem;
    line-height: 2;
    color: var(--bs-gray-700);
}

.terms-review__changes {
    border-inline-start: 4px solid var(--bs-warning);
    background: var(--bs-light-warning);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    white-space: pre-line;
}

/* --- terms modal ---------------------------------------------------------
   partials/terms-modal.blade.php. A dialog rather than a bar: it is a
   decision, and it is laid out as one — what changed, read it, tick, accept.
   The tick box looks locked until the text has been scrolled to the end. */

.terms-modal .modal-content {
    border: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.45);
}

.terms-modal__hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 28px 24px;
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(135deg, var(--bs-primary), #1b2b65);
}

.terms-modal__seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.terms-modal__seal i {
    font-size: 2rem;
    color: #fff;
}

.terms-modal__title {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
}

.terms-modal__meta {
    font-size: 0.85rem;
    opacity: 0.85;
}

.terms-modal__close,
.terms-modal__close:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.terms-modal__close i {
    color: #fff !important;
}

.terms-modal .modal-body {
    padding: 26px 28px 8px;
}

.terms-modal__changes {
    border-inline-start: 4px solid var(--bs-warning);
    background: var(--bs-light-warning);
    border-radius: 0.65rem;
    padding: 0.9rem 1.1rem;
}

.terms-modal__changes-text {
    white-space: pre-line;
    color: var(--bs-gray-700);
    font-size: 0.92rem;
    line-height: 1.9;
}

.terms-modal__steps {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

.terms-modal__step {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 0.75rem;
    border: 1px dashed var(--bs-gray-300);
    color: var(--bs-gray-600);
    font-weight: 600;
    font-size: 0.9rem;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.terms-modal__step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bs-gray-200);
    color: var(--bs-gray-700);
    font-size: 0.8rem;
    font-weight: 700;
}

.terms-modal__step-dot i {
    display: none;
    color: #fff;
    font-size: 1rem;
}

.terms-modal__step.is-current {
    border-style: solid;
    border-color: var(--bs-primary);
    color: var(--bs-gray-900);
}

.terms-modal__step.is-current .terms-modal__step-dot {
    background: var(--bs-primary);
    color: #fff;
}

.terms-modal__step.is-done {
    border-style: solid;
    border-color: var(--bs-success);
    background: var(--bs-light-success);
    color: var(--bs-gray-900);
}

.terms-modal__step.is-done .terms-modal__step-dot {
    background: var(--bs-success);
}

.terms-modal__step.is-done .terms-modal__step-dot i {
    display: inline;
}

.terms-modal__step.is-done .terms-modal__step-dot span {
    display: none;
}

.terms-modal__reader {
    position: relative;
    margin-bottom: 1.25rem;
    scroll-margin-top: 12px;
}

.terms-modal__progress {
    height: 4px;
    border-radius: 4px 4px 0 0;
    background: var(--bs-gray-200);
    overflow: hidden;
}

.terms-modal__progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-success));
    transition: width 0.15s linear;
}

[dir="rtl"] .terms-modal__progress span {
    background: linear-gradient(270deg, var(--bs-primary), var(--bs-success));
}

.terms-modal__text {
    max-height: 42vh;
    overflow-y: auto;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--bs-border-color);
    border-top: 0;
    border-radius: 0 0 0.75rem 0.75rem;
    background-color: var(--bs-gray-100);
    outline: none;
}

.terms-modal__text:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
}

.terms-modal__end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--bs-border-color);
    color: var(--bs-success);
    font-weight: 600;
    font-size: 0.85rem;
}

.terms-modal__end i {
    color: var(--bs-success);
    font-size: 1.1rem;
}

.terms-modal__hint {
    position: absolute;
    inset-inline: 0;
    bottom: 10px;
    margin: 0 auto;
    width: max-content;
    max-width: 90%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bs-gray-900);
    color: var(--bs-gray-100);
    font-size: 0.8rem;
    font-weight: 600;
    pointer-events: none;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
    animation: terms-hint-bob 1.6s ease-in-out infinite;
}

.terms-modal__hint[hidden] {
    display: none;
}

.terms-modal__hint i {
    color: inherit;
}

@keyframes terms-hint-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .terms-modal__hint { animation: none; }
}

.terms-modal__consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 0.75rem;
    border: 1px solid var(--bs-gray-300);
    background: var(--bs-gray-100);
    cursor: not-allowed;
    font-weight: 600;
    color: var(--bs-gray-500);
    line-height: 1.9;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.terms-modal__consent .form-check-input {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0.2rem 0 0;
}

.terms-modal__consent.is-unlocked {
    cursor: pointer;
    color: var(--bs-gray-900);
    border-color: var(--bs-primary);
    background: var(--bs-light-primary);
}

.terms-modal__record {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 2px 18px;
    color: var(--bs-gray-600);
    font-size: 0.78rem;
    line-height: 1.8;
}

.terms-modal__record i {
    font-size: 1.1rem;
    color: var(--bs-gray-500);
    margin-top: 2px;
}

.terms-modal__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 28px 22px;
    border-top: 1px solid var(--bs-border-color);
    justify-content: flex-start;
}

.terms-modal__footer > .btn {
    margin: 0;
}

.terms-modal__footer-gap {
    flex: 1 1 auto;
}

.terms-modal [data-terms-open].is-done,
.terms-modal [data-terms-open].is-done i {
    color: var(--bs-success);
}

.terms-modal [data-terms-open].is-done {
    background: var(--bs-light-success);
}

@media (max-width: 575.98px) {
    .terms-modal__hero { padding: 20px; }
    .terms-modal .modal-body { padding: 20px 20px 6px; }
    .terms-modal__footer { padding: 14px 20px 18px; }
    .terms-modal__footer > .btn:not(.btn-link) { flex: 1 1 100%; }
    .terms-modal__footer-gap { display: none; }
    .terms-modal__steps { flex-direction: column; }
}

/* The page behind the modal while the panel is locked. */
.terms-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 1.5rem;
}

.terms-locked__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 24px;
    margin-bottom: 1.5rem;
    background: var(--bs-light-primary);
}

.terms-locked__icon i {
    font-size: 2.75rem;
    color: var(--bs-primary);
}


/* Locked until read and ticked: plainly not clickable yet. */
.terms-modal [data-terms-submit]:disabled {
    opacity: 0.4;
    filter: grayscale(0.5);
}

/* Settings → payments: one tile per withdrawal destination. */
.payment-setting-tile {
    padding: 1.25rem;
    border: 1px dashed var(--bs-gray-300);
    border-radius: 0.85rem;
}

/* --- withdrawals ----------------------------------------------------------
   shop/withdrawals/{create,index}. The destination is the one thing on these
   pages a mistake cannot be undone for, so it is set large, monospaced and
   checked as it is typed. */

.withdraw-method {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 18px 20px;
    border: 1.5px solid var(--bs-gray-300);
    border-radius: 1rem;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.withdraw-method:hover {
    border-color: var(--bs-primary);
}

.withdraw-method.is-active {
    border-color: var(--bs-primary);
    background: var(--bs-light-primary);
    box-shadow: 0 10px 24px -18px rgba(var(--bs-primary-rgb), 0.9);
}

.withdraw-method__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.withdraw-method:has(.withdraw-method__input:focus-visible),
.withdraw-network:has(.withdraw-method__input:focus-visible) {
    outline: 3px solid rgba(var(--bs-primary-rgb), 0.35);
    outline-offset: 2px;
}

.withdraw-method__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 1.6rem;
}

.withdraw-method__icon--sm {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.35rem;
}

.withdraw-method__icon--iban {
    background: var(--bs-light-primary);
}

.withdraw-method__icon--iban i {
    color: var(--bs-primary);
}

.withdraw-method__icon--usdt {
    background: rgba(38, 161, 123, 0.14);
}

.withdraw-method__icon--usdt i {
    color: #26a17b;
}

.withdraw-method__check {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--bs-gray-300);
}

.withdraw-method__check i {
    display: none;
    color: #fff;
    font-size: 0.95rem;
}

.withdraw-method.is-active .withdraw-method__check {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
}

.withdraw-method.is-active .withdraw-method__check i {
    display: inline;
}

.withdraw-network {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1.5px solid var(--bs-gray-300);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bs-gray-700);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.withdraw-network.is-active {
    border-color: #26a17b;
    background: rgba(38, 161, 123, 0.1);
    color: var(--bs-gray-900);
}

.withdraw-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
    padding-inline-end: 3rem;
}

.withdraw-check {
    position: absolute;
    top: 50%;
    inset-inline-end: 14px;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    pointer-events: none;
}

/* The input is LTR, so the check sits on its right edge in either language. */
[dir="rtl"] .withdraw-check {
    inset-inline-end: auto;
    right: 14px;
}

.withdraw-check.is-ok i {
    color: var(--bs-success);
}

.withdraw-check.is-bad i {
    color: var(--bs-danger);
}

.withdraw-confirm {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 0.75rem;
    border: 1px dashed var(--bs-warning);
    background: var(--bs-light-warning);
    font-weight: 600;
    color: var(--bs-gray-800);
    line-height: 1.9;
    cursor: pointer;
}

.withdraw-confirm.is-invalid {
    border-color: var(--bs-danger);
}

.withdraw-confirm .form-check-input {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    margin: 0.25rem 0 0;
}

.withdraw-balance {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 26px 26px 28px;
    border-radius: 1.1rem;
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(135deg, var(--bs-primary), #1b2b65);
    box-shadow: 0 18px 40px -24px rgba(var(--bs-primary-rgb), 0.9);
}

.withdraw-balance__label {
    font-size: 0.9rem;
    opacity: 0.85;
}

.withdraw-balance__value {
    font-size: 1.9rem;
    font-weight: 800;
}

.withdraw-balance__note {
    font-size: 0.8rem;
    opacity: 0.85;
}

.withdraw-balance__art {
    position: absolute;
    inset-inline-end: -10px;
    bottom: -18px;
    font-size: 7rem;
    color: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

.withdraw-steps {
    margin: 0;
    padding-inline-start: 1.2rem;
    color: var(--bs-gray-700);
    line-height: 2;
    font-size: 0.92rem;
}

.withdraw-steps li + li {
    margin-top: 0.5rem;
}

.withdraw-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.withdraw-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-200);
    color: var(--bs-gray-700);
    font-weight: 600;
    font-size: 0.9rem;
}

.withdraw-tabs__item:hover {
    color: var(--bs-primary);
}

.withdraw-tabs__item.is-active {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #fff;
}

.withdraw-tabs__count {
    min-width: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bs-gray-100);
    color: var(--bs-gray-700);
    font-size: 0.75rem;
    text-align: center;
}

.withdraw-tabs__item.is-active .withdraw-tabs__count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.withdraw-destination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 0.65rem;
    background: var(--bs-gray-100);
    color: var(--bs-gray-900);
    font-size: 0.95rem;
    direction: ltr;
    word-break: break-all;
    cursor: pointer;
}

.withdraw-item--pending {
    border-inline-start: 4px solid var(--bs-warning) !important;
}

.withdraw-actions {
    height: 100%;
    padding: 18px;
    border-radius: 0.85rem;
    background: var(--bs-gray-100);
}

/* Persian step numbers in Persian. */
[lang="fa"] .withdraw-steps {
    list-style-type: persian;
}

/* --- SMS ------------------------------------------------------------------
   settings/sms, sms/broadcasts/*, sms/templates/*, sms/groups/*. */

.sms-status {
    padding: 22px 24px;
    border-radius: 1.1rem;
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(135deg, var(--bs-primary), #1b2b65);
    box-shadow: 0 18px 40px -24px rgba(var(--bs-primary-rgb), 0.9);
}

.sms-status.is-off {
    background: linear-gradient(135deg, #5e6278, #3f4254);
    box-shadow: none;
}

.sms-status__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #50cd89;
    box-shadow: 0 0 0 4px rgba(80, 205, 137, 0.25);
}

.sms-status.is-off .sms-status__dot {
    background: #f1416c;
    box-shadow: 0 0 0 4px rgba(241, 65, 108, 0.25);
}

.sms-meter {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.sms-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #fff;
    transition: width 0.4s ease;
}

.card .sms-meter,
.sms-meter--light {
    background: var(--bs-gray-200);
}

.card .sms-meter span,
.sms-meter--light span {
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-success));
}

.sms-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 16px 18px;
    border: 1.5px solid var(--bs-gray-300);
    border-radius: 1rem;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.sms-choice:hover,
.sms-choice.is-active {
    border-color: var(--bs-primary);
}

.sms-choice.is-active {
    background: var(--bs-light-primary);
}

.sms-choice__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.sms-choice:has(.sms-choice__input:focus-visible),
.sms-toggle:has(.sms-choice__input:focus-visible) {
    outline: 3px solid rgba(var(--bs-primary-rgb), 0.35);
    outline-offset: 2px;
}

.sms-choice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 6px;
    border-radius: 11px;
    background: var(--bs-gray-100);
    font-size: 1.35rem;
}

.sms-choice.is-active .sms-choice__icon {
    background: var(--bs-primary);
}

.sms-choice.is-active .sms-choice__icon i {
    color: #fff;
}

.sms-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1.5px solid var(--bs-gray-300);
    border-radius: 999px;
    font-weight: 600;
    color: var(--bs-gray-700);
    cursor: pointer;
}

.sms-toggle.is-active {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #fff;
}

.sms-toggle.is-active i {
    color: #fff;
}

.sms-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.75rem;
    cursor: pointer;
}

.sms-group-chip:has(input:checked) {
    border-color: var(--bs-primary);
    background: var(--bs-light-primary);
}

.sms-group-chip__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bs-primary);
}

/* A phone showing the message. */
.sms-phone {
    position: relative;
    padding: 34px 18px 28px;
    border-radius: 2rem;
    border: 8px solid #1e2129;
    box-shadow: 0 0 0 1px var(--bs-gray-300);
    background: var(--bs-gray-100);
    min-height: 260px;
}

.sms-phone__notch {
    position: absolute;
    top: 8px;
    inset-inline: 0;
    margin: 0 auto;
    width: 90px;
    height: 6px;
    border-radius: 999px;
    background: var(--bs-gray-400);
}

.sms-phone__label {
    text-align: center;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-bottom: 14px;
}

.sms-phone__bubble {
    display: inline-block;
    max-width: 90%;
    padding: 10px 14px;
    border-radius: 18px 18px 18px 4px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.35);
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
}

[dir="rtl"] .sms-phone__bubble {
    border-radius: 18px 18px 4px 18px;
}

.sms-phone--inline {
    padding: 14px;
    border: 0;
    border-radius: 1rem;
    min-height: 0;
}

.sms-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-radius: 0.85rem;
    background: var(--bs-gray-100);
}

.sms-group-card {
    border-top: 4px solid var(--group-colour, var(--bs-primary)) !important;
}

.sms-group-card .card-body {
    display: flex;
    flex-direction: column;
}

.sms-group-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--group-colour, var(--bs-primary));
}

.sms-group-card__badge i {
    color: #fff;
    font-size: 1.4rem;
}

/* Two-factor challenge: where the SMS code is ("sending…", "sent", "failed"). */
.sms-send-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--bs-light-primary);
    color: var(--bs-gray-800);
}

.sms-send-status__icon {
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.35rem;
}

.sms-send-status__icon > * {
    display: none;
}

.sms-send-status.is-sending .spinner-border {
    display: inline-block;
    color: var(--bs-primary);
}

.sms-send-status.is-sent {
    background: var(--bs-light-success);
}

.sms-send-status.is-sent .ki-check-circle {
    display: inline;
    color: var(--bs-success);
}

.sms-send-status.is-failed {
    background: var(--bs-light-danger);
}

.sms-send-status.is-failed .ki-information-2 {
    display: inline;
    color: var(--bs-danger);
}

/* Profile details: individual (حقیقی) or company (حقوقی). */
.account-type-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--bs-gray-300);
    border-radius: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.account-type-choice:hover,
.account-type-choice.is-active {
    border-color: var(--bs-primary);
}

.account-type-choice.is-active {
    background: var(--bs-light-primary);
}

.account-type-choice:has(.account-type-choice__input:focus-visible) {
    outline: 3px solid rgba(var(--bs-primary-rgb), 0.35);
    outline-offset: 2px;
}

.account-type-choice__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.account-type-choice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bs-gray-100);
    font-size: 1.4rem;
}

.account-type-choice.is-active .account-type-choice__icon {
    background: var(--bs-primary);
}

.account-type-choice.is-active .account-type-choice__icon i {
    color: #fff;
}

/* Settings → کشورها */
.country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.country-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.country-option[hidden] {
    display: none;
}

.country-option:has(input:checked) {
    border-color: var(--bs-primary);
    background: var(--bs-light-primary);
}

.country-option__flag {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.country-option__name {
    font-weight: 600;
    color: var(--bs-gray-800);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A field that needs attention: a red outline, on solid inputs too (the
   theme only draws the icon there). */
.form-control.is-invalid,
.form-control-solid.is-invalid,
.form-select.is-invalid,
.form-select-solid.is-invalid {
    border: 1px solid var(--bs-danger) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.18) !important;
}

/* Received SMS */
.sms-inbox-item.is-unread {
    border-inline-start: 4px solid var(--bs-primary) !important;
}

.sms-inbox-item__body {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--bs-gray-900);
}

.sms-inbox-reply {
    margin-top: 12px;
    margin-inline-start: 24px;
    padding: 10px 14px;
    border-radius: 0.75rem;
    background: var(--bs-light-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.sms-inbox-reply.is-failed {
    background: var(--bs-light-danger);
}

.sms-inbox-status {
    padding: 10px 14px;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--bs-light-primary);
}

.sms-inbox-status.is-failed {
    background: var(--bs-light-danger);
    color: var(--bs-danger);
}

/* --- Website → Active discounts --------------------------------------------
   The list's thumbnail and the form's live card use the site's header tones,
   so an offer looks here the way it will on the Promos page. */
.promo-thumb {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 56px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    color: #0f1014;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 4px;
}
.promo-thumb--yellow, .promo-preview--yellow .promo-preview__media, .promo-tone--yellow span { background-color: #ffe164; }
.promo-thumb--sky, .promo-preview--sky .promo-preview__media, .promo-tone--sky span { background-color: #8fe0ee; }
.promo-thumb--mint, .promo-preview--mint .promo-preview__media, .promo-tone--mint span { background-color: #b8f0d0; }
.promo-thumb--lavender, .promo-preview--lavender .promo-preview__media, .promo-tone--lavender span { background-color: #d9ccff; }
.promo-thumb--coral, .promo-preview--coral .promo-preview__media, .promo-tone--coral span { background-color: #ffb4a8; }
.promo-thumb--sand, .promo-preview--sand .promo-preview__media, .promo-tone--sand span { background-color: #ffd36e; }

.promo-preview {
    overflow: hidden;
    border-radius: 14px;
    background: #15171c;
    box-shadow: 0 14px 30px rgba(15, 16, 20, .18);
}
.promo-preview__media {
    position: relative;
    height: 150px;
    background-size: cover;
    background-position: center;
}
.promo-preview__badge {
    position: absolute;
    inset-inline-start: 14px;
    bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #16181f;
    color: #ffb830;
    font-size: 15px;
    font-weight: 800;
}
.promo-preview__badge:empty { display: none; }
.promo-preview__body { padding: 16px 18px 18px; }
.promo-preview__title { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.promo-preview__text { color: #9193a8; font-size: 13px; line-height: 1.8; margin-bottom: 12px; }
.promo-preview__cta {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 6px;
    background: linear-gradient(135deg, #ffb830, #da7800);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.promo-preview__cta:empty { display: none; }

.promo-tone {
    position: relative;
    cursor: pointer;
    margin: 0;
}
.promo-tone input {
    position: absolute;
    opacity: 0;
}
.promo-tone span {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid transparent;
    box-shadow: 0 0 0 1px rgba(15, 16, 20, .12);
    transition: border-color .15s ease;
}
.promo-tone input:checked + span {
    border-color: var(--bs-primary);
}

/* ------------------------------------------------------------------------
 * Sign-in pages: the brand panel (layouts/auth)
 *
 * The home page header in miniature, and like it, following the theme: its
 * pale backdrop with a warm light from above when light, near-black with the
 * same light when dark, a fine dot grid either way. It holds the logo, the
 * drawn hub of what the panel runs (partials/auth-hub + assets/panel/
 * auth-hub.css, which follows [data-bs-theme] as well) and the brand line. Inset with
 * rounded corners so it reads as a surface beside the form. Below lg it is a
 * short band with the logo only.
 * ------------------------------------------------------------------------ */
.wn-auth-brand {
    padding: 12px;
}

.wn-auth-brand__panel {
    --ab-bg: #f6f8fc;
    --ab-image:
        radial-gradient(70% 55% at 50% -5%, rgba(255, 170, 60, .20), transparent 70%),
        radial-gradient(50% 45% at 100% 100%, rgba(70, 160, 210, .14), transparent 70%),
        linear-gradient(180deg, #ffffff, #edf3f9);
    --ab-line: #e2e9ee;
    --ab-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 30px 60px -38px rgba(15, 23, 42, .30);
    --ab-dot: rgba(15, 23, 42, .10);
    --ab-hairline: rgba(218, 120, 0, .45);
    --ab-title: #0f1014;
    --ab-text: #5d6579;
    --ab-chip-bg: rgba(255, 255, 255, .8);
    --ab-chip-line: #e2e9ee;
    --ab-chip-text: #3d4350;
    --ab-icon: #da7800;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 100%;
    padding: 28px 24px;
    border-radius: 24px;
    background-color: var(--ab-bg);
    background-image: var(--ab-image);
    border: 1px solid var(--ab-line);
    box-shadow: var(--ab-shadow);
    color: var(--ab-title);
    font-family: inherit;
}

[data-bs-theme="dark"] .wn-auth-brand__panel {
    --ab-bg: #0f1014;
    --ab-image:
        radial-gradient(70% 55% at 50% -5%, rgba(218, 120, 0, .22), transparent 70%),
        radial-gradient(50% 45% at 100% 100%, rgba(88, 110, 255, .08), transparent 70%),
        linear-gradient(180deg, #121318, #0c0d10);
    --ab-line: rgba(255, 255, 255, .08);
    --ab-shadow: none;
    --ab-dot: rgba(255, 255, 255, .08);
    --ab-hairline: rgba(255, 184, 77, .55);
    --ab-title: #ffffff;
    --ab-text: #9aa0b4;
    --ab-chip-bg: rgba(255, 255, 255, .04);
    --ab-chip-line: rgba(255, 255, 255, .08);
    --ab-chip-text: #d4d7e2;
    --ab-icon: #ff9a1f;
}

/* The dot grid, fading out from the middle. */
.wn-auth-brand__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, var(--ab-dot) 1px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(70% 65% at 50% 45%, #000 25%, transparent 80%);
    mask-image: radial-gradient(70% 65% at 50% 45%, #000 25%, transparent 80%);
}

/* A hairline of light along the top edge. */
.wn-auth-brand__panel::after {
    content: "";
    position: absolute;
    inset: 0 15% auto;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--ab-hairline), transparent);
}

.wn-auth-brand__logo img {
    display: block;
    height: 40px;
    width: auto;
}

.wn-auth-brand__stage {
    width: 100%;
    max-width: 540px;
}

.wn-auth-brand__copy {
    max-width: 520px;
    text-align: center;
}

.wn-auth-brand__title {
    margin: 0 0 12px;
    color: var(--ab-title);
    font-size: clamp(1.75rem, 2.4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.wn-auth-brand__text {
    margin: 0 auto 26px;
    max-width: 420px;
    color: var(--ab-text);
    font-size: 1.05rem;
    line-height: 1.8;
}

.wn-auth-brand__points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wn-auth-brand__points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--ab-chip-line);
    background: var(--ab-chip-bg);
    color: var(--ab-chip-text);
    font-size: .95rem;
    font-weight: 500;
    white-space: nowrap;
}

.wn-auth-brand__points i {
    color: var(--ab-icon);
    font-size: 1.25rem;
}

@media (min-width: 992px) {
    .wn-auth-brand {
        padding: 16px;
        min-height: 100vh;
        position: sticky;
        top: 0;
    }

    .wn-auth-brand__panel {
        justify-content: space-between;
        padding: 44px 48px 52px;
        border-radius: 28px;
    }

    .wn-auth-brand__logo img {
        height: 48px;
    }
}

/* On a short screen the scene gives way to the words. */
@media (min-width: 992px) and (max-height: 760px) {
    .wn-auth-brand__stage {
        max-width: 400px;
    }
}

/* ------------------------------------------------------------------------
 * Sign-in pages: the form side (layouts/auth)
 *
 * The site's colours rather than Metronic's (public/site/css/style.css): its
 * orange #da7800 for every action, link, focus ring and tick, its neutrals
 * for text, and its home-page header backdrop — a fine dot grid under a warm
 * light — behind a card like the contact page's: white on --light when light,
 * --semi-dark on --dark when dark. Metronic's own pieces on these pages
 * (menus, alerts, the password meter) follow from the re-pointed --bs-*
 * tokens, scoped to body.wn-auth; the rest of the panel keeps its blue.
 * ------------------------------------------------------------------------ */
.wn-auth {
    --wn-orange: #da7800;
    --wn-orange-hover: #c26a00;
    --wn-page-image: linear-gradient(180deg, #fbfcfe, #eaf3f8);
    --wn-card: #ffffff;
    --wn-card-line: #e2e9ee;
    --wn-card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 28px 56px -32px rgba(15, 23, 42, .28);
    --wn-hairline: rgba(218, 120, 0, .5);
    --wn-field: #ffffff;
    --wn-field-line: #d9e2eb;
    --wn-field-hover: rgba(218, 120, 0, .45);
    --wn-check: #f4f8fb;
    --wn-check-line: #c8d2de;
    --wn-quiet: #f4f8fb;
    --wn-quiet-hover: #e7eef4;
    --wn-ring: rgba(218, 120, 0, .16);
    --wn-heading: #0f1014;
    --wn-text: #3d4350;
    --wn-muted: #6b7280;
    /* The orange, deepened until small text on white reads at 4.5:1. */
    --wn-link: #b65e00;
    --wn-link-hover: #8f4a00;
    --wn-soft: #fff3e3;
    --wn-glow-warm: rgba(255, 170, 60, .14);
    --wn-glow-cool: rgba(70, 160, 210, .12);
    --wn-dot: rgba(15, 23, 42, .09);

    --bs-app-blank-bg-color: #f4f8fb;
    --bs-primary: var(--wn-orange);
    --bs-primary-rgb: 218, 120, 0;
    --bs-primary-active: var(--wn-orange-hover);
    --bs-primary-light: var(--wn-soft);
    --bs-primary-clarity: rgba(218, 120, 0, .2);
    --bs-primary-inverse: #ffffff;
    --bs-text-primary: var(--wn-orange);
    --bs-link-color: var(--wn-link);
    --bs-link-color-rgb: 182, 94, 0;
    --bs-link-hover-color: var(--wn-link-hover);
    --bs-link-hover-color-rgb: 143, 74, 0;
    --bs-component-active-bg: var(--wn-orange);
    --bs-component-hover-color: var(--wn-link);
    --bs-component-checked-bg: var(--wn-orange);
    --bs-menu-link-color-hover: var(--wn-link);
    --bs-menu-link-color-show: var(--wn-link);
    --bs-menu-link-color-here: var(--wn-link);
    --bs-menu-link-color-active: var(--wn-link);
    --bs-text-gray-900: var(--wn-heading);
    --bs-text-gray-700: var(--wn-text);
    --bs-text-gray-500: var(--wn-muted);
    --bs-text-muted: var(--wn-muted);

    background-image: var(--wn-page-image);
    background-attachment: fixed;
}

[data-bs-theme="dark"] .wn-auth {
    --wn-page-image: none;
    --wn-card: #15171c;
    --wn-card-line: rgba(255, 255, 255, .07);
    --wn-card-shadow: 0 32px 64px -34px rgba(0, 0, 0, .85);
    --wn-hairline: rgba(255, 184, 77, .55);
    --wn-field: #1b1e25;
    --wn-field-line: rgba(255, 255, 255, .09);
    --wn-field-hover: rgba(255, 154, 31, .45);
    --wn-check: #22262f;
    --wn-check-line: rgba(255, 255, 255, .16);
    --wn-quiet: #1b1e25;
    --wn-quiet-hover: #242832;
    --wn-ring: rgba(218, 120, 0, .25);
    --wn-heading: #ffffff;
    --wn-text: #c5c8d4;
    --wn-muted: #9193a8;
    --wn-link: #ff9a1f;
    --wn-link-hover: #ffb830;
    --wn-soft: rgba(218, 120, 0, .14);
    --wn-glow-warm: rgba(218, 120, 0, .11);
    --wn-glow-cool: rgba(88, 110, 255, .06);
    --wn-dot: rgba(255, 255, 255, .06);

    --bs-app-blank-bg-color: #0f1014;
    --bs-link-color-rgb: 255, 154, 31;
    --bs-link-hover-color-rgb: 255, 184, 48;
    --bs-menu-dropdown-bg-color: #1b1e25;
}

/* --- the column and its card --------------------------------------------- */

.wn-auth-main {
    position: relative;
    isolation: isolate;
    /* Down to the bottom of a phone's screen too, so the backdrop does. */
    flex: 1 0 auto;
    padding: 4px 12px 16px;
    background-image:
        radial-gradient(60% 45% at 50% -6%, var(--wn-glow-warm), transparent 70%),
        radial-gradient(45% 35% at 50% 106%, var(--wn-glow-cool), transparent 70%);
    background-repeat: no-repeat;
}

/* The dot grid, fading out from behind the card. */
.wn-auth-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, var(--wn-dot) 1px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(65% 55% at 50% 45%, #000 20%, transparent 78%);
    mask-image: radial-gradient(65% 55% at 50% 45%, #000 20%, transparent 78%);
}

.wn-auth-card {
    position: relative;
    width: 100%;
    max-width: 500px;
    padding: 30px 22px 26px;
    border: 1px solid var(--wn-card-line);
    border-radius: 20px;
    background-color: var(--wn-card);
    box-shadow: var(--wn-card-shadow);
}

/* The brand panel's hairline of light, drawn again along the card's top. */
.wn-auth-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 16%;
    right: 16%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--wn-hairline), transparent);
}

.wn-auth-foot {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 18px 6px 0;
}

.wn-auth-foot__name {
    color: var(--wn-muted);
    font-weight: 500;
}

@media (min-width: 576px) {
    .wn-auth-main {
        padding: 24px 24px 20px;
    }

    .wn-auth-card {
        padding: 44px 44px 38px;
    }
}

@media (min-width: 992px) {
    .wn-auth-main {
        padding: 40px 48px 24px;
    }
}

/* --- fields ---------------------------------------------------------------
   One field, as on the site's contact form: 10px corners, a quiet line that
   warms on hover, and the brand colour as the only focus treatment. */

.wn-auth .form-control {
    min-height: 50px;
    border: 1px solid var(--wn-field-line);
    border-radius: 10px;
    background-color: var(--wn-field);
    color: var(--wn-heading);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.wn-auth .form-control.bg-transparent {
    background-color: var(--wn-field) !important;
}

.wn-auth .form-control::placeholder {
    color: var(--wn-muted);
    opacity: .7;
}

.wn-auth .form-control:hover:not(:focus) {
    border-color: var(--wn-field-hover);
}

.wn-auth .form-control:focus {
    border-color: var(--wn-orange);
    background-color: var(--wn-field);
    color: var(--wn-heading);
    box-shadow: 0 0 0 3px var(--wn-ring);
}

.wn-auth .form-control.is-invalid,
.wn-auth .form-control.is-invalid:hover {
    border-color: #ec625f;
}

.wn-auth .form-control.is-invalid:focus {
    border-color: #ec625f;
    box-shadow: 0 0 0 3px rgba(236, 98, 95, .2);
}

/* The browser's autofill paints its own blue; keep the field's colours. */
.wn-auth .form-control:-webkit-autofill,
.wn-auth .form-control:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--wn-heading);
    caret-color: var(--wn-heading);
    -webkit-box-shadow: 0 0 0 1000px var(--wn-field) inset;
    box-shadow: 0 0 0 1000px var(--wn-field) inset;
}

.wn-auth .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--wn-heading);
    -webkit-box-shadow: 0 0 0 1000px var(--wn-field) inset, 0 0 0 3px var(--wn-ring);
    box-shadow: 0 0 0 1000px var(--wn-field) inset, 0 0 0 3px var(--wn-ring);
}

/* The remember-me tick and the captcha's box: one 20px square. */
.wn-auth .form-check.form-check-solid .form-check-input {
    width: 20px;
    height: 20px;
    border: 1px solid var(--wn-check-line);
    border-radius: 6px;
    background-color: var(--wn-check);
    cursor: pointer;
}

.wn-auth .form-check.form-check-solid .form-check-input:checked {
    border-color: var(--wn-orange);
    background-color: var(--wn-orange);
}

.wn-auth .form-check.form-check-solid .form-check-input:focus-visible {
    border-color: var(--wn-orange);
    box-shadow: 0 0 0 3px var(--wn-ring);
}

body.wn-auth cap-widget {
    --cap-background: var(--wn-field);
    --cap-border-color: var(--wn-field-line);
    --cap-border-radius: 10px;
    --cap-color: var(--wn-heading);
    --cap-checkbox-background: var(--wn-check);
    --cap-checkbox-border: 1px solid var(--wn-check-line);
    --cap-checkbox-border-radius: 6px;
    --cap-checkbox-size: 20px;
    --cap-spinner-color: var(--wn-orange);
    --cap-spinner-background-color: var(--wn-field-line);
    --cap-focus-ring: var(--wn-orange);
    --cap-troubleshoot-color: var(--wn-link);
    --cap-widget-height: 50px;
}

/* --- actions --------------------------------------------------------------*/

.wn-auth .btn.btn-primary {
    min-height: 50px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 22px -12px rgba(218, 120, 0, .8);
    transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.wn-auth .btn.btn-primary:hover:not(.btn-active) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 26px -12px rgba(218, 120, 0, .9);
}

.wn-auth .btn.btn-primary:active:not(.btn-active) {
    transform: translateY(1px);
}

.wn-auth .btn.btn-light {
    min-height: 50px;
    border-radius: 10px;
    color: var(--wn-heading);
    background-color: var(--wn-quiet);
    box-shadow: inset 0 0 0 1px var(--wn-card-line);
}

.wn-auth .btn.btn-light:hover:not(.btn-active),
.wn-auth .btn.btn-light:focus:not(.btn-active),
.wn-auth .btn.btn-light:active:not(.btn-active) {
    color: var(--wn-heading);
    background-color: var(--wn-quiet-hover) !important;
}

.wn-auth .btn:focus-visible {
    outline: 3px solid rgba(218, 120, 0, .4);
    outline-offset: 2px;
}

/* Links and link buttons; the language button keeps its own quiet colour. */
.wn-auth .btn.btn-link:not([class*="btn-color-"]),
.wn-auth .link-primary {
    color: var(--wn-link) !important;
    text-decoration-color: currentColor !important;
    font-weight: 600;
    transition: color .15s ease;
}

.wn-auth .btn.btn-link:not([class*="btn-color-"]):hover,
.wn-auth .btn.btn-link:not([class*="btn-color-"]):focus,
.wn-auth .link-primary:hover,
.wn-auth .link-primary:focus {
    color: var(--wn-link-hover) !important;
}

/* The language menu: the deeper orange for its words. */
.wn-auth .menu-sub-dropdown {
    --bs-primary: var(--wn-link);
}

/* --- notices: the site's contact-page notes -------------------------------*/

.wn-auth .alert {
    border: 1px solid transparent;
    border-radius: 12px;
}

.wn-auth .alert-danger {
    color: #c43d3a;
    border-color: rgba(236, 98, 95, .35);
    background-color: rgba(236, 98, 95, .08);
}

.wn-auth .alert-success {
    color: #0b7a43;
    border-color: rgba(21, 205, 114, .35);
    background-color: rgba(21, 205, 114, .08);
}

.wn-auth .alert-danger .text-danger,
.wn-auth .alert-success .text-success {
    color: inherit !important;
}

[data-bs-theme="dark"] .wn-auth .alert-danger {
    color: #f08a87;
    background-color: rgba(236, 98, 95, .1);
}

[data-bs-theme="dark"] .wn-auth .alert-success {
    color: #3fd98b;
    background-color: rgba(21, 205, 114, .1);
}