/* ==========================================================================
   moin-shop — Vendor panel skin (Milestones 0-1)
   Restyles the shared Sneat/Bootstrap5 RTL core (same vendored assets the
   /panel admin theme uses) to match the Figma "vendor panel" page frames
   190:17504 (OTP), 190:17544/17604/17661/17728 (onboarding steps 1-4), and
   168:15115 (dashboard).
   Tokens below are measured directly off those frames via figma-console, not
   guessed: brand red #eb1e25 for links/accents/active state, navy #12233a
   for primary buttons (NOT the same red used for CTAs on /panel — this panel
   uses both colors differently, confirmed live rather than assumed).
   Additive override: loaded AFTER vendor/css/rtl/*.css. RTL. Persian.
   ========================================================================== */

:root {
    --vk-red: #eb1e25;
    --vk-navy: #12233a;
    --vk-ink: #282d30;
    --vk-muted: #6e7578;
    --vk-page: #f7f8f9;
    --vk-card-bg: #ffffff;
    --vk-card-border: #ececec;
    --vk-input-border: #c9d0d4;
    --vk-nav-hover: #f4f7f9;
}

body {
    background: var(--vk-page);
    color: var(--vk-ink);
}

/* rtl.css (shared template core) ships `.content-page { padding: 24px 16px; background: white;
   border-radius: 0 0 16px 16px; min-height: 80vh; }`. admin's panel-skin.css only overrides the
   padding (confirmed live in DevTools) — background/height/border-radius/min-height fall through
   from rtl.css untouched on /panel too. Match that exactly rather than "cleaning it up". */
.content-page {
    padding: 40px 16px;
}

/* ---- shared brand mark -------------------------------------------------- */
.vendor-split-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 18px;
}
.vendor-split-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--vk-red);
    display: inline-block;
}

/* ---- OTP split layout (190:17504) --------------------------------------- */
.vendor-split {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}
/* dir="rtl" makes the browser's own flex mirroring put the FIRST dom child (image panel) at
   the right edge — the frame wants it on the left, so flip render order with `order` rather
   than fighting rtl with a physical/ltr override (keeps text flow correct). */
.vendor-split-image {
    order: 2;
    flex: 0 0 660px;
    max-width: 660px;
    background: linear-gradient(180deg, rgba(20, 24, 26, .55), rgba(20, 24, 26, .85)), #1a1a1a center/cover no-repeat;
    color: #fff;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.vendor-split-copy .vendor-split-rule {
    display: block;
    width: 48px;
    height: 4px;
    background: var(--vk-red);
    border-radius: 2px;
    margin-bottom: 16px;
}
.vendor-split-copy h2 {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 12px;
}
.vendor-split-copy p {
    color: #d8dadb;
    font-size: 14px;
}
.vendor-split-form {
    order: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.vendor-split-form-inner {
    width: 100%;
    max-width: 420px;
}
.vendor-split-brand-form {
    margin-bottom: 32px;
}

/* ---- form primitives ----------------------------------------------------- */
.vendor-form-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
}
.vendor-form-subtitle {
    color: var(--vk-muted);
    font-size: 14px;
    margin-bottom: 16px;
}
.vendor-form-label {
    display: block;
    font-size: 13px;
    color: var(--vk-muted);
    margin-bottom: 6px;
}
/* .form-control is aliased alongside .vendor-form-input on every rule in this block: the vendor
   panel is moving every input/select/textarea to the real Bootstrap class name (better native
   behavior, plus it sidesteps the select-popup bug below), but the look established for
   .vendor-form-input must not regress — so .form-control just gets the identical declarations.
   Excludes .form-control-sm: DataTables' own Bootstrap 5 integration (datatables-bootstrap5.js,
   sFilterInput) renders every list page's (products/orders/returns) search box as
   "form-control form-control-sm" — without this guard, aliasing here would silently restyle
   that search box too. */
.vendor-form-input,
.form-control:not(.form-control-sm) {
    width: 100%;
    border: 1px solid var(--vk-input-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 16px;
    background: #fff;
    color: var(--vk-ink);
}
.vendor-form-input:disabled,
.form-control:not(.form-control-sm):disabled {
    background: #f4f7f9;
    color: var(--vk-muted);
}
.vendor-form-input:focus,
.form-control:not(.form-control-sm):focus {
    outline: none;
    border-color: var(--vk-red);
}
.vendor-form-error {
    background: #fff4f4;
    color: #c53050;
    border: 1px solid #f7c6c9;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}
.vendor-link-change-number {
    color: var(--vk-red);
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 16px;
    text-decoration: none;
}

.vendor-btn-primary {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: var(--vk-navy);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.vendor-btn-primary:hover {
    opacity: .92;
    color: #fff;
}
.vendor-btn-inline,
.vendor-onboarding-actions .vendor-btn-primary {
    width: auto;
    padding-inline: 32px;
}
.vendor-btn-outline {
    display: inline-block;
    background: #fff;
    color: var(--vk-ink);
    border: 1px solid var(--vk-input-border);
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

/* ---- OTP boxes ------------------------------------------------------------ */
.vendor-otp-boxes {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 20px;
}
.vendor-otp-box {
    width: 56px;
    height: 56px;
    text-align: center;
    font-size: 20px;
    border: 1px solid var(--vk-input-border);
    border-radius: 10px;
    direction: ltr;
}
.vendor-otp-box:focus {
    outline: none;
    border-color: var(--vk-red);
}
.vendor-otp-resend {
    text-align: center;
    font-size: 13px;
    color: var(--vk-ink);
    font-weight: 600;
    margin-top: 16px;
}
.vendor-otp-resend a {
    color: var(--vk-red);
}
.vendor-legal-text {
    text-align: center;
    color: var(--vk-muted);
    font-size: 12px;
    margin-top: 12px;
}

/* ---- onboarding layout (190:17544/17604/17661/17728) --------------------- */
.vendor-onboarding-header {
    background: #fff;
    padding: 16px 40px;
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid var(--vk-card-border);
}
.vendor-onboarding-main {
    display: flex;
    justify-content: center;
    padding: 40px 24px;
}
.vendor-onboarding-card {
    width: 100%;
    max-width: 1000px;
    background: var(--vk-card-bg);
    border: 1px solid var(--vk-card-border);
    border-radius: 14px;
    padding: 32px;
}
.vendor-onboarding-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
}
.vendor-onboarding-subtitle {
    color: var(--vk-muted);
    font-size: 14px;
    margin-bottom: 20px;
}
.vendor-onboarding-row {
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;
}
.vendor-onboarding-field,
.vendor-onboarding-field-full {
    flex: 1;
}
.vendor-onboarding-actions {
    display: flex;
    flex-direction: row-reverse;
    gap: 12px;
    margin-top: 8px;
}
.vendor-onboarding-actions-center {
    justify-content: center;
}
.vendor-text-center {
    text-align: center;
}

/* ---- step bar -------------------------------------------------------------- */
.vendor-step-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 16px;
}
.vendor-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--vk-muted);
}
.vendor-step-label {
    white-space: nowrap;
}
.vendor-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--vk-input-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--vk-muted);
}
.vendor-step.is-active .vendor-step-circle {
    background: var(--vk-red);
    border-color: var(--vk-red);
    color: #fff;
}
.vendor-step.is-active .vendor-step-label {
    color: var(--vk-red);
    font-weight: 700;
}
.vendor-step.is-done .vendor-step-circle {
    background: var(--vk-red);
    border-color: var(--vk-red);
    color: #fff;
}
.vendor-step-bar-rule {
    border: none;
    border-top: 1px solid var(--vk-card-border);
    margin-bottom: 24px;
}

/* ---- documents step (190:17661) -------------------------------------------- */
.vendor-doc-notice {
    background: #fbf6ee;
    color: #986600;
    border: 1px solid #e8d0b1;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 20px;
}
.vendor-doc-card {
    flex: 1;
    border: 1px dashed var(--vk-input-border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}
.vendor-doc-card-full {
    width: 100%;
}
.vendor-doc-card-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}
.vendor-doc-card-desc {
    color: var(--vk-muted);
    font-size: 12px;
    margin-bottom: 8px;
}
.vendor-doc-upload {
    color: var(--vk-red);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
}
.vendor-doc-preview {
    margin-bottom: 10px;
}
.vendor-doc-preview img {
    width: 100%;
    max-height: 140px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.vendor-badge-required {
    background: #00893d;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    margin-inline-start: 6px;
}

/* ---- pending screen (190:17728) --------------------------------------------- */
.vendor-pending-icon {
    text-align: center;
    font-size: 32px;
    margin-bottom: 12px;
}
.vendor-pending-status {
    text-align: center;
    background: #fbf6ee;
    color: #986600;
    border-radius: 999px;
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
}

/* ---- vendor shell (master.blade.php — sidebar/navbar tokens), ported from
   public/admin/css/panel-skin.css's own sidebar/navbar rules (same Sneat core,
   admin's skin) so the shell matches the admin panel's chrome. Scoped to shell
   selectors only — page-content classes (.vendor-*, badges, cards, tables
   used by the 42 page views) are untouched and still styled by the rest of
   this file, not by panel-skin.css (which isn't loaded here at all — see
   VENDOR-PANEL-TODO.md open flags for why a straight file swap/dual-load was
   rejected: panel-skin.css restyles shared unprefixed classes like .card that
   every vendor page also renders). ----------------------------------------- */
#layout-navbar.layout-navbar.vendor-navbar {
    background: var(--vk-red) !important;
}
#layout-navbar.vendor-navbar .nav-link,
#layout-navbar.vendor-navbar .fw-semibold,
#layout-navbar.vendor-navbar small,
#layout-navbar.vendor-navbar i {
    color: #fff !important;
}
#layout-navbar.vendor-navbar .user-notif .dropdown-user {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.4);
    padding-inline-start: 16px;
}
/* rounded chrome: bottom corners scalloped into the white sidebar, ported from
   panel-skin.css's #layout-navbar rules — the piece the previous pass (f6d4a36) left out,
   which is why the vendor navbar still reads as a flat red rectangle instead of admin's
   curved chrome. */
#layout-navbar.layout-navbar.vendor-navbar {
    top: 0;
    border-radius: 0 0 24px 24px !important;
}
.layout-navbar-fixed .layout-navbar.vendor-navbar.navbar-elevated {
    box-shadow: none !important;
}
#layout-navbar.layout-navbar.vendor-navbar:before {
    content: "";
    background-image: url(../../admin/img/icons/clippath.svg);
    position: absolute;
    width: 32px;
    height: 100%;
    background-repeat: no-repeat;
    right: -1px;
    background-size: cover;
}
#layout-navbar.layout-navbar.vendor-navbar:after {
    content: "";
    background-image: url(../../admin/img/icons/clippath.svg);
    position: absolute;
    width: 32px;
    height: 100%;
    background-repeat: no-repeat;
    left: -1px;
    background-size: cover;
    transform: rotateY(180deg);
}

#layout-menu.bg-menu-theme {
    background: #fff !important;
    padding: 8px;
}
#layout-menu .menu-inner .menu-link {
    background: transparent !important;
    color: var(--vk-ink) !important;
    font-weight: 400;
    font-size: 13px;
    border-radius: 12px;
}
li.menu-item.open .menu-sub {
    background: #fff;
    margin: -10px 0 6px;
    padding: 20px 0;
}
#layout-menu .menu-inner > .menu-item {
    background: transparent !important;
}
#layout-menu .menu-inner .menu-link i {
    color: var(--vk-muted) !important;
    font-size: 22px;
}
/* Sidebar icons are now inline SVG files (same admin/img/icons/sidebar set /panel uses), not
   boxicons glyphs — mirrors panel-skin.css's svg rule so both panels render identically. */
#layout-menu .menu-inner .menu-link svg {
    color: var(--vk-muted) !important;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-left: 10px;
}
/* parent item: height/padding to match admin's Sidebar/Item spec */
#layout-menu .menu-inner > .menu-item > .menu-link {
    min-height: 52px;
    padding-inline: 16px;
    padding-block: 14px;
    font-size: 14px;
    display: flex;
    align-items: center;
}
/* sub-item: smaller, indented (RTL start-indent), muted until active */
#layout-menu .menu-sub .menu-link {
    min-height: 38px;
    border-radius: 8px;
    padding-inline-start: 44px;
    padding-inline-end: 16px;
    font-size: 12px;
    font-weight: 400;
    color: var(--vk-muted) !important;
}
/* Subitem bullet: sub-items have no icon of their own (parents already carry one), so a small
   dot marks their place in the indent instead. currentColor keeps it in sync with hover/active. */
#layout-menu .menu-sub .menu-link > div {
    position: relative;
    padding-inline-start: 14px;
}
#layout-menu .menu-sub .menu-link > div::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}
#layout-menu .menu-inner .menu-item .menu-link:hover {
    background: var(--vk-nav-hover) !important;
}
/* current-page state: red text, no background (a parent only ever gets .active here because
   one of its children is the active route — see $childActive in menu.blade.php — so it's never
   itself "the" current page; the red pill background belongs solely to the active child below). */
#layout-menu .menu-inner > li.menu-item.active > .menu-link {
    color: var(--vk-red) !important;
    font-weight: 500;
    box-shadow: none;
    border-radius: 12px !important;
}
/* Standalone top-level leaf items (no children, e.g. داشبورد/پشتیبانی) never get .open, so this
   still gives THEM the red pill background when they're genuinely the current page. */
#layout-menu .menu-inner > li.menu-item.active:not(.open) > .menu-link {
    background: rgba(235, 30, 37, 0.1) !important;
}
#layout-menu .menu-inner > li.menu-item.active > .menu-link i,
#layout-menu .menu-inner > li.menu-item.active > .menu-link svg {
    color: var(--vk-red) !important;
}
/* active sub-item: lighter tint than its parent's */
#layout-menu .menu-inner > li.menu-item > ul.menu-sub > li.menu-item.active > .menu-link {
    background: rgba(235, 30, 37, 0.06) !important;
    color: var(--vk-red) !important;
    font-weight: 500;
    box-shadow: none;
}
/* rtl.css (shared template core, added for the font fix) ships a theme default of
   `li.menu-item.active div { color: white !important; }` for a dark active-pill variant —
   it wins over the plain-.menu-link color rules above because it targets the label <div>
   directly, so both the open parent and its active child rendered invisible white-on-pink
   text. Needs equal specificity + !important to beat it. */
#layout-menu .menu-inner li.menu-item.active > .menu-link > div {
    color: var(--vk-red) !important;
}
/* rtl.css's selector above is a *descendant* combinator (`li.menu-item.active div`), so it
   also matches every sibling sub-item's label nested inside the same open/active parent —
   not just the active item's own label — turning every OTHER item in that submenu white too.
   Reset non-active sub-items back to their normal muted ink. */
#layout-menu .menu-sub li.menu-item:not(.active) > .menu-link > div {
    color: var(--vk-muted) !important;
}

/* ---- dashboard (168:15115, Milestone 1) ----------------------------------- */
.vendor-stat-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--vk-card-border);
    padding: 16px 20px;
    height: 100%;
}
.vendor-stat-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--vk-muted);
    font-size: 13px;
    margin-bottom: 12px;
}
.vendor-stat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.vendor-stat-dot-blue { background: #2563eb; }
.vendor-stat-dot-green { background: #16a34a; }
.vendor-stat-dot-orange { background: #ea580c; }
.vendor-stat-dot-red { background: var(--vk-red); }
.vendor-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--vk-ink);
}

.vendor-panel-card {
    /* background: #fff; */
   
    padding: 20px;
    /* height: 100%; */
}
.vendor-panel-card-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 16px;
}

.vendor-table,
.vendor-table.dataTable {
    font-size: 13px;
    border: 1px solid #e4e4e4 !important;
    border-collapse: separate !important;
}
.vendor-table thead th {
    background: #f7f8f9;
    color: var(--vk-muted);
    font-weight: 600;
    border-bottom-width: 1px;
}

/* Row-action icon buttons (ported from panel-skin.css — /panel's own row actions column) */
.table-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}
.table-row-actions .deleteForm {
    display: inline-flex;
    margin: 0;
}
.table-row-actions img {
    width: 24px;
    height: 24px;
}

/* Bootstrap's own .nav-pills active state renders the theme's default (unbranded) primary
   color — nothing here overrode it, so the coupons status filter and the finance sub-nav
   (the only two .nav-pills tab bars in the vendor panel) showed a button in a color outside
   the navy/red system. Match the same navy as every other primary action (.vendor-btn-primary). */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--vk-navy) !important;
    color: #fff !important;
}

.vendor-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.vendor-badge-pending { background: #fbf6ee; color: #986600; }
.vendor-badge-paid { background: #fbf6ee; color: #986600; }
.vendor-badge-processing { background: #f1f8fd; color: #0077bc; }
.vendor-badge-shipped { background: #f1f8fd; color: #0077bc; }
.vendor-badge-delivered { background: #f2f9f3; color: #00893d; }
.vendor-badge-cancelled { background: #fff4f4; color: #c53050; }
.vendor-badge-returned { background: #fff4f4; color: #c53050; }

.vendor-badge-disabled { background: #f4f5f7; color: #6e7578; }

.vendor-alerts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vendor-alert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fbf6ee;
    border-radius: 10px;
    padding: 12px 16px;
}
.vendor-alert-title {
    font-weight: 700;
    font-size: 13px;
}
.vendor-alert-desc {
    color: var(--vk-muted);
    font-size: 12px;
}
.vendor-alert-action {
    color: var(--vk-red);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---- notifications bell + dropdown/list (352:52012, 352:52495) — reuses the same
   --vk-* tokens as every other component above; no new colors introduced. The
   dropdown (nav.blade.php) and the full list page (pages/notification/index.blade.php)
   share the same .vendor-notif-item row markup, just inside a menu vs. a plain card. */
.vendor-notif-dropdown .nav-link {
    position: relative;
}
/* rtl.css ships a generic `.badge { padding: 12px !important; min-width: 70px;
   border-radius: 10px !important; }` sized for larger status-label badges — nothing on the
   admin side ever hits it (its own notification dropdown has no badge markup at all), but this
   tiny notification-count pill does, and rtl.css's !important padding/border-radius blew it up
   into a huge block instead of a small circular counter. Match its specificity with !important. */
.vendor-notif-badge {
    position: absolute;
    top: 4px;
    inset-inline-end: 2px;
    font-size: 10px;
    line-height: 1;
    min-width: 0;
    padding: 3px 5px !important;
    border-radius: 999px !important;
}
.vendor-notif-menu {
    width: 340px;
    padding: 0;
}
.vendor-notif-menu-header {
    padding: 12px 16px;
    font-weight: 700;
    color: var(--vk-ink);
    border-bottom: 1px solid var(--vk-card-border);
}
.vendor-notif-menu-footer {
    color: var(--vk-red);
    font-weight: 600;
    border-top: 1px solid var(--vk-card-border);
}
.vendor-notif-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--vk-muted);
    font-size: 13px;
}
.vendor-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.vendor-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    color: var(--vk-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--vk-card-border);
    white-space: normal;
}
.vendor-notif-item:hover {
    background: var(--vk-nav-hover);
    color: var(--vk-ink);
}
.vendor-notif-item-unread {
    background: rgba(235, 30, 37, 0.04);
}
.vendor-notif-item-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
}
.vendor-notif-item-icon-success { background: #00893d; }
.vendor-notif-item-icon-danger { background: var(--vk-red); }
.vendor-notif-item-icon-secondary { background: var(--vk-muted); }
.vendor-notif-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.vendor-notif-item-title {
    font-weight: 700;
    font-size: 13px;
}
.vendor-notif-item-message {
    color: var(--vk-muted);
    font-size: 12px;
}
.vendor-notif-item-time {
    color: var(--vk-muted);
    font-size: 11px;
}

/* Sidebar items whose route isn't built yet (see menu.blade.php's 'wip' flag) */
.menu-link-wip {
    opacity: 0.55;
    pointer-events: none;
}
.vendor-menu-soon-badge {
    margin-inline-start: auto;
    background: var(--vk-muted);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    padding: 3px 8px;
}

/* Do NOT set `direction`/`text-align` on select here (even to rtl, redundantly matching the
   inherited value): an author-stylesheet `direction` declaration on the <select> itself — as
   opposed to just inheriting dir="rtl" from <html> — puts Chromium's native popup on a rendering
   path that mispositions and misaligns the open dropdown. Leaving it uncustomized (confirmed
   against a sibling project on the same template that does the same) is what actually renders
   correctly under RTL. */
/* Neither .vendor-form-input nor .form-control ever defined a dropdown indicator — selects have
   been relying on whatever the browser felt like rendering natively, which is why no arrow was
   visible. Draw one explicitly and turn off the native affordance so it's consistent everywhere.
   Positioned on the physical left. */
select.vendor-form-input,
select.form-control:not(.form-control-sm) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e7578' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 11px 7px;
    padding-left: 36px;
}