/**
 * מועדון DIMX Club — עיצוב צד לקוח.
 * עברית, RTL, מותאם מובייל. ללא עריכת קובצי WoodMart או תוספי צד שלישי.
 */

/* משתני הצבע מוגדרים על :root בכוונה.
   קודם הם הוגדרו על רשימת סלקטורים של רכיבים ספציפיים, ולכן כל רכיב
   חדש שלא היה ברשימה קיבל var() לא מוגדר — הצהרת ה-background כולה
   נפסלה, והתוצאה הייתה טקסט לבן על רקע לבן. הגדרה על :root פותרת זאת
   לכל רכיבי התוסף. שמות המשתנים נושאים קידומת --pc- ואינם משנים דבר
   בשאר האתר, משום שמשתנה שאיש אינו משתמש בו אינו משפיע על עיצוב. */
:root {
	/* Defaults = the palette of the default settings. The plugin prints the
	   site's own palette (from the brand colours in the settings) right
	   after this file, on :root as well (Assets::brand_css). Components
	   must not redeclare these variables, or they would shadow the site's
	   palette. */
	--pc-primary: #24c0d0;
	--pc-primary-dark: #115c62;
	--pc-primary-rgb: 36, 192, 208;
	--pc-primary-on-dark: #24c0d0;
	--pc-accent: #e8a33d;
	--pc-accent-dark: #ba8231;
	--pc-accent-rgb: 232, 163, 61;
	--pc-accent-on-dark: #e8a33d;
	--pc-on-accent: #111315;
	--pc-on-accent-dark: #111315;
	--pc-on-primary: #111315;
	--pc-ink-dark: #111315;
	--pc-surface: linear-gradient( 135deg, #111315 0%, #1d2226 60%, #115c62 100% );
	--pc-ink: #1d2327;
	--pc-muted: #6b7280;
	--pc-line: #e5e7eb;
	--pc-bg: #ffffff;
	--pc-radius: 14px;
}

.dimx-club,
.dimx-club-redeem,
.dimx-club-card,
.dimx-club-cta {
	/* Direction follows the document (RTL for Hebrew, LTR otherwise). */
	text-align: start;
	font-family: inherit;
	color: var(--pc-ink);
}

/* ---------- כרטיס חבר דיגיטלי ---------- */

.dimx-club-card {
	background-color: var(--pc-ink-dark);
	background-image: var(--pc-surface);
	color: #fff;
	border-radius: var(--pc-radius);
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 8px 24px rgba( 17, 19, 21, .22 );
	position: relative;
	overflow: hidden;
}

.dimx-club-card::after {
	content: "";
	position: absolute;
	inset-inline-start: -40px;
	inset-block-start: -40px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: rgba( var(--pc-primary-rgb), .22 );
}

.dimx-club-card__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	position: relative;
}

.dimx-club-card__brand,
.dimx-club-redeem__brand {
	font-weight: 800;
	letter-spacing: .14em;
	font-size: 13px;
	color: var(--pc-accent-on-dark);
	unicode-bidi: isolate;
	display: inline-block;
}

.dimx-club-card__status {
	font-size: 12px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .16 );
}

.dimx-club-card__name {
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 10px;
	position: relative;
}

.dimx-club-card__balance {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	position: relative;
	margin-bottom: 14px;
}

.dimx-club-card__points {
	font-size: 38px;
	font-weight: 800;
	line-height: 1;
}

.dimx-club-card__unit {
	font-size: 15px;
	opacity: .9;
}

.dimx-club-card__value {
	font-size: 14px;
	opacity: .85;
}

.dimx-club-card__value .amount {
	color: #fff;
}

.dimx-club-card__bottom {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12px;
	opacity: .85;
	position: relative;
}

.dimx-club-card--compact {
	padding: 16px;
}

.dimx-club-card--compact .dimx-club-card__points {
	font-size: 28px;
}

/* ---------- לוחות באזור האישי ---------- */

.dimx-club-panel {
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	padding: 18px;
	margin-bottom: 18px;
	background: var(--pc-bg);
}

.dimx-club-panel h3 {
	margin: 0 0 12px;
	font-size: 16px;
}

.dimx-club-status {
	margin: 0 0 10px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 14px;
}

.dimx-club-status--open {
	background: #ecfdf5;
	color: #065f46;
}

.dimx-club-status--locked {
	background: #fffbeb;
	color: #92400e;
}

.dimx-club-note {
	color: var(--pc-muted);
	font-size: 13px;
	margin: 8px 0 0;
}

.dimx-club-alert {
	padding: 12px 14px;
	border-radius: 10px;
	margin-bottom: 16px;
	font-size: 14px;
}

.dimx-club-alert--success {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

.dimx-club-alert--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* ---------- התקדמות לסף ---------- */

.dimx-club-progress {
	height: 10px;
	border-radius: 999px;
	background: var(--pc-line);
	overflow: hidden;
	margin: 10px 0;
}

.dimx-club-progress__bar {
	height: 100%;
	background: linear-gradient( 90deg, var(--pc-accent), var(--pc-primary) );
	border-radius: 999px;
	transition: width .3s ease;
}

/* ---------- רכיב המימוש בתוך סיכום ההזמנה ---------- */

/*
 * הרכיב חי בתוך טבלת סיכום ההזמנה של WooCommerce — טבלה בת שתי
 * עמודות, בתוך עמודה צרה (‎.cart_totals‎ של WoodMart היא ‎flex:.7 0 0‎,
 * כלומר בערך 400px גם במסך רחב).
 *
 * שני דברים נדרשים כדי שהתא ייקח את מלוא הרוחב:
 *
 * 1. colspan="2" ב-HTML — קיים ב-CheckoutClassic::render_panel().
 * 2. ביטול מפורש של ‎.cart_totals table th { width: 35% }‎ של
 *    WooCommerce, שחל גם על התא שלנו. בלעדיו הדפדפן מכבד את 35%
 *    ומשאיר את שאר הרוחב ריק.
 *
 * ובנוסף: מתחת ל-769px WoodMart מסתירה כל th
 * (‎.shop_table_responsive :is(thead,th){display:none}‎) והופכת כל tr
 * ל-flex column. שם התא חייב לחזור ל-display:block, אחרת הרכיב נעלם
 * לגמרי במובייל.
 *
 * כל הכללים כאן תחומים ל-‎.dimx-club-*‎ בלבד ואינם נוגעים בשורות
 * המשלוח או בשאר הטבלה.
 */

.dimx-club-row > th.dimx-club-cell {
	display: table-cell;
	width: auto !important;
	max-width: none !important;
	box-sizing: border-box;
	padding: 14px 0 !important;
	text-align: start;
	font-weight: 400;
	vertical-align: top;
}

@media ( max-width: 768.98px ) {

	.dimx-club-row.dimx-club-redeem-row {
		display: block;
		width: 100%;
	}

	.dimx-club-row > th.dimx-club-cell {
		display: block;
		width: 100% !important;
	}
}

.dimx-club-redeem {
	container-type: inline-size;
	container-name: dimx-club-redeem;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 16px;
	border-radius: 14px;
	border: 1px solid rgba( 255, 255, 255, .1 );
	background:
		var(--pc-surface);
	background-color: var(--pc-ink-dark);
	color: #fff;
	text-align: start;
	font-size: 14px;
	line-height: 1.5;
	/* שום דבר בתוך הרכיב אינו יוצא מגבולותיו. */
	overflow-wrap: break-word;
	word-break: normal;
}

.dimx-club-redeem * {
	box-sizing: border-box;
	min-width: 0;
}

.dimx-club-redeem__title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
}

.dimx-club-redeem__brand {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .2em;
	color: var(--pc-accent-on-dark);
	unicode-bidi: isolate;
	text-align: start;
}

/* ---- יתרה ---- */

.dimx-club-redeem__balance {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	padding: 12px 14px;
	border-radius: 11px;
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .09 );
}

.dimx-club-redeem__balance-label {
	flex: 1 1 100%;
	font-size: 12px;
	letter-spacing: .04em;
	color: rgba( 255, 255, 255, .7 );
}

.dimx-club-redeem__balance-value {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--pc-accent-on-dark);
}

.dimx-club-redeem__unit {
	font-size: 13px;
	font-weight: 600;
	color: rgba( 255, 255, 255, .8 );
}

.dimx-club-redeem__balance-money {
	font-size: 13px;
	color: rgba( 255, 255, 255, .72 );
}

.dimx-club-redeem__balance-money .amount,
.dimx-club-redeem__applied-text .amount,
.dimx-club-redeem__hint .amount {
	color: inherit;
	font-weight: 600;
	white-space: nowrap;
}

/* ---- טופס ---- */

.dimx-club-redeem__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dimx-club-redeem__label {
	display: block;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: rgba( 255, 255, 255, .9 );
}

.dimx-club-redeem__input {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 11px 13px;
	border-radius: 10px;
	border: 1px solid rgba( 255, 255, 255, .18 );
	background: rgba( 255, 255, 255, .05 );
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.3;
	text-align: start;
	/* מבטל את text-align:end שהערכה נותנת לתא האחרון בשורה. */
	direction: ltr;
}

.dimx-club-redeem__input::placeholder {
	color: rgba( 255, 255, 255, .4 );
}

.dimx-club-redeem__input:focus {
	outline: 2px solid var(--pc-accent-on-dark);
	outline-offset: 1px;
	border-color: transparent;
}

.dimx-club-redeem__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dimx-club-redeem__apply,
.dimx-club-redeem__max,
.dimx-club-redeem__cancel {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	border: 0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
	text-align: center;
	/* בלי שבירת מילים ובלי כפתורים צרים וגבוהים. */
	white-space: normal;
	word-break: keep-all;
	hyphens: none;
	min-height: 44px;
}

.dimx-club-redeem__apply {
	background: var(--pc-primary);
	color: var(--pc-on-primary);
}

.dimx-club-redeem__apply:hover {
	background: var(--pc-primary-dark);
	color: #fff;
}

.dimx-club-redeem__max {
	background: transparent;
	color: var(--pc-accent-on-dark);
	border: 1px solid rgba( var(--pc-accent-rgb), .55 );
	font-weight: 600;
}

.dimx-club-redeem__max:hover {
	background: rgba( var(--pc-accent-rgb), .12 );
}

.dimx-club-redeem__hint {
	margin: 0;
	font-size: 12px;
	line-height: 1.55;
	color: rgba( 255, 255, 255, .62 );
}

.dimx-club-redeem__hint strong {
	color: rgba( 255, 255, 255, .85 );
}

/* ---- מימוש פעיל ---- */

.dimx-club-redeem__applied {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 12px 14px;
	border-radius: 11px;
	background: rgba( var(--pc-primary-rgb), .13 );
	border: 1px solid rgba( var(--pc-primary-rgb), .32 );
}

.dimx-club-redeem__applied-text {
	font-size: 14px;
	color: #fff;
}

.dimx-club-redeem__applied-text strong {
	color: var(--pc-accent-on-dark);
}

.dimx-club-redeem__cancel {
	background: transparent;
	color: rgba( 255, 255, 255, .78 );
	border: 1px solid rgba( 255, 255, 255, .22 );
	font-size: 13px;
	font-weight: 600;
	min-height: 38px;
	padding: 8px 12px;
}

.dimx-club-redeem__cancel:hover {
	background: rgba( 255, 255, 255, .08 );
	color: #fff;
}

/* ---- הודעות ---- */

.dimx-club-redeem__notice {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba( 255, 255, 255, .78 );
}

.dimx-club-redeem__notice--locked {
	color: var(--pc-accent-on-dark);
}

/* ---- מצב עדכון ---- */

.dimx-club-redeem__status {
	display: none;
	margin: 0;
	padding: 10px 12px;
	border-radius: 9px;
	background: rgba( var(--pc-primary-rgb), .14 );
	border: 1px solid rgba( var(--pc-primary-rgb), .34 );
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

.dimx-club-redeem__status.is-visible {
	display: block;
}

/* בזמן הפעולה הפקדים נעולים, וזה נראה. */
.dimx-club-redeem.is-busy .dimx-club-redeem__form,
.dimx-club-redeem.is-busy .dimx-club-redeem__applied {
	opacity: .55;
}

.dimx-club-redeem [disabled] {
	cursor: progress;
}

.dimx-club-redeem__error:not( :empty ) {
	margin: 0;
	padding: 10px 12px;
	border-radius: 9px;
	background: rgba( 248, 113, 113, .14 );
	border: 1px solid rgba( 248, 113, 113, .4 );
	color: #ffb4b4;
	font-size: 13px;
}

.dimx-club-redeem .dimx-club-progress {
	background: rgba( 255, 255, 255, .14 );
	margin: 0;
}

/*
 * התאמה לרוחב **הרכיב עצמו**, לא לרוחב המסך: סיכום הסל הוא עמודה צרה
 * גם במחשב. כשיש מקום אמיתי — השדה והכפתורים עוברים לשורה אחת.
 * ברירת המחדל היא הטור המלא, ולכן דפדפן בלי תמיכה ב-container queries
 * מקבל את הפריסה הבטוחה.
 */
@container dimx-club-redeem ( min-width: 360px ) {

	.dimx-club-redeem__form {
		display: grid;
		grid-template-columns: minmax( 88px, 0.9fr ) 1.4fr;
		gap: 10px;
		align-items: end;
	}

	.dimx-club-redeem__label {
		grid-column: 1 / -1;
	}

	.dimx-club-redeem__actions {
		flex-direction: row;
	}

	.dimx-club-redeem__hint {
		grid-column: 1 / -1;
	}

	.dimx-club-redeem__applied {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.dimx-club-redeem__cancel {
		width: auto;
		flex: 0 0 auto;
	}
}

/* ---------- תג וקריאה לפעולה ---------- */

.dimx-club-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f5f7f6;
	border: 1px dashed var(--pc-primary);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	margin: 8px 0;
}

.dimx-club-cta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background-color: var(--pc-ink-dark);
	background-image: var(--pc-surface);
	color: #fff;
	border-radius: var(--pc-radius);
	padding: 18px 20px;
}

.dimx-club-button,
.dimx-club-cta a {
	background: var(--pc-accent);
	color: var(--pc-on-accent) !important;
	border-radius: 8px;
	padding: 9px 18px;
	text-decoration: none !important;
	font-weight: 600;
	display: inline-block;
	border: 0;
	cursor: pointer;
}

.dimx-club-preview {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--pc-muted);
}

.dimx-club-chip {
	display: inline-block;
	font-size: 12px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--pc-line);
	color: var(--pc-ink);
}

.dimx-club-chip--live {
	background: #d1fae5;
	color: #065f46;
}

/* ---------- טפסים ---------- */

.dimx-club-form .dimx-club-field {
	margin-bottom: 14px;
}

.dimx-club-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.dimx-club-form input[type="text"],
.dimx-club-form input[type="tel"],
.dimx-club-form input[type="email"],
.dimx-club-form input[type="date"],
.dimx-club-form textarea {
	width: 100%;
	max-width: 420px;
	padding: 9px 11px;
	border: 1px solid var(--pc-line);
	border-radius: 8px;
	font-size: 15px;
}

.dimx-club-consents {
	border: 1px solid var(--pc-line);
	border-radius: 10px;
	padding: 12px 14px;
	margin: 16px 0;
}

.dimx-club-consents label,
.dimx-club-panel .dimx-club-form label {
	font-weight: 400;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.dimx-club-hero {
	background: #f5f7f6;
	border-radius: var(--pc-radius);
	padding: 20px;
	margin-bottom: 20px;
}

.dimx-club-hero h2 {
	margin: 8px 0 12px;
	font-size: 20px;
}

.dimx-club-hero__list {
	margin: 0;
	padding-inline-start: 18px;
	line-height: 1.9;
}

.dimx-club-details summary {
	cursor: pointer;
	font-weight: 600;
	margin-bottom: 10px;
}

/* ---------- טבלת היסטוריה ---------- */

.dimx-club-table-wrap {
	overflow-x: auto;
}

.dimx-club-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.dimx-club-table th,
.dimx-club-table td {
	padding: 10px 8px;
	border-bottom: 1px solid var(--pc-line);
	text-align: start;
}

.dimx-club-table .is-positive {
	color: #065f46;
	font-weight: 600;
}

.dimx-club-table .is-negative {
	color: #991b1b;
	font-weight: 600;
}

.dimx-club-table__row--pending {
	opacity: .7;
}

.dimx-club-pagination {
	display: flex;
	gap: 6px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.dimx-club-pagination a {
	padding: 5px 11px;
	border: 1px solid var(--pc-line);
	border-radius: 7px;
	text-decoration: none;
}

.dimx-club-pagination a.is-current {
	background: var(--pc-primary);
	color: var(--pc-on-primary);
	border-color: var(--pc-primary);
}

/* ---------- מובייל ---------- */

@media ( max-width: 600px ) {

	.dimx-club-card__points {
		font-size: 32px;
	}

	.dimx-club-redeem__controls {
		flex-direction: column;
	}

	.dimx-club-redeem__apply,
	.dimx-club-redeem__max {
		width: 100%;
	}

	/* טבלה שנקראת ככרטיסים במסך צר */
	.dimx-club-table thead {
		display: none;
	}

	.dimx-club-table tr {
		display: block;
		border: 1px solid var(--pc-line);
		border-radius: 10px;
		margin-bottom: 10px;
		padding: 6px 10px;
	}

	.dimx-club-table td {
		display: flex;
		justify-content: space-between;
		gap: 10px;
		border-bottom: 0;
		padding: 6px 0;
	}

	.dimx-club-table td::before {
		content: attr( data-label );
		font-weight: 600;
		color: var(--pc-muted);
	}
}


/* ===================================================================== */
/*  רכיבי הצטרפות — רצועה, כרטיס, תג חבר ופופאפ                          */
/* ===================================================================== */

/* בידוד כיווני: שם המותג ומספרים לטיניים בתוך טקסט עברי.
   בלי זה "DIMX CLUB" ו-"5%" נצמדים למילה השכנה ומוצגים בסדר שגוי. */
/* The club name keeps its own direction (<bdi> = dir auto), so a Hebrew
   name reads right to left and a Latin one left to right. Numbers are LTR. */
.dimx-club-brand,
.dimx-club-num {
	unicode-bidi: isolate;
	display: inline-block;
	white-space: nowrap;
}

.dimx-club-num {
	direction: ltr;
}

.dimx-club-brand {
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--pc-primary-on-dark);
}

/* ---------- כפתורים ---------- */

.dimx-club-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--pc-accent);
	color: var(--pc-on-accent) !important;
	border: 0;
	border-radius: 10px;
	padding: 11px 22px;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none !important;
	transition: background .18s ease, transform .18s ease;
	white-space: nowrap;
}

.dimx-club-btn:hover,
.dimx-club-btn:focus-visible {
	background: var(--pc-accent-dark);
	transform: translateY( -1px );
}

.dimx-club-btn--lg {
	padding: 14px 30px;
	font-size: 16px;
}

.dimx-club-btn--ghost {
	background: transparent;
	color: #fff !important;
	border: 1px solid rgba( 255, 255, 255, .55 );
}

.dimx-club-btn--ghost:hover {
	background: rgba( 255, 255, 255, .12 );
}

/* ---------- תג חבר מתחת לכותרת האתר ---------- */

.dimx-club-memberbar {
	background-color: var(--pc-ink-dark);
	background-image: var(--pc-surface);
	border-bottom: 2px solid var(--pc-primary);
}

.dimx-club-memberbar__inner {
	max-width: 1222px;
	margin: 0 auto;
	padding: 8px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 14px;
}

.dimx-club-memberbar__icon {
	color: var(--pc-accent-on-dark);
	display: inline-flex;
}

.dimx-club-memberbar__text {
	font-weight: 700;
}

.dimx-club-memberbar__balance {
	margin-inline-start: auto;
	background: var(--pc-primary);
	color: var(--pc-on-primary);
	border-radius: 999px;
	padding: 3px 12px;
	font-weight: 700;
	font-size: 13px;
}

/* ---------- רצועת הצטרפות ---------- */

/* ===================================================================== */
/*  בלוק המועדון — מיקום אחד, שני מצבי חברות                              */
/* ===================================================================== */

.dimx-club-block {
	/* display ו-visibility מפורשים: במצב Layouts של WoodMart הבלוק
	   מרונדר בתוך <form class="woocommerce-cart-form">, ולערכות נושא יש
	   כללים גורפים לצאצאים של טפסים. בלי זה אי אפשר להבדיל בין באנר
	   שלא נוצר לבין באנר שנוצר והוסתר. */
	display: block;
	visibility: visible;
	max-width: 1222px;
	margin: 0 auto 22px;
	box-sizing: border-box;
	clear: both;
	float: none;
	width: auto;
}

.dimx-club-block__inner {
	background:
		var(--pc-surface);
	background-color: var(--pc-ink-dark);
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, .1 );
	border-radius: 16px;
	padding: 26px 24px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 13px;
	box-shadow: 0 8px 26px rgba( 0, 0, 0, .18 );
}

.dimx-club-block--compact .dimx-club-block__inner {
	padding: 18px 20px 17px;
	gap: 11px;
}

.dimx-club-block__kicker {
	display: block;
	font-size: 11.5px;
	letter-spacing: .22em;
	margin: 0;
}

.dimx-club-block__kicker .dimx-club-brand {
	color: var(--pc-accent-on-dark);
	letter-spacing: .22em;
}

.dimx-club-block__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 24px;
	line-height: 1.35;
	color: #fff !important;
	font-weight: 700;
	text-align: center;
}

.dimx-club-block--compact .dimx-club-block__title {
	font-size: 20px;
}

.dimx-club-block__title .dimx-club-num {
	color: var(--pc-primary-on-dark);
	font-size: 31px;
	font-weight: 800;
}

.dimx-club-block--compact .dimx-club-block__title .dimx-club-num {
	font-size: 26px;
}

/* ---------- מצב חבר ---------- */

.dimx-club-balance {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.dimx-club-balance__value {
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: var(--pc-accent-on-dark);
}

.dimx-club-balance__unit {
	font-size: 15px;
	color: #fff;
}

.dimx-club-balance__money {
	font-size: 14px;
	color: rgba( 255, 255, 255, .72 );
}

.dimx-club-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 14px;
	background: rgba( 255, 255, 255, .07 );
	border: 1px solid rgba( 255, 255, 255, .12 );
	color: #fff;
}

.dimx-club-status__icon {
	display: inline-flex;
	color: var(--pc-primary-on-dark);
}

.dimx-club-status--locked .dimx-club-status__icon {
	color: var(--pc-accent-on-dark);
}

/* ---------- הטבות ---------- */

.dimx-club-perks {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px 18px;
}

.dimx-club-perks li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.dimx-club-perks li::marker {
	content: none;
}

.dimx-club-perk {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	line-height: 1.5;
}

.dimx-club-perk__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 9px;
	background: rgba( var(--pc-primary-rgb), .14 );
	border: 1px solid rgba( var(--pc-primary-rgb), .32 );
	color: var(--pc-primary-on-dark);
}

.dimx-club-perks--grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 9px;
	text-align: start;
}

.dimx-club-perks--grid .dimx-club-perk,
.dimx-club-perks--row .dimx-club-perk {
	display: flex;
	background: rgba( 255, 255, 255, .05 );
	border: 1px solid rgba( 255, 255, 255, .1 );
	border-radius: 11px;
	padding: 9px 12px;
	color: #fff;
}

.dimx-club-perks--row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 7px;
	text-align: start;
	margin-bottom: 16px !important;
}

.dimx-club-perks--row .dimx-club-perk {
	font-size: 14px;
	padding: 8px 11px;
}

.dimx-club-perks--row .dimx-club-perk__icon,
.dimx-club-perks--grid .dimx-club-perk__icon {
	width: 27px;
	height: 27px;
	flex-basis: 27px;
	border-radius: 8px;
}

/* ---------- פופאפ ---------- */

html.dimx-club-modal-open,
body.dimx-club-modal-open {
	overflow: hidden !important;
}

/* כשהחלון סגור הוא אינו תופס מקום ואינו מציג תוכן בתוך העמוד.
   !important נחוץ משום שערכות נושא מגדירות לעיתים display לרכיבי div
   בסלקטור כללי יותר, וזה מבטל את תכונת hidden של הדפדפן. */
.dimx-club-modal[hidden],
.dimx-club-modal:not([open]) {
	display: none !important;
}

.dimx-club-modal {
	position: fixed !important;
	inset: 0 !important;
	/* מעל כותרת WoodMart והתפריט הדביק שלה. */
	z-index: 999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px;
	box-sizing: border-box;
	margin: 0 !important;
	width: auto !important;
	max-width: none !important;
	/* The element is a native <dialog>: undo the browser's dialog box
	   (border, white background, size limits, own scrolling). */
	height: auto !important;
	max-height: none !important;
	border: 0 !important;
	background: transparent !important;
	color: inherit;
	overflow: hidden !important;
}

/* Native window (showModal, top layer): the dark layer is the dialog's own
   ::backdrop. It exists only while the dialog is displayed, and nothing on
   the page can cover the dialog, so the page cannot turn dark without the
   window. The <div> backdrop is used only by browsers without <dialog>. */
.dimx-club-modal.is-native::backdrop {
	background: rgba( 10, 12, 14, .72 );
}

.dimx-club-modal.is-native .dimx-club-modal__backdrop {
	display: none !important;
}

.dimx-club-modal * {
	box-sizing: border-box;
}

.dimx-club-modal__backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba( 10, 12, 14, .72 );
	border: 0;
	margin: 0;
	padding: 0;
}

.dimx-club-modal__dialog {
	position: relative !important;
	background:
		var(--pc-surface) !important;
	background-color: var(--pc-ink-dark) !important;
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, .12 );
	border-radius: 16px;
	width: 100%;
	max-width: 520px !important;
	/* Relative to the window itself, which is exactly the visible screen:
	   `vh` on phones is the height without the browser bars. */
	max-height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 26px 26px 30px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, .34 );
	text-align: start;
	float: none !important;
}

.dimx-club-modal__close {
	position: absolute;
	inset-inline-end: 12px;
	inset-block-start: 10px;
	background: transparent;
	border: 0;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #6b7280;
	padding: 4px 8px;
}

.dimx-club-modal__close:hover {
	color: #fff;
	background: rgba( 255, 255, 255, .18 );
}

.dimx-club-modal__title {
	margin: 0 0 16px;
	font-size: 19px;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	padding-inline-end: 34px;
}

.dimx-club-modal__benefits {
	margin: 0 0 18px;
	padding: 14px 16px;
	list-style: none;
	background: #f4fbfc;
	border-radius: 12px;
	font-size: 14px;
	line-height: 2;
}

.dimx-club-modal__benefits li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dimx-club-modal__benefits li::before {
	content: "✓";
	color: var(--pc-primary-dark);
	font-weight: 700;
	flex: 0 0 auto;
}

.dimx-club-summary {
	border: 1px solid var(--pc-line);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 16px;
}

.dimx-club-summary h3,
.dimx-club-modal__missing h3 {
	margin: 0 0 10px;
	font-size: 15px;
}

.dimx-club-summary dl {
	margin: 0;
	display: grid;
	gap: 6px;
}

.dimx-club-summary dl > div {
	display: flex;
	gap: 10px;
	font-size: 14px;
}

.dimx-club-summary dt {
	color: var(--pc-muted);
	min-width: 62px;
}

.dimx-club-summary dd {
	margin: 0;
	font-weight: 600;
	word-break: break-word;
}

.dimx-club-modal__missing {
	border: 1px solid #fde3b8;
	background: #fffbf3;
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 16px;
}

.dimx-club-form {
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.dimx-club-modal .dimx-club-field {
	margin: 0 0 12px;
	padding: 0;
	width: 100%;
	max-width: 100%;
	float: none;
	clear: both;
}

.dimx-club-modal .dimx-club-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 14px;
}

.dimx-club-modal input[type="text"],
.dimx-club-modal input[type="tel"],
.dimx-club-modal input[type="email"],
.dimx-club-modal input[type="date"],
.dimx-club-modal input[type="password"] {
	/* max-width מונע משדה date להימתח מעבר לחלון — התנהגות ברירת המחדל
	   של הדפדפן לשדה תאריך היא רוחב פנימי משלו, וערכות נושא מרחיבות
	   אותו. הכלל כאן תחום לפופאפ בלבד ואינו נוגע לטפסים אחרים באתר. */
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	padding: 11px 12px;
	border: 1px solid var(--pc-line);
	border-radius: 10px;
	font-size: 16px; /* 16px מונע זום אוטומטי ב-iOS */
	font-family: inherit;
	line-height: 1.4;
	background: #fff;
	color: var(--pc-ink);
	box-shadow: none;
	margin: 0;
}

.dimx-club-modal input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	min-height: 44px;
}

.dimx-club-modal input:focus-visible {
	outline: 2px solid var(--pc-accent-on-dark);
	outline-offset: 1px;
}

.dimx-club-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 8px;
	cursor: pointer;
}

.dimx-club-check input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.dimx-club-check--terms {
	margin: 14px 0 16px;
	font-weight: 600;
}

.dimx-club-modal__consents {
	border: 1px solid var(--pc-line);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 0 0 6px;
}

.dimx-club-modal__consents legend {
	font-weight: 700;
	font-size: 14px;
	padding: 0 6px;
}

.dimx-club-modal__note {
	color: var(--pc-muted);
	font-size: 12.5px;
	line-height: 1.6;
	margin: 6px 0 0;
}

.dimx-club-modal__error:not( :empty ),
.dimx-club-modal__error--visible {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
	margin-bottom: 12px;
}

.dimx-club-modal .dimx-club-btn {
	width: 100%;
	margin-top: 4px;
}

.dimx-club-modal__consents {
	max-width: 100%;
}

.dimx-club-modal__done {
	text-align: center;
	padding: 10px 0 4px;
}

.dimx-club-modal__done p {
	margin-bottom: 16px;
}

.dimx-club-modal__loading {
	text-align: center;
	color: var(--pc-muted);
	padding: 28px 0;
}

/* ---------- מובייל ---------- */

@media ( max-width: 782px ) {

	.dimx-club-banner__inner {
		padding: 18px 16px;
		gap: 16px;
	}

	.dimx-club-banner__title {
		font-size: 21px;
	}

	.dimx-club-banner__title .dimx-club-num {
		font-size: 27px;
	}

	.dimx-club-banner__action,
	.dimx-club-banner__action .dimx-club-btn {
		width: 100%;
	}

	.dimx-club-strip {
		gap: 10px;
		padding: 13px 15px;
	}

	.dimx-club-strip .dimx-club-btn {
		width: 100%;
		margin-inline-start: 0;
	}

	.dimx-club-memberbar__inner {
		font-size: 13px;
		padding: 7px 14px;
	}

	.dimx-club-modal {
		padding: 12px;
		align-items: flex-end !important;
	}

	.dimx-club-modal__dialog {
		max-width: 100% !important;
		border-radius: 16px;
		max-height: 100%;
		padding: 22px 18px 26px;
	}

	.dimx-club-banner {
		margin: 12px auto;
		padding: 0 12px;
	}

	.dimx-club-banner__inner {
		padding: 16px 18px;
	}
}


/* ===================================================================== */
/*  הגנות תחומות                                                          */
/* ===================================================================== */

/* כל הכללים בקובץ הזה תחומים למחלקות dimx-club-*, כדי שלא ישנו טפסים
   וכפתורים בשאר האתר. שתי ההגנות הבאות מונעות גלילה אופקית שנגרמת
   מרכיבי המועדון בלבד. */
.dimx-club-banner,
.dimx-club-strip,
.dimx-club-memberbar,
.dimx-club-modal__dialog {
	max-width: 100%;
	overflow-wrap: break-word;
}

.dimx-club-banner *,
.dimx-club-strip *,
.dimx-club-memberbar * {
	min-width: 0;
}

/* הסתרת הרכיבים לפני שה-CSS נטען אינה רצויה — אם הקובץ לא ייטען,
   עדיף שהתוכן יופיע לא מעוצב מאשר שייעלם. לכן אין כאן כלל שמסתיר
   רכיבים כברירת מחדל, חוץ מהפופאפ, שממילא חייב להיות סגור. */


/* ===================================================================== */
/*  מסך שיווקי בתוך הפופאפ                                                */
/* ===================================================================== */

.dimx-club-promo {
	text-align: center;
}

.dimx-club-promo__title {
	margin: 0 0 6px;
	font-size: 21px;
	line-height: 1.35;
	font-weight: 800;
	color: var(--pc-ink-dark);
}

.dimx-club-promo__sub {
	margin: 0 0 16px;
	color: var(--pc-muted);
	font-size: 14.5px;
}

.dimx-club-promo__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin-top: 18px;
}

.dimx-club-btn--link {
	background: transparent;
	color: var(--pc-muted) !important;
	font-weight: 600;
	padding: 8px 12px;
	text-decoration: underline;
}

.dimx-club-btn--link:hover {
	background: transparent;
	color: var(--pc-ink) !important;
	transform: none;
}

/* ---------- כותרת הפופאפ ממורכזת + סגירה נגישה בגלילה ---------- */

.dimx-club-modal__title {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2px;
	margin: 0 0 14px;
	padding: 0 40px;
	font-size: 17px;
}

.dimx-club-modal__title .dimx-club-brand {
	font-size: 13px;
	letter-spacing: .2em;
}

/* בתצוגה השיווקית הפופאפ מציג כותרת משלו ("עדיין לא הצטרפת למועדון
   שלנו?"). כותרת המסגרת מיותרת שם ויוצרת שתי כותרות זו מעל זו, ולכן
   נשאר ממנה רק שם המותג. */
.dimx-club-modal[data-dimx-club-current="promo"] .dimx-club-modal__title span {
	display: none;
}

.dimx-club-modal[data-dimx-club-current="promo"] .dimx-club-modal__title {
	margin-bottom: 6px;
}

.dimx-club-modal__close {
	/* נשאר נגיש גם כשגוללים בתוך החלון. */
	position: sticky;
	float: inline-start;
	inset-block-start: 0;
	inset-inline-end: auto;
	z-index: 3;
	background: rgba( 255, 255, 255, .08 );
	border: 1px solid rgba( 255, 255, 255, .16 );
	color: #fff;
	border-radius: 50%;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 24px;
}

.dimx-club-modal__dialog:focus {
	outline: none;
}

/* ---------- טופס קומפקטי ---------- */

/* שורת טופס בת שתי עמודות בפופאפ ההצטרפות.
   השם היה קודם .dimx-club-row — אותו שם בדיוק שנתון ל-<tr> של רכיב
   המימוש בסיכום הסל. הכלל display:grid הפך את שורת הטבלה לרשת בת שתי
   עמודות, ה-<th colspan="2"> הפך לפריט ברשת בעמודה הראשונה, והרכיב
   נדחס לחצי מהרוחב עם עמודה ריקה לצידו. שם ייחודי מונע את ההתנגשות. */
.dimx-club-formrow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 12px;
}

.dimx-club-summary {
	text-align: start;
	padding: 12px 14px;
	margin-bottom: 12px;
}

.dimx-club-summary dl > div {
	font-size: 13.5px;
}

.dimx-club-modal__missing {
	padding: 12px 14px;
	margin-bottom: 12px;
}

.dimx-club-modal__consents {
	padding: 10px 12px;
}

.dimx-club-check--terms {
	margin: 12px 0 14px;
}

@media ( max-width: 600px ) {

	.dimx-club-formrow {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.dimx-club-promo__title {
		font-size: 19px;
	}

	.dimx-club-perks--grid .dimx-club-perk {
		padding: 8px 10px;
		font-size: 14px;
	}
}


/* ===================================================================== */
/*  הפופאפ בשפת המותג — שחור/פחם, טורקיז וזהב                             */
/* ===================================================================== */

.dimx-club-modal__title,
.dimx-club-promo__title {
	color: #fff !important;
}

.dimx-club-promo__sub {
	color: rgba( 255, 255, 255, .7 );
}

.dimx-club-summary,
.dimx-club-modal__missing,
.dimx-club-modal__consents {
	background: rgba( 255, 255, 255, .05 );
	border-color: rgba( 255, 255, 255, .12 );
	color: #fff;
}

.dimx-club-summary h3,
.dimx-club-modal__missing h3,
.dimx-club-modal__consents legend {
	color: #fff;
}

.dimx-club-summary dt {
	color: rgba( 255, 255, 255, .6 );
}

.dimx-club-modal__note {
	color: rgba( 255, 255, 255, .58 );
}

.dimx-club-modal label,
.dimx-club-check {
	color: #fff;
}

.dimx-club-modal input[type="text"],
.dimx-club-modal input[type="tel"],
.dimx-club-modal input[type="email"],
.dimx-club-modal input[type="date"],
.dimx-club-modal input[type="password"] {
	background: rgba( 255, 255, 255, .07 ) !important;
	border-color: rgba( 255, 255, 255, .18 ) !important;
	color: #fff !important;
}

.dimx-club-modal input::placeholder {
	color: rgba( 255, 255, 255, .45 );
}

.dimx-club-modal input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert( 1 ) opacity( .7 );
}

.dimx-club-modal a {
	color: var(--pc-primary-on-dark);
}

/* "אולי אחר כך" — משני ושקט, לא כפתור במשקל זהה. */
.dimx-club-btn--link {
	background: transparent !important;
	color: rgba( 255, 255, 255, .62 ) !important;
	font-weight: 500;
	font-size: 14px;
	padding: 6px 12px;
	text-decoration: underline;
	border: 0;
}

.dimx-club-btn--link:hover {
	background: transparent !important;
	color: #fff !important;
	transform: none;
}

.dimx-club-modal__error:not( :empty ) {
	background: rgba( 220, 38, 38, .16 );
	border-color: rgba( 248, 113, 113, .45 );
	color: #fecaca;
}

.dimx-club-modal__loading {
	color: rgba( 255, 255, 255, .6 );
}

/* ---------- מובייל ---------- */

@media ( max-width: 782px ) {

	.dimx-club-block {
		margin-bottom: 16px;
	}

	.dimx-club-block__inner {
		padding: 18px 16px 16px;
	}

	.dimx-club-block__title {
		font-size: 19px;
	}

	.dimx-club-block__title .dimx-club-num {
		font-size: 25px;
	}

	.dimx-club-perks {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		text-align: start;
	}

	.dimx-club-perks .dimx-club-perk {
		display: flex;
		background: rgba( 255, 255, 255, .05 );
		border: 1px solid rgba( 255, 255, 255, .1 );
		border-radius: 10px;
		padding: 8px 11px;
		font-size: 14px;
	}

	.dimx-club-block .dimx-club-btn {
		width: 100%;
	}

	.dimx-club-balance__value {
		font-size: 30px;
	}
}

/* ---------- Theme independence ----------
   Themes without a global box-sizing reset (e.g. Hello Elementor before its
   own CSS loads) made full-width buttons overflow narrow screens by their
   padding/border. Every club component sizes its boxes itself. */
.dimx-club,
.dimx-club *,
.dimx-club-block,
.dimx-club-block *,
.dimx-club-redeem,
.dimx-club-redeem *,
.dimx-club-card,
.dimx-club-card *,
.dimx-club-modal,
.dimx-club-modal *,
.dimx-club-memberbar,
.dimx-club-memberbar * {
	box-sizing: border-box;
}

.dimx-club-btn,
.dimx-club-redeem__input,
.dimx-club-redeem button {
	max-width: 100%;
}

/* Blocks: the redemption controls wrap on narrow screens. */
.dimx-club-redeem--blocks .dimx-club-redeem__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dimx-club-redeem--blocks .dimx-club-redeem__input {
	flex: 1 1 90px;
	min-width: 0;
}

.dimx-club-redeem__notice--conflict {
	border-inline-start: 4px solid var(--pc-accent);
	padding-inline-start: 10px;
}

@media (max-width: 480px) {
	.dimx-club-btn {
		white-space: normal;
		text-align: center;
	}
}


/* =====================================================================
   Buttons and icons — theme-independent
   =====================================================================
   Themes style every <button> generically: Hello Elementor's reset.css
   gives `button, [type=button], [type=submit]` a transparent background
   with a #c36 border and text, and a #c36 background on :hover/:focus;
   Elementor's global kit adds `.elementor-kit-N button` (and :hover/:focus)
   with the site's own button colours. Those selectors are as specific as
   ours or more, and Hello's file loads after this one, so they won — the
   join button showed dark text on a transparent or pink background.

   The rules below target ONLY the club's own button classes, with a
   doubled class for specificity and !important on the colour properties,
   so any theme or builder rule for buttons in general cannot change them.
   Buttons elsewhere on the site are untouched. Colours come from the club
   palette (Assets::tokens), text colours are computed for contrast. */

/* Primary actions: join, submit, redeem, account forms. */
.dimx-club-btn.dimx-club-btn,
.dimx-club-button.dimx-club-button,
.dimx-club-redeem__apply.dimx-club-redeem__apply {
	background-color: var(--pc-accent) !important;
	background-image: none !important;
	color: var(--pc-on-accent) !important;
	border: 1px solid var(--pc-accent) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	opacity: 1 !important;
	-webkit-appearance: none;
	appearance: none;
	text-transform: none;
	outline: 2px solid transparent;
	outline-offset: 2px;
	cursor: pointer;
}

.dimx-club-btn.dimx-club-btn:hover,
.dimx-club-btn.dimx-club-btn:focus,
.dimx-club-button.dimx-club-button:hover,
.dimx-club-button.dimx-club-button:focus,
.dimx-club-redeem__apply.dimx-club-redeem__apply:hover,
.dimx-club-redeem__apply.dimx-club-redeem__apply:focus {
	background-color: var(--pc-accent-dark) !important;
	border-color: var(--pc-accent-dark) !important;
	color: var(--pc-on-accent-dark) !important;
}

.dimx-club-btn.dimx-club-btn:active,
.dimx-club-button.dimx-club-button:active,
.dimx-club-redeem__apply.dimx-club-redeem__apply:active {
	background-color: var(--pc-accent-dark) !important;
	border-color: var(--pc-accent-dark) !important;
	color: var(--pc-on-accent-dark) !important;
	box-shadow: inset 0 2px 5px rgba( 0, 0, 0, .28 ) !important;
	transform: none;
}

/* Secondary actions on the dark club surfaces. */
.dimx-club-btn--ghost.dimx-club-btn--ghost,
.dimx-club-redeem__max.dimx-club-redeem__max,
.dimx-club-redeem__cancel.dimx-club-redeem__cancel,
.dimx-club-modal__close.dimx-club-modal__close {
	background-color: transparent !important;
	background-image: none !important;
	color: #fff !important;
	border: 1px solid rgba( 255, 255, 255, .55 ) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	opacity: 1 !important;
	-webkit-appearance: none;
	appearance: none;
	outline: 2px solid transparent;
	outline-offset: 2px;
	cursor: pointer;
}

.dimx-club-btn--ghost.dimx-club-btn--ghost:hover,
.dimx-club-btn--ghost.dimx-club-btn--ghost:focus,
.dimx-club-btn--ghost.dimx-club-btn--ghost:active,
.dimx-club-redeem__max.dimx-club-redeem__max:hover,
.dimx-club-redeem__max.dimx-club-redeem__max:focus,
.dimx-club-redeem__max.dimx-club-redeem__max:active,
.dimx-club-redeem__cancel.dimx-club-redeem__cancel:hover,
.dimx-club-redeem__cancel.dimx-club-redeem__cancel:focus,
.dimx-club-redeem__cancel.dimx-club-redeem__cancel:active,
.dimx-club-modal__close.dimx-club-modal__close:hover,
.dimx-club-modal__close.dimx-club-modal__close:focus,
.dimx-club-modal__close.dimx-club-modal__close:active {
	background-color: rgba( 255, 255, 255, .14 ) !important;
	border-color: #fff !important;
	color: #fff !important;
}

/* "Maybe later": a quiet text link, not a button of equal weight. */
.dimx-club-btn--link.dimx-club-btn--link {
	background-color: transparent !important;
	border-color: transparent !important;
	color: rgba( 255, 255, 255, .78 ) !important;
	text-decoration: underline !important;
}

.dimx-club-btn--link.dimx-club-btn--link:hover,
.dimx-club-btn--link.dimx-club-btn--link:focus,
.dimx-club-btn--link.dimx-club-btn--link:active {
	background-color: transparent !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* Keyboard focus: a two-tone ring, visible on dark and light backgrounds. */
.dimx-club-btn.dimx-club-btn:focus-visible,
.dimx-club-button.dimx-club-button:focus-visible,
.dimx-club-redeem__apply.dimx-club-redeem__apply:focus-visible,
.dimx-club-redeem__max.dimx-club-redeem__max:focus-visible,
.dimx-club-redeem__cancel.dimx-club-redeem__cancel:focus-visible,
.dimx-club-modal__close.dimx-club-modal__close:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px var(--pc-ink-dark) !important;
}

/* Disabled (e.g. while a request is running): neutral and still readable. */
.dimx-club-btn.dimx-club-btn:disabled,
.dimx-club-btn.dimx-club-btn[aria-disabled="true"],
.dimx-club-button.dimx-club-button:disabled,
.dimx-club-redeem__apply.dimx-club-redeem__apply:disabled,
.dimx-club-redeem__max.dimx-club-redeem__max:disabled,
.dimx-club-redeem__cancel.dimx-club-redeem__cancel:disabled,
.dimx-club-modal__close.dimx-club-modal__close:disabled {
	background-color: #4b5563 !important;
	border-color: #4b5563 !important;
	color: #f3f4f6 !important;
	box-shadow: none !important;
	cursor: not-allowed;
	transform: none;
}

/* Shape and motion. Page builders also style every button's corners,
   padding and typography (Elementor kit: `.elementor-kit-N button`), and
   Hello's reset animates `all` for .3s. The doubled class outranks those
   generic selectors, so the club buttons keep their own shape. */
.dimx-club-btn.dimx-club-btn,
.dimx-club-button.dimx-club-button,
.dimx-club-redeem__apply.dimx-club-redeem__apply,
.dimx-club-redeem__max.dimx-club-redeem__max,
.dimx-club-redeem__cancel.dimx-club-redeem__cancel,
.dimx-club-modal__close.dimx-club-modal__close {
	border-radius: 10px;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.dimx-club-btn.dimx-club-btn {
	padding: 11px 22px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.dimx-club-btn--lg.dimx-club-btn--lg {
	padding: 14px 30px;
	font-size: 16px;
}

.dimx-club-btn--link.dimx-club-btn--link {
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 500;
}

.dimx-club-redeem__apply.dimx-club-redeem__apply,
.dimx-club-redeem__max.dimx-club-redeem__max {
	padding: 12px 14px;
	font-size: 15px;
	line-height: 1.25;
}

.dimx-club-redeem__apply.dimx-club-redeem__apply {
	font-weight: 700;
}

.dimx-club-redeem__max.dimx-club-redeem__max,
.dimx-club-redeem__cancel.dimx-club-redeem__cancel {
	font-weight: 600;
}

.dimx-club-redeem__cancel.dimx-club-redeem__cancel {
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.25;
}

/* Close button: a drawn X, same size in every theme. */
.dimx-club-modal__close.dimx-club-modal__close {
	width: 36px;
	height: 36px;
	min-width: 36px;
	padding: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 0;
}

/* Icons: local SVG drawings with an explicit size, independent of any
   icon font. The colour follows the text colour of the icon box. */
.dimx-club-perk__icon svg,
.dimx-club-status__icon svg,
.dimx-club-memberbar__icon svg,
.dimx-club-modal__close svg {
	display: block;
	width: 18px;
	height: 18px;
	min-width: 18px;
	flex: 0 0 18px;
	fill: none;
	stroke: currentColor;
	overflow: visible;
	visibility: visible;
	opacity: 1;
}

.dimx-club-memberbar__icon svg {
	fill: currentColor;
	stroke: none;
}

.dimx-club-perk__icon,
.dimx-club-status__icon {
	color: var(--pc-primary-on-dark);
}

.dimx-club-perk__icon {
	background-color: rgba( var(--pc-primary-rgb), .16 );
	border-color: rgba( var(--pc-primary-rgb), .45 );
}

/* Form controls in the join window follow the palette as well. */
.dimx-club-modal input[type="checkbox"] {
	-webkit-appearance: checkbox;
	appearance: auto;
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin: 3px 0 0;
	accent-color: var(--pc-accent);
	opacity: 1;
	position: static;
	visibility: visible;
}