/* =========================================================
   COD CHECKOUT — variation UI + direct order form
   Uses the theme's CSS variables (--brand-*) so it always
   matches the active design.
   ========================================================= */

.cod-checkout-form { margin-top: 8px; }

.cod-attribute-group { margin-bottom: 20px; }
.cod-attribute-label {
	display: block; font-weight: 700; font-size: 13px;
	text-transform: uppercase; letter-spacing: .03em;
	margin-bottom: 10px; color: var(--brand-text, #171717);
}
.cod-attribute-options { display: flex; flex-wrap: wrap; gap: 10px; }

/* Pill-style options (size, model, material, etc.) */
.cod-pill {
	padding: 10px 18px;
	border-radius: 999px;
	border: 1.5px solid var(--brand-border, #E7E5E1);
	background: var(--brand-surface, #fff);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.cod-pill:hover:not(:disabled) { border-color: var(--brand-accent, #B5652E); }
.cod-pill.is-selected {
	background: var(--brand-primary, #111827);
	border-color: var(--brand-primary, #111827);
	color: #fff;
}
.cod-pill:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.cod-pill.is-unavailable:not(:disabled) { opacity: .55; }

/* Swatch-style options (color) */
.cod-swatch {
	width: 38px; height: 38px; border-radius: 50%;
	border: 2px solid var(--brand-border, #E7E5E1);
	background: var(--swatch-color, #ccc);
	cursor: pointer;
	position: relative;
	padding: 0;
	transition: transform .15s ease, border-color .15s ease;
}
.cod-swatch:hover:not(:disabled) { transform: scale(1.08); }
.cod-swatch.is-selected {
	border-color: var(--brand-accent, #B5652E);
	box-shadow: 0 0 0 2px var(--brand-surface, #fff), 0 0 0 4px var(--brand-accent, #B5652E);
}
.cod-swatch:disabled { opacity: .3; cursor: not-allowed; }
.cod-swatch.is-unavailable:not(:disabled) { opacity: .5; }

.cod-variation-error {
	color: var(--brand-error, #B3261E);
	font-size: 13px;
	font-weight: 600;
	margin: 6px 0 0;
}

/* Quantity stepper */
.cod-quantity-group { margin-bottom: 24px; }
.cod-qty-stepper {
	display: inline-flex; align-items: center;
	border: 1.5px solid var(--brand-border, #E7E5E1);
	border-radius: 999px;
	overflow: hidden;
}
.cod-qty-btn {
	width: 42px; height: 42px;
	background: var(--brand-surface, #fff);
	border: none; font-size: 18px; font-weight: 700; cursor: pointer;
	color: var(--brand-text, #171717);
}
.cod-qty-btn:hover { background: var(--brand-border, #E7E5E1); }
#cod-quantity {
	width: 52px; height: 42px; text-align: center;
	border: none; border-left: 1.5px solid var(--brand-border, #E7E5E1); border-right: 1.5px solid var(--brand-border, #E7E5E1);
	font-weight: 700; font-size: 15px;
	-moz-appearance: textfield;
}
#cod-quantity::-webkit-outer-spin-button,
#cod-quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Delivery form */
.cod-delivery-heading {
	font-size: 15px; font-family: var(--font-body, inherit);
	text-transform: uppercase; letter-spacing: .04em;
	margin-bottom: 16px; color: var(--brand-muted, #6B7280);
}
.cod-field { margin-bottom: 16px; }
.cod-field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.cod-field .req { color: var(--brand-error, #B3261E); }
.cod-field input,
.cod-field select,
.cod-field textarea {
	width: 100%;
	padding: 14px 16px;
	font-size: 16px; /* prevents iOS zoom-on-focus */
	border: 1.5px solid var(--brand-border, #E7E5E1);
	border-radius: var(--brand-radius-sm, 8px);
	font-family: inherit;
	background: var(--brand-surface, #fff);
	color: var(--brand-text, #171717);
}
.cod-field input:focus,
.cod-field select:focus,
.cod-field textarea:focus {
	outline: none;
	border-color: var(--brand-accent, #B5652E);
}
.cod-field input.has-error,
.cod-field select.has-error,
.cod-field textarea.has-error { border-color: var(--brand-error, #B3261E); }
.cod-field-error { display: block; font-size: 12px; color: var(--brand-error, #B3261E); margin-top: 4px; min-height: 14px; }
.cod-field textarea { resize: vertical; }

.cod-payment-note {
	background: #F1F7F3;
	border: 1px solid #D3E8DA;
	color: var(--brand-success, #1F7A4D);
	padding: 12px 14px;
	border-radius: var(--brand-radius-sm, 8px);
	font-size: 13.5px;
	margin: 6px 0 20px;
}

.cod-form-messages { min-height: 20px; font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.cod-form-messages.cod-form-error { color: var(--brand-error, #B3261E); }
.cod-form-messages.cod-form-success { color: var(--brand-success, #1F7A4D); }

.cod-submit-btn { font-size: 16px; }
.cod-out-of-stock-msg { color: var(--brand-error, #B3261E); font-weight: 600; }

/* --- Mobile: sticky CTA so checkout is reachable without scrolling far --- */
@media (max-width: 767px) {
	.cod-checkout-form { padding-bottom: 84px; }
	.cod-submit-btn {
		position: fixed;
		left: 16px; right: 16px; bottom: 16px;
		z-index: 40;
		box-shadow: 0 10px 30px rgba(17,24,39,.25);
	}
}