/* Wave Account — personal area dashboard styles.
   All rules scoped under .wva so nothing leaks into the theme/Elementor. */

.wva {
	--wva-primary: #3abaeb;
	--wva-primary-dark: #2da3d1;
	--wva-primary-50: #e8f7fc;
	--wva-sand: #f0c08f;
	--wva-topup: #2fb182;
	--wva-topup-dark: #1e7d5c;
	--wva-topup-50: #f0faf6;
	--wva-topup-100: #cdeade;
	--wva-amber: #d4900a;
	--wva-warn-bg: #fff8ec;
	--wva-g50: #f9fafb;
	--wva-g100: #f3f4f6;
	--wva-g200: #e5e7eb;
	--wva-g300: #d1d5db;
	--wva-g400: #9ca3af;
	--wva-g500: #6b7280;
	--wva-g600: #4b5563;
	--wva-g700: #374151;
	--wva-g800: #1f2937;

	font-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	direction: rtl;
	text-align: right;
	color: var(--wva-g800);
	font-size: 18px;
	line-height: 1.5;
	background: linear-gradient(160deg, #e8f6fc 0%, #f5f8fb 30%, #f5f8fb 70%, #edf6fb 100%);
	min-height: 100vh;

	/* Full-bleed: escape any boxed Elementor container so the hero band and
	   page background span the whole viewport, like the /join/ funnel. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.wva *,
.wva *::before,
.wva *::after { box-sizing: border-box; }

/* Element resets use :where() so they never out-rank component classes. */
.wva :where(h1, h2, h3, h4, p, ul, li) { margin: 0; padding: 0; }
.wva :where(ul) { list-style: none; }

.wva :where(button) {
	font-family: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
	text-align: inherit;
}
.wva :where(a) { text-decoration: none; color: inherit; }
.wva :where(input, select) { font-family: inherit; }

.wva-hide { display: none !important; }
.wva-b { font-weight: 800; }
.wva-semib { font-weight: 600; }
.wva-m0 { margin-bottom: 0 !important; }
.wva-mb { margin-bottom: 16px; }
.wva-mb-s { margin-bottom: 16px; }
.wva-mb-xs { margin-bottom: 4px !important; }
.wva-mt { margin-top: 16px; }
.wva-c-primary { color: var(--wva-primary); }
.wva-c-amber { color: var(--wva-amber); }
.wva-underline { text-decoration: underline; }
/* Numbers + latin units ("6.5 GB") keep number-first order inside RTL text. */
.wva-ltr { direction: ltr; unicode-bidi: isolate; }
.wva-rtl { direction: rtl; unicode-bidi: isolate; }

/* Icons */
.wva-ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.wva-ic-2-5 { width: 10px; height: 10px; }
.wva-ic-3 { width: 12px; height: 12px; }
.wva-ic-3-5 { width: 14px; height: 14px; }
.wva-ic-4 { width: 16px; height: 16px; }
.wva-ic-5 { width: 20px; height: 20px; }
.wva-ic-6 { width: 24px; height: 24px; }
.wva-ic-8 { width: 32px; height: 32px; }
.wva-ic-20 { width: 80px; height: 80px; }

/* Layout */
/* 72rem matches the /join/ funnel layout width. */
.wva-container { max-width: 72rem; margin: 0 auto; padding: 0 16px; }
.wva-main { padding-top: 24px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 24px; }
.wva-inner { margin: 0 auto; padding: 24px 16px; }
.wva-inner-xl { max-width: 36rem; }
.wva-inner-2xl { max-width: 42rem; }

/* Section titles — the accent bar height follows the heading size. */
.wva-sec-title { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.wva-sec-bar { width: 4px; height: 17px; background: var(--wva-primary); border-radius: 999px; flex-shrink: 0; }
.wva-sec-title h2 { font-size: 18px; font-weight: 800; color: var(--wva-g800); }
.wva-h2 { font-size: 18px; font-weight: 800; color: var(--wva-g800); }
.wva-title-xl { font-size: 20px !important; }
.wva-sec-title:has(.wva-title-xl) .wva-sec-bar { height: 19px; }

/* Cards */
.wva-card {
	background: #fff;
	border: 1px solid var(--wva-g100);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	padding: 20px;
}
.wva-p0 { padding: 0; overflow: hidden; }
.wva-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

/* Buttons */
.wva-btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: var(--wva-primary);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	padding: 12px;
	border-radius: 999px;
	transition: background 0.2s;
}
.wva-btn-primary:hover { background: var(--wva-primary-dark); }
.wva-btn-primary:disabled { background: var(--wva-g200); color: var(--wva-g400); cursor: not-allowed; }
.wva-btn-rect { border-radius: 12px; }
.wva-btn-fit { width: auto; padding: 8px 16px; border-radius: 12px; flex-shrink: 0; }
.wva-btn-a { text-align: center; }
.wva-btn-ghost { display: block; width: 100%; font-size: 14px; color: var(--wva-primary); font-weight: 700; padding: 4px; margin-top: 8px; }
.wva-btn-ghost:hover { text-decoration: underline; }

.wva-back { display: flex; align-items: center; gap: 6px; color: var(--wva-primary); font-weight: 700; font-size: 16px; margin-bottom: 20px; }
.wva-back:hover { text-decoration: underline; }

.wva-link-bold { color: var(--wva-primary); text-decoration: underline; font-weight: 700; transition: color 0.2s; font-size: inherit; }
.wva-link-bold:hover { color: var(--wva-primary-dark); }
.wva-link-sm { font-size: 14px; color: var(--wva-primary); font-weight: 700; }
.wva-link-sm:hover { text-decoration: underline; }

/* Hero */
.wva-hero { background: var(--wva-primary); padding: 20px 0; position: relative; overflow: hidden; }
.wva-hero-row { display: flex; align-items: center; justify-content: space-between; }
.wva-hero-title { font-size: 28px; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 4px; }
.wva-hero-sub { color: rgba(255, 255, 255, 0.9); font-size: 19px; font-weight: 600; }
.wva-hero-phone { display: none; position: relative; }
.wva-phone-frame {
	width: 96px; height: 160px;
	background: rgba(255, 255, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 24px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	display: flex; align-items: center; justify-content: center;
}
.wva-phone-screen {
	width: 64px; height: 112px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 16px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.wva-ph-line { width: 32px; height: 4px; background: rgba(255, 255, 255, 0.4); border-radius: 999px; }
.wva-ph-line-lg { width: 40px; height: 6px; background: rgba(255, 255, 255, 0.6); }
.wva-ph-dot {
	margin-top: 8px; width: 28px; height: 28px;
	background: rgba(240, 192, 143, 0.8);
	border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
}
.wva-ping {
	position: absolute; top: -8px; left: -8px;
	width: 20px; height: 20px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	animation: wva-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes wva-ping {
	75%, 100% { transform: scale(2); opacity: 0; }
}

@media (min-width: 768px) {
	.wva-hero { padding: 28px 0; }
	.wva-hero-title { font-size: 32px; }
	.wva-hero-sub { font-size: 21px; }
	.wva-hero-phone { display: block; }
}

/* Customer details */
.wva-edit-btn {
	width: 32px; height: 32px;
	border-radius: 999px;
	background: var(--wva-g50);
	border: 1px solid var(--wva-g100);
	display: flex; align-items: center; justify-content: center;
	color: var(--wva-primary);
	transition: background 0.2s;
}
.wva-edit-btn:hover { background: var(--wva-primary-50); }
.wva-details-grid { display: grid; grid-template-columns: 1fr; gap: 12px 16px; }
.wva-detail-label { font-size: 13px; font-weight: 800; color: var(--wva-g400); text-transform: uppercase; letter-spacing: 0.05em; }
.wva-detail-value { font-size: 17px; font-weight: 700; color: var(--wva-g800); margin-top: 2px; }
@media (min-width: 640px) { .wva-details-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .wva-details-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .wva-details-grid { grid-template-columns: repeat(6, 1fr); } }

/* Notifications */
.wva-notif-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wva-notif-toggle { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--wva-primary); font-weight: 700; }
.wva-notif-toggle:hover { text-decoration: underline; }
.wva-bell { position: relative; display: inline-flex; }
.wva-bell-badge {
	position: absolute; top: -6px; right: -6px;
	width: 16px; height: 16px;
	background: #ef4444; color: #fff;
	font-size: 11px; font-weight: 800; line-height: 1;
	border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
}
.wva-notif-list > div + div .wva-notif,
.wva-notif-list .wva-notif + .wva-notif,
[data-wva="notif-extra"] .wva-notif { margin-top: 8px; }
.wva-notif {
	display: flex; align-items: flex-start; gap: 12px;
	border-radius: 12px;
	padding: 12px 16px;
	border: 1px solid transparent;
	font-size: 17px; color: var(--wva-g700);
}
.wva-notif.is-success { background: var(--wva-primary-50); border-color: rgba(58, 186, 235, 0.2); }
.wva-notif.is-warning { background: var(--wva-warn-bg); border-color: rgba(240, 192, 143, 0.4); }
.wva-notif.is-error { background: #fef2f2; border-color: #fecaca; }
.wva-notif.is-info { background: var(--wva-g50); border-color: var(--wva-g200); }
.wva-notif-ic { margin-top: 2px; flex-shrink: 0; }
.wva-notif-ic.is-success { color: var(--wva-primary); }
.wva-notif-ic.is-warning { color: var(--wva-amber); }
.wva-notif-ic.is-error { color: #ef4444; }
.wva-notif-ic.is-info { color: var(--wva-g500); }
.wva-notif p { margin: 0; }
/* חשבוניות: month-range picker + partial-result notice */
.wva-inv-range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; padding: 12px 14px; background: var(--wva-g50); border: 1px solid var(--wva-g200); border-radius: 12px; }
.wva-inv-range-group { display: inline-flex; align-items: center; gap: 6px; }
.wva-inv-range-label { font-size: 15px; font-weight: 700; color: var(--wva-g700); }
.wva-inv-select { font: inherit; font-size: 15px; color: var(--wva-g800); background: #fff; border: 1px solid var(--wva-g300); border-radius: 8px; padding: 6px 8px; min-height: 36px; }
.wva-inv-range-go { margin-inline-start: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.wva-inv-partial { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; font-size: 15px; color: var(--wva-g700); background: var(--wva-warn-bg); border: 1px solid rgba(240, 192, 143, 0.4); border-radius: 12px; }
.wva-inv-partial svg { color: var(--wva-amber); flex-shrink: 0; }
@media (max-width: 560px) { .wva-inv-range-go { margin-inline-start: 0; width: 100%; } }
.wva-notif a.wva-link-bold { white-space: nowrap; }
.wva-notif-title { font-weight: 700; }
.wva-notif-title.is-error { color: #dc2626; }

/* Quick action tabs */
.wva-qa-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.wva-qa-tab {
	padding: 6px 20px;
	border-radius: 999px;
	font-size: 17px; font-weight: 800;
	background: #fff; color: var(--wva-g500);
	border: 1px solid var(--wva-g200);
	transition: all 0.2s;
}
.wva-qa-tab:hover { border-color: rgba(58, 186, 235, 0.4); }
.wva-qa-tab.is-active { background: var(--wva-primary); color: #fff; border-color: var(--wva-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.wva-qa-panel { display: flex; flex-wrap: wrap; gap: 12px; }

/* Tiles */
.wva-tile {
	position: relative;
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
	gap: 8px;
	width: 108px; min-height: 108px;
	background: #fff;
	border: 1px solid var(--wva-g100);
	border-radius: 16px;
	padding: 16px 12px 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	text-align: center;
	transition: box-shadow 0.2s, transform 0.2s;
	cursor: pointer;
}
.wva-tile:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
.wva-tile-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wva-tile-ic {
	width: 40px; height: 40px;
	border-radius: 12px;
	background: var(--wva-primary-50);
	color: var(--wva-primary);
	display: flex; align-items: center; justify-content: center;
	transition: transform 0.2s;
}
.wva-tile:hover .wva-tile-ic { transform: scale(1.1); }
.wva-tile-ic.is-sand { background: rgba(240, 192, 143, 0.2); color: var(--wva-amber); }
.wva-tile-label { font-size: 15px; font-weight: 700; color: var(--wva-g700); line-height: 1.35; }
.wva-tile-sand { background: var(--wva-warn-bg); border-color: rgba(240, 192, 143, 0.3); gap: 6px; }
.wva-tile-sub { font-size: 12px; color: var(--wva-primary); text-decoration: underline; font-weight: 700; transition: color 0.2s; }
.wva-tile-sub:hover { color: var(--wva-primary-dark); }
.wva-tip-btn { color: var(--wva-g400); display: inline-flex; }
/* Bare gift under the add-line label - no chip background. */
.wva-tile-gift { display: inline-flex; color: var(--wva-primary); margin-top: 2px; }

.wva-ref-code {
	display: flex; align-items: center; justify-content: space-between; gap: 4px;
	width: 100%;
	background: #fff;
	border: 1px solid rgba(240, 192, 143, 0.4);
	border-radius: 8px;
	padding: 2px 6px;
}
.wva-ref-code .wva-ic { color: var(--wva-primary); }
.wva-copy-label { flex: 1; text-align: center; font-size: 12px; font-weight: 800; color: var(--wva-g600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tooltips */
.wva-tip {
	position: absolute;
	bottom: 100%; right: 0;
	margin-bottom: 8px;
	width: 224px;
	background: var(--wva-g800);
	color: #fff;
	font-size: 13px; line-height: 1.4;
	border-radius: 12px;
	padding: 8px 12px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	z-index: 20;
	text-align: right;
	cursor: default;
}
.wva-tip-wide { width: 256px; padding: 10px 12px; line-height: 1.55; }
.wva-tip-p { margin-bottom: 6px; }
.wva-tip-arrow {
	position: absolute; top: 100%; right: 16px;
	border: 4px solid transparent;
	border-top-color: var(--wva-g800);
}

/* Line tabs */
.wva-line-tabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 4px; }
.wva-line-tab {
	flex-shrink: 0;
	display: flex; flex-direction: column; align-items: flex-start;
	padding: 10px 16px;
	border-radius: 12px;
	font-size: 16px; font-weight: 700;
	background: #fff; color: var(--wva-g600);
	border: 1px solid var(--wva-g200);
	cursor: pointer;
	transition: all 0.2s;
}
.wva-line-tab:hover { border-color: rgba(58, 186, 235, 0.4); }
.wva-line-tab.is-active {
	background: var(--wva-primary); color: #fff;
	border-color: var(--wva-primary);
	box-shadow: 0 4px 6px -1px rgba(58, 186, 235, 0.2);
}
.wva-line-tab-name { display: flex; align-items: center; gap: 6px; }
.wva-line-name { font-weight: 800; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wva-line-edit-start { display: inline-flex; padding: 2px; border-radius: 4px; color: var(--wva-primary); transition: background 0.2s; }
.wva-line-tab.is-active .wva-line-edit-start { color: rgba(255, 255, 255, 0.8); }
.wva-line-tab.is-saving { opacity: 0.6; pointer-events: none; }
/* Same icon, no hover — lines with no order behind them can't be renamed. */
.wva-line-icon { display: inline-flex; padding: 2px; color: var(--wva-primary); }
.wva-line-tab.is-active .wva-line-icon { color: rgba(255, 255, 255, 0.8); }
.wva-line-edit-start:hover { background: var(--wva-primary-50); }
.wva-line-tab.is-active .wva-line-edit-start:hover { background: rgba(255, 255, 255, 0.2); }
.wva-line-edit { display: flex; align-items: center; gap: 6px; }
.wva-line-edit-commit { display: inline-flex; color: var(--wva-primary); }
.wva-line-tab.is-active .wva-line-edit-commit { color: #fff; }
.wva-line-edit-input {
	width: 144px;
	border: 2px solid var(--wva-primary);
	border-radius: 8px;
	padding: 4px 8px;
	font-size: 14px; font-weight: 700;
	background: #fff; color: var(--wva-g800);
	outline: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.wva-line-tab.is-active .wva-line-edit-input {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}
.wva-line-tab.is-active .wva-line-edit-input::placeholder { color: rgba(255, 255, 255, 0.6); }
.wva-line-number { font-size: 17px; font-weight: 800; margin-top: 2px; letter-spacing: 0.025em; color: var(--wva-g700); }
.wva-line-tab.is-active .wva-line-number { color: #fff; }
.wva-line-order { font-size: 11px; font-weight: 600; margin-top: 2px; color: var(--wva-g800); }
.wva-line-tab.is-active .wva-line-order { color: #fff; }
/* Plan pill on the line card: brand tint on white, translucent white on the
   active (blue) card, so it stays legible in both states. */
.wva-line-plan {
	display: inline-block; max-width: 100%;
	margin-top: 5px; padding: 2px 9px;
	border-radius: 999px;
	font-size: 12px; font-weight: 800; line-height: 1.7;
	color: var(--wva-primary); background: rgba(58, 186, 235, 0.12);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wva-line-tab.is-active .wva-line-plan { color: #fff; background: rgba(255, 255, 255, 0.22); }

/* Sub-line usage lookup on the login page — a second, quieter entry point,
   so it must not compete with the login form above it. */
.wva-login-alt {
	margin-top: 22px; padding-top: 20px;
	border-top: 1px solid var(--wva-g200);
}
.wva-login-alt-head { margin-bottom: 14px; }
.wva-login-alt-head h3 { font-size: 16px; font-weight: 800; color: var(--wva-g800); }
.wva-login-alt-head p { font-size: 14px; color: var(--wva-g400); margin-top: 4px; line-height: 1.5; }

/* Usage cards */
.wva-usage-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .wva-usage-grid { grid-template-columns: repeat(2, 1fr); } }
.wva-usage-head { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.wva-usage-head h3 { font-size: 18px; font-weight: 800; color: var(--wva-g800); }
.wva-circle-ic {
	width: 32px; height: 32px;
	background: var(--wva-primary-50);
	border-radius: 999px;
	color: var(--wva-primary);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}

.wva-bar-row { margin-bottom: 16px; }
.wva-bar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.wva-bar-label { font-size: 15px; color: var(--wva-primary); font-weight: 600; }
.wva-bar-val { font-size: 17px; font-weight: 800; color: var(--wva-g800); }
.wva-bar { height: 8px; background: var(--wva-g100); border-radius: 999px; overflow: hidden; }
.wva-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--wva-primary); }
.wva-bar-fill.is-sand { background: var(--wva-sand); }
/* Topups get their own colour — deliberately outside the brand's cyan/sand so a
   customer can see at a glance which part of the quota they paid extra for. */
.wva-bar-fill.is-topup { background: var(--wva-topup); }
.wva-extras { margin: 18px 0 4px; padding: 14px 14px 6px; background: var(--wva-topup-50); border: 1px solid var(--wva-topup-100); border-radius: 12px; }
.wva-extras-head { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--wva-topup-dark); margin-bottom: 12px; }
.wva-extras-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--wva-topup); flex-shrink: 0; }
.wva-extra-row:last-of-type { margin-bottom: 8px; }
.wva-extra-label { color: var(--wva-topup-dark); font-weight: 700; }
/* המתנה השנתית rows: same block, the brand's own colour — a gift is not a purchase. */
.wva-extra-row.is-gift .wva-bar-fill { background: var(--wva-primary); }
.wva-extra-row.is-gift .wva-extra-label { color: var(--wva-primary); }
.wva-extras-note { font-size: 12px; color: var(--wva-g500); }
.wva-bar-scale { display: flex; justify-content: space-between; margin-top: 2px; font-size: 12px; color: var(--wva-g400); }
.wva-il-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }

.wva-stats { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--wva-g100); }
.wva-stat { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--wva-g50); }
.wva-stat.is-last { border-bottom: 0; }
.wva-stat-label { font-size: 15px; color: var(--wva-primary); font-weight: 600; }
.wva-stat-val { font-size: 17px; font-weight: 800; color: var(--wva-g800); }
.wva-stat-note { font-size: 15px; font-weight: 400; color: var(--wva-primary); }
.wva-footnote { font-size: 13px; color: var(--wva-g400); line-height: 1.6; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wva-g50); }

/* Benefits */
.wva-commit-notice {
	display: flex; align-items: center; gap: 12px;
	background: var(--wva-warn-bg);
	border: 1px solid rgba(240, 192, 143, 0.4);
	border-radius: 12px;
	padding: 12px 16px;
	margin: 16px 0 0;
	font-size: 17px; color: var(--wva-g700);
}
.wva-commit-strong { font-weight: 800; color: var(--wva-amber); }
.wva-info-inline { display: inline-flex; vertical-align: middle; position: relative; top: -2px; margin-right: 4px; color: var(--wva-g400); transition: color 0.2s; }
.wva-info-inline:hover { color: var(--wva-g600); }

.wva-loyalty {
	display: flex; align-items: center; gap: 16px;
	/* White, like the partner card (Liron, 2026-08-26) — the blue gradient is gone. */
	background: #fff;
	border: 1px solid var(--wva-g200);
	border-radius: 16px;
	padding: 16px 20px;
}
.wva-loyalty-ic {
	width: 48px; height: 48px;
	background: var(--wva-primary);
	border-radius: 16px;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 6px -1px rgba(58, 186, 235, 0.3);
}
.wva-loyalty-body { flex: 1; display: flex; align-items: center; gap: 12px; }
.wva-loyalty-text { flex: 1; min-width: 0; }
.wva-loyalty-text h3 { font-size: 17px; font-weight: 800; color: var(--wva-g800); line-height: 1.35; }
.wva-loyalty-text p { font-size: 15px; color: var(--wva-g600); line-height: 1.6; }
.wva-loyalty-hl { font-weight: 800; color: var(--wva-primary); }
.wva-loyalty-cta {
	background: var(--wva-primary); color: #fff;
	font-weight: 800; font-size: 16px;
	padding: 8px 16px;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	flex-shrink: 0;
	transition: background 0.2s;
}
.wva-loyalty-cta:hover { background: var(--wva-primary-dark); }
.wva-loyalty-done { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #15803d; background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 12px; padding: 8px 12px; flex-shrink: 0; margin-top: 6px; }
.wva-loyalty-done svg { flex-shrink: 0; }
.wva-loyalty-text .wva-field-error { margin-top: 6px; }
.wva-loyalty-next { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--wva-g700); }
.wva-loyalty-claimed { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 700; color: #15803d; }
.wva-loyalty-claimed svg { flex-shrink: 0; }
/* Partner benefit card (הפניקס smart) — stacked under the gift, logo instead of the icon. */
.wva-loyalty + .wva-loyalty { margin-top: 12px; }
.wva-loyalty.is-partner { background: #fff; border-color: var(--wva-g200); }
/* The logo box has a fixed footprint and the image is forced to fit it — the theme's global
   img rules (height:auto / max-width) were winning and letting the logo spill out of the box. */
.wva-loyalty-logo-box { width: 120px !important; height: 56px !important; padding: 8px 12px; box-sizing: border-box; background: #fff; border: 1px solid var(--wva-g200); box-shadow: none; overflow: hidden; }
.wva-loyalty-logo, .wva-loyalty-logo-box img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; margin: 0 !important; }
.wva-loyalty a.wva-loyalty-cta { text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 560px) { .wva-loyalty { flex-wrap: wrap; } .wva-loyalty-body { flex-wrap: wrap; } .wva-loyalty-cta { width: 100%; text-align: center; justify-content: center; } }
/* Before the anniversary: same card, quieter — the gift is announced, not offered. */
.wva-loyalty.is-pending { background: #fff; border-color: var(--wva-g200); }
.wva-loyalty.is-pending .wva-loyalty-ic { background: #fff; color: var(--wva-primary); border: 1px solid var(--wva-g200); box-shadow: none; }
/* חבר מביא חבר in הטבות — white like every other benefit card (Liron,
   2026-08-31); only the gift icon keeps the sand accent it carries in
   פעולות מהירות, so the benefit is still recognisable across the two places. */
.wva-loyalty.is-referral { background: #fff; border-color: var(--wva-g200); }
.wva-loyalty.is-referral .wva-loyalty-ic { background: #fff; color: var(--wva-amber); border: 1px solid rgba(240, 192, 143, 0.5); box-shadow: none; }
/* The code sits where the other cards put their CTA — the left end of the body
   row — so this card keeps the same height as its neighbours. */
.wva-ref-side { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.wva-ref-side-label { font-size: 12px; font-weight: 800; color: var(--wva-g400); }
.wva-ref-code.is-lg { width: auto; min-width: 124px; padding: 6px 12px; gap: 8px; border-color: var(--wva-g200); }
.wva-ref-code.is-lg .wva-copy-label { font-size: 16px; letter-spacing: 0.08em; color: var(--wva-g800); }
.wva-ref-terms { font-size: 13px; font-weight: 700; color: var(--wva-primary); text-decoration: underline; }
.wva-ref-terms:hover { color: var(--wva-primary-dark); }
@media (max-width: 560px) {
	.wva-ref-side { width: 100%; flex-direction: row; justify-content: flex-start; gap: 8px; }
	.wva-ref-side-label { font-size: 13px; }
}

/* Support */
.wva-support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .wva-support-grid { grid-template-columns: repeat(4, 1fr); } }
.wva-support-tile {
	display: flex; flex-direction: column; align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--wva-g100);
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	text-align: center;
	transition: box-shadow 0.2s, transform 0.2s;
}
.wva-support-tile:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
.wva-support-ic {
	width: 48px; height: 48px;
	border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	transition: transform 0.2s;
}
.wva-support-tile:hover .wva-support-ic { transform: scale(1.1); }
.wva-support-label { display: block; font-weight: 800; color: var(--wva-g800); font-size: 17px; line-height: 1.35; }
.wva-support-sub { display: block; font-size: 15px; color: var(--wva-g400); margin-top: 2px; white-space: pre-line; }
.wva-support-sub.is-xs { font-size: 13px; }

/* Inner pages shared */
.wva-page-head { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.wva-page-head h1, .wva-page-head h2 { font-size: 22px; font-weight: 800; color: var(--wva-g800); }
.wva-pane-title { font-size: 18px; font-weight: 800; color: var(--wva-g800); margin-bottom: 4px; }
.wva-pane-sub { font-size: 14px; color: var(--wva-g500); margin-bottom: 16px; }
.wva-field-label { display: block; font-size: 14px; font-weight: 800; color: var(--wva-g500); margin-bottom: 6px; }
.wva-input {
	width: 100%;
	border: 1px solid var(--wva-g200);
	border-radius: 12px;
	padding: 10px 16px;
	font-size: 16px;
	background: var(--wva-g50);
	color: var(--wva-g800);
	text-align: right;
	outline: none;
	transition: border-color 0.2s, background 0.2s;
	margin-bottom: 16px;
}
.wva-input:focus { border-color: var(--wva-primary); background: #fff; }
.wva-input.is-readonly { background: var(--wva-g100); color: var(--wva-g400); cursor: not-allowed; }
.wva-input-code {
	border-width: 2px;
	text-align: center;
	font-size: 22px; font-weight: 800;
	letter-spacing: 0.5em;
	padding: 12px 16px;
	margin-bottom: 4px;
}
.wva-input-code.is-error { border-color: #f87171; }
.wva-field-error { font-size: 14px; color: #ef4444; font-weight: 700; margin-bottom: 12px; }
.wva-note { font-size: 14px; color: var(--wva-g400); margin-top: 8px; }
.wva-empty-hint { text-align: center; font-size: 16px; color: var(--wva-g400); padding: 32px 0; }
.wva-success {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 16px;
	padding: 12px 16px;
	margin-top: 16px;
	color: #15803d;
	font-weight: 800; font-size: 16px;
	text-align: center;
}
.wva-warn-box {
	display: flex; align-items: flex-start; gap: 8px;
	background: var(--wva-warn-bg);
	border: 1px solid rgba(240, 192, 143, 0.4);
	border-radius: 16px;
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 16px; color: var(--wva-g700);
}
.wva-warn-tight { border-radius: 12px; padding: 10px 12px; margin-bottom: 16px; font-size: 14px; color: var(--wva-g600); }
.wva-warn-ic { color: var(--wva-amber); margin-top: 2px; }
.wva-sent-box {
	display: flex; align-items: center; gap: 8px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 12px;
	padding: 10px 16px;
	margin-bottom: 16px;
	font-size: 16px; color: #15803d; font-weight: 700;
}
.wva-info-box {
	background: var(--wva-primary-50);
	border: 1px solid rgba(58, 186, 235, 0.2);
	border-radius: 12px;
	padding: 12px 16px;
}
.wva-info-box p { font-size: 14px; color: var(--wva-g600); }

/* Change plan */
.wva-plan-current { font-size: 16px; color: var(--wva-g500); margin-bottom: 20px; }
.wva-plan-current span { font-weight: 800; color: var(--wva-g700); }
.wva-table-scroll { overflow-x: auto; }
.wva-plan-table { min-width: 480px; }
.wva-plan-thead {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	padding: 10px 20px;
	background: var(--wva-g50);
	border-bottom: 1px solid var(--wva-g100);
	font-size: 12px; font-weight: 800; color: var(--wva-g400);
	text-transform: uppercase; letter-spacing: 0.05em;
}
.wva-plan-row {
	width: 100%;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid var(--wva-g100);
	background: #fff;
	border-right: 3px solid transparent;
	transition: background 0.2s;
}
.wva-plan-row:last-child { border-bottom: 0; }
.wva-plan-row.is-alt { background: rgba(249, 250, 251, 0.6); }
.wva-plan-row:hover { background: var(--wva-g50); }
.wva-plan-row.is-selected { background: var(--wva-primary-50); border-right-color: var(--wva-primary); }
.wva-plan-title { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.wva-plan-title b { font-weight: 800; color: var(--wva-g800); }
.wva-plan-price { color: var(--wva-primary); font-weight: 800; }
.wva-plan-title i { font-style: normal; font-size: 12px; color: var(--wva-g400); }
.wva-plan-badges { display: flex; gap: 4px; margin-top: 2px; }
.wva-badge-current { font-size: 11px; background: #dcfce7; color: #15803d; padding: 2px 6px; border-radius: 4px; font-weight: 800; }
.wva-badge-tag { font-size: 11px; background: rgba(58, 186, 235, 0.1); color: var(--wva-primary-dark); padding: 2px 6px; border-radius: 4px; font-weight: 800; }
.wva-plan-cell { font-size: 16px; color: var(--wva-g700); font-weight: 600; }

/* eSIM wizard */
.wva-esim-progress { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 24px; }
.wva-esim-step { display: flex; align-items: center; gap: 4px; flex: 1; }
.wva-esim-step-col { display: flex; flex-direction: column; align-items: center; flex: 1; }
.wva-esim-dot {
	width: 28px; height: 28px;
	border-radius: 999px;
	background: var(--wva-g100); color: var(--wva-g400);
	font-size: 14px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 4px;
}
.wva-esim-dot.is-active { background: var(--wva-primary); color: #fff; box-shadow: 0 0 0 4px rgba(58, 186, 235, 0.2); }
.wva-esim-dot.is-done { background: var(--wva-primary); color: #fff; }
.wva-esim-step-col p { font-size: 11px; text-align: center; color: var(--wva-g500); line-height: 1.3; display: none; }
@media (min-width: 640px) { .wva-esim-step-col p { display: block; } }
.wva-esim-line { height: 2px; width: 16px; flex-shrink: 0; border-radius: 999px; background: var(--wva-g200); margin-bottom: 16px; }
.wva-esim-line.is-done { background: var(--wva-primary); }

.wva-esim-done { text-align: center; padding: 24px; }
.wva-done-circle {
	width: 64px; height: 64px;
	background: #dcfce7; color: #22c55e;
	border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 12px;
}
.wva-done-title { font-size: 20px; font-weight: 800; color: var(--wva-g800); margin-bottom: 4px; }
.wva-done-sub { font-size: 16px; color: var(--wva-g500); margin-bottom: 16px; }
.wva-qr-box {
	background: var(--wva-g50);
	border: 1px solid var(--wva-g200);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
}
.wva-qr-frame {
	width: 112px; height: 112px;
	margin: 0 auto;
	background: #fff;
	border: 2px solid var(--wva-g200);
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	color: var(--wva-g300);
}
.wva-qr-box p { font-size: 14px; color: var(--wva-g400); margin-top: 8px; }

/* Invoice */
.wva-inv-intro {
	display: flex; align-items: flex-start; gap: 10px;
	background: var(--wva-primary-50);
	border: 1px solid rgba(58, 186, 235, 0.25);
	border-radius: 14px;
	padding: 12px 14px;
	margin-bottom: 16px;
	font-size: 14px; line-height: 1.55; color: var(--wva-g600);
}
.wva-inv-intro-ic { color: var(--wva-primary-dark); margin-top: 2px; }
.wva-inv-intro b { font-weight: 700; color: var(--wva-g800); unicode-bidi: isolate; }
.wva-inv-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wva-inv-year {
	border: 1px solid var(--wva-g200);
	background: #fff;
	color: var(--wva-g600);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 14px; font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: all 0.15s;
}
.wva-inv-year:hover { border-color: rgba(58, 186, 235, 0.5); }
.wva-inv-year.is-active { background: var(--wva-primary); border-color: var(--wva-primary); color: #fff; }
.wva-inv-state { text-align: center; padding: 32px 12px; color: var(--wva-g500); font-size: 16px; line-height: 1.6; }
.wva-inv-state p { margin: 0 0 12px; }
.wva-inv-state-ic { width: 30px; height: 30px; color: var(--wva-g300); margin-bottom: 8px; }
.wva-inv-state-ic.is-warn { color: var(--wva-amber); }
.wva-inv-state .wva-btn-primary { margin: 0 auto; }
.wva-inv-spinner {
	display: inline-block;
	width: 26px; height: 26px;
	margin-bottom: 10px;
	border: 3px solid var(--wva-g200);
	border-top-color: var(--wva-primary);
	border-radius: 50%;
	animation: wva-spin 0.8s linear infinite;
}
@keyframes wva-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wva-inv-spinner { animation: none; } }
.wva-inv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wva-inv-row {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 6px 12px;
	background: #fff;
	border: 1px solid var(--wva-g200);
	border-radius: 14px;
	padding: 12px 14px;
}
.wva-inv-row-ic {
	width: 38px; height: 38px;
	border-radius: 12px;
	background: var(--wva-primary-50);
	color: var(--wva-primary-dark);
	display: flex; align-items: center; justify-content: center;
}
.wva-inv-row.is-refund .wva-inv-row-ic { background: #fff4e5; color: var(--wva-amber); }
.wva-inv-row-main { min-width: 0; }
.wva-inv-row-title { font-size: 16px; font-weight: 800; color: var(--wva-g800); margin: 0; }
.wva-inv-row-num { color: var(--wva-g400); font-weight: 600; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.wva-inv-row-sub { font-size: 13px; color: var(--wva-g500); margin: 2px 0 0; line-height: 1.5; font-variant-numeric: tabular-nums; }
.wva-inv-date { font-weight: 800; color: #111827; }
/* The separator travels with the line label, so a wrap never strands it. */
.wva-inv-line:empty { display: none; }
.wva-inv-line::before { content: '·'; color: var(--wva-g300); margin: 0 6px; }
.wva-inv-row-amt { grid-column: 2; font-size: 18px; font-weight: 800; color: var(--wva-g800); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; }
.wva-inv-row.is-refund .wva-inv-row-amt { color: var(--wva-amber); }
.wva-inv-row-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.wva-inv-view, .wva-inv-dl {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 14px; font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.15s;
}
.wva-inv-view { background: var(--wva-primary); color: #fff; }
.wva-inv-view:hover { background: var(--wva-primary-dark); color: #fff; }
.wva-inv-dl { border: 1.5px solid var(--wva-g200); background: #fff; color: var(--wva-g700); }
.wva-inv-dl:hover { border-color: rgba(58, 186, 235, 0.5); color: var(--wva-primary-dark); }
@media (min-width: 640px) {
	.wva-inv-row { grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px 12px; }
	.wva-inv-row-amt { grid-column: auto; }
	.wva-inv-row-actions { grid-column: auto; display: flex; margin-top: 0; }
}
.wva-inv-foot-note { font-size: 13px; color: var(--wva-g400); text-align: center; margin-top: 16px; line-height: 1.5; }

/* Profile
   This popup has to fit a phone screen without scrolling (Liron, 2026-08-31),
   so every rule below is bought with vertical space: two columns instead of
   one, the close button floated over the heading instead of on a row of its
   own, and gaps trimmed to the smallest value that still separates fields. */
/* The top padding is the popup's breathing room: with the close button floated
   over the heading, a zero here put both of them against the frame. These are
   the roomy values — the max-height: 800px block below owns the tight ones. */
.wva-profile { padding: 24px 18px 20px; }
.wva-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wva-profile-grid .wva-fld-wide { grid-column: 1 / -1; }
.wva-profile-grid .wva-input { margin-bottom: 0; }
.wva-profile-grid .wva-field-label { margin-bottom: 4px; }
.wva-profile-grid .wva-input { padding: 10px 14px; }
.wva-profile-card { padding: 16px; }
.wva-profile-card .wva-btn-primary { margin-top: 16px; }
.wva-fld-hint { font-size: 13px; color: var(--wva-g400); margin-top: 4px; line-height: 1.4; }
/* The second heading inside the popup — same shape as the page head above it,
   tighter, because it opens a section rather than the whole screen. */
.wva-page-head-sub { margin: 20px 0 12px; }
/* The close button costs a 56px row it doesn't need; over the heading it costs
   nothing. Scoped to this popup — the taller modals still want the row. */
[data-wva-modal="profile"] .wva-page-head { margin-bottom: 12px; padding-inline-end: 40px; }
[data-wva-modal="profile"] .wva-modal-x-row { padding: 0; }
[data-wva-modal="profile"] .wva-modal-x { position: absolute; top: 18px; inset-inline-end: 18px; z-index: 2; }
/* The generic 90vh cap leaves a band of unused screen; this popup uses it —
   and on desktop the frame is wider than the stock 2xl (Liron, 2026-08-31:
   "תגדיל בקצת את הframe"), which lets the fields pair up two-by-two below. */
[data-wva-modal="profile"] .wva-modal-box { max-height: calc(100vh - 24px); max-width: 46rem; }
/* Wide screens: the four identity fields sit 2×2 (שם|לקוח, טלפון|דוא"ל) —
   two grid rows fewer, which is what keeps the popup scroll-free even in a
   window shortened by browser chrome or Windows display scaling. */
@media (min-width: 768px) {
	.wva-profile-grid .wva-fld-wide { grid-column: auto; }
}
/* Short screens (small Androids, iPhone SE): the same content, tighter. Nothing
   is hidden — a customer on a small phone must still read what the email is
   used for and where the card details are kept. */
@media (max-height: 800px) {
	[data-wva-modal="profile"] .wva-profile { padding: 16px 14px 12px; }
	[data-wva-modal="profile"] .wva-profile-grid { gap: 8px; }
	[data-wva-modal="profile"] .wva-profile-grid .wva-input { padding: 7px 12px; font-size: 15px; }
	[data-wva-modal="profile"] .wva-profile-grid .wva-field-label { margin-bottom: 3px; font-size: 13px; }
	[data-wva-modal="profile"] .wva-fld-hint { font-size: 12px; margin-top: 3px; }
	[data-wva-modal="profile"] .wva-profile-card { padding: 12px; }
	[data-wva-modal="profile"] .wva-profile-card .wva-btn-primary { margin-top: 10px; padding: 10px 16px; }
	[data-wva-modal="profile"] .wva-page-head { margin-bottom: 8px; }
	[data-wva-modal="profile"] .wva-page-head-sub { margin: 8px 0 5px; }
	[data-wva-modal="profile"] .wva-pay-line { font-size: 15px; margin-bottom: 4px; }
	[data-wva-modal="profile"] .wva-pay-note { font-size: 12px; margin-bottom: 8px; }
	[data-wva-modal="profile"] .wva-circle-ic { width: 28px; height: 28px; }
	[data-wva-modal="profile"] .wva-card { padding: 12px; }
	[data-wva-modal="profile"] .wva-cardlink .wva-btn-primary { padding: 10px 16px; }
}
/* Address: street + house number side by side, city below; one row on desktop. */
/* 1.8fr, not 3fr: at 3fr the house field was narrower than its own placeholder
   on a 390px screen and "מס דירה" was cut to "מס ד". */
.wva-addr-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 10px; }
.wva-addr-row .is-city { grid-column: 1 / -1; }
@media (min-width: 768px) {
	.wva-addr-row { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 2fr); }
	.wva-addr-row .is-city { grid-column: auto; }
}
.wva-pay-head { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.wva-pay-line { font-size: 16px; color: var(--wva-g600); margin-bottom: 8px; }
.wva-pay-note { font-size: 14px; color: var(--wva-g500); line-height: 1.55; margin: 0 0 14px; }

/* עדכון אמצעי תשלום — PayPlus card-update modal + widget */
.wva-pay-chip {
	display: flex; align-items: center; gap: 12px;
	background: var(--wva-g50);
	border: 1px solid var(--wva-g100);
	border-radius: 14px;
	padding: 12px 14px;
	margin-bottom: 16px;
}
.wva-pay-chip-ic {
	width: 40px; height: 40px;
	border-radius: 12px;
	background: var(--wva-primary-50);
	color: var(--wva-primary);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.wva-pay-chip-l { font-size: 13px; font-weight: 700; color: var(--wva-g400); }
.wva-pay-chip-v { font-size: 19px; font-weight: 800; color: var(--wva-g800); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; direction: ltr; unicode-bidi: isolate; text-align: right; }
.wva-pay-chip-v.is-empty { font-size: 16px; letter-spacing: 0; color: var(--wva-g600); }
.wva-card-steps { margin: 0 0 16px; padding: 0 20px 0 0; font-size: 15px; color: var(--wva-g600); line-height: 1.6; }
.wva-card-steps li { margin-bottom: 6px; padding-right: 2px; }
.wva-card-steps li::marker { color: var(--wva-primary); font-weight: 800; }
.wva-cardlink .wva-field-error { margin: 10px 0 0; }
.wva-card-note { font-size: 14px; color: var(--wva-g400); text-align: center; margin-top: 12px; }

/* Modals */
.wva-modal {
	position: fixed; inset: 0;
	z-index: 999999;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	direction: rtl;
}
.wva-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, 0.5);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.wva-modal-box {
	position: relative;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	width: 100%;
	overflow: hidden;
	font-family: inherit;
}
.wva-modal-md { max-width: 28rem; }
.wva-modal-lg { max-width: 32rem; }
.wva-modal-2xl { max-width: 42rem; }
.wva-modal-scroll { max-height: 90vh; overflow-y: auto; }
.wva-modal-col { max-height: 85vh; display: flex; flex-direction: column; }
.wva-modal-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 24px;
	border-bottom: 1px solid var(--wva-g100);
	flex-shrink: 0;
}
.wva-modal-head-t h2 { font-size: 20px; font-weight: 800; color: var(--wva-g800); }
/* Centered variant: title truly centered, X pinned to the side. */
.wva-modal-head-center { position: relative; justify-content: center; }
.wva-modal-head-center .wva-modal-head-t { text-align: center; }
.wva-modal-head-center .wva-modal-x { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); }
.wva-modal-head-t p { font-size: 14px; color: var(--wva-g400); margin-top: 2px; }
.wva-modal-x {
	width: 32px; height: 32px;
	border-radius: 999px;
	background: var(--wva-g100);
	color: var(--wva-g600);
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s;
	flex-shrink: 0;
}
.wva-modal-x:hover { background: var(--wva-g200); }
.wva-modal-x.is-light { background: rgba(255, 255, 255, 0.2); color: #fff; }
.wva-modal-x.is-light:hover { background: rgba(255, 255, 255, 0.3); }
.wva-modal-x-row { display: flex; justify-content: flex-end; padding: 20px 24px 0; }
.wva-modal-content { padding: 0 24px 24px; }
.wva-modal-xl { max-width: 36rem; }
.wva-modal-body { overflow-y: auto; flex: 1; padding: 20px 24px; }
.wva-modal-foot { padding: 16px 24px; border-top: 1px solid var(--wva-g100); flex-shrink: 0; }
.wva-modal-cap {
	background: var(--wva-primary);
	padding: 20px 24px;
	display: flex; align-items: center; justify-content: space-between;
}
.wva-modal-cap-t h2 { color: #fff; font-weight: 800; font-size: 20px; }
.wva-modal-cap-t p { color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-top: 2px; }
.wva-modal-pad { padding: 20px 24px; }

.wva-terms-sec { margin-bottom: 16px; }
.wva-terms-sec h3 { font-size: 16px; font-weight: 800; color: var(--wva-g800); margin-bottom: 4px; }
.wva-terms-sec p { font-size: 16px; color: var(--wva-g600); line-height: 1.6; }

.wva-minbill p { font-size: 16px; color: var(--wva-g700); line-height: 1.6; margin-bottom: 12px; }
.wva-minbill-note { font-size: 14px !important; color: var(--wva-g500) !important; }

.wva-guide-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.wva-guide-num {
	width: 28px; height: 28px;
	border-radius: 999px;
	background: var(--wva-primary); color: #fff;
	font-size: 14px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.wva-guide-t { font-weight: 800; color: var(--wva-g800); font-size: 16px; }
.wva-guide-d { font-size: 14px; color: var(--wva-g500); margin-top: 2px; line-height: 1.6; }

/* Countries modal */
.wva-countries-search { padding: 12px 20px; border-bottom: 1px solid var(--wva-g100); flex-shrink: 0; }
.wva-search-box {
	display: flex; align-items: center; gap: 8px;
	background: var(--wva-g50);
	border: 1px solid var(--wva-g200);
	border-radius: 12px;
	padding: 8px 12px;
	color: var(--wva-g400);
}
.wva-search-box input {
	flex: 1;
	background: transparent;
	border: 0; outline: none;
	font-size: 16px;
	color: var(--wva-g700);
	text-align: right;
}
.wva-search-box input::placeholder { color: var(--wva-g400); }
.wva-country-group { margin-bottom: 16px; }
.wva-country-letter {
	font-size: 14px; font-weight: 800; color: var(--wva-primary);
	margin-bottom: 4px; padding-bottom: 4px;
	border-bottom: 1px solid var(--wva-primary-50);
}
.wva-country { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--wva-g700); padding: 5px 0; border-bottom: 1px solid var(--wva-g50); }
.wva-country:last-child { border-bottom: 0; }
.wva-flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); flex-shrink: 0; }

/* ═══ Live-theme hardening ═══
   Elementor's global typography (kit) loads after this file and ties our
   selectors on specificity, so heading sizes must be locked with !important. */
.wva-hero-title { font-size: 28px !important; color: #fff !important; line-height: 1.2 !important; font-family: inherit !important; }
.wva-hero-sub { font-size: 19px !important; color: rgba(255, 255, 255, 0.9) !important; font-family: inherit !important; }
.wva-sec-title h2, .wva-h2 { font-size: 18px !important; color: var(--wva-g800) !important; line-height: 1.35 !important; font-family: inherit !important; margin: 0 !important; }
.wva-title-xl { font-size: 20px !important; }
.wva-usage-head h3, .wva-pane-title, .wva-loyalty-text h3, .wva-terms-sec h3 { font-size: 18px !important; color: var(--wva-g800) !important; line-height: 1.35 !important; font-family: inherit !important; margin: 0 !important; }
.wva-done-title, .wva-modal-head-t h2 { font-size: 20px !important; color: var(--wva-g800) !important; font-family: inherit !important; margin: 0 !important; }
.wva-modal-cap-t h2 { font-size: 20px !important; color: #fff !important; font-family: inherit !important; margin: 0 !important; }
.wva-page-head h1, .wva-page-head h2 { font-size: 20px !important; color: var(--wva-g800) !important; font-family: inherit !important; margin: 0 !important; }
@media (min-width: 768px) {
	.wva-hero-title { font-size: 32px !important; }
	.wva-hero-sub { font-size: 21px !important; }
}

/* ═══ Mobile: quick-action tiles as an equal-width grid ═══
   Fixed 108px tiles leave uneven leftover space on phones; a grid fills
   every row edge-to-edge and equalizes heights per row. */
@media (max-width: 767px) {
	.wva-qa-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.wva-qa-panel .wva-tile { width: 100%; min-height: 116px; }
}
@media (max-width: 374px) {
	.wva-qa-panel { grid-template-columns: repeat(2, 1fr); }
}

/* Support grid keeps the vertical space of the removed section heading. */
.wva-support-grid-spaced { margin-top: 36px; }

@media (max-width: 767px) {
	/* Israel card: minutes + SMS bars each on their own line. */
	.wva-il-pair { grid-template-columns: 1fr; gap: 16px; }
	/* Support tiles: all four identical in size, content centered so the
	   taller WhatsApp text doesn't leave blank bottoms in the other tiles. */
	.wva-support-grid { grid-auto-rows: 1fr; }
	.wva-support-tile { justify-content: center; padding: 14px 12px; }
	.wva-support-sub { line-height: 1.4; }
}

/* ═══ Login page ═══ */
.wva-login { min-height: 100vh; }
.wva-lhero { background: var(--wva-primary); padding: 40px 0 48px; overflow: hidden; }
.wva-lhero-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wva-lhero-title { font-size: 42px !important; font-weight: 800; color: #fff !important; line-height: 1.25 !important; font-family: inherit !important; margin: 0 !important; }
.wva-lhero-art { flex: 0 1 340px; min-width: 0; }
.wva-lhero-art svg { width: 100%; height: auto; display: block; }
@media (max-width: 767px) {
	.wva-lhero { padding: 28px 0 32px; }
	.wva-lhero-title { font-size: 30px !important; }
	.wva-lhero-art { flex-basis: 180px; }
}

.wva-login-wrap { max-width: 46rem; margin: 0 auto; padding: 36px 16px 64px; }
.wva-login-card {
	background: #fff;
	border: 1px solid var(--wva-g100);
	border-radius: 24px;
	box-shadow: 0 18px 40px -18px rgba(30, 42, 58, 0.18);
	padding: 36px 28px 40px;
	text-align: center;
}
.wva-login-pill {
	display: inline-block;
	background: var(--wva-primary);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	padding: 9px 26px;
	border-radius: 999px;
	box-shadow: 0 6px 16px -6px rgba(58, 186, 235, 0.6);
	margin-bottom: 20px;
}
.wva-login-title { font-size: 24px !important; font-weight: 800; color: var(--wva-g800) !important; margin: 0 0 8px !important; font-family: inherit !important; }
.wva-login-sub { font-size: 17px; color: var(--wva-g500); line-height: 1.6; margin-bottom: 22px; }
.wva-login-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
	font-weight: 700;
	font-size: 16px;
	border-radius: 12px;
	padding: 10px 16px;
	max-width: 380px;
	margin: 0 auto 18px;
}
.wva-login-form { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wva-login-input {
	width: 100%;
	max-width: 360px;
	border: 1px solid var(--wva-g200);
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 18px;
	background: var(--wva-g50);
	color: var(--wva-g800);
	text-align: center;
	outline: none;
	transition: border-color 0.2s, background 0.2s;
	font-family: inherit;
}
.wva-login-input:focus { border-color: var(--wva-primary); background: #fff; }
.wva-login-input::placeholder { color: var(--wva-g400); }
.wva-login-code { font-size: 22px; font-weight: 800; letter-spacing: 0.4em; max-width: 280px; }
.wva-login-hint { font-size: 16px; font-weight: 700; color: var(--wva-g600); margin-top: 6px; }
.wva-login-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; width: 100%; }
.wva-login-btn { width: auto; min-width: 170px; padding: 12px 28px; font-size: 17px; }
.wva-login-btn-alt {
	min-width: 130px;
	padding: 12px 24px;
	border: 2px solid var(--wva-primary) !important;
	border-radius: 999px;
	color: var(--wva-primary);
	font-weight: 800;
	font-size: 17px;
	background: #fff;
	transition: background 0.2s;
}
.wva-login-btn-alt:hover { background: var(--wva-primary-50); }
.wva-login-resend { display: inline-block; margin-top: 16px; font-size: 15px; color: var(--wva-primary); font-weight: 700; text-decoration: underline !important; }
.wva-login-admin { margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--wva-g200); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wva-login-admin p { font-size: 14px; font-weight: 700; color: var(--wva-g400); }

/* Hero login/logout button on the dashboard */
.wva-hero-login {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	padding: 7px 20px;
	border-radius: 999px;
	transition: background 0.2s;
}
.wva-hero-login:hover { background: rgba(255, 255, 255, 0.3); }

/* Login: id field with the type selector embedded inside it */
.wva-idfield {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 360px;
	background: var(--wva-g50);
	border: 1px solid var(--wva-g200);
	border-radius: 999px;
	transition: border-color 0.2s, background 0.2s;
}
.wva-idfield:focus-within { border-color: var(--wva-primary); background: #fff; }
.wva-idfield-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 12px 18px 12px 12px;
	font-size: 16px;
	font-weight: 800;
	color: var(--wva-g700);
	border-left: 1px solid var(--wva-g200);
	cursor: pointer;
}
.wva-idfield-toggle .wva-ic { color: var(--wva-g400); transition: transform 0.2s; }
.wva-idfield-toggle[aria-expanded="true"] .wva-ic { transform: rotate(180deg); }
.wva-idfield-input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 12px 14px;
	font-size: 18px;
	color: var(--wva-g800);
	text-align: center;
	outline: none;
	font-family: inherit;
}
.wva-idfield-input::placeholder { color: var(--wva-g400); }
.wva-idfield-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 8px;
	min-width: 130px;
	background: #fff;
	border: 1px solid var(--wva-g100);
	border-radius: 14px;
	box-shadow: 0 12px 28px rgba(30, 42, 58, 0.14);
	padding: 6px;
	margin: 0;
	list-style: none;
	z-index: 30;
}
.wva-idfield-menu li {
	padding: 9px 16px;
	border-radius: 9px;
	font-size: 16px;
	font-weight: 600;
	color: var(--wva-g700);
	cursor: pointer;
	text-align: right;
}
.wva-idfield-menu li:hover { background: var(--wva-primary-50); }
.wva-idfield-menu li.is-selected { color: var(--wva-primary); font-weight: 800; }
.wva-login-form .wva-field-error { margin: -6px 0 0; }

/* Login: code-delivery radio buttons */
.wva-login-method { display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap; }
.wva-method-radio {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--wva-g700);
	cursor: pointer;
}
.wva-method-radio input { position: absolute; opacity: 0; pointer-events: none; }
.wva-method-dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--wva-g300);
	background: #fff;
	position: relative;
	flex-shrink: 0;
	transition: border-color 0.2s;
}
.wva-method-radio input:checked + .wva-method-dot { border-color: var(--wva-primary); }
.wva-method-radio input:checked + .wva-method-dot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--wva-primary);
}
.wva-method-radio input:focus-visible + .wva-method-dot { outline: 2px solid var(--wva-g800); outline-offset: 2px; }

/* ── Topup page ("טעינת חבילות לחו״ל") ──────────────────
   The design's arrow carousel is deliberately not reproduced: every package
   is visible at once and nothing scrolls sideways at any width.

   Wrapping flex rather than a grid, because the two sections have different
   card counts (6 data, 4 minutes). An auto-fit grid would stretch the 4 cards
   wider than the 6, so the sections would not match; a max-width on the card
   keeps every card identical in both. Sizes use clamp() so they scale with the
   viewport instead of jumping at breakpoints. */

.wva-topup-head { margin-bottom: 14px; }
.wva-topup-head h2 {
	background: var(--wva-primary);
	color: #fff;
	font-size: clamp(17px, 1.2vw + 13px, 24px);
	font-weight: 800;
	margin: 0;
	padding: clamp(10px, 1vw + 7px, 18px) 20px;
	border-radius: 16px;
	text-align: center;
}
.wva-topup-single-line { display: flex; align-items: center; gap: 8px; font-size: clamp(17px, 1vw + 14px, 20px); font-weight: 800; margin: 0; }
.wva-topup-single-line .wva-line-icon { color: var(--wva-primary); }

.wva-pkg-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(9px, 1vw, 14px);
}

.wva-pkg {
	position: relative;
	flex: 1 1 clamp(128px, 14vw, 168px);
	max-width: 214px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wva-g200);
	border-radius: 18px;
	padding: 0;
	cursor: pointer;
	text-align: center;
	font-family: inherit;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.wva-pkg:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13); }
.wva-pkg:focus-visible { outline: 2px solid var(--wva-primary); outline-offset: 2px; }

.wva-pkg.is-selected { border: 2px solid var(--wva-primary); box-shadow: 0 4px 20px rgba(58, 186, 235, 0.3); }
.wva-pkg.is-selected .wva-pkg-top { background: var(--wva-primary-50); }
.wva-pkg.is-selected .wva-pkg-check { opacity: 1; transform: scale(1); }

.wva-pkg-top {
	padding: clamp(17px, 2vw, 26px) 10px clamp(11px, 1.2vw, 17px);
	border-bottom: 1px solid var(--wva-g100);
	border-radius: 17px 17px 0 0;
	transition: background 0.18s ease;
}
/* The numeric parts of a card run LTR, as in the Figma design: inside the
   RTL page an RTL flex row puts the first item rightmost, so "25" + "GB"
   renders "GB 25", and the price renders "159₪". The Hebrew validity line
   below stays RTL — only these two atoms are flipped. */
.wva-pkg-amount { display: flex; direction: ltr; align-items: baseline; justify-content: center; gap: 4px; line-height: 1; }
/* דקות is a Hebrew unit, so its card stays RTL and the number sits to the
   right of the word — only the Latin "GB" cards are flipped to LTR. */
.wva-pkg--voice .wva-pkg-amount { direction: rtl; }
.wva-pkg-num { font-size: clamp(27px, 3.4vw, 42px); font-weight: 900; color: var(--wva-g800); letter-spacing: -0.8px; }
.wva-pkg-unit { font-size: clamp(15px, 1.5vw, 22px); font-weight: 700; color: var(--wva-primary); }
.wva-pkg-validity { display: block; margin-top: 6px; font-size: clamp(11px, 0.8vw + 9px, 13px); font-weight: 400; color: var(--wva-g400); line-height: 1.3; }

.wva-pkg-price { direction: ltr; display: block; padding: clamp(11px, 1.3vw, 18px) 8px; font-size: clamp(28px, 3.6vw, 46px); font-weight: 900; color: var(--wva-g800); letter-spacing: -1px; line-height: 1; }
.wva-pkg-cur { font-size: clamp(13px, 1.2vw, 18px); font-weight: 400; color: var(--wva-g400); margin-inline-end: 2px; }

/* Physical left/translateX: transform is not direction-aware, so a logical
   inset here would push the badge off-centre in RTL. */
.wva-pkg-badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wva-sand);
	color: #6b4a00;
	font-size: 13px;
	font-weight: 800;
	padding: 3px 12px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 2px 4px rgba(240, 200, 74, 0.4);
}
.wva-pkg-check {
	position: absolute;
	top: 9px;
	inset-inline-end: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background: var(--wva-primary);
	color: #fff;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

/* The summary is a short list of short values — at full container width the
   label and the value end up at opposite ends of the screen. Cap it and centre
   it so the two columns stay readable as a pair. */
.wva-topup-summary { max-width: 32rem; margin-inline: auto; }
.wva-topup-sum-rows { margin-bottom: 14px; }
.wva-topup-sum-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--wva-g100); }
.wva-topup-sum-row.is-total { border-bottom: 0; padding-top: 13px; }
.wva-topup-sum-val { font-size: 16px; font-weight: 700; color: var(--wva-g400); text-align: left; }
.wva-topup-sum-val.is-chosen { color: var(--wva-g800); }
.wva-topup-total { font-size: clamp(22px, 2vw + 14px, 28px); font-weight: 900; color: var(--wva-primary); }
.wva-topup-buy { width: 100%; }
.wva-topup-buy[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Sticky only where there is height to spare — on a phone it would cover the
   cards it is summarising. */
@media (min-width: 768px) and (min-height: 620px) {
	.wva-topup-summary { position: sticky; bottom: 12px; }
}

/* Below ~360px two cards per row still fit because the card may shrink
   under its flex-basis; this keeps the text from crowding when it does. */
@media (max-width: 359px) {
	.wva-pkg-top { padding-left: 6px; padding-right: 6px; }
	.wva-pkg-validity { font-size: 11px; }
}

/* Coarse pointers get no hover lift — it sticks after a tap on touch. */
@media (hover: none) {
	.wva-pkg:hover { transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
	.wva-pkg:active { transform: scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
	.wva-pkg, .wva-pkg-top, .wva-pkg-check { transition: none; }
	.wva-pkg:hover { transform: none; }
}

/* ═══ Touch targets (1.8.0) ═══
   Measured on the live dashboard at 390x844 on 2026-08-31: the tip "i" was
   12x12, the rename pencil 14x14, "הוראות"/"תקנון" 23x14 and the copy chip
   87x20 — all far under the 44px a thumb needs. Every rule here grows the
   TARGET and not the design: padding paid back with an equal negative margin,
   so nothing moves on screen. Scoped to (pointer: coarse) so the mouse
   version keeps its exact current spacing. */
@media (pointer: coarse) {
	/* Icon-only buttons: square them up around their own centre. */
	.wva-tip-btn { padding: 12px; margin: -12px; }
	.wva-info-inline { padding: 10px; margin: -10px -6px -10px -10px; }
	/* The pencil sits inside the line tab, which is itself a link — a generous
	   box here would swallow taps meant for the tab, so it grows to 30px only. */
	.wva-line-edit-start, .wva-line-icon { padding: 7px; margin: -5px; }
	.wva-edit-btn { min-width: 40px; min-height: 40px; }

	/* Small text links: taller box, same baseline. */
	.wva-tile-sub, .wva-link-sm, .wva-notif-toggle, .wva-ref-terms {
		display: inline-flex; align-items: center;
		min-height: 36px;
		padding: 4px 8px;
		margin: -4px -8px;
	}
	.wva-ref-code { min-height: 34px; }
	.wva-qa-tab { min-height: 40px; }
	/* Inline inside a sentence: vertical padding is hit-tested but does not move
	   the line box, so the target grows without reflowing the notification. */
	.wva-link-bold { padding: 8px 2px; margin: 0 -2px; }

	/* 10-11px is a caption size on a desktop and unreadable on a phone. The bar
	   scale in particular is the "how much did I use" line, not decoration. */
	.wva-line-order { font-size: 12px; }
	.wva-tile-sub, .wva-copy-label, .wva-bar-scale, .wva-line-plan { font-size: 13px; }
}

/* The line strip scrolls sideways once a customer has more than two lines
   (עמוס עטר has six). A cut-off tab is the only hint that it does, so on touch
   the scrollbar is made visible rather than left to the browser to hide, and
   each tab snaps so a flick lands on a whole tab instead of between two. */
@media (pointer: coarse) {
	.wva-line-tabs {
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: var(--wva-g200) transparent;
		padding-bottom: 8px;
	}
	.wva-line-tabs::-webkit-scrollbar { height: 4px; }
	.wva-line-tabs::-webkit-scrollbar-thumb { background: var(--wva-g200); border-radius: 999px; }
	.wva-line-tab { scroll-snap-align: end; }
}

/* ═══ Wait overlay (1.8.0) ═══
   Shown by account.js while the next page is being built server-side — the
   login -> dashboard leg and a line switch. Brand spinner over a blurred
   veil; the page underneath stays visible so it reads as "working", not as
   a navigation error. */
.wva-wait {
	position: fixed; inset: 0;
	z-index: 9999999;
	display: none;
	align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	direction: rtl;
}
.wva-wait.is-on { display: flex; }
/* Literal colors, not the .wva-scoped variables: account.js appends the
   overlay to <body>, outside the .wva root — position:fixed inside .wva can be
   hijacked by an Elementor ancestor's transform — so the variables do not
   reach here and an undefined var() would erase the whole border shorthand
   (that is how the spinner shipped invisible on the first try). */
.wva-wait-box {
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	background: #fff;
	border: 1px solid #f1f5f9;
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	padding: 26px 34px;
	font-family: 'Assistant', sans-serif;
}
.wva-wait-box p { font-size: 16px; font-weight: 700; color: #374151; margin: 0; }
.wva-wait-spin {
	display: block;
	width: 34px; height: 34px;
	border: 4px solid #e8f7fc;
	border-top-color: #3abaeb;
	border-radius: 50%;
	animation: wva-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .wva-wait-spin { animation: none; } }