/* =====================================================================
   Wholesale Shop – Carbon Grip brand foundation
   File: assets/css/frontend.css

   Shared tokens and primitives used by every front-end screen of the
   plugin. Component styles live in their own files (ws-chart.css,
   ws-checkout.css, ws-auth.css, ws-account.css, ws-admin.css) and build
   on these tokens. Everything is scoped under .ws-ui so the theme is
   never touched outside plugin markup.

   Mobile breakpoint: 700px.
   ===================================================================== */

:root {
    --ws-o: #DB6700;          /* brand orange */
    --ws-o2: #B85600;         /* orange, hover */
    --ws-os: #FFF3E8;         /* orange, soft background */
    --ws-k: #181818;          /* brand black */
    --ws-k2: #232323;
    --ws-ink: #171A25;        /* body text */
    --ws-mu: #6B7280;         /* muted text */
    --ws-ln: #E7E7E7;         /* lines */
    --ws-bg: #F5F5F5;         /* page background inside plugin blocks */
    --ws-ok: #1E8E4E;  --ws-oks: #E8F6EE;
    --ws-wa: #B7791F;  --ws-was: #FFF8E6;
    --ws-er: #C62828;  --ws-ers: #FDECEC;
    --ws-info: #1D4ED8; --ws-infos: #E6F0FF;
    --ws-h: "Oswald", "Heebo", "Arial Narrow", sans-serif;
    --ws-b: "Roboto Condensed", "Heebo", "Arial", sans-serif;
}
[dir="rtl"], .rtl, .ws-user-rtl .ws-ui {
    --ws-h: "Heebo", "Oswald", "Arial", sans-serif;
    --ws-b: "Heebo", "Roboto Condensed", "Arial", sans-serif;
}

/* ---------- scope ---------- */
.ws-ui { font-family: var(--ws-b); color: var(--ws-ink); font-size: 14px; line-height: 1.45; box-sizing: border-box; }
.ws-ui *, .ws-ui *::before, .ws-ui *::after { box-sizing: border-box; }
.ws-ui button, .ws-ui input, .ws-ui select, .ws-ui textarea { font-family: inherit; color: inherit; }
.ws-ui a { color: var(--ws-o); }

/* ---------- headings ---------- */
.ws-ui .ws-title { margin: 0 0 4px; font: 600 26px/1.1 var(--ws-h); text-transform: uppercase; color: var(--ws-k); letter-spacing: .2px; }
[dir="rtl"] .ws-ui .ws-title, .rtl .ws-ui .ws-title { text-transform: none; font-weight: 800; }
.ws-ui .ws-sub { margin: 0 0 14px; color: var(--ws-mu); }
.ws-ui .ws-sec { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font: 600 15px var(--ws-h); text-transform: uppercase; letter-spacing: .5px; color: var(--ws-k); }
[dir="rtl"] .ws-ui .ws-sec, .rtl .ws-ui .ws-sec { text-transform: none; }
.ws-ui .ws-sec .ws-n { width: 22px; height: 22px; background: var(--ws-k); color: #fff; display: inline-grid; place-items: center; font-size: 12px; }
.ws-ui .ws-muted { color: var(--ws-mu); }

/* ---------- buttons ---------- */
.ws-ui .ws-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 42px; padding: 0 20px; border: 2px solid var(--ws-k); border-radius: 0;
    background: transparent; color: var(--ws-k); cursor: pointer; text-decoration: none; white-space: nowrap;
    font: 600 13px var(--ws-h); text-transform: uppercase; letter-spacing: 1px; line-height: 1;
    transition: background .15s, color .15s, border-color .15s;
}
[dir="rtl"] .ws-ui .ws-btn, .rtl .ws-ui .ws-btn { letter-spacing: .3px; }
.ws-ui .ws-btn:hover { background: var(--ws-k); color: #fff; }
.ws-ui .ws-btn:focus-visible { outline: 2px solid var(--ws-o); outline-offset: 2px; }
.ws-ui .ws-btn-primary { background: var(--ws-o); border-color: var(--ws-o); color: #fff; }
.ws-ui .ws-btn-primary:hover { background: var(--ws-o2); border-color: var(--ws-o2); color: #fff; }
.ws-ui .ws-btn-ok { background: var(--ws-ok); border-color: var(--ws-ok); color: #fff; }
.ws-ui .ws-btn-ghost { border-color: #CCC; color: var(--ws-mu); }
.ws-ui .ws-btn-ghost:hover { border-color: var(--ws-k); }
.ws-ui .ws-btn-sm { height: 32px; padding: 0 12px; font-size: 11.5px; border-width: 1px; }
.ws-ui .ws-btn-block { width: 100%; }
.ws-ui .ws-btn[disabled] { opacity: .55; cursor: default; }
.ws-ui .ws-icon-btn { width: 36px; height: 36px; padding: 0; border: 1px solid #D3D3D3; background: #fff; display: inline-grid; place-items: center; cursor: pointer; }
.ws-ui .ws-icon-btn:hover { border-color: var(--ws-k); background: var(--ws-k); color: #fff; }
.ws-ui .ws-icon-btn svg { width: 16px; height: 16px; }

/* ---------- form fields ---------- */
.ws-ui .ws-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.ws-ui .ws-field > label { font-size: 12.5px; font-weight: 500; color: #333; }
.ws-ui .ws-field > label .ws-req { color: var(--ws-o); }
.ws-ui .ws-input, .ws-ui .ws-field input[type="text"], .ws-ui .ws-field input[type="email"], .ws-ui .ws-field input[type="tel"],
.ws-ui .ws-field input[type="password"], .ws-ui .ws-field input[type="number"], .ws-ui .ws-field select, .ws-ui .ws-field textarea {
    width: 100%; height: 40px; padding: 0 11px; border: 1px solid #D3D3D3; border-radius: 0; background: #fff; font-size: 14px; box-shadow: none;
}
.ws-ui .ws-field textarea, .ws-ui textarea.ws-input { height: 72px; padding: 8px 11px; resize: vertical; }
.ws-ui .ws-input:focus, .ws-ui .ws-field input:focus, .ws-ui .ws-field select:focus, .ws-ui .ws-field textarea:focus {
    outline: none; border-color: var(--ws-o); box-shadow: 0 0 0 3px var(--ws-os);
}
.ws-ui .ws-fixed { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 11px; background: #F6F6F6; border: 1px dashed #D3D3D3; color: #444; }
.ws-ui .ws-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.ws-ui .ws-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0 14px; }
.ws-ui .ws-check input { accent-color: var(--ws-o); width: 16px; height: 16px; }

/* ---------- surfaces ---------- */
.ws-ui .ws-card { background: #fff; border: 1px solid var(--ws-ln); }
.ws-ui .ws-card-h { padding: 12px 16px; border-bottom: 1px solid var(--ws-ln); display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 14px var(--ws-h); text-transform: uppercase; letter-spacing: .5px; }
[dir="rtl"] .ws-ui .ws-card-h, .rtl .ws-ui .ws-card-h { text-transform: none; }
.ws-ui .ws-card-b { padding: 16px; }
.ws-ui .ws-dark { background: var(--ws-k); color: #fff; }

/* ---------- notices ---------- */
.ws-ui .ws-note { padding: 10px 12px; font-size: 13px; margin-bottom: 12px; border-inline-start: 3px solid var(--ws-o); background: var(--ws-os); color: #6b3300; }
.ws-ui .ws-note.ws-ok { background: var(--ws-oks); border-color: var(--ws-ok); color: #14532d; }
.ws-ui .ws-note.ws-warn { background: var(--ws-was); border-color: var(--ws-wa); color: #713f12; }
.ws-ui .ws-note.ws-err { background: var(--ws-ers); border-color: var(--ws-er); color: #7f1d1d; }

/* ---------- chips & status ---------- */
.ws-ui .ws-chip { display: inline-block; padding: 3px 8px; font: 500 11.5px var(--ws-h); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; background: #EEE; color: #444; }
[dir="rtl"] .ws-ui .ws-chip, .rtl .ws-ui .ws-chip { text-transform: none; }
.ws-ui .ws-chip-o { background: var(--ws-o); color: #fff; }
.ws-ui .ws-chip-k { background: var(--ws-k); color: #fff; }
.ws-ui .ws-chip-ok { background: var(--ws-oks); color: var(--ws-ok); }
.ws-ui .ws-chip-wa { background: var(--ws-was); color: var(--ws-wa); }
.ws-ui .ws-chip-er { background: var(--ws-ers); color: var(--ws-er); }
.ws-ui .ws-chip-info { background: var(--ws-infos); color: var(--ws-info); }

/* ---------- numbers (keep LTR inside RTL text) ---------- */
.ws-ui .ws-num, .ws-ui .ws-price { unicode-bidi: isolate; direction: ltr; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- product thumb ---------- */
.ws-ui .ws-thumb { width: 44px; height: 44px; flex: 0 0 44px; background: #F2F2F2; display: grid; place-items: center; overflow: hidden; }
.ws-ui .ws-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- quantity stepper (always in boxes) + units caption ---------- */
.ws-ui .ws-qwrap { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.ws-ui .ws-qty { display: inline-flex; border: 1px solid #CFCFCF; background: #fff; }
.ws-ui .ws-qty button { width: 30px; height: 32px; border: 0; border-radius: 0; padding: 0; background: #F1F1F1; color: var(--ws-k); font: 600 16px var(--ws-h); cursor: pointer; line-height: 1; }
.ws-ui .ws-qty button:hover { background: var(--ws-o); color: #fff; }
.ws-ui .ws-qty input { width: 44px; height: 32px; border: 0; border-inline: 1px solid #CFCFCF; border-radius: 0; padding: 0; text-align: center; font: 600 15px var(--ws-h); background: #fff; -moz-appearance: textfield; box-shadow: none; }
.ws-ui .ws-qty input::-webkit-inner-spin-button, .ws-ui .ws-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ws-ui .ws-qty input:focus { outline: 2px solid var(--ws-o); outline-offset: -2px; }
.ws-ui .ws-qty-sm button { width: 26px; height: 28px; font-size: 15px; }
.ws-ui .ws-qty-sm input { width: 36px; height: 28px; font-size: 14px; }
.ws-ui .ws-units { font-size: 12px; color: var(--ws-k); white-space: nowrap; }
.ws-ui .ws-units b { font: 600 13px var(--ws-h); }
.ws-ui .ws-units.ws-zero { color: #AAA; }
.ws-ui .ws-units.ws-zero b { font-weight: 500; }

/* ---------- tabs ---------- */
.ws-ui .ws-tabs { display: flex; background: #fff; border: 1px solid var(--ws-ln); overflow-x: auto; scrollbar-width: none; }
.ws-ui .ws-tabs::-webkit-scrollbar { display: none; }
.ws-ui .ws-tabs button, .ws-ui .ws-tabs a { border: 0; background: none; padding: 10px 16px; font: 500 13px var(--ws-h); text-transform: uppercase; letter-spacing: .5px; color: #555; border-bottom: 3px solid transparent; white-space: nowrap; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }
[dir="rtl"] .ws-ui .ws-tabs button, [dir="rtl"] .ws-ui .ws-tabs a, .rtl .ws-ui .ws-tabs button, .rtl .ws-ui .ws-tabs a { text-transform: none; }
.ws-ui .ws-tabs .ws-on { color: var(--ws-k); border-bottom-color: var(--ws-o); }
.ws-ui .ws-tabs em { font-style: normal; font-size: 11px; color: #999; background: #F2F2F2; padding: 0 6px; border-radius: 9px; }
.ws-ui .ws-tabs .ws-on em { background: var(--ws-o); color: #fff; }

/* ---------- compact list rows (mobile-friendly tables) ---------- */
.ws-ui .ws-list { display: flex; flex-direction: column; border: 1px solid var(--ws-ln); background: #fff; }
.ws-ui .ws-li { padding: 8px 12px; border-bottom: 1px solid var(--ws-ln); }
.ws-ui .ws-li:last-child { border-bottom: 0; }

/* ---------- sticky bottom bar (mobile) ---------- */
.ws-ui .ws-mbar { display: none; }

/* ---------- region badges ---------- */
.ws-ui .ws-rg { display: inline-flex; align-items: center; gap: 4px; font: 500 11px var(--ws-h); text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px; white-space: nowrap; }
.ws-ui .ws-rg-il { background: var(--ws-infos); color: var(--ws-info); }
.ws-ui .ws-rg-intl { background: #EFE8FF; color: #6D28D9; }
.ws-ui .ws-rg-both { background: #EEE; color: #444; }

/* ---------- helpers ---------- */
.ws-ui .ws-mob-only { display: none !important; }

@media (max-width: 700px) {
    .ws-ui .ws-title { font-size: 19px; }
    .ws-ui .ws-sub { font-size: 13px; margin-bottom: 10px; }
    .ws-ui .ws-dsk-only { display: none !important; }
    .ws-ui .ws-mob-only { display: block !important; }
    .ws-ui .ws-row2:not(.ws-keep) { grid-template-columns: 1fr; }
    .ws-ui .ws-field { margin-bottom: 8px; }
    .ws-ui .ws-card-b { padding: 12px; }
    .ws-ui .ws-mbar {
        display: flex; position: sticky; bottom: 0; z-index: 30; align-items: center; gap: 10px;
        background: var(--ws-k); color: #fff; padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
        margin: 12px -12px 0;
    }
    .ws-ui .ws-mbar .ws-mbar-sum { flex: 1; min-width: 0; line-height: 1.2; }
    .ws-ui .ws-mbar small { display: block; color: #AAA; font-size: 11.5px; }
    .ws-ui .ws-mbar strong { font: 600 18px var(--ws-h); color: var(--ws-o); }
    .ws-ui .ws-mbar .ws-btn { height: 40px; padding: 0 14px; }
}

/* Hebrew-profile users on a left-to-right site: the theme stays LTR, the
   plugin's own blocks (thank-you, My Account, banners) turn RTL. */
body.ws-user-rtl .ws-ui { direction: rtl; }
body.ws-user-rtl.ws-wholesale-account .woocommerce { direction: rtl; text-align: right; }