/* =============================================================================
   NextGen Rental – Checkout Fields Widget
   nextgen-checkout-widget.css
   ============================================================================= */

/* ── Wrapper ─────────────────────────────────────────────────────────────────── */
.ng-checkout-wrap {
	/* Style → Form Fields → Focus → Focus color (border + soft ring) */
	--ng-field-focus-border: #7c5cfc;
	/* Style → Form Fields → Country/region dropdown list */
	--ng-s2-highlight-bg: #2271b1;
	--ng-s2-highlight-color: #fff;
	--ng-s2-selected-bg: #f0f0f1;
	--ng-s2-selected-color: inherit;
	width: 100%;
	box-sizing: border-box;
}

.ng-checkout-wrap *,
.ng-checkout-wrap *::before,
.ng-checkout-wrap *::after {
	box-sizing: border-box;
}

/* ── Section blocks ──────────────────────────────────────────────────────────── */
.ng-checkout-section {
	margin-bottom: 32px;
}

.ng-checkout-section:last-child {
	margin-bottom: 0;
}

/* Section heading */
.ng-section-title {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 1.2em;
	font-weight: 600;
}

/* ── Billing grid ────────────────────────────────────────────────────────────── */
/*
 * CSS Grid – 12 columns so column-gap only sits between real layout tracks.
 * (repeat(100,1fr) + gap created ~99 extra gutters and blew out the grid width.)
 */
.ng-billing-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 16px;
	row-gap: 16px;
	align-items: start;
}

/* Width utilities (percent of 12-col grid) */
.ng-billing-grid .ng-field--25  { grid-column: span 3; }
.ng-billing-grid .ng-field--33  { grid-column: span 4; }
.ng-billing-grid .ng-field--50  { grid-column: span 6; }
.ng-billing-grid .ng-field--66  { grid-column: span 8; }
.ng-billing-grid .ng-field--75  { grid-column: span 9; }
.ng-billing-grid .ng-field--100 { grid-column: span 12; }

/* Collapse to single column on small screens */
@media (max-width: 600px) {
	.ng-billing-grid .ng-field--25,
	.ng-billing-grid .ng-field--33,
	.ng-billing-grid .ng-field--50,
	.ng-billing-grid .ng-field--66,
	.ng-billing-grid .ng-field--75,
	.ng-billing-grid .ng-field--100 {
		grid-column: span 12;
	}
}

/* ── WooCommerce form-row override inside grid ───────────────────────────────── */
/* Remove WC's default floating layout so our grid takes over */
.ng-billing-grid .form-row {
	width: 100% !important;
	min-width: 0;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ng-billing-grid .form-row label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
}

.ng-billing-grid .form-row input[type="text"],
.ng-billing-grid .form-row input[type="email"],
.ng-billing-grid .form-row input[type="tel"],
.ng-billing-grid .form-row input[type="number"],
.ng-billing-grid .form-row select,
.ng-billing-grid .form-row textarea {
	width: 100%;
	display: block;
	padding: 10px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1em;
	font-family: inherit;
	line-height: 1.5;
	min-height: calc(1.5em + 22px);
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	color: inherit;
}

.ng-billing-grid .form-row input:focus,
.ng-billing-grid .form-row select:focus,
.ng-billing-grid .form-row textarea:focus {
	outline: none;
	border-color: var(--ng-field-focus-border);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.ng-billing-grid .form-row textarea:focus {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--ng-field-focus-border) 15%, transparent);
	}
}

.ng-billing-grid .form-row textarea {
	min-height: 100px;
	resize: vertical;
}

/* Select: match input box metrics (Safari / macOS often differ from text inputs) */
.ng-billing-grid .form-row select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 36px;
	cursor: pointer;
	vertical-align: middle;
}

/*
 * WooCommerce SelectWoo (Select2) – the visible country/state control is NOT the native <select>.
 * Theme checkout rules often target only inputs, so we reset the Select2 “face” to match our inputs.
 */
.ng-checkout-wrap .ng-billing-grid .select2-container {
	width: 100% !important;
	max-width: 100%;
}

.ng-checkout-wrap .ng-billing-grid .select2-container--default .select2-selection--single {
	height: auto !important;
	min-height: calc(1.5em + 22px);
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #fff;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ng-checkout-wrap .ng-billing-grid .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 10px 36px 10px 14px;
	line-height: 1.5;
	color: inherit;
	font-size: 1em;
	font-family: inherit;
}

.ng-checkout-wrap .ng-billing-grid .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	right: 10px;
	top: 0;
}

.ng-checkout-wrap .ng-billing-grid .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: #555 transparent transparent transparent;
}

.ng-checkout-wrap .ng-billing-grid .select2-container--focus .select2-selection--single,
.ng-checkout-wrap .ng-billing-grid .select2-container--open .select2-selection--single {
	outline: none;
	border-color: var(--ng-field-focus-border);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.ng-checkout-wrap .ng-billing-grid .select2-container--focus .select2-selection--single,
	.ng-checkout-wrap .ng-billing-grid .select2-container--open .select2-selection--single {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--ng-field-focus-border) 15%, transparent);
	}
}

/*
 * SelectWoo results panel: stays on body (Woo default). Class + inline vars are set in
 * checkout-select2-dropdown-parent.js so the list stacks above checkout sections.
 */
.select2-dropdown.ng-checkout-select2-dropdown {
	z-index: 1000020 !important;
}

.select2-dropdown.ng-checkout-select2-dropdown .select2-results__option[aria-selected="true"] {
	background-color: var(--ng-s2-selected-bg);
	color: var(--ng-s2-selected-color);
}

.select2-dropdown.ng-checkout-select2-dropdown .select2-results__option--highlighted {
	background-color: var(--ng-s2-highlight-bg) !important;
	color: var(--ng-s2-highlight-color) !important;
}

/* Required star (frontend + Elementor preview) */
.ng-billing-grid abbr.required {
	text-decoration: none;
	color: #e00;
	margin-left: 2px;
}

/* WooCommerce validation classes */
.ng-billing-grid .form-row.woocommerce-invalid input,
.ng-billing-grid .form-row.woocommerce-invalid select,
.ng-billing-grid .form-row.woocommerce-invalid textarea {
	border-color: #e00;
}

.ng-billing-grid .form-row.woocommerce-invalid .select2-container .select2-selection--single {
	border-color: #e00;
}

.ng-billing-grid .form-row.woocommerce-validated input,
.ng-billing-grid .form-row.woocommerce-validated select {
	border-color: #4caf50;
}

.ng-billing-grid .form-row.woocommerce-validated .select2-container .select2-selection--single {
	border-color: #4caf50;
}

/* WooCommerce inline error */
.ng-checkout-wrap .woocommerce-error,
.ng-checkout-wrap .woocommerce-message,
.ng-checkout-wrap .woocommerce-info {
	margin-bottom: 24px;
}

/* ── Payment section ─────────────────────────────────────────────────────────── */
/*
 * Inner padding comes from Style → Payment → Padding (#payment). Do not set padding here:
 * the base stylesheet can load after Elementor’s post CSS and would override padding: 0.
 */
.ng-checkout-payment-mount {
	width: 100%;
	max-width: 100%;
}

.ng-checkout-payment #payment {
	background: #f5f5f5;
	border-radius: 4px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	/* Contain WC floats on .place-order / gateways so the grey box height and padding stay correct */
	overflow: auto;
}

/*
 * Payment method description “tooltip”: WooCommerce uses .payment_box::before (border triangle).
 * Theme/WC often leaves a grey pointer while the box is white — override via Style → Payment → Speech bubble pointer color.
 */
.ng-checkout-payment #payment .payment_box::before {
	box-sizing: border-box;
}

.ng-checkout-payment #payment .payment_methods {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	padding: 0;
	list-style: none;
}

.ng-checkout-payment #payment .place-order {
	padding: 0;
}

/*
 * WooCommerce core checkout CSS floats .place-order / #place_order to the right.
 * Floats ignore parent text-align:center and can sit outside the padded #payment box.
 */
.ng-checkout-payment .place-order {
	width: 100%;
	float: none !important;
	clear: both;
	box-sizing: border-box;
}

.ng-checkout-payment #place_order {
	float: none !important;
	max-width: 100%;
	box-sizing: border-box;
}

.ng-checkout-payment.ng-btn-align--left #payment .place-order {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.ng-checkout-payment.ng-btn-align--center #payment .place-order {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.ng-checkout-payment.ng-btn-align--right #payment .place-order {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	text-align: right;
}

.ng-checkout-payment.ng-btn-align--left #place_order,
.ng-checkout-payment.ng-btn-align--center #place_order,
.ng-checkout-payment.ng-btn-align--right #place_order {
	display: inline-block;
	width: auto;
}

/* Full width (saved as justify or legacy full) */
.ng-checkout-payment.ng-btn-align--full #payment .place-order,
.ng-checkout-payment.ng-btn-align--justify #payment .place-order {
	display: block;
}

.ng-checkout-payment.ng-btn-align--full #place_order,
.ng-checkout-payment.ng-btn-align--justify #place_order {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Icon + label inside Place order */
.ng-place-order-btn .ng-place-order-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ng-po-icon-gap, 8px);
}

.ng-checkout-payment.ng-btn-align--full #place_order.ng-place-order-btn .ng-place-order-inner,
.ng-checkout-payment.ng-btn-align--justify #place_order.ng-place-order-btn .ng-place-order-inner {
	width: 100%;
}

.ng-place-order-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.ng-place-order-icon svg {
	display: block;
}

#place_order,
.ng-checkout-payment .button {
	transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}

/* Elementor editor: real payment markup for design; avoid submitting checkout from the preview iframe */
.ng-checkout-payment--elementor-editor #place_order {
	pointer-events: none;
	cursor: not-allowed;
}

/* Hidden AJAX icon template (sibling of #payment, not inside it) */
.ng-po-icon-source {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	pointer-events: none !important;
}

/* ── Order review table ───────────────────────────────────────────────────────── */
.ng-checkout-order-review .shop_table {
	width: 100%;
	border-collapse: collapse;
}

.ng-checkout-order-review .shop_table th,
.ng-checkout-order-review .shop_table td {
	padding: 10px 0;
	border-bottom: 1px solid #eee;
	vertical-align: top;
}

.ng-checkout-order-review .shop_table .order-total td,
.ng-checkout-order-review .shop_table .order-total th {
	font-weight: 700;
	border-bottom: none;
}

.ng-checkout-order-review .shop_table .product-name {
	width: 62%;
	min-width: 0;
}

/* ── Editor preview helpers ──────────────────────────────────────────────────── */
.ng-editor-notice {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 12px;
	line-height: 1.45;
	color: #64748b;
	margin-bottom: 10px;
}

.ng-editor-preview input[disabled],
.ng-editor-preview select[disabled],
.ng-editor-preview select.ng-editor-preview-select {
	width: 100%;
	background: #f9f9f9;
	cursor: not-allowed;
	opacity: 0.7;
}

.ng-editor-preview select.ng-editor-preview-select {
	-webkit-appearance: none;
	appearance: none;
	padding: 10px 36px 10px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1em;
	font-family: inherit;
	line-height: 1.5;
	min-height: calc(1.5em + 22px);
	box-sizing: border-box;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-color: #fff;
	color: inherit;
}

.ng-editor-btn-preview {
	opacity: 0.85;
	cursor: not-allowed;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ng-po-icon-gap, 8px);
}

.ng-editor-btn-preview .ng-place-order-inner {
	display: inline-flex;
	align-items: center;
	gap: inherit;
}

.ng-editor-btn-preview .ng-place-order-icon {
	display: inline-flex;
	line-height: 0;
}

.ng-editor-btn-preview .ng-place-order-icon svg {
	display: block;
}