/**
 * Woo Wallet & Cashback — frontend styles (RTL / Persian build).
 *
 * Loaded INSTEAD of public.css when is_rtl() is true (via
 * wp_style_add_data 'rtl' => 'replace'). This is a COMPLETE, standalone
 * copy of the base stylesheet — every component, token and webfont the
 * dashboard needs lives here — plus the Persian typography tuning at
 * the end. Keep both files in sync: base changes must be mirrored.
 *
 * The base layout mirrors through CSS logical properties (margin-block,
 * border-inline, inset-inline, text-align: start …), so RTL support is
 * mostly automatic; only typography and a few physical directions are
 * tuned in the final section.
 */

/* ─────────────────────────────────────────────────────────────
 * 0. Design tokens
 * ───────────────────────────────────────────────────────────── */

:root {
--wcw-primary: var( --wd-primary-color, #2271b1 );
--wcw-credit: #1a7f37;
--wcw-debit: #b32d2e;
--wcw-ink: #1d2327;
--wcw-muted: #646970;
--wcw-line: #e2e6ec;
--wcw-line-soft: #eef1f6;
--wcw-surface: #ffffff;
--wcw-radius-lg: 18px;
--wcw-radius: 14px;
--wcw-radius-sm: 10px;
--wcw-font: "Vazirmatn", "Vazir", Tahoma, "IRANSans", sans-serif;
--wcw-shadow-sm: 0 1px 2px rgb(16 24 40 / 5%);
--wcw-shadow-md: 0 8px 22px rgb(16 24 40 / 8%);
}

/* ─────────────────────────────────────────────────────────────
 * 1. Vazirmatn webfont (bundled, shared with the admin design system)
 *
 * The bundled files are registered under BOTH family names — the
 * maintained "Vazirmatn" and its classic alias "Vazir" (same design,
 * same author) — so every font stack honours whichever name is
 * requested. The URLs are shared with the Vazirmatn faces above, so
 * the browser downloads each weight only once.
 * ───────────────────────────────────────────────────────────── */

@font-face {
font-family: "Vazirmatn";
src: url( "../../admin/assets/fonts/Vazirmatn-Regular.woff2" ) format( "woff2" );
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Vazirmatn";
src: url( "../../admin/assets/fonts/Vazirmatn-Medium.woff2" ) format( "woff2" );
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Vazirmatn";
src: url( "../../admin/assets/fonts/Vazirmatn-SemiBold.woff2" ) format( "woff2" );
font-weight: 600;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Vazirmatn";
src: url( "../../admin/assets/fonts/Vazirmatn-Bold.woff2" ) format( "woff2" );
font-weight: 700;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Vazir";
src: url( "../../admin/assets/fonts/Vazirmatn-Regular.woff2" ) format( "woff2" );
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Vazir";
src: url( "../../admin/assets/fonts/Vazirmatn-Medium.woff2" ) format( "woff2" );
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Vazir";
src: url( "../../admin/assets/fonts/Vazirmatn-SemiBold.woff2" ) format( "woff2" );
font-weight: 600;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Vazir";
src: url( "../../admin/assets/fonts/Vazirmatn-Bold.woff2" ) format( "woff2" );
font-weight: 700;
font-style: normal;
font-display: swap;
}

/* ─────────────────────────────────────────────────────────────
 * 2. Customer account panel — Vazir typography everywhere
 * ─────────────────────────────────────────────────────────────
 * The wallet dashboard is only half of the panel the customer sees:
 * the My Account navigation and the content column are the rest. Both
 * now render in the bundled Vazir/Vazirmatn typeface — scoped strictly
 * to .woocommerce-account so the rest of the storefront keeps the
 * theme's own fonts. */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
font-family: var(--wcw-font);
line-height: 1.65;
}

/* Form controls never inherit font-family — restate explicitly. */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="number"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="search"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-account .woocommerce-MyAccount-content button,
.woocommerce-account .woocommerce-MyAccount-navigation a {
font-family: var(--wcw-font);
}

/* ─────────────────────────────────────────────────────────────
 * 3. My Account navigation — icons + brand accent on the active tab
 * ─────────────────────────────────────────────────────────────
 * Every menu item gets a crisp stroke icon drawn with a CSS mask so it
 * follows the link colour (currentColor) in every state — including
 * hover and the active tab. Unknown endpoints fall back to a neutral
 * clock glyph, so a third-party menu item never renders a bare gap.
 *
 * The active item is highlighted through BOTH mechanisms WooCommerce
 * uses: the .is-active class on the <li> and the aria-current="page"
 * attribute on the <a> (some themes re-render the markup and drop the
 * class). :has() keeps the brand rail working even when only the
 * attribute survives. */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
margin: 0;
padding: 0;
list-style: none;
}

/* A transparent 3px inline-start rail on every item prevents layout
 * shift when the active item's rail is filled with the brand colour.
 * On RTL locales (sidebar on the right) this renders as a thick
 * border-RIGHT; on LTR locales it mirrors to the left edge. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
/* Neutral fallback glyph for endpoints without a dedicated icon. */
--wcw-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%208v4l2.5%202.5'/%3E%3C/svg%3E");
border-inline-start: 3px solid transparent;
transition: border-color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 8px;
color: inherit;
text-decoration: none !important;
transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
color: var(--wcw-primary);
background: #f0f6fd;
background: color-mix(in srgb, var(--wcw-primary), transparent 94%);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
content: "";
flex: 0 0 auto;
inline-size: 19px;
block-size: 19px;
background-color: currentColor;
-webkit-mask-image: var(--wcw-nav-icon);
mask-image: var(--wcw-nav-icon);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
opacity: 0.8;
transition: opacity 0.15s ease;
}

/* Per-endpoint glyphs (Feather-style strokes, URL-encoded data URIs). */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard { --wcw-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath%20d='M3%2010.5L12%203l9%207.5'/%3E%3Cpath%20d='M5%209.7V21h14V9.7'/%3E%3Cpath%20d='M9.5%2021v-5.5h5V21'/%3E%3C/svg%3E"); }

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--wallet { --wcw-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath%20d='M21%2012V7H5a2%202%200%201%201%200-4h14v4'/%3E%3Cpath%20d='M3%205v14a2%202%200%200%200%202%202h16v-5'/%3E%3Cpath%20d='M18%2012a2%202%200%200%200%200%204h4v-4Z'/%3E%3C/svg%3E"); }

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders { --wcw-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath%20d='M6%202L3%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z'/%3E%3Cpath%20d='M3%206h18'/%3E%3Cpath%20d='M16%2010a4%204%200%200%201-8%200'/%3E%3C/svg%3E"); }

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads { --wcw-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath%20d='M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4'/%3E%3Cpath%20d='M7%2010l5%205%205-5'/%3E%3Cpath%20d='M12%2015V3'/%3E%3C/svg%3E"); }

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address { --wcw-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath%20d='M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='3'/%3E%3C/svg%3E"); }

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods { --wcw-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect%20x='2'%20y='5'%20width='20'%20height='14'%20rx='2'/%3E%3Cpath%20d='M2%2010h20'/%3E%3C/svg%3E"); }

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--subscriptions { --wcw-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath%20d='m17%202%204%204-4%204'/%3E%3Cpath%20d='M3%2011v-1a4%204%200%200%201%204-4h14'/%3E%3Cpath%20d='m7%2022-4-4%204-4'/%3E%3Cpath%20d='M21%2013v1a4%204%200%200%201-4%204H3'/%3E%3C/svg%3E"); }

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account { --wcw-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath%20d='M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='12'%20cy='7'%20r='4'/%3E%3C/svg%3E"); }

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { --wcw-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath%20d='M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4'/%3E%3Cpath%20d='m16%2017%205-5-5-5'/%3E%3Cpath%20d='M21%2012H9'/%3E%3C/svg%3E"); }

/* Active tab — class-based (WooCommerce core). */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active {
border-inline-start-color: var(--wcw-primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active > a {
color: var(--wcw-primary) !important;
font-weight: 700 !important;
background: #f0f6fd;
background: color-mix(in srgb, var(--wcw-primary), transparent 92%) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active > a::before {
opacity: 1;
}

/* … and attribute-based (aria-current="page"), for themes that
 * re-render the navigation markup without the .is-active class. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li:has(> a[aria-current="page"]) {
border-inline-start-color: var(--wcw-primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a[aria-current="page"] {
color: var(--wcw-primary) !important;
font-weight: 700 !important;
background: #f0f6fd;
background: color-mix(in srgb, var(--wcw-primary), transparent 92%) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a[aria-current="page"]::before {
opacity: 1;
}

/* ─────────────────────────────────────────────────────────────
 * 4. Dashboard shell & section rhythm
 * ───────────────────────────────────────────────────────────── */

.wcw-dashboard {
margin-block-end: 2.5rem;
color: var(--wcw-ink);
font-family: var(--wcw-font);
line-height: 1.65;
}

/* Form controls never inherit fonts — restate explicitly. */
.wcw-dashboard input[type="number"],
.wcw-dashboard input[type="text"],
.wcw-dashboard button,
.wcw-topup-form input[type="number"],
.wcw-topup-form input[type="text"],
.wcw-topup-form button,
.wcw-quick-amount,
.wcw-button {
font-family: var(--wcw-font);
}

/* Stacked sections (balance → history → charge) with generous
 * whitespace so each block reads as its own zone. */
.wcw-dashboard__section {
margin-block-start: 2.25rem;
}

/* Anchor target for the empty-state CTA — clears sticky headers. */
.wcw-dashboard__section--topup {
scroll-margin-block-start: 96px;
}

/* Compact section headings with a small brand tick: theme h3 sizing is
 * too loud inside account content, so size, weight and spacing are
 * restated here. The double-class variant outranks typical theme h3
 * selectors. */
.wcw-section-title,
.wcw-dashboard .wcw-section-title {
position: relative;
margin: 0 0 1rem;
padding-block-end: 0.7rem;
padding-inline-start: 16px;
border-block-end: 1px solid var(--wcw-line);
font-size: 17px;
font-weight: 700;
line-height: 1.5;
color: var(--wcw-ink);
}

.wcw-section-title::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-end: 0.85rem;
inline-size: 5px;
block-size: 17px;
border-radius: 999px;
background: var(--wcw-primary);
}

/* Generic white card (history table, empty state). */
.wcw-card {
background: var(--wcw-surface);
border: 1px solid var(--wcw-line);
border-radius: var(--wcw-radius);
padding: 16px 20px;
box-shadow: var(--wcw-shadow-sm);
}

.wcw-card--empty {
padding: 0;
overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
 * 5. Balance card — brand gradient, glass icon chip, hero amount
 * ───────────────────────────────────────────────────────────── */

.wcw-balance-card {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: flex-start;
gap: 20px;
padding: 30px 32px;
border-radius: var(--wcw-radius-lg);
/* Static fallback first, brand-token gradient second. */
background: #2271b1;
background-image:
radial-gradient(130% 200% at 100% 0%, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 0%) 47%),
linear-gradient(135deg, var(--wcw-primary) 0%, color-mix(in srgb, var(--wcw-primary), #000 34%) 100%);
color: #fff;
box-shadow: 0 16px 32px rgb(34 113 177 / 28%);
box-shadow: 0 16px 32px color-mix(in srgb, var(--wcw-primary), transparent 72%), 0 2px 6px rgb(16 24 40 / 8%);
font-family: var(--wcw-font);
}

/* Decorative rings — purely ornamental, kept behind the content. */
.wcw-balance-card::before,
.wcw-balance-card::after {
content: "";
position: absolute;
z-index: -1;
border-radius: 50%;
pointer-events: none;
}

.wcw-balance-card::before {
inline-size: 230px;
block-size: 230px;
inset-inline-end: -70px;
inset-block-start: -90px;
background: rgb(255 255 255 / 12%);
}

.wcw-balance-card::after {
inline-size: 150px;
block-size: 150px;
inset-inline-end: 96px;
inset-block-end: -84px;
background: rgb(255 255 255 / 9%);
}

.wcw-balance-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
inline-size: 56px;
block-size: 56px;
border-radius: 16px;
color: #fff;
background: rgb(255 255 255 / 16%);
border: 1px solid rgb(255 255 255 / 30%);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%);
}

.wcw-balance-card__icon svg {
display: block;
inline-size: 27px;
block-size: 27px;
}

.wcw-balance-card__body {
min-inline-size: 0;
}

.wcw-balance-card__label {
margin: 0;
font-size: 13px;
font-weight: 500;
color: rgb(255 255 255 / 78%);
}

/* The hero figure — much larger and bolder than body copy so the
 * balance is the first thing the eye lands on. */
.wcw-balance-card__amount {
display: block;
margin-block: 6px 10px;
font-size: clamp(34px, 4.5vw, 46px);
font-weight: 700;
line-height: 1.2;
color: #fff;
direction: ltr;
unicode-bidi: embed;
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 2px rgb(0 0 0 / 14%);
}

.wcw-balance-card__meta {
margin: 0;
font-size: 13px;
line-height: 1.8;
color: rgb(255 255 255 / 74%);
max-inline-size: 62ch;
}

/* ─────────────────────────────────────────────────────────────
 * 6. Transaction history
 * ───────────────────────────────────────────────────────────── */

/* Wide tables scroll horizontally on small screens instead of
 * squashing or breaking the card. */
.wcw-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.wcw-transactions {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}

.wcw-transactions th,
.wcw-transactions td {
padding: 12px 14px;
text-align: start;
border-block-end: 1px solid var(--wcw-line-soft);
vertical-align: middle;
}

.wcw-transactions thead th {
font-size: 12px;
font-weight: 600;
color: var(--wcw-muted);
background: #f7f9fc;
white-space: nowrap;
border-block-end: 1px solid var(--wcw-line);
}

/* Zebra rows + a soft brand-tinted hover. */
.wcw-transactions tbody tr:nth-child(even) td {
background: #fafbfd;
}

.wcw-transactions tbody tr:hover td {
background: #f2f7fd;
}

.wcw-transactions tbody tr:last-child td {
border-block-end: 0;
}

/* Money cells: LTR embedding keeps digit order correct in Persian,
 * tabular figures keep columns aligned. (The RTL sheet resets this to
 * RTL embedding so the currency word sits on the correct side.) */
.wcw-transactions .wcw-tx-amount {
font-weight: 700;
white-space: nowrap;
direction: ltr;
unicode-bidi: embed;
font-variant-numeric: tabular-nums;
}

.wcw-transactions .wcw-tx-amount--credit { color: var(--wcw-credit); }
.wcw-transactions .wcw-tx-amount--debit { color: var(--wcw-debit); }

/* Credit / debit type badges. */
.wcw-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1.7;
}

.wcw-badge::before {
content: "";
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: currentColor;
}

.wcw-badge--credit {
background: #e7f6ec;
color: var(--wcw-credit);
border: 1px solid #c6e9d2;
}

.wcw-badge--debit {
background: #fdecec;
color: var(--wcw-debit);
border: 1px solid #f5cdcd;
}

/* Empty state — faint receipt icon above the message, plus a subtle
 * call-to-action that jumps to the top-up form. */
.wcw-empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: 44px 16px 40px;
text-align: center;
color: var(--wcw-muted);
}

.wcw-empty-state__icon {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 72px;
block-size: 72px;
margin-block-end: 14px;
border-radius: 50%;
color: #9aa7b8;
background: #f4f6fa;
box-shadow: inset 0 0 0 1px var(--wcw-line);
}

.wcw-empty-state__icon svg {
display: block;
inline-size: 34px;
block-size: 34px;
}

.wcw-empty-state__text {
margin: 0;
font-size: 14px;
max-inline-size: 46ch;
}

.wcw-empty-state__cta {
display: inline-block;
margin-block-start: 16px;
padding: 8px 20px;
border: 1px solid var(--wcw-primary);
border-radius: 8px;
background: #fff;
color: var(--wcw-primary);
font-size: 13px;
font-weight: 600;
line-height: 1.8;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}

.wcw-empty-state__cta:hover,
.wcw-empty-state__cta:focus {
background: var(--wcw-primary);
color: #fff;
text-decoration: none;
}

.wcw-empty-state__cta:focus-visible {
outline: 2px solid var(--wcw-primary);
outline-offset: 2px;
}

/* Pagination. */
.wcw-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-block-start: 16px;
}

.wcw-pagination .page-numbers {
display: inline-block;
min-inline-size: 34px;
padding: 6px 10px;
text-align: center;
border: 1px solid var(--wcw-line);
border-radius: 8px;
background: #fff;
color: inherit;
text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.wcw-pagination .page-numbers:hover {
border-color: var(--wcw-primary);
color: var(--wcw-primary);
}

.wcw-pagination .page-numbers.current {
background: var(--wcw-primary);
border-color: var(--wcw-primary);
color: #fff;
}

.wcw-pagination .page-numbers:focus-visible {
outline: 2px solid var(--wcw-primary);
outline-offset: 2px;
}

/* On phones the table folds into labelled cards; the labels reuse the
 * translated <th> strings via the data-label attributes the template
 * puts on every cell. */
@media (max-width: 640px) {
.wcw-transactions thead { display: none; }
.wcw-transactions,
.wcw-transactions tbody,
.wcw-transactions tr,
.wcw-transactions td { display: block; width: 100%; }
.wcw-transactions tr {
margin-block: 12px;
padding: 4px 16px 8px;
border: 1px solid var(--wcw-line);
border-radius: 12px;
background: #fff;
}
.wcw-transactions tbody tr:first-child { margin-block-start: 4px; }
.wcw-transactions td { padding: 8px 0; border-block-end: 0; }
.wcw-transactions td::before {
content: attr(data-label);
display: block;
margin-block-end: 2px;
font-size: 11px;
font-weight: 600;
color: var(--wcw-muted);
}
}

/* ─────────────────────────────────────────────────────────────
 * 7. Top-up form
 * ───────────────────────────────────────────────────────────── */
.wcw-topup-form {
background: var(--wcw-surface);
border: 1px solid var(--wcw-line);
border-radius: var(--wcw-radius);
padding: 22px 24px;
box-shadow: var(--wcw-shadow-sm);
}
.wcw-field-label {
display: block;
margin-block-end: 8px;
font-size: 14px;
font-weight: 600;
color: var(--wcw-ink);
}
.wcw-field-label:not(:first-of-type) { margin-block-start: 16px; }
.wcw-topup-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.wcw-amount-field { position: relative; flex: 1 1 240px; max-inline-size: min(420px, 100%); }
.wcw-amount-field__icon {
position: absolute;
inset-inline-start: 14px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
color: var(--wcw-muted);
pointer-events: none;
}
.wcw-amount-field__icon svg { display: block; inline-size: 18px; block-size: 18px; }
.wcw-topup-input {
display: block;
width: 100%;
padding: 12px 14px;
border: 1px solid #d5dae2;
border-radius: var(--wcw-radius-sm);
background: #fff;
color: var(--wcw-ink);
font-size: 15px;
font-variant-numeric: tabular-nums;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wcw-amount-field .wcw-topup-input { padding-inline-start: 42px; }
.wcw-topup-input:focus {
border-color: var(--wcw-primary);
box-shadow: 0 0 0 3px #dce9f8;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wcw-primary), transparent 84%);
outline: none;
}
.wcw-topup-hint { margin-block: 10px 0; font-size: 12.5px; color: var(--wcw-muted); }
.wcw-topup-coupon {
width: 100%;
max-inline-size: min(420px, 100%);
margin-block-start: 2px;
padding: 11px 14px;
border: 1px solid #d5dae2;
border-radius: var(--wcw-radius-sm);
font-size: 15px;
letter-spacing: 1px;
direction: ltr;
text-align: left;
}
.wcw-topup-coupon:focus {
border-color: var(--wcw-primary);
box-shadow: 0 0 0 3px #dce9f8;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wcw-primary), transparent 84%);
outline: none;
}

/* ─────────────────────────────────────────────────────────────
 * 8. Buttons & quick-amount chips
 * ───────────────────────────────────────────────────────────── */
.wcw-button {
display: inline-block;
width: 100%;
margin-block-start: 14px;
padding: 11px 18px;
border: 0;
border-radius: var(--wcw-radius-sm);
background: var(--wcw-primary);
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1.8;
cursor: pointer;
text-align: center;
transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.wcw-button:hover { filter: brightness(0.93); color: #fff; }
.wcw-button:focus-visible { outline: 2px solid var(--wcw-primary); outline-offset: 3px; }

/* Primary charge action. Repeated selectors + static fallbacks so the
 * theme's own button skins cannot win; the fill adopts the theme brand
 * colour via the token, with a color-mix()-derived darker gradient end. */
.wcw-button--charge,
.wcw-topup-form .wcw-button--charge,
.woocommerce-account .woocommerce-MyAccount-content .wcw-topup-form .wcw-button--charge {
display: inline-block;
flex: 0 0 auto;
width: auto;
margin-block-start: 0;
padding: 12px 28px;
border: 0;
border-radius: var(--wcw-radius-sm);
background: #2271b1;
background-image: linear-gradient(135deg, var(--wcw-primary), #135e96);
background-image: linear-gradient(135deg, var(--wcw-primary), color-mix(in srgb, var(--wcw-primary), #000 22%));
color: #fff !important;
font-size: 15px;
font-weight: 700;
line-height: 1.7;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 6px 16px rgb(34 113 177 / 28%);
box-shadow: 0 6px 16px color-mix(in srgb, var(--wcw-primary), transparent 72%);
transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wcw-button--charge:hover,
.wcw-topup-form .wcw-button--charge:hover,
.woocommerce-account .woocommerce-MyAccount-content .wcw-topup-form .wcw-button--charge:hover {
background: #135e96;
background-image: linear-gradient(135deg, color-mix(in srgb, var(--wcw-primary), #000 12%), color-mix(in srgb, var(--wcw-primary), #000 26%));
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgb(34 113 177 / 36%);
box-shadow: 0 8px 20px color-mix(in srgb, var(--wcw-primary), transparent 64%);
}
.wcw-button--charge:active { transform: translateY(0); filter: brightness(0.96); }
.wcw-button--charge:focus-visible { outline: 2px solid var(--wcw-primary); outline-offset: 3px; }

/* Quick-amount chips: real buttons with clear affordance — subtle
 * border, rounded corners, a border-only hover (no background fill)
 * and a solid selected state toggled by public.js (.is-selected). */
.wcw-quick-amounts { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }
.wcw-quick-amount {
padding: 9px 16px;
border: 1px solid #d5dae2;
border-radius: var(--wcw-radius);
background: #fff;
color: var(--wcw-ink);
font-size: 13px;
font-weight: 600;
line-height: 1.9;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: border-color 0.15s ease;
}
.wcw-quick-amount:hover {
border-color: var(--wcw-primary);
}
.wcw-quick-amount.is-selected {
border-color: var(--wcw-primary);
background: var(--wcw-primary);
color: #fff;
box-shadow: 0 4px 12px rgb(34 113 177 / 30%);
box-shadow: 0 4px 12px color-mix(in srgb, var(--wcw-primary), transparent 70%);
}
.wcw-quick-amount:focus-visible { outline: 2px solid var(--wcw-primary); outline-offset: 2px; }
.wcw-quick-amounts .wcw-button--quick {
width: auto;
flex: 1 1 auto;
margin-block-start: 0;
background: #fff;
color: var(--wcw-primary);
border: 1px solid #d5dae2;
}
.wcw-quick-amounts .wcw-button--quick:hover {
border-color: var(--wcw-primary);
background: #f0f6fd;
color: var(--wcw-primary);
filter: none;
}

/* ─────────────────────────────────────────────────────────────
 * 9. Checkout opt-in box
 *
 * The template renders .wcw-checkout-wallet-box; the legacy alias is
 * kept so older theme-overridden templates stay styled too. */
.wcw-checkout-wallet-box,
.wcw-checkout-box {
background: #f0f6fc;
border: 1px solid #c5dcf1;
border-radius: var(--wcw-radius-sm);
padding: 14px 16px;
margin-block-end: 16px;
font-family: var(--wcw-font);
}
.wcw-checkout-wallet-box label,
.wcw-checkout-box label {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
font-size: 14px;
font-weight: 500;
line-height: 1.8;
cursor: pointer;
}
.wcw-checkout-wallet-box input[type="checkbox"],
.wcw-checkout-box input[type="checkbox"] {
flex: 0 0 auto;
margin-block-start: 4px;
accent-color: var(--wcw-primary);
}
.wcw-checkout-box__row { display: flex; align-items: flex-start; gap: 10px; }
.wcw-checkout-box__title { margin: 0 0 4px; font-weight: 600; }
.wcw-checkout-box__desc { margin: 0; font-size: 13px; color: #50575e; }

/* ─────────────────────────────────────────────────────────────
 * 10. Widgets & shortcodes
 * ───────────────────────────────────────────────────────────── */
.wcw-widget .wcw-balance-card { padding: 24px 22px; }
.wcw-widget .wcw-balance-card__amount { font-size: clamp(26px, 3vw, 34px); }
.wcw-widget__link { margin: 12px 0 0; font-family: var(--wcw-font); }
.wcw-widget__link a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border: 1px solid #d5dae2;
border-radius: var(--wcw-radius-sm);
background: #fff;
color: var(--wcw-primary);
font-size: 13px;
font-weight: 600;
line-height: 1.8;
text-decoration: none;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.wcw-widget__link a:hover {
border-color: var(--wcw-primary);
background: #f0f6fd;
background: color-mix(in srgb, var(--wcw-primary), transparent 94%);
}
.wcw-instant-topup { margin-block: 16px; }
.wcw-instant-topup .wcw-quick-amounts { margin-block-start: 0; }
.wcw-balance-shortcode {
display: inline-block;
padding: 5px 12px;
border-radius: 999px;
background: #f4f6fa;
font-family: var(--wcw-font);
font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────
 * 11. Responsive
 * ───────────────────────────────────────────────────────────── */
@media (min-width: 783px) {
/* Desktop: keep the amount field around 38% of the form width. */
.wcw-amount-field { max-inline-size: 38%; }
}
@media (max-width: 600px) {
.wcw-balance-card { flex-direction: column; gap: 16px; padding: 24px 22px; }
.wcw-balance-card__icon { inline-size: 48px; block-size: 48px; }
.wcw-balance-card__icon svg { inline-size: 24px; block-size: 24px; }
.wcw-card { padding: 12px 14px; }
.wcw-topup-form { padding: 18px 16px; }
.wcw-amount-field { flex: 1 1 100%; max-inline-size: none; }
.wcw-topup-row .wcw-button--charge { flex: 1 1 100%; }
}

/* ─────────────────────────────────────────────────────────────
 * 12. Reduced motion
 * ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.wcw-dashboard *,
.wcw-topup-form *,
.wcw-checkout-wallet-box *,
.woocommerce-account .woocommerce-MyAccount-navigation * {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}

/* ─────────────────────────────────────────────────────────────
 * 13. Font belt-and-braces
 *
 * Restates the family on the components most likely to be hit by
 * theme button/form resets; also covers the .rtl body-class case
 * where the base sheet is loaded manually on an RTL site. */
.rtl .wcw-dashboard,
.rtl .wcw-topup-form,
.rtl .wcw-checkout-wallet-box,
.rtl .wcw-checkout-box,
.rtl .wcw-quick-amount,
.rtl .wcw-badge,
.rtl .wcw-empty-state__cta,
.rtl .wcw-button {
font-family: var(--wcw-font);
}

/* ─────────────────────────────────────────────────────────────
 * 14. Persian-first typography & digit rendering (RTL sheet only)
 *
 * Money cells and the hero amount are reset to RTL embedding: in an
 * RTL document the currency word (تومان) belongs on the visual left of
 * the digits, which a forced LTR embed would flip. */
.wcw-balance-card__amount,
.wcw-transactions .wcw-tx-amount {
direction: rtl;
unicode-bidi: isolate;
}
/* Persian digits read better with a slight extra tracking. Never add
 * letter-spacing to Arabic-script text — it breaks the letter joins. */
.wcw-balance-card__amount,
.wcw-transactions .wcw-tx-amount,
.wcw-topup-input,
.wcw-topup-coupon,
.wcw-quick-amount {
letter-spacing: 0.5px;
}
/* Chip order follows the RTL document flow. */
.wcw-quick-amounts { direction: rtl; }
/* Latin-script coupon codes stay LTR and flush left. */
.wcw-topup-coupon { direction: ltr; text-align: left; }