/* ============================================================
   Quick Checkout DZ  –  Stylesheet
   Theme-adaptive via CSS custom properties.
   NO color-mix() – fully compatible with all modern browsers.
   ============================================================ */

/* ── Theme color bridge ──────────────────────────────────────
   Reads the active theme's CSS variables.
   Covers: Block themes (TT3/TT4/Kadence/Blocksy),
   Astra, GeneratePress, OceanWP, Storefront, Elementor,
   Woodmart, Flatsome, and any theme using --color-primary.
   ─────────────────────────────────────────────────────────── */
.qc-dz-wrap {
	--qc-primary:
		var(--wp--preset--color--primary,
		var(--ast-global-color-0,
		var(--global-palette1,
		var(--ocean-default-link-color,
		var(--storefront-color-primary,
		var(--woodmart-primary-color,
		var(--e-global-color-primary,
		var(--color-primary,
		var(--primary-color,
		var(--theme-primary-color,
		#2d6be4))))))))));

	--qc-text:
		var(--wp--preset--color--foreground,
		var(--ast-global-color-3,
		var(--global-palette3,
		var(--color-text,
		var(--text-color,
		#1a1a1a)))));

	--qc-text-muted:
		var(--wp--preset--color--secondary,
		var(--ast-global-color-2,
		var(--global-palette5,
		var(--color-text-muted,
		#6b7280))));

	--qc-bg:
		var(--wp--preset--color--background,
		var(--color-background,
		var(--body-bg,
		#ffffff)));

	--qc-border:
		var(--wp--preset--color--tertiary,
		var(--ast-global-color-6,
		var(--global-palette6,
		var(--color-border,
		#d1d5db))));

	--qc-font:
		var(--wp--preset--font-family--body,
		var(--ast-body-font-family,
		var(--body-font-family,
		inherit)));

	/* Tint colors – static light values, no color-mix needed */
	--qc-bg-tint:    #f5f8ff;
	--qc-border-tint: #d5e4f7;
}

/* ── Reset ────────────────────────────────────────────────── */
.qc-dz-wrap *,
.qc-dz-wrap *::before,
.qc-dz-wrap *::after { box-sizing: border-box; }

/* ── Container ───────────────────────────────────────────── */
.qc-dz-wrap {
	direction: rtl;
	font-family: var(--qc-font);
	font-size: 1rem;
	color: var(--qc-text);
	background: var(--qc-bg);
	border: 2px solid var(--qc-primary);
	border-radius: 14px;
	padding: 22px 20px 20px;
	margin-top: 26px;
	max-width: 580px;
	width: 100%;
}

/* ── Header ──────────────────────────────────────────────── */
.qc-dz-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--qc-text);
	text-align: center;
	margin-bottom: 18px;
}

.qc-dz-arrow { font-size: 1.2rem; }

/* ── Product mini-card ───────────────────────────────────── */
.qc-product-card {
	display: flex !important;
	align-items: center;
	flex-direction: row;
	gap: 10px;
	background: var(--qc-bg-tint);
	border: 1.5px solid var(--qc-border-tint);
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 16px;
}

.qc-product-thumb {
	width: 56px !important;
	height: 56px !important;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--qc-border-tint);
	flex-shrink: 0;
	display: block;
}

.qc-product-meta {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.qc-product-name {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--qc-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.qc-product-price {
	font-size: 1rem;
	font-weight: 700;
	color: var(--qc-primary);
}

/* ── Quantity inside product card ────────────────────────── */
.qc-qty-block {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	border: 1.5px solid var(--qc-primary);
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
}

.qc-qty-btn {
	display: block !important;
	background: var(--qc-bg-tint) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 7px 13px !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	color: var(--qc-primary) !important;
	cursor: pointer;
	transition: background 0.15s;
	line-height: 1 !important;
	font-family: var(--qc-font);
	margin: 0 !important;
	box-shadow: none !important;
	min-width: auto !important;
	width: auto !important;
	height: auto !important;
}

.qc-qty-btn:hover {
	background: var(--qc-border-tint) !important;
}

.qc-qty-block input[type="number"] {
	width: 42px !important;
	border: none !important;
	border-right: 1.5px solid var(--qc-primary) !important;
	border-left: 1.5px solid var(--qc-primary) !important;
	border-radius: 0 !important;
	text-align: center !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	color: var(--qc-text) !important;
	background: var(--qc-bg) !important;
	padding: 7px 0 !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
	height: auto !important;
}

.qc-qty-block input[type="number"]::-webkit-inner-spin-button,
.qc-qty-block input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

/* ── 2-column grid ───────────────────────────────────────── */
.qc-grid-2 {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.qc-field-wrap   { width: 100%; }
.qc-field-full   { margin-bottom: 12px; }

/* ── Input with icon ─────────────────────────────────────── */
.qc-input-icon-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.qc-field-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1rem;
	pointer-events: none;
	z-index: 1;
	line-height: 1;
}

/* ── Inputs & selects ────────────────────────────────────── */
.qc-dz-wrap .qc-input {
	width: 100% !important;
	padding: 11px 40px 11px 14px !important;
	border: 1.5px solid var(--qc-border) !important;
	border-radius: 8px !important;
	font-size: 0.9rem !important;
	font-family: var(--qc-font) !important;
	color: var(--qc-text) !important;
	background: var(--qc-bg) !important;
	text-align: right !important;
	direction: rtl !important;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
	outline: none;
	transition: border-color 0.18s, box-shadow 0.18s;
	display: block !important;
	margin: 0 !important;
	height: auto !important;
	line-height: 1.4 !important;
}

.qc-dz-wrap .qc-input::placeholder {
	color: var(--qc-text-muted);
	opacity: 1;
}

.qc-dz-wrap .qc-input:focus {
	border-color: var(--qc-primary) !important;
	box-shadow: 0 0 0 3px rgba(45, 107, 228, 0.15) !important;
	outline: none !important;
}

.qc-dz-wrap .qc-input.qc-invalid {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.qc-dz-wrap select.qc-input { cursor: pointer; }

.qc-dz-wrap select.qc-input:disabled {
	background: #f3f4f6 !important;
	color: var(--qc-text-muted) !important;
	cursor: not-allowed;
}

/* ── Order summary ───────────────────────────────────────── */
.qc-summary {
	background: var(--qc-bg-tint);
	border: 1.5px solid var(--qc-border-tint);
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 14px;
}

.qc-summary-row {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	font-size: 0.87rem;
	color: var(--qc-text-muted);
	padding: 5px 0;
}

.qc-summary-row + .qc-summary-row {
	border-top: 1px dashed var(--qc-border-tint);
}

.qc-summary-total {
	border-top: 2px solid var(--qc-border-tint) !important;
	padding-top: 8px;
	margin-top: 2px;
	font-size: 0.97rem;
	color: var(--qc-text);
}

.qc-summary-total strong {
	font-size: 1.08rem;
	color: var(--qc-primary);
}

.qc-free { color: #16a34a; font-weight: 700; }

/* ── Shipping method options ─────────────────────────────── */
.qc-label-sm {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--qc-text-muted);
	margin: 0 0 6px;
}

#qc-shipping-options label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border: 1.5px solid var(--qc-border);
	border-radius: 8px;
	margin-bottom: 7px;
	cursor: pointer;
	font-size: 0.88rem;
	color: var(--qc-text);
	transition: border-color 0.15s, background 0.15s;
}

#qc-shipping-options label:hover,
#qc-shipping-options label.selected {
	border-color: var(--qc-primary);
	background: var(--qc-bg-tint);
}

#qc-shipping-options input[type="radio"] {
	accent-color: var(--qc-primary);
	flex-shrink: 0;
}

/* ── Submit button ───────────────────────────────────────── */
.qc-dz-wrap #qc-submit.qc-submit-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	width: 100% !important;
	background-color: var(--qc-primary) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 9px !important;
	padding: 13px 20px !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	font-family: var(--qc-font) !important;
	cursor: pointer;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: opacity 0.18s, transform 0.1s;
	margin-top: 4px;
	line-height: 1.4 !important;
}

.qc-dz-wrap #qc-submit.qc-submit-btn:hover:not(:disabled) {
	opacity: 0.88 !important;
	color: #ffffff !important;
}

.qc-dz-wrap #qc-submit.qc-submit-btn:active:not(:disabled) {
	transform: scale(0.985);
}

.qc-dz-wrap #qc-submit.qc-submit-btn:disabled {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
}

/* ── Status messages ─────────────────────────────────────── */
.qc-message {
	margin-top: 14px;
	padding: 13px 16px;
	border-radius: 9px;
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
}

.qc-message.success {
	background: #f0fdf4;
	border: 1.5px solid #16a34a;
	color: #14532d;
}

.qc-message.error {
	background: #fef2f2;
	border: 1.5px solid #dc2626;
	color: #7f1d1d;
}

.qc-message.info {
	background: var(--qc-bg-tint);
	border: 1.5px solid var(--qc-primary);
	color: var(--qc-text);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 520px) {
	.qc-dz-wrap  { padding: 16px 14px; }
	.qc-grid-2   { grid-template-columns: 1fr !important; }
	.qc-dz-header { font-size: 1rem; }
}