/**
 * Cake Product Options for WooCommerce — Frontend Styles
 *
 * UI redesign pass: visually groups every Cake Options field (Cake
 * Type, Cake Weight, Add-ons, Amount, Upload Your Photo, Delivery
 * Date, Delivery Time, Quick Delivery) plus the native WooCommerce
 * quantity input and Add to Cart button inside one clean, bordered
 * card (".cpo-card", opened/closed by class-frontend.php around the
 * 'woocommerce_before_add_to_cart_button' / 'woocommerce_after_add_to_cart_button'
 * hooks). Deliberately scoped to plugin-prefixed ".cpo-*" classes only
 * so it never fights with theme styles or relies on generic selectors
 * like ".container"/".row". No field names, data attributes, or
 * behaviour-relevant markup were changed to make this redesign
 * possible — every hook below targets markup/classes that already
 * existed.
 *
 * Layout note: the two-column desktop / stacked-mobile page layout
 * (product gallery on the left, summary column on the right) comes
 * from WooCommerce's own product template and the active theme — this
 * file does not attempt to rebuild that layout, only to style the
 * card and fields that live inside the summary column.
 */

:root {
	/* UI redesign pass: primary brand colour is now #001a54 (navy) —
	   used for primary buttons, active/selected states, and important
	   amount emphasis, replacing the previous pink accent throughout. */
	--cpo-accent: #001a54;
	--cpo-accent-dark: #000f33;
	--cpo-accent-soft: #eef1f7;
	--cpo-border: #dde1ea;
	--cpo-border-soft: #f0f0f0;
	--cpo-text: #2b2b2b;
	--cpo-text-muted: #6b6b6b;
	--cpo-danger: #a94442;
	--cpo-required: #e53935;
}

/* Outer card — groups the entire Cake Options area, including the
   native WooCommerce quantity input and Add to Cart button that
   render immediately after this plugin's own markup. */
.cpo-card {
	background: #fff;
	border: 1px solid var(--cpo-border);
	border-radius: 14px;
	padding: 22px 24px;
	margin: 20px 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/*
 * UI redesign pass: quantity stepper + Add to Cart button.
 *
 * Spec: hide the visible quantity -/1/+ controls inside the Cake
 * Options UI and show one full-width Add to Cart button instead,
 * WITHOUT breaking WooCommerce's normal quantity handling internally.
 * WooCommerce always renders quantity as a real <input type="number"
 * name="quantity" value="1">, so simply hiding it with CSS (rather
 * than removing it from the DOM) keeps that field a real, submitted
 * form value at its default (1) — Add to Cart logic, cart item
 * quantity, and stock handling are completely untouched; only the
 * visible stepper UI is gone.
 */
.cpo-card .quantity {
	display: none;
}

.cpo-card .single_add_to_cart_button {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 15px 20px;
	background: var(--cpo-accent);
	border-color: var(--cpo-accent);
	color: #fff;
	font-size: 1.05em;
	font-weight: 700;
	text-align: center;
	border-radius: 10px;
	transition: background-color 0.15s ease-in-out;
}

.cpo-card .single_add_to_cart_button:hover,
.cpo-card .single_add_to_cart_button:focus {
	background: var(--cpo-accent-dark);
	border-color: var(--cpo-accent-dark);
	color: #fff;
}

/* Transient "Adding..." state while the Add to Cart form submission is
   in flight (see cpoInitAddToCartButton() in assets/js/frontend.js) —
   purely a visual/text change on the existing button; the underlying
   server-side Add to Cart submission is completely unchanged. */
.cpo-card .single_add_to_cart_button.cpo-btn-loading {
	opacity: 0.85;
	cursor: wait;
	padding-left: 44px;
	position: relative;
}

.cpo-card .single_add_to_cart_button.cpo-btn-loading::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cpo-spin 0.7s linear infinite;
}

@keyframes cpo-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Transient success state shown briefly after WooCommerce reports the
   item was added (see cpoInitAddToCartButton()'s check of the
   "added-to-cart" URL parameter WooCommerce itself already appends —
   no cart/order logic is touched). */
.cpo-card .single_add_to_cart_button.cpo-btn-success {
	background: #1e7e34;
	border-color: #1e7e34;
}

.cpo-product-options {
	display: flex;
	flex-direction: column;
}

.cpo-option-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 20px;
	row-gap: 10px;
	padding: 16px 0;
	border-bottom: 1px solid var(--cpo-border-soft);
}

.cpo-product-options .cpo-option-group:first-child {
	padding-top: 4px;
}

.cpo-product-options .cpo-option-group:last-child {
	border-bottom: 0;
	padding-bottom: 4px;
}

.cpo-option-title {
	margin: 0;
	flex: 0 0 auto;
	min-width: 150px;
	font-size: 0.98em;
	font-weight: 600;
	color: var(--cpo-text);
	display: flex;
	align-items: center;
	gap: 10px;
}

/* UI redesign pass: decorative section icons removed entirely — text
   labels only, per spec. (Previously this rule generated a small
   inline SVG icon in front of every section title via ::before /
   background-image; both are gone now, section titles are plain
   text.) */

/* Required-field asterisk, appended after a section title's text for
   Cake Type, Cake Weight, Upload Your Photo, Delivery Date, and
   Delivery Time. Purely visual — required/optional enforcement is
   unchanged, still entirely server-side (CPO_Validation). */
.cpo-required {
	color: var(--cpo-required);
	font-weight: 700;
}

/* Radio / checkbox lists (Cake Type, Cake Weight, Add-ons, Delivery Date) */

.cpo-radio-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 30px;
	flex: 1 1 auto;
	justify-content: flex-end;
}

/* UI redesign pass: switched from a CSS multi-column ("columns: 2")
   layout — which fills the first column top-to-bottom before starting
   the second — to a real two-column CSS grid, so add-ons pair up
   row-by-row (item 1 + 2 on row 1, item 3 + 4 on row 2, ...) matching
   the reference layout exactly. Collapses to one column on very small
   screens (see the max-width: 420px rule below), same as before. */
.cpo-checkbox-list {
	flex: 1 1 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 28px;
	row-gap: 4px;
}

.cpo-radio-option,
.cpo-checkbox-option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-weight: normal;
	color: var(--cpo-text);
}

.cpo-checkbox-option {
	break-inside: avoid;
	padding: 4px 0;
}

.cpo-radio-option input,
.cpo-checkbox-option input {
	width: auto;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--cpo-accent);
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.cpo-radio-label-text,
.cpo-checkbox-label-text {
	flex: 1 1 auto;
}

/* Add-ons: title sits on its own full-width row above the two-column
   grid, matching the reference layout (rather than title-left/
   options-right like the single-choice sections above). */
.cpo-addons-section {
	justify-content: flex-start;
}

.cpo-addons-section .cpo-option-title {
	flex: 1 1 100%;
}

/* Amount / Total */

/* UI redesign pass: the Amount row is now shown inside its own
   clearly-visible boxed area (light navy-tinted background, rounded
   border) rather than a plain bottom-bordered row like the other
   sections, per spec ("show the amount inside a clearly visible
   box"). Still the exact same title + value flex layout underneath —
   only the box styling is new. */
.cpo-amount-box {
	background: var(--cpo-accent-soft);
	border: 1px solid var(--cpo-border);
	border-radius: 10px;
	padding: 14px 16px;
	margin: 10px 0;
}

.cpo-total-amount {
	font-size: 1.35em;
	font-weight: 700;
	color: var(--cpo-accent);
}

.cpo-total-amount--pending,
.cpo-total-amount--unavailable {
	font-size: 1em;
	font-weight: 400;
	font-style: italic;
	color: var(--cpo-text-muted);
}

/* Upload Your Photo */

.cpo-photo-section {
	justify-content: flex-start;
	column-gap: 16px;
}

.cpo-photo-section .cpo-option-title {
	flex: 0 0 auto;
}

.cpo-field-label {
	display: inline-block;
	font-weight: 600;
	margin: 0 10px 0 0;
}

.cpo-photo-input {
	max-width: 100%;
}

.cpo-field-help {
	flex-basis: 100%;
	margin: 4px 0 0;
	font-size: 0.85em;
	color: var(--cpo-text-muted);
}

.cpo-photo-preview {
	flex-basis: 100%;
	margin-top: 10px;
}

.cpo-photo-preview[hidden] {
	display: none;
}

.cpo-photo-preview-img {
	max-width: 160px;
	max-height: 160px;
	display: block;
	border: 1px solid var(--cpo-border-soft);
	border-radius: 8px;
	object-fit: cover;
}

/* Delivery Date */

.cpo-radio-option--disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cpo-radio-option--disabled input {
	cursor: not-allowed;
}

.cpo-delivery-today-unavailable-notice {
	flex-basis: 100%;
	color: var(--cpo-danger);
	margin: 4px 0 0;
}

/* UI redesign pass: "Today" / "Select Your Date" are now shown as a
   pair of side-by-side pill buttons instead of the old radio-dot
   style. The underlying <input type="radio"> elements are unchanged
   (same ids/name/values) — only hidden visually; the surrounding
   <label> becomes the clickable "button" and gets the filled #001a54
   treatment while its radio is checked. assets/js/frontend.js's
   cpoInitDeliveryDateButtons() toggles the ".is-selected" class below
   to keep this in sync (kept as an explicit class, rather than relying
   on the newer :has() selector, for broader compatibility). */
.cpo-date-toggle-buttons {
	justify-content: flex-start;
	gap: 12px;
	flex: 1 1 100%;
	/* Anchor for the custom calendar popover below (bug fix: the old
	   approach relied on the browser's native date-picker positioning
	   itself relative to a nearly-invisible input, which is what made
	   it appear at the page's top-left instead of near this button). */
	position: relative;
}

.cpo-date-btn {
	position: relative;
	background: #fff;
	border: 1px solid var(--cpo-border);
	border-radius: 8px;
	padding: 10px 22px;
	gap: 0;
}

.cpo-date-btn .cpo-radio-label-text {
	flex: 0 0 auto;
}

/* Visually hide the native radio dot while keeping the input real,
   focusable, and submitted like any other radio button. */
.cpo-date-btn input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin: 0;
	cursor: pointer;
}

.cpo-date-btn.is-selected {
	background: var(--cpo-accent);
	border-color: var(--cpo-accent);
}

.cpo-date-btn.is-selected .cpo-radio-label-text {
	color: #fff;
}

.cpo-date-btn.cpo-radio-option--disabled {
	opacity: 0.5;
}

/* The real date input is kept in the DOM (so clicking the "Select
   Your Date" button can open its native picker, and so its value is
   still a real submitted form field) but is no longer shown as its
   own separate labeled field underneath the buttons — it's collapsed
   down to essentially nothing, off to the side of the two buttons. */
.cpo-delivery-date-picker-wrap--compact {
	flex-basis: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

.cpo-delivery-date-picker-wrap--compact .cpo-delivery-date-input {
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	/* BUG FIX (calendar opening at top-left): belt-and-braces on top of
	   the "readonly" attribute (see class-frontend.php) — this real
	   <input type="date"> must never be directly clickable/tappable,
	   since the browser/OS anchors its own native date popup to this
	   input's own (intentionally near-invisible) box, not to the
	   visible "Select Your Date" button. The value is still set (and
	   its "change" event still dispatched) entirely via JavaScript, so
	   this has no effect on the actual date being stored/submitted. */
	pointer-events: none;
}

.cpo-delivery-date-picker-wrap[hidden] {
	display: none;
}

/* BUG FIX (calendar positioning): custom calendar popover, anchored
   with plain CSS to ".cpo-date-toggle-buttons" (position: relative,
   above) so it always renders directly under the Delivery Date
   buttons — never at the page's top-left — regardless of browser/OS.
   Built and populated by cpoInitDateCalendarPopover() in
   assets/js/frontend.js; this is a UI layer only, it does not change
   which date is stored or how it is validated. */
.cpo-date-popover {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	width: 280px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid var(--cpo-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	padding: 12px;
}

.cpo-date-popover[hidden] {
	display: none;
}

.cpo-date-popover-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.cpo-date-popover-title {
	font-weight: 600;
	font-size: 13px;
}

.cpo-date-popover-nav {
	background: none;
	border: 1px solid var(--cpo-border);
	border-radius: 6px;
	width: 28px;
	height: 28px;
	line-height: 1;
	cursor: pointer;
	font-size: 14px;
	color: inherit;
}

.cpo-date-popover-nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.cpo-date-popover-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center;
}

.cpo-date-popover-weekday {
	font-size: 11px;
	color: #767676;
	padding: 4px 0 6px;
}

.cpo-date-popover-day {
	background: none;
	border: 0;
	border-radius: 6px;
	padding: 6px 0;
	font-size: 13px;
	cursor: pointer;
	color: inherit;
}

.cpo-date-popover-day:hover:not(:disabled) {
	background: var(--cpo-accent-soft);
}

.cpo-date-popover-day:disabled {
	color: #cfd2da;
	cursor: default;
}

.cpo-date-popover-day.is-selected {
	background: var(--cpo-accent);
	color: #fff;
}

.cpo-date-popover-day.is-empty {
	visibility: hidden;
}

@media ( max-width: 480px ) {
	.cpo-date-popover {
		right: auto;
		left: 0;
	}
}

/* Add to Cart error (bug-fix pass: safety-net message shown only if
   the "Adding..." state never resolves — see the stuck-state timer in
   cpoInitAddToCartButton() in assets/js/frontend.js). */
.cpo-add-to-cart-error {
	flex-basis: 100%;
	margin: 8px 0 0;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--cpo-danger);
}

/* BUG FIX (green success message): dedicated success banner shown by
   showSuccessMessage() in cpoInitAddToCartButton() (assets/js/frontend.js)
   immediately after CPO_Cart::ajax_add_to_cart() confirms the item is
   genuinely in the WooCommerce cart — "Product added to cart successfully.",
   in green, distinct from the button's own brief colour/text change. */
.cpo-add-to-cart-success {
	flex-basis: 100%;
	margin: 8px 0 0;
	padding: 8px 12px;
	font-size: 0.9em;
	font-weight: 600;
	color: #1e7e34;
	background: #eaf6ec;
	border: 1px solid #c3e6cb;
	border-radius: 6px;
}

/* Delivery Time */

.cpo-delivery-time-select {
	width: 100%;
	max-width: 280px;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid #ddd;
	background: #fff;
}

/* BUG FIX (Delivery Time section disappearing): visual state for the
   always-rendered dropdown when a product has no valid Start/End Time
   window configured (see render_delivery_time_section() in
   includes/class-frontend.php) — clearly disabled rather than looking
   broken or interactive. */
.cpo-delivery-time-select:disabled {
	background: #f4f4f4;
	color: #888;
	cursor: not-allowed;
}

/* Quick Delivery */

.cpo-quick-delivery-section {
	justify-content: flex-start;
}

.cpo-quick-delivery-text {
	margin: 0;
}

.cpo-quick-delivery-link {
	font-weight: 600;
	white-space: nowrap;
	color: var(--cpo-accent);
}

/* Required-field validation */

.cpo-field-error {
	flex-basis: 100%;
	margin: 6px 0 0;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--cpo-danger);
}

.cpo-section-invalid .cpo-radio-list,
.cpo-section-invalid .cpo-photo-input,
.cpo-section-invalid .cpo-delivery-date-input,
.cpo-section-invalid .cpo-delivery-time-select {
	outline: 2px solid var(--cpo-danger);
	outline-offset: 4px;
	border-radius: 6px;
}

/* Responsive: below ~600px every row stacks (label above its
   control) so nothing is ever cramped or forces horizontal scroll;
   the Add-ons grid also collapses to one column on very small screens
   per spec section 14. */
@media ( max-width: 600px ) {
	.cpo-card {
		padding: 16px;
		border-radius: 10px;
	}

	.cpo-option-group {
		justify-content: flex-start;
		flex-direction: column;
		align-items: flex-start;
	}

	.cpo-radio-list {
		justify-content: flex-start;
		width: 100%;
	}

	.cpo-delivery-date-picker-wrap {
		margin-left: 0;
	}

	.cpo-delivery-time-select,
	.cpo-delivery-date-picker-wrap {
		max-width: 100%;
	}
}

@media ( max-width: 420px ) {
	.cpo-checkbox-list {
		grid-template-columns: 1fr;
	}
}

/* Order item configuration display (Cart / Checkout / Order) */

.cpo-order-item-meta--customer {
	margin-top: 6px;
}

.cpo-order-item-meta-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
}

.cpo-order-item-meta-list li {
	margin: 2px 0;
}

/* Message on Cake */

.cpo-message-section .cpo-option-title label {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.cpo-message-input {
	width: 100%;
	max-width: 420px;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid #ddd;
	background: #fff;
	box-sizing: border-box;
}

.cpo-section-invalid .cpo-message-input {
	outline: 2px solid var(--cpo-danger);
	outline-offset: 4px;
	border-radius: 6px;
}