/* Sweet Deal Order Form — frontend styles */
/* Scoped to .sdof-scope so the host theme isn't affected and vice versa. */

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

.sdof-scope {
	--sdof-bg: #0a0a0f;
	--sdof-surface: #12121a;
	--sdof-surface2: #1a1a25;
	--sdof-surface3: #22222f;
	--sdof-border: #2a2a3a;
	--sdof-text: #e8e8f0;
	--sdof-text-dim: #8888a0;
	--sdof-text-muted: #555570;
	--sdof-accent: #6366f1;
	--sdof-accent-light: #818cf8;
	--sdof-accent-glow: rgba(99, 102, 241, 0.15);
	--sdof-green: #22c55e;
	--sdof-green-glow: rgba(34, 197, 94, 0.15);
	--sdof-red: #ef4444;
	--sdof-red-glow: rgba(239, 68, 68, 0.15);
	--sdof-orange: #f59e0b;
	--sdof-orange-glow: rgba(245, 158, 11, 0.15);
	--sdof-baseball: #16a34a;
	--sdof-baseball-bg: rgba(22, 163, 74, 0.08);
	--sdof-pokemon: #dc2626;
	--sdof-pokemon-bg: rgba(220, 38, 38, 0.08);
	--sdof-yugioh: #7c3aed;
	--sdof-yugioh-bg: rgba(124, 58, 237, 0.08);
	--sdof-f1: #e11d48;
	--sdof-f1-bg: rgba(225, 29, 72, 0.08);
	--sdof-radius: 12px;
	--sdof-radius-sm: 8px;
	--sdof-shadow: 0 4px 24px rgba(0,0,0,0.3);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	background: var(--sdof-bg);
	color: var(--sdof-text);
	line-height: 1.5;
	font-size: 16px !important;
	min-height: 60vh;
	padding: 0 16px;
	max-width: 1400px;
	margin: 0 auto;
}

.sdof-scope .sdof-header {
	padding: 24px 0 16px;
	border-bottom: 1px solid var(--sdof-border);
	margin-bottom: 20px;
}
.sdof-scope .sdof-header-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.sdof-scope .sdof-brand { display: flex; align-items: center; gap: 12px; }
.sdof-scope .sdof-brand-icon {
	width: 44px; height: 44px;
	background: linear-gradient(135deg, var(--sdof-accent), var(--sdof-accent-light));
	border-radius: var(--sdof-radius-sm);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px !important; font-weight: 800; color: white;
	flex-shrink: 0;
}
.sdof-scope .sdof-brand-logo {
	max-height: 44px;
	max-width: 220px;
	width: auto;
	height: auto;
	object-fit: contain;
	flex-shrink: 0;
}
.sdof-scope .sdof-brand h1 { font-size: 1.4em !important; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--sdof-text); }
.sdof-scope .sdof-brand .sdof-subtitle { font-size: 0.8em !important; color: var(--sdof-text-dim); font-weight: 400; }

.sdof-scope .sdof-btn {
	padding: 8px 16px;
	border-radius: var(--sdof-radius-sm);
	border: 1px solid var(--sdof-border);
	background: var(--sdof-surface2);
	color: var(--sdof-text);
	font-size: 0.82em !important;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	white-space: nowrap;
}
.sdof-scope .sdof-btn:hover { background: var(--sdof-surface3); border-color: var(--sdof-text-muted); }
.sdof-scope .sdof-btn-primary { background: var(--sdof-accent); border-color: var(--sdof-accent); color: white; }
.sdof-scope .sdof-btn-primary:hover { background: var(--sdof-accent-light); }
.sdof-scope .sdof-btn-success { background: var(--sdof-green); border-color: var(--sdof-green); color: white; }
.sdof-scope .sdof-btn-success:hover { opacity: 0.9; }
/* Disabled buttons (e.g. Submit before the disclaimer is accepted). */
.sdof-scope .sdof-btn:disabled,
.sdof-scope .sdof-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}
.sdof-scope .sdof-btn:disabled:hover,
.sdof-scope .sdof-btn[disabled]:hover { opacity: 0.45; }

/* Disclaimer acceptance checkbox shown in the order confirmation popup.
   The disclaimer text is the checkbox label. Slightly indented box so it
   reads as a deliberate gate, not just another form field. */
.sdof-scope .sdof-disclaimer-accept {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 16px;
	padding: 12px 14px;
	background: var(--sdof-surface2);
	border-left: 3px solid var(--sdof-accent);
	border-radius: 4px;
	color: var(--sdof-text-dim);
	font-size: 0.82em !important;
	line-height: 1.5;
	cursor: pointer;
}
.sdof-scope .sdof-disclaimer-accept input[type="checkbox"] {
	margin: 2px 0 0;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	cursor: pointer;
}
.sdof-scope .sdof-btn-icon {
	width: 34px; height: 34px;
	padding: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: var(--sdof-radius-sm);
}

.sdof-scope .sdof-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }

/* Order-form disclaimer notice. Soft, informational — not an alarm.
   Left accent border in the brand accent colour, muted background.
   Used both at the top of the form and inside the confirmation modal. */
.sdof-scope .sdof-disclaimer {
	margin: 0 0 16px;
	padding: 12px 14px;
	background: var(--sdof-surface2);
	border-left: 3px solid var(--sdof-accent);
	border-radius: 4px;
	color: var(--sdof-text-dim);
	font-size: 0.82em !important;
	line-height: 1.5;
}
.sdof-scope .sdof-disclaimer-modal {
	/* Inside the modal the spacing is a touch tighter. */
	margin: 4px 0 16px;
}

.sdof-scope .sdof-search-box { flex: 1; min-width: 200px; position: relative; }
.sdof-scope .sdof-search-box input {
	width: 100%;
	padding: 9px 14px 9px 38px;
	border-radius: var(--sdof-radius-sm);
	border: 1px solid var(--sdof-border);
	background: var(--sdof-surface);
	color: var(--sdof-text);
	font-size: 0.85em !important;
	font-family: inherit;
	outline: none;
}
.sdof-scope .sdof-search-box input:focus { border-color: var(--sdof-accent); }
.sdof-scope .sdof-search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sdof-text-muted); }
.sdof-scope .sdof-filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.sdof-scope .sdof-pill {
	padding: 6px 14px;
	border-radius: 20px;
	border: 1px solid var(--sdof-border);
	background: var(--sdof-surface);
	color: var(--sdof-text-dim);
	font-size: 0.78em !important;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
}
.sdof-scope .sdof-pill:hover { border-color: var(--sdof-text-muted); color: var(--sdof-text); }
.sdof-scope .sdof-pill.active { background: var(--sdof-accent-glow); border-color: var(--sdof-accent); color: var(--sdof-accent-light); }

.sdof-scope .sdof-table-container {
	background: var(--sdof-surface);
	border-radius: var(--sdof-radius);
	border: 1px solid var(--sdof-border);
	overflow: hidden;
	margin-bottom: 20px;
}
.sdof-scope .sdof-category-header {
	padding: 10px 16px;
	font-weight: 700;
	font-size: 0.82em !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}
.sdof-scope .sdof-category-header.baseball { background: var(--sdof-baseball-bg); color: var(--sdof-baseball); border-left: 3px solid var(--sdof-baseball); }
.sdof-scope .sdof-category-header.pokemon { background: var(--sdof-pokemon-bg); color: var(--sdof-pokemon); border-left: 3px solid var(--sdof-pokemon); }
.sdof-scope .sdof-category-header.yugioh { background: var(--sdof-yugioh-bg); color: var(--sdof-yugioh); border-left: 3px solid var(--sdof-yugioh); }
.sdof-scope .sdof-category-header.f1 { background: var(--sdof-f1-bg); color: var(--sdof-f1); border-left: 3px solid var(--sdof-f1); }
.sdof-scope .sdof-subgroup-header {
	padding: 7px 16px 7px 28px;
	font-weight: 600;
	font-size: 0.78em !important;
	color: var(--sdof-text-dim);
	background: var(--sdof-surface2);
	border-top: 1px solid var(--sdof-border);
}
.sdof-scope .sdof-product-row {
	display: grid;
	grid-template-columns: 1fr 90px 120px;
	align-items: center;
	padding: 10px 16px;
	border-top: 1px solid var(--sdof-border);
	gap: 8px;
	position: relative; /* anchor point for absolutely-positioned cap warnings */
}
.sdof-scope .sdof-product-row:hover { background: var(--sdof-surface2); }
.sdof-scope .sdof-product-row.has-qty { background: var(--sdof-accent-glow); }
.sdof-scope .sdof-product-name { font-size: 0.85em !important; font-weight: 400; color: var(--sdof-text); }
.sdof-scope .sdof-product-price { font-size: 0.85em !important; font-weight: 600; text-align: right; }
.sdof-scope .sdof-product-price.call { color: var(--sdof-orange); font-weight: 500; font-size: 0.78em !important; }
.sdof-scope .sdof-badge {
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 0.68em !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.sdof-scope .sdof-badge-new { background: var(--sdof-green-glow); color: var(--sdof-green); }
.sdof-scope .sdof-badge-exclusive { background: var(--sdof-orange-glow); color: var(--sdof-orange); }

.sdof-scope .sdof-stock {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 0.7em !important;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.sdof-scope .sdof-stock-ok   { background: var(--sdof-green-glow); color: var(--sdof-green); }
.sdof-scope .sdof-stock-low  { background: var(--sdof-orange-glow); color: var(--sdof-orange); }
.sdof-scope .sdof-stock-out  { background: var(--sdof-red-glow); color: var(--sdof-red); }
.sdof-scope .sdof-stock-info { color: var(--sdof-text-muted); font-weight: 500; font-size: 0.7em !important; padding: 0; }
.sdof-scope .sdof-product-row.sold-out { opacity: 0.55; }
.sdof-scope .sdof-product-row.sold-out .sdof-product-name { text-decoration: line-through; text-decoration-color: var(--sdof-text-muted); }

/* CALL-priced rows: customer can't add to cart because there's no price.
   Row stays fully legible (no strikethrough, no opacity dip) so the name
   is clearly readable, but the stepper is disabled via the QtyInput's
   own disabled styling. The "CALL" label in the price column is the
   primary visual cue; we don't need to dim the whole row on top of it. */
.sdof-scope .sdof-product-row.call-price .sdof-qty-input {
	cursor: not-allowed;
}

/* Cap-hit warning — appears above the stepper on the specific product row
   when the user tries to exceed stock or per-order cap. Absolutely
   positioned so the row layout doesn't shift when it appears/disappears.
   pointer-events:none so clicks pass through to the stepper underneath,
   and white-space:nowrap so longer messages extend leftward rather than
   wrapping within the narrow stepper column. Red pill matches "Sold out"
   visually so customers associate it with "you can't add more right now". */
.sdof-scope .sdof-cap-warning {
	position: absolute;
	right: 16px;
	top: 4px;
	padding: 4px 10px;
	border-radius: 10px;
	font-size: 0.72em !important;
	font-weight: 600;
	line-height: 1.3;
	background: var(--sdof-red);
	color: #fff;
	/* pre-line preserves \n as line breaks AND collapses other whitespace.
	   Lets us write multi-line messages like "CALL FOR PRICING\n818-407-4755"
	   without needing to switch the pill's renderer to mixed React nodes. */
	white-space: pre-line;
	text-align: center;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12);
	z-index: 1;
	animation: sdof-cap-warning-in 160ms ease-out;
}
@keyframes sdof-cap-warning-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.sdof-scope .sdof-qty-input {
	display: flex;
	align-items: center;
	border: 1px solid var(--sdof-border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--sdof-surface2);
}
.sdof-scope .sdof-qty-input button {
	width: 28px; height: 28px;
	border: none;
	background: transparent;
	color: var(--sdof-text-dim);
	font-size: 1em !important;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.sdof-scope .sdof-qty-input button:hover { background: var(--sdof-surface3); color: var(--sdof-text); }
.sdof-scope .sdof-qty-input input {
	width: 36px;
	text-align: center;
	border: none;
	background: transparent;
	color: var(--sdof-text);
	font-size: 0.82em !important;
	font-family: inherit;
	outline: none;
	-moz-appearance: textfield;
}
.sdof-scope .sdof-qty-input input::-webkit-outer-spin-button,
.sdof-scope .sdof-qty-input input::-webkit-inner-spin-button { -webkit-appearance: none; }

.sdof-scope .sdof-order-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--sdof-surface);
	border-top: 1px solid var(--sdof-border);
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 200;
	backdrop-filter: blur(20px);
	transform: translateY(100%);
	transition: transform 0.25s ease;
}
.sdof-scope .sdof-order-bar.visible { transform: translateY(0); }
.sdof-scope .sdof-order-summary { display: flex; gap: 20px; align-items: center; font-size: 0.85em !important; }
.sdof-scope .sdof-order-summary .sdof-count { color: var(--sdof-accent-light); font-weight: 600; }
.sdof-scope .sdof-order-summary .sdof-total { color: var(--sdof-green); font-weight: 700; font-size: 1em !important; }

.sdof-scope .sdof-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.7);
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	backdrop-filter: blur(4px);
}
.sdof-scope .sdof-modal {
	background: var(--sdof-surface);
	border: 1px solid var(--sdof-border);
	border-radius: var(--sdof-radius);
	width: 100%;
	max-width: 700px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 28px;
	color: var(--sdof-text);
}
.sdof-scope .sdof-modal h2 { font-size: 1.3em !important; font-weight: 700; margin: 0 0 4px; color: var(--sdof-text); }
.sdof-scope .sdof-modal .sdof-modal-subtitle { color: var(--sdof-text-dim); font-size: 0.85em !important; margin-bottom: 20px; }
.sdof-scope .sdof-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.sdof-scope .sdof-form-group { display: flex; flex-direction: column; gap: 4px; }
.sdof-scope .sdof-form-group.full { grid-column: 1 / -1; }
.sdof-scope .sdof-form-group label { font-size: 0.78em !important; font-weight: 500; color: var(--sdof-text-dim); }
.sdof-scope .sdof-form-group input {
	padding: 9px 12px;
	border-radius: var(--sdof-radius-sm);
	border: 1px solid var(--sdof-border);
	background: var(--sdof-surface2);
	color: var(--sdof-text);
	font-size: 0.85em !important;
	font-family: inherit;
	outline: none;
}
.sdof-scope .sdof-form-group input:focus { border-color: var(--sdof-accent); }

.sdof-scope .sdof-order-items { margin-bottom: 20px; }
.sdof-scope .sdof-order-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--sdof-border);
	font-size: 0.85em !important;
}
.sdof-scope .sdof-order-item-qty { color: var(--sdof-accent-light); font-weight: 600; min-width: 40px; }
.sdof-scope .sdof-order-item-name { flex: 1; }
.sdof-scope .sdof-order-item-price { font-weight: 600; min-width: 80px; text-align: right; }
.sdof-scope .sdof-order-total {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-top: 2px solid var(--sdof-border);
	font-size: 1em !important;
	font-weight: 700;
}

.sdof-scope .sdof-notification {
	position: fixed;
	top: 20px;
	right: 20px;
	padding: 14px 20px;
	border-radius: var(--sdof-radius-sm);
	background: var(--sdof-green);
	color: white;
	font-size: 0.85em !important;
	font-weight: 500;
	z-index: 400;
	box-shadow: var(--sdof-shadow);
	animation: sdof-slideIn 0.3s ease;
}
.sdof-scope .sdof-notification.error { background: var(--sdof-red); }
@keyframes sdof-slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.sdof-scope .sdof-sync-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 0.72em !important;
	font-weight: 500;
}
.sdof-scope .sdof-sync-status.synced { background: var(--sdof-green-glow); color: var(--sdof-green); }
.sdof-scope .sdof-sync-status.unsynced { background: var(--sdof-red-glow); color: var(--sdof-red); }
.sdof-scope .sdof-sync-status.syncing { background: var(--sdof-orange-glow); color: var(--sdof-orange); }

.sdof-scope .sdof-spinner {
	width: 20px; height: 20px;
	border: 2px solid var(--sdof-border);
	border-top-color: var(--sdof-accent);
	border-radius: 50%;
	animation: sdof-spin 0.6s linear infinite;
	display: inline-block;
}
@keyframes sdof-spin { to { transform: rotate(360deg); } }

.sdof-scope .sdof-empty-state {
	text-align: center;
	padding: 60px 20px;
	color: var(--sdof-text-muted);
}
.sdof-scope .sdof-empty-state svg { margin-bottom: 12px; opacity: 0.5; }
.sdof-scope .sdof-empty-state h3 { color: var(--sdof-text-dim); margin: 0 0 4px; }

/* Responsive */
@media (max-width: 768px) {
	.sdof-scope { font-size: 14px !important; }
	.sdof-scope .sdof-product-row { grid-template-columns: 1fr 70px 92px; }
	.sdof-scope .sdof-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.sdof-scope .sdof-product-row {
		/* 88px fits 2 × 26px buttons + 32px input + 4px borders without clipping. */
		grid-template-columns: 1fr 60px 88px;
		padding: 8px 10px;
	}
	.sdof-scope .sdof-product-name { font-size: 0.8em !important; }
	.sdof-scope .sdof-qty-input button { width: 26px; height: 26px; font-size: 0.95em !important; }
	.sdof-scope .sdof-qty-input input { width: 32px; font-size: 0.8em !important; }
}