/* ─── YM Order Wizard ─────────────────────────────────────────────── */
.product-type-simple .quantity { display: none !important; }
.product-type-simple .single_add_to_cart_button:not(.ym-btn-cart) { display: none !important; }

/* Hide product meta (SKU/Category) and zoom on wizard product */
.ym-order-wizard ~ .product_meta,
.single-product .product_meta { display: none !important; }
.woocommerce-product-gallery .zoomImg,
.woocommerce-product-gallery .woocommerce-product-gallery__trigger { display: none !important; }

.ym-order-wizard {
	font-family: "Space Grotesk", "DM Sans", sans-serif;
	color: #1A1A2E;
	width: 100%;
	max-width: 900px;
	margin: 1.5rem 0;
	box-sizing: border-box;
}
.ym-order-wizard *, .ym-order-wizard *::before, .ym-order-wizard *::after {
	box-sizing: border-box;
}

/* ─── Progress Indicator ──────────────────────────────────────────── */
.ym-wizard-progress {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-bottom: 1.5rem;
	padding: 0 1rem;
}
.ym-wizard-step-dot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	opacity: 0.35;
	transition: opacity 0.3s ease;
}
.ym-wizard-step-dot.active,
.ym-wizard-step-dot.completed { opacity: 1; }
.ym-wizard-step-dot span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: #ddd; color: #666;
	font-weight: 700; font-size: 0.85rem;
	transition: background 0.3s, color 0.3s;
}
.ym-wizard-step-dot.active span { background: #E84545; color: #fff; }
.ym-wizard-step-dot.completed span { background: #00D9C0; color: #fff; }
.ym-wizard-step-dot label {
	font-size: 0.72rem; text-transform: uppercase;
	letter-spacing: 0.04em; color: #666; font-weight: 500;
}
.ym-wizard-step-dot.active label { color: #1A1A2E; font-weight: 600; }
.ym-wizard-step-line {
	flex: 1; height: 2px; background: #ddd;
	margin: 0 6px; margin-bottom: 18px;
}

/* ─── Panel Show/Hide ─────────────────────────────────────────────── */
/*
 * Replaced flex+translateX slide with simple show/hide.
 * Only the .is-active panel is displayed. This eliminates ALL overflow
 * clipping issues that caused the recurring "Next button missing" bug.
 * The panel content height is always natural — never clipped.
 */
.ym-wizard-viewport { position: relative; }
.ym-wizard-track { /* no flex, no transform — panels stack naturally */ }
.ym-wizard-panel {
	display: none;
	width: 100%;
	box-sizing: border-box;
	padding: 0 2px;
}
.ym-wizard-panel.is-active {
	display: block;
}

/* ─── Typography ──────────────────────────────────────────────────── */
.ym-order-wizard h3 {
	font-family: "Syne", "Space Grotesk", sans-serif;
	font-size: 1.3rem; font-weight: 700;
	margin: 0 0 1rem 0; color: #1A1A2E;
}
.ym-order-wizard h4 {
	font-family: "Syne", "Space Grotesk", sans-serif;
	font-size: 1.05rem; font-weight: 600;
	margin: 0 0 0.6rem 0; color: #1A1A2E;
	transition: opacity 0.3s;
}
.ym-optional { font-weight: 400; font-size: 0.85rem; color: #8B7355; }
.ym-step-desc { font-size: 0.9rem; color: #555; margin: 0 0 0.5rem 0; }

/* ─── Label Tip (Step 3) ──────────────────────────────────────────── */
.ym-label-tip {
	font-size: 0.82rem; color: #8B7355;
	background: #FAF7F2; border-radius: 6px;
	padding: 8px 12px; margin: 0 0 1rem 0; line-height: 1.5;
}

/* ─── Qty Buttons ─────────────────────────────────────────────────── */
.ym-tape-input-row, .ym-usb-quantity-row {
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 0.75rem; flex-wrap: wrap;
}
.ym-qty-btn {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border: 1px solid #ccc; border-radius: 6px;
	background: #fff; font-size: 1.2rem; color: #1A1A2E;
	cursor: pointer; transition: border-color 0.2s, background 0.2s;
	line-height: 1; padding: 0;
}
.ym-qty-btn:hover { border-color: #E84545; background: #FEF2F2; }
.ym-order-wizard input[type="number"] {
	width: 70px; padding: 7px 8px;
	border: 1px solid #ccc; border-radius: 6px;
	font-size: 1rem; font-family: inherit;
	text-align: center; color: #1A1A2E;
	-moz-appearance: textfield;
}
.ym-order-wizard input[type="number"]::-webkit-inner-spin-button,
.ym-order-wizard input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none; margin: 0;
}
.ym-order-wizard input[type="number"]:focus {
	outline: none; border-color: #E84545;
	box-shadow: 0 0 0 2px rgba(232,69,69,0.15);
}
.ym-current-rate { font-size: 0.95rem; color: #E84545; font-weight: 600; }

/* ─── Step 1 Summary Bar ─────────────────────────────────────────── */
.ym-step1-bar {
	display: flex; justify-content: space-between; align-items: center;
	background: #F8F8FA; border-top: 1px solid #eee;
	border-radius: 0 0 8px 8px; padding: 12px 16px;
	margin-top: 0.5rem;
}
.ym-step1-bar-text { font-size: 0.95rem; color: #555; }
.ym-step1-bar-text strong { color: #1A1A2E; }

/* ─── Tier Table ──────────────────────────────────────────────────── */
.ym-tier-table {
	width: auto; max-width: 280px;
	border-collapse: collapse; margin: 0 0 0 0;
	font-size: 0.88rem;
}
.ym-tier-table th {
	text-align: left; padding: 6px 10px;
	border-bottom: 2px solid #eee;
	font-weight: 600; color: #555;
	font-size: 0.78rem; text-transform: uppercase;
	letter-spacing: 0.03em;
}
.ym-tier-table td { padding: 7px 10px; border-bottom: 1px solid #f0f0f0; }
.ym-tier-table tr.ym-tier-active { background: rgba(232,69,69,0.06); }
.ym-tier-table tr.ym-tier-active td { font-weight: 600; color: #E84545; }

/* ─── Delivery Sections ───────────────────────────────────────────── */
.ym-delivery-divider { border: none; border-top: 1px solid #eee; margin: 1.25rem 0; }
.ym-dvd-teaser-text { font-size: 0.88rem; color: #888; font-style: italic; margin: 0; }

/* ─── USB Recommendation ──────────────────────────────────────────── */
.ym-usb-recommendation {
	background: #F0F9FF; border-left: 3px solid #3B82F6;
	border-radius: 0 6px 6px 0; padding: 12px 14px;
	margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.5;
}
.ym-usb-recommendation strong { color: #1A1A2E; }

/*
 * Connector Selector — sizing notes:
 * Breakdance wraps the product form in a constrained-width container.
 * Using flex: 0 0 calc(50% - 0.5rem) ensures buttons share available
 * space regardless of parent max-width. Tested at 375px, 768px, 1440px.
 */
.ym-connector-label { font-size: 0.9rem; font-weight: 500; margin: 0 0 6px 0; }
.ym-connector-options {
	display: flex; gap: 1rem; margin-bottom: 6px;
	width: 100%; box-sizing: border-box;
}
.ym-connector-option {
	display: flex; flex-direction: column; align-items: center;
	gap: 6px; padding: 12px 8px;
	border: 2px solid #ddd; border-radius: 8px;
	cursor: pointer; transition: border-color 0.2s, background 0.2s;
	flex: 0 0 calc(50% - 0.5rem); min-width: 0;
	overflow: hidden; text-align: center; box-sizing: border-box;
}
.ym-connector-option input[type="radio"] { display: none; }
.ym-connector-option.active { border-color: #E84545; background: #FEF2F2; }
.ym-connector-img { max-width: 100%; max-height: 50px; object-fit: contain; }
.ym-connector-option span {
	font-size: 0.8rem; font-weight: 500; line-height: 1.2;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	max-width: 100%;
}
.ym-connector-help { font-size: 0.78rem; color: #888; margin: 0 0 1rem 0; }

/* ─── Mode Switch Links ───────────────────────────────────────────── */
.ym-mode-switch { font-size: 0.85rem; margin: 0.5rem 0 0 0; }
.ym-mode-switch a { color: #3B82F6; text-decoration: none; font-weight: 500; }
.ym-mode-switch a:hover { text-decoration: underline; }

/* ─── USB Drive Picker ────────────────────────────────────────────── */
.ym-usb-drive-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1rem; }
.ym-drive-card {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px; border: 2px solid #eee;
	border-radius: 8px; cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.ym-drive-card.selected { border-color: #E84545; background: #FEF2F2; }
.ym-drive-card input[type="radio"] { display: none; }
.ym-drive-card img { width: 48px; height: 48px; object-fit: contain; border-radius: 4px; }
.ym-drive-card-info { flex: 1; min-width: 0; }
.ym-drive-card-name { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ym-drive-card-meta { font-size: 0.8rem; color: #888; }
.ym-drive-card-price { font-weight: 700; font-size: 1rem; color: #E84545; flex-shrink: 0; }
.ym-usb-min-note { font-size: 0.82rem; color: #888; }
.ym-usb-no-stock {
	background: #FFF5F5; border-left: 3px solid #E84545;
	border-radius: 0 6px 6px 0; padding: 12px 14px;
	font-size: 0.9rem; color: #666;
}

/* ─── BYO USB ─────────────────────────────────────────────────────── */
.ym-byo-label {
	display: flex; align-items: center; gap: 8px;
	cursor: pointer; font-weight: 500; font-size: 0.95rem;
}
.ym-byo-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: #E84545; }
.ym-byo-calc {
	background: #F0FDF4; border-left: 3px solid #00D9C0;
	border-radius: 0 6px 6px 0; padding: 12px 14px;
	margin: 8px 0 0 0; font-size: 0.88rem; line-height: 1.5;
}

/* ─── Step 2 Subtotal ─────────────────────────────────────────────── */
.ym-step2-subtotal {
	background: #faf6f0; border: 1px solid #e8ddd0;
	border-radius: 8px; padding: 0.75rem 1rem;
	margin: 1rem 0; font-size: 0.9rem; line-height: 1.7;
}
.ym-step2-subtotal strong { font-size: 1.05rem; }

/* ─── Escape Hatch ────────────────────────────────────────────────── */
.ym-escape-hatch { font-size: 0.82rem; margin: 0.75rem 0; }
.ym-escape-hatch a { color: #8B7355; text-decoration: underline; text-decoration-style: dotted; }
.ym-escape-hatch a:hover { color: #E84545; }

/* ─── Tape Names + DVD Spinners (Step 3) ──────────────────────────── */
.ym-tape-names-list {
	display: flex; flex-direction: column; gap: 6px;
	margin-bottom: 1rem;
}
.ym-tape-name-row {
	display: flex; align-items: center; gap: 8px;
}
.ym-tape-name-row .ym-tape-num {
	min-width: 50px; font-weight: 600; font-size: 0.85rem;
	color: #888; text-align: right; flex-shrink: 0;
}
.ym-tape-name-row input[type="text"] {
	flex: 1; padding: 7px 10px; border: 1px solid #ddd;
	border-radius: 6px; font-size: 0.9rem; font-family: inherit;
	transition: border-color 0.2s, box-shadow 0.2s; min-width: 0;
}
.ym-tape-name-row input[type="text"]:focus {
	outline: none; border-color: #E84545;
	box-shadow: 0 0 0 2px rgba(232,69,69,0.12);
}

/* DVD per-tape spinner */
.ym-dvd-spinner {
	display: flex; align-items: center; gap: 4px;
	flex-shrink: 0; white-space: nowrap;
	transition: opacity 0.2s;
}
.ym-dvd-spinner.ym-dvd-disabled { opacity: 0.3; pointer-events: none; }
.ym-dvd-spinner-label { font-size: 0.78rem; color: #888; font-weight: 500; }
.ym-qty-btn-sm {
	display: flex; align-items: center; justify-content: center;
	width: 24px; height: 24px;
	border: 1px solid #ccc; border-radius: 4px;
	background: #fff; font-size: 0.9rem; color: #1A1A2E;
	cursor: pointer; padding: 0; line-height: 1;
	transition: border-color 0.2s;
}
.ym-qty-btn-sm:hover:not([disabled]) { border-color: #E84545; }
.ym-qty-btn-sm[disabled] { opacity: 0.3; cursor: default; }
.ym-dvd-qty {
	display: inline-block; min-width: 16px; text-align: center;
	font-size: 0.85rem; font-weight: 600; color: #1A1A2E;
}

/* DVD running total */
.ym-dvd-running-total {
	background: #FFF8ED; border-left: 3px solid #E8A24E;
	border-radius: 0 6px 6px 0; padding: 8px 14px;
	font-size: 0.88rem; margin-bottom: 0.5rem;
}

/* Shake animation */
@keyframes ym-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-4px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(3px); }
}
.ym-shake { animation: ym-shake 0.5s ease; border-color: #E84545 !important; }

/* Step 3 helper */
.ym-step3-helper {
	background: #FFF5F5; border-left: 3px solid #E84545;
	border-radius: 0 6px 6px 0; padding: 8px 14px;
	font-size: 0.85rem; color: #E84545; margin-bottom: 0.5rem;
}

/* ─── Skip Modal ──────────────────────────────────────────────────── */
.ym-modal-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,0.5);
	z-index: 99999; display: flex; align-items: center; justify-content: center;
}
.ym-modal {
	background: #fff; border-radius: 12px; padding: 2rem;
	max-width: 420px; width: 90%;
	box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.ym-modal h4 { font-family: "Syne", "Space Grotesk", sans-serif; font-size: 1.15rem; margin: 0 0 0.75rem 0; }
.ym-modal p { font-size: 0.9rem; color: #555; line-height: 1.5; margin: 0 0 1.25rem 0; }
.ym-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ─── Summary (Step 4) ────────────────────────────────────────────── */
.ym-summary-box {
	background: #faf6f0; border: 1px solid #e8ddd0;
	border-radius: 10px; padding: 1.25rem;
	margin-bottom: 1rem; font-size: 0.92rem; line-height: 1.8;
}
.ym-summary-section { margin-bottom: 0.75rem; }
.ym-summary-section:last-child { margin-bottom: 0; }
.ym-summary-section h5 {
	font-size: 0.78rem; text-transform: uppercase;
	letter-spacing: 0.04em; color: #888;
	margin: 0 0 4px 0; font-weight: 600;
}
.ym-summary-line { display: flex; justify-content: space-between; }
.ym-summary-divider { border: none; border-top: 1px solid #d6cfc4; margin: 8px 0; }
.ym-summary-total { font-weight: 700; font-size: 1.15rem; color: #1A1A2E; }
.ym-summary-tape-list { font-size: 0.84rem; color: #555; list-style: none; padding: 0; margin: 4px 0 0 0; }
.ym-summary-tape-list li { padding: 1px 0; }
.ym-summary-tape-list .ym-dvd-badge {
	background: #E84545; color: #fff;
	font-size: 0.68rem; padding: 1px 6px;
	border-radius: 3px; margin-left: 6px; font-weight: 600;
}

/* ─── Navigation Buttons ──────────────────────────────────────────── */
.ym-wizard-nav {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: 1.25rem; gap: 8px;
}
.ym-btn {
	padding: 10px 24px; border: none; border-radius: 6px;
	font-size: 0.95rem; font-family: inherit; font-weight: 600;
	cursor: pointer; transition: background 0.2s, transform 0.1s, opacity 0.2s;
}
.ym-btn:active { transform: scale(0.97); }
.ym-btn[disabled] { cursor: not-allowed; }
.ym-btn-next, .ym-btn-cart { background: #E84545; color: #fff; }
.ym-btn-next:hover, .ym-btn-cart:hover { background: #D63333; }
.ym-btn-back { background: #eee; color: #555; }
.ym-btn-back:hover { background: #ddd; }
.ym-btn-skip { background: transparent; color: #888; border: 1px solid #ddd; }
.ym-btn-skip:hover { background: #f5f5f5; }

/* ─── Cart Page ───────────────────────────────────────────────────── */
.ym-cart-details { margin-top: 8px; }
.ym-cart-tape-details summary { cursor: pointer; color: #666; font-size: 0.85rem; }
.ym-cart-tape-list { font-size: 0.83rem; color: #555; margin: 4px 0 0 0; padding-left: 20px; }
.ym-cart-dvd-badge {
	background: #E84545; color: #fff;
	font-size: 0.65rem; padding: 1px 5px;
	border-radius: 3px; margin-left: 4px; font-weight: 600;
}

/* ─── Checkout Button ─────────────────────────────────────────────── */
.woocommerce .button.checkout-button,
.woocommerce a.checkout-button,
.wc-proceed-to-checkout a.checkout-button {
	background: #E84545 !important; color: #fff !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-weight: 600 !important; border-radius: 8px !important;
	padding: 1rem 2rem !important; border: none !important;
	font-size: 1rem !important; transition: background 0.2s !important;
}
.woocommerce .button.checkout-button:hover,
.woocommerce a.checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
	background: #D03030 !important;
}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.ym-order-wizard { max-width: 100%; }
	.ym-connector-options { flex-direction: column; gap: 8px; }
	.ym-connector-option { width: 100% !important; }
	.ym-wizard-nav { flex-wrap: wrap; }
	.ym-wizard-nav .ym-btn { flex: 1; min-width: 100px; text-align: center; }
	.ym-tape-input-row, .ym-usb-quantity-row { flex-wrap: wrap; }
	.ym-tape-name-row { flex-wrap: wrap; }
	.ym-tape-name-row input[type="text"] { min-width: calc(100% - 60px); }
	.ym-dvd-spinner { margin-left: 58px; }
	.ym-step1-bar { flex-direction: column; gap: 8px; text-align: center; }
}