/* =========================================================================
   Custom COD Order Form — frontend styles
   -------------------------------------------------------------------------
   ISOLATION STRATEGY
   Every rule is scoped under .cod-order-form-wrap using the unique "cod-"
   class prefix so this stylesheet can never leak out and affect the rest
   of the page. To protect the widget FROM external interference (theme
   global styles, Elementor defaults, other plugins), we:
     1. Never set the --cod-* custom properties here -- only var(--x, fallback)
        is used, so Elementor's generated per-widget CSS (or the inline style
        written for shortcode usage) is always the single source of truth
        and this file can never fight it for specificity.
     2. Apply `all: revert` to common form elements before re-styling them,
        undoing any theme/Elementor defaults that would otherwise leak in.
     3. Use `isolation: isolate` and `contain: layout style` on the root
        wrapper so internal layout/style changes can't affect (or be
        affected by) sibling elements on the page.
   ========================================================================= */

.cod-order-form-wrap {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 auto;
	background: var(--cod-bg, transparent);
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--cod-text, #171717);
	isolation: isolate;
	contain: layout style;
	line-height: 1.5;
}

.cod-order-form-wrap,
.cod-order-form-wrap * ,
.cod-order-form-wrap *::before,
.cod-order-form-wrap *::after {
	box-sizing: border-box;
}

.cod-order-form-wrap img,
.cod-order-form-wrap svg {
	max-width: 100%;
	display: block;
}

.cod-order-form-wrap h1,
.cod-order-form-wrap h2,
.cod-order-form-wrap h3,
.cod-order-form-wrap h4,
.cod-order-form-wrap h5,
.cod-order-form-wrap h6,
.cod-order-form-wrap p,
.cod-order-form-wrap ul,
.cod-order-form-wrap li {
	all: revert;
	box-sizing: border-box;
	font-family: inherit;
}

.cod-order-form-wrap input,
.cod-order-form-wrap select,
.cod-order-form-wrap textarea,
.cod-order-form-wrap button {
	all: revert;
	box-sizing: border-box;
	font-family: inherit;
}

.cod-order-form-wrap ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cod-form-inner {
	position: relative;
}

/* -------------------------------------------------------------------------
   Structural grid (columns computed server-side; only real used zones get
   a row/column so there's never empty leftover space).
   ------------------------------------------------------------------- */
.cod-order-form-wrap .cod-order-form {
	display: grid;
	gap: var(--cod-gap, 24px);
	align-items: start;
}

.cod-order-form-wrap .cod-area-top {
	grid-area: top;
}
.cod-order-form-wrap .cod-area-left {
	grid-area: left;
	display: flex;
	flex-direction: column;
	gap: var(--cod-gap, 24px);
}
.cod-order-form-wrap .cod-area-right {
	grid-area: right;
	display: flex;
	flex-direction: column;
	gap: var(--cod-gap, 24px);
}
.cod-order-form-wrap .cod-area-bottom {
	grid-area: bottom;
}

/* -------------------------------------------------------------------------
   Sections / cards
   ------------------------------------------------------------------- */
.cod-order-form-wrap .cod-section {
	background: var(--cod-card-bg, #ffffff);
	border: 1px solid var(--cod-border, #e5e5e5);
	border-radius: var(--cod-radius, 16px);
	padding: 20px 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cod-order-form-wrap .cod-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--cod-text, #171717);
}

.cod-order-form-wrap .cod-section-title-plain {
	gap: 0;
}

.cod-order-form-wrap .cod-step-badge {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 9999px;
	background: var(--cod-badge-bg, #F9D956);
	color: #171717;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cod-order-form-wrap .cod-field-icon {
	width: 16px;
	height: 16px;
	stroke: currentColor;
}

/* -------------------------------------------------------------------------
   Product list — checkbox rows, laid out as a configurable grid. Column
   count comes entirely from the --cod-product-columns custom property (set
   either by the Elementor "Product Grid Columns" control, responsively, or
   inlined as a fallback for shortcode usage). Defaulting the var() fallback
   to 1 keeps the classic single-column list if nothing ever sets it.
   ------------------------------------------------------------------- */
.cod-order-form-wrap .cod-products-list {
	display: grid;
	grid-template-columns: repeat(var(--cod-product-columns, 1), minmax(0, 1fr));
	align-items: stretch;
	gap: 12px;
}

.cod-order-form-wrap .cod-product-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--cod-border, #e5e5e5);
	border-radius: calc(var(--cod-radius, 16px) * 0.75);
	background: var(--cod-card-bg, #ffffff);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	overflow: hidden;
}

.cod-order-form-wrap .cod-product-card:hover {
	border-color: #d4d4d4;
}

.cod-order-form-wrap .cod-product-card.cod-card-selected,
.cod-order-form-wrap .cod-product-card:has(.cod-product-checkbox:checked) {
	border-color: var(--cod-primary, #E68925);
	box-shadow: 0 0 0 1px var(--cod-primary, #E68925);
	background: color-mix(in srgb, var(--cod-primary, #E68925) 9%, var(--cod-card-bg, #ffffff));
}

.cod-order-form-wrap .cod-product-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
}

.cod-order-form-wrap .cod-product-checkbox {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border-radius: 6px;
	border: 2px solid var(--cod-border, #e5e5e5);
	background-color: var(--cod-card-bg, #ffffff);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cod-order-form-wrap .cod-product-checkbox:hover {
	border-color: var(--cod-primary, #E68925);
}

.cod-order-form-wrap .cod-product-checkbox:checked {
	background-color: var(--cod-primary, #E68925);
	border-color: var(--cod-primary, #E68925);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.cod-order-form-wrap .cod-product-checkbox:focus-visible {
	outline: 2px solid var(--cod-primary, #E68925);
	outline-offset: 2px;
}

.cod-order-form-wrap .cod-product-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.cod-order-form-wrap .cod-product-image {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
	background: #f2f2f2;
}

.cod-order-form-wrap .cod-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cod-order-form-wrap .cod-product-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cod-order-form-wrap .cod-product-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--cod-text, #171717);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cod-order-form-wrap .cod-product-price {
	font-size: 14px;
	font-weight: 600;
	color: var(--cod-primary, #E68925);
}

.cod-order-form-wrap .cod-no-products {
	color: #737373;
	font-style: italic;
	font-size: 14px;
}

/* -------------------------------------------------------------------------
   Actions row (quantity stepper + Add to Cart), revealed as a full-width
   block below the main row once a product is selected. Using a block-level
   reveal (rather than squeezing controls inline into the row) keeps every
   card's own footprint self-contained, so a multi-column grid's rows stay
   evenly aligned no matter which cards are selected. Kept in the DOM at all
   times (rather than display:none) and animated via max-height/opacity so
   it expands smoothly without any layout jump.
   ------------------------------------------------------------------- */
.cod-order-form-wrap .cod-selected-actions {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.25s ease;
}

.cod-order-form-wrap .cod-product-card.cod-card-selected .cod-selected-actions,
.cod-order-form-wrap .cod-product-card:has(.cod-product-checkbox:checked) .cod-selected-actions {
	max-height: 220px;
	opacity: 1;
}

.cod-order-form-wrap .cod-variation-row {
	padding: 0 12px 10px 12px;
}

.cod-order-form-wrap .cod-variation-select {
	width: 100%;
	font-size: 13px;
	padding: 8px 10px;
	border: 1px solid var(--cod-border, #e5e5e5);
	border-radius: 8px;
	background: var(--cod-card-bg, #ffffff);
	color: var(--cod-text, #171717);
}

.cod-order-form-wrap .cod-actions-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 12px 12px 12px;
}

.cod-order-form-wrap .cod-qty-control {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.cod-order-form-wrap .cod-qty-btn {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--cod-border, #e5e5e5);
	border-radius: 8px;
	background: var(--cod-card-bg, #ffffff);
	color: var(--cod-text, #171717);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cod-order-form-wrap .cod-qty-btn:hover {
	background: var(--cod-primary, #E68925);
	border-color: var(--cod-primary, #E68925);
	color: #ffffff;
}

.cod-order-form-wrap .cod-qty-value {
	flex: 0 0 auto;
	min-width: 24px;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--cod-text, #171717);
}

/* -------------------------------------------------------------------------
   Billing fields
   ------------------------------------------------------------------- */
.cod-order-form-wrap .cod-field {
	position: relative;
	margin-bottom: 12px;
}

.cod-order-form-wrap .cod-field:last-child {
	margin-bottom: 0;
}

.cod-order-form-wrap .cod-field-icon {
	position: absolute;
	left: 12px;
	top: 16px;
	color: #a3a3a3;
	pointer-events: none;
}

.cod-order-form-wrap .cod-input {
	width: 100%;
	padding: 12px 12px 12px 40px;
	border-radius: calc(var(--cod-radius, 16px) * 0.75);
	border: 1px solid var(--cod-border, #e5e5e5);
	background: var(--cod-card-bg, #ffffff);
	font-size: 14px;
	color: var(--cod-text, #171717);
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cod-order-form-wrap .cod-input::placeholder {
	color: #a3a3a3;
}

.cod-order-form-wrap .cod-input:focus {
	border-color: var(--cod-primary, #E68925);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cod-primary, #E68925) 20%, transparent);
}

.cod-order-form-wrap .cod-textarea {
	resize: vertical;
	min-height: 46px;
}

.cod-order-form-wrap select.cod-input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

/* -------------------------------------------------------------------------
   Order summary
   ------------------------------------------------------------------- */
.cod-order-form-wrap .cod-order-items {
	margin-bottom: 16px;
}

.cod-order-form-wrap .cod-order-items-list {
	min-height: 20px;
}

.cod-order-form-wrap .cod-empty-msg {
	color: #a3a3a3;
	font-size: 14px;
	text-align: center;
	margin: 16px 0;
}

.cod-order-form-wrap .cod-order-item-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--cod-border, #e5e5e5);
}

.cod-order-form-wrap .cod-order-item-row:last-child {
	border-bottom: none;
}

.cod-order-form-wrap .cod-order-item-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--cod-text, #171717);
}

.cod-order-form-wrap .cod-order-item-subtotal {
	font-weight: 600;
	white-space: nowrap;
}

.cod-order-form-wrap .cod-totals {
	border-top: 1px solid var(--cod-border, #e5e5e5);
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cod-order-form-wrap .cod-totals-row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: #737373;
}

.cod-order-form-wrap .cod-total-row {
	font-size: 18px;
	font-weight: 700;
	color: var(--cod-text, #171717);
	border-top: 1px solid var(--cod-border, #e5e5e5);
	padding-top: 8px;
	margin-top: 4px;
}

/* Messages */
.cod-order-form-wrap .cod-form-message {
	min-height: 20px;
	margin: 12px 0 0 0;
	font-size: 13px;
	font-weight: 600;
}

.cod-order-form-wrap .cod-msg-error {
	color: #dc2626;
}

.cod-order-form-wrap .cod-msg-success {
	color: #16a34a;
}

/* Submit button */
.cod-order-form-wrap .cod-submit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: var(--cod-primary, #E68925);
	color: var(--cod-button-text, #ffffff);
	border: none;
	border-radius: calc(var(--cod-radius, 16px) * 0.75);
	padding: 14px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	transition: background-color 0.15s ease;
	margin-top: 20px;
}

.cod-order-form-wrap .cod-submit-btn:hover {
	background: var(--cod-primary-dark, #d07a1f);
}

.cod-order-form-wrap .cod-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.cod-order-form-wrap .cod-safe-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	font-size: 12px;
	color: #a3a3a3;
	margin: 12px 0 0 0;
}

.cod-order-form-wrap .cod-safe-note svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
}

/* =========================================================================
   Confirmation ("Thank You") panel
   ========================================================================= */
.cod-order-form-wrap .cod-hidden {
	display: none !important;
}

.cod-order-form-wrap .cod-confirmation-panel {
	background: var(--cod-card-bg, #ffffff);
	border: 1px solid var(--cod-border, #e5e5e5);
	border-radius: calc(var(--cod-radius, 16px) + 4px);
	padding: 32px 24px;
	text-align: center;
	max-width: 480px;
	margin: 0 auto;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	opacity: 0;
	transform: translateY(14px) scale(0.98);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.cod-order-form-wrap .cod-confirmation-panel.cod-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.cod-order-form-wrap .cod-confirmation-icon {
	width: 76px;
	height: 76px;
	margin: 0 auto 16px;
}

.cod-order-form-wrap .cod-check-svg {
	width: 100%;
	height: 100%;
}

.cod-order-form-wrap .cod-check-circle {
	stroke: var(--cod-confirm-icon, #16a34a);
	stroke-width: 2.5;
	stroke-dasharray: 160;
	stroke-dashoffset: 160;
	transition: stroke-dashoffset 0.6s ease-in-out;
}

.cod-order-form-wrap .cod-check-mark {
	stroke: var(--cod-confirm-icon, #16a34a);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	transition: stroke-dashoffset 0.4s 0.5s ease-in-out;
}

.cod-order-form-wrap .cod-confirmation-panel.cod-visible .cod-check-circle,
.cod-order-form-wrap .cod-confirmation-panel.cod-visible .cod-check-mark {
	stroke-dashoffset: 0;
}

.cod-order-form-wrap .cod-confirmation-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--cod-text, #171717);
	margin: 0 0 6px 0;
}

.cod-order-form-wrap .cod-confirmation-subtitle {
	font-size: 14px;
	color: #737373;
	margin: 0 0 18px 0;
}

.cod-order-form-wrap .cod-confirmation-order-id {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background: var(--cod-surface, #f9fafb);
	border: 1px dashed var(--cod-border, #e5e5e5);
	border-radius: 8px;
	padding: 8px 20px;
	margin-bottom: 20px;
}

.cod-order-form-wrap .cod-confirmation-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #737373;
	font-weight: 700;
}

.cod-order-form-wrap .cod-confirm-order-number {
	font-size: 18px;
	font-weight: 800;
	color: var(--cod-primary-dark, #d07a1f);
}

.cod-order-form-wrap .cod-confirmation-card {
	text-align: left;
	background: var(--cod-surface, #f9fafb);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 14px;
}

.cod-order-form-wrap .cod-confirmation-card h4 {
	margin: 0 0 10px 0;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cod-primary-dark, #d07a1f);
}

.cod-order-form-wrap .cod-confirmation-item-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	padding: 5px 0;
	border-bottom: 1px dashed var(--cod-border, #e5e5e5);
}

.cod-order-form-wrap .cod-confirmation-item-qty {
	color: #737373;
	font-weight: 400;
}

.cod-order-form-wrap .cod-confirmation-totals {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--cod-border, #e5e5e5);
}

.cod-order-form-wrap .cod-confirmation-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: #737373;
	padding: 3px 0;
}

.cod-order-form-wrap .cod-confirmation-total {
	font-size: 15px;
	font-weight: 800;
	color: var(--cod-text, #171717);
	border-top: 1px solid var(--cod-border, #e5e5e5);
	margin-top: 4px;
	padding-top: 6px;
}

.cod-order-form-wrap .cod-confirmation-delivery p {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	margin: 0 0 6px 0;
	color: var(--cod-text, #171717);
}

.cod-order-form-wrap .cod-confirmation-delivery p:last-child {
	margin-bottom: 0;
}

.cod-order-form-wrap .cod-confirmation-note {
	font-size: 12px;
	color: #737373;
	margin: 4px 0 20px 0;
}

.cod-order-form-wrap .cod-place-another-btn {
	display: inline-block;
	background: transparent;
	color: var(--cod-primary-dark, #d07a1f);
	border: 2px solid var(--cod-primary, #E68925);
	border-radius: 10px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.cod-order-form-wrap .cod-place-another-btn:hover {
	background: var(--cod-primary, #E68925);
	color: #fff;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 767px) {
	/* Force a clean single-column stack on small screens, regardless of the
	   desktop layout configuration, for readability. Per-section "order"
	   values only make sense within their own desktop zone, so they are
	   reset here in favour of the natural Products → Billing → Summary
	   document order. */
	.cod-order-form-wrap .cod-order-form {
		display: flex !important;
		flex-direction: column !important;
	}

	.cod-order-form-wrap .cod-area {
		order: 0 !important;
		width: 100%;
	}

	.cod-order-form-wrap .cod-section {
		padding: 16px 18px;
	}

	.cod-order-form-wrap .cod-confirmation-panel {
		padding: 24px 16px;
	}

	/* Tighten up the row and stepper on narrow screens so nothing overflows;
	   the product name still truncates with an ellipsis if space is tight. */
	.cod-order-form-wrap .cod-product-row {
		gap: 8px;
		padding: 10px;
	}

	.cod-order-form-wrap .cod-product-main {
		gap: 8px;
	}

	.cod-order-form-wrap .cod-qty-btn {
		width: 26px;
		height: 26px;
		font-size: 14px;
	}

	.cod-order-form-wrap .cod-actions-row {
		padding: 0 10px 10px 10px;
	}
}