/*
 * Atmos forms: checkout, cart and account pages.
 * Dark boxes with light text and labels, gold focus ring, red errors, * on required fields.
 * WooCommerce block styles are specific, so some rules need !important.
 */

:root {
	--field-bg: #141414;
	--field-border: rgba(255, 255, 255, 0.28);
	--field-label: rgba(255, 255, 255, 0.72);
	--field-error: #ff8a80;
}

/* ---------- Text inputs, selects, textareas ---------- */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-form .wc-block-components-text-input input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce-page form .input-text,
.woocommerce form textarea {
	background: var(--field-bg) !important;
	color: #fff !important;
	border: 1px solid var(--field-border) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	font-family: var(--font-body);
	font-size: 16px; /* 16px stops phones zooming into the field */
}
.woocommerce form .input-text,
.woocommerce form select {
	min-height: 48px;
	padding: 10px 14px;
	width: 100%;
}
.woocommerce form textarea { padding: 12px 14px; }
.wc-blocks-components-select .wc-blocks-components-select__select option,
.woocommerce form select option { background: var(--field-bg); color: #fff; }
.wc-blocks-components-select .wc-blocks-components-select__expand { fill: #fff; }

/* Floating labels sit inside the box: keep them light. */
.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label,
.wc-block-components-textarea::placeholder,
.wc-block-components-text-input input::placeholder,
.woocommerce form .input-text::placeholder {
	color: var(--field-label) !important;
}
.woocommerce form .form-row label,
.woocommerce form label {
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 6px;
	display: block;
}
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; }

/* Browser autofill keeps the dark box. */
.wc-block-checkout input:-webkit-autofill,
.woocommerce form input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 100px var(--field-bg) inset !important;
	-webkit-text-fill-color: #fff !important;
	caret-color: #fff;
}

/* ---------- Focus ---------- */
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input:focus,
.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
	border-color: var(--gold) !important;
	outline: 2px solid var(--gold) !important;
	outline-offset: 0 !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label { color: var(--gold) !important; }
.wc-block-components-checkbox .wc-block-components-checkbox__input:focus,
.wc-block-components-radio-control__input:focus {
	outline: 2px solid var(--gold) !important;
	outline-offset: 2px;
}

/* ---------- Required * ---------- */
.wc-block-components-text-input input[required] + label::after,
.wc-block-components-text-input input[aria-required="true"] + label::after,
.wc-block-components-address-form__country .wc-blocks-components-select__label::after,
.wc-blocks-components-select:has(select[aria-required="true"]) .wc-blocks-components-select__label::after,
.wc-blocks-components-select:has(select[required]) .wc-blocks-components-select__label::after {
	content: " *";
	color: var(--gold);
}
.woocommerce form .required { color: var(--gold); text-decoration: none; border: 0; }

/* ---------- Errors ---------- */
.wc-block-components-text-input.has-error input,
.wc-blocks-components-select.has-error .wc-blocks-components-select__select,
.wc-block-components-validation-error ~ .wc-blocks-components-select__container select,
.woocommerce form .woocommerce-invalid .input-text,
.woocommerce form .woocommerce-invalid select {
	border-color: var(--field-error) !important;
}
.wc-block-components-text-input.has-error label { color: var(--field-error) !important; }
.wc-block-components-validation-error,
.wc-block-components-validation-error > p,
.woocommerce form .woocommerce-error,
.woocommerce-invalid label {
	color: var(--field-error) !important;
	font-size: 13px;
}
.wc-block-components-validation-error svg { fill: var(--field-error); }

/* Notices (block and classic) */
.wc-block-components-notice-banner.is-error,
.woocommerce-error {
	background: rgba(255, 82, 82, 0.12) !important;
	border: 1px solid var(--field-error) !important;
	color: #fff !important;
}
.wc-block-components-notice-banner.is-error svg { background: var(--field-error); fill: #000; }
.wc-block-components-notice-banner.is-success,
.woocommerce-message,
.wc-block-components-notice-banner.is-info,
.woocommerce-info {
	background: rgba(200, 170, 115, 0.12) !important;
	border: 1px solid var(--gold) !important;
	color: #fff !important;
}
.woocommerce-message a, .woocommerce-info a, .wc-block-components-notice-banner a { color: var(--gold); }

/* ---------- Checkout text and controls on the dark page ---------- */
.wc-block-checkout,
.wc-block-cart { color: rgba(255, 255, 255, 0.88); }
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary__button-text { color: #fff !important; }
.wc-block-components-checkout-step__description,
.wc-block-checkout__guest-checkout-notice,
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__description,
.wc-block-checkout__terms { color: rgba(255, 255, 255, 0.75) !important; }
.wc-block-checkout__terms a,
.wc-block-components-address-form__address_2-toggle,
.wc-block-components-checkout-step a { color: var(--gold) !important; }
.wc-block-components-checkbox .wc-block-components-checkbox__input,
.wc-block-components-radio-control__input {
	background: var(--field-bg) !important;
	border-color: var(--field-border) !important;
}
.wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--gold) !important; }
.wc-block-components-radio-control__input:checked { border-color: var(--gold) !important; }
.wc-block-components-radio-control__input:checked::before { background: var(--gold) !important; }
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option { color: #fff; }
.wc-block-components-panel__button,
.wc-block-components-totals-coupon-link { color: #fff !important; }

/* ---------- Account pages (classic forms) ---------- */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce-account .woocommerce form.lost_reset_password,
.woocommerce form.woocommerce-EditAccountForm,
.woocommerce .woocommerce-address-fields {
	max-width: 520px;
	padding: 28px;
	border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
	border-radius: 8px;
	background: #0d0d0d;
}
.woocommerce form .form-row { margin: 0 0 18px; }
.woocommerce .lost_password a,
.woocommerce-MyAccount-content a { color: var(--gold); }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-MyAccount-navigation a {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--field-border);
	border-radius: 40px;
	color: #fff;
	font-size: 13px;
}
.woocommerce-MyAccount-navigation .is-active a { border-color: var(--gold); background: var(--gold); color: #000; }
.woocommerce form .show-password-input { color: #fff; }

/* Emirate is required for UAE addresses (the select itself carries no required attribute). */
.wc-block-components-address-form:has(select[id$="-country"] option[value="AE"]:checked) .wc-block-components-address-form__state .wc-blocks-components-select__label::after {
	content: " *";
	color: var(--gold);
}

/* Quantity bubble on order summary pictures. */
.wc-block-components-order-summary-item__quantity {
	background: var(--gold) !important;
	border-color: var(--gold) !important;
	color: #000 !important;
	box-shadow: none !important;
}
.wc-block-components-order-summary-item__quantity span { color: #000 !important; }
.wc-blocks-components-select:has(.wc-block-components-validation-error) .wc-blocks-components-select__select,
.wc-block-components-address-form__state:has(.wc-block-components-validation-error) .wc-blocks-components-select__select,
.wc-block-components-address-form__country:has(.wc-block-components-validation-error) .wc-blocks-components-select__select {
	border-color: var(--field-error) !important;
}

/* Cart rows (tablet and phone): WooCommerce makes each row its own grid with content-sized
   columns, so long Mix It descriptions pushed prices off-screen and short rows didn't line up.
   Fixed columns: picture | details | price. */
.wc-block-cart.is-medium .wc-block-cart-items__row,
.wc-block-cart.is-small .wc-block-cart-items__row,
.wc-block-cart.is-mobile .wc-block-cart-items__row {
	grid-template-columns: 80px minmax(0, 1fr) auto !important;
}
.wc-block-cart.is-medium .wc-block-cart-item__product,
.wc-block-cart.is-small .wc-block-cart-item__product,
.wc-block-cart.is-mobile .wc-block-cart-item__product { grid-column: 2 / 3 !important; min-width: 0; overflow-wrap: anywhere; }
.wc-block-cart.is-medium .wc-block-cart-item__total,
.wc-block-cart.is-small .wc-block-cart-item__total,
.wc-block-cart.is-mobile .wc-block-cart-item__total { grid-column: 3 / 4 !important; grid-row: 1; text-align: right; padding-left: 10px; }
.wc-block-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper { align-items: flex-end; }