/* ==========================================================================
   FILE: assets/css/product-size.css
   PURPOSE: Styling for the size-pills + size-chart + toast on the single
   product page — adapted from Kicks Mania's proven Step 4 (teal accent
   swapped for black/white, no colour anywhere). Hides WooCommerce's
   default variation <select> dropdowns/labels (assets/js/product-size.js
   builds clickable pill buttons from their options instead — the
   dropdowns stay in the DOM, just visually hidden, so WooCommerce's own
   AJAX price/stock logic keeps working unchanged).
   HTML: template-parts/product/size-chart.php | JS: assets/js/product-size.js
   ========================================================================== */

.single-product .variations { width: 100%; margin: 6px 0 4px; border: 0; background: none; }
.single-product .variations tbody,
.single-product .variations tr,
.single-product .variations td,
.single-product .variations th { display: block; width: auto; border: 0; padding: 0; background: none; }
.single-product .variations tr + tr { margin-top: 14px; }
.single-product .variations label { display: none; }
.single-product .variations select { display: none !important; }
.single-product .reset_variations { display: none !important; }

.dc-sz-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.dc-sz-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #666; }
.dc-chart-btn { background: none; border: 0; padding: 0; color: #000; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.dc-szrow { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 6px; }
.dc-szb {
	min-width: 58px;
	padding: 11px 12px;
	background: #fff;
	border: 1px solid #000;
	border-radius: 7px;
	color: #000;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	cursor: pointer;
	transition: .2s;
	text-align: center;
}
.dc-szb.is-on { border-width: 2px; background: #000; color: #fff; }
.dc-szb.is-off { opacity: .32; text-decoration: line-through; cursor: not-allowed; }
.dc-szrow.dc-shake { animation: dcShake .4s; }
@keyframes dcShake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-7px); }
	40% { transform: translateX(7px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}

.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button:disabled {
	opacity: 1 !important;
	cursor: pointer !important;
	pointer-events: auto !important;
}

/* ---- Size Chart popup ---- */
.dc-chart-ov { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 99998; display: none; align-items: center; justify-content: center; padding: 16px; }
.dc-chart-ov.dc-open { display: flex; }
.dc-chart-box { background: #fff; border: 1px solid #000; border-radius: 14px; max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 20px 18px 24px; position: relative; }
.dc-chart-box h3 { color: #000; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; margin: 0 0 4px; text-align: center; }
.dc-chart-sub { color: #666; font-size: 11.5px; text-align: center; margin: 0 0 6px; }
.dc-chart-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid #000; color: #000; font-size: 16px; cursor: pointer; line-height: 1; }
.dc-chart-box h4 { color: #000; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 20px 0 9px; }
.dc-chart-box h4:first-of-type { margin-top: 10px; }
.dc-chart-scroll { overflow-x: auto; scrollbar-width: none; }
.dc-chart-table { width: 100%; border-collapse: collapse; min-width: 420px; }
.dc-chart-table th, .dc-chart-table td { border: 1px solid #000; padding: 8px 6px; text-align: center; font-size: 11.5px; color: #000; white-space: nowrap; }
.dc-chart-table th { background: #f2f2f2; color: #000; font-weight: 800; letter-spacing: .05em; }
.dc-chart-note { color: #666; font-size: 11px; margin: 14px 0 0; text-align: center; line-height: 1.6; }

/* ---- toast — new for Dapper Cloth (no existing sitewide toast to reuse) ---- */
.dc-toast {
	position: fixed;
	left: 50%;
	bottom: 90px;
	transform: translate(-50%, 20px);
	display: flex;
	align-items: center;
	gap: 8px;
	background: #000;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	transition: .25s;
	z-index: 100001;
	white-space: nowrap;
}
.dc-toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dc-toast svg { width: 18px; height: 18px; flex-shrink: 0; }



/* FIX: X button ka glyph flex-centering ke bina uneven/off-center
   dikh raha tha — same fix jo lightbox close button mein kiya tha */
.dc-chart-x {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
}