/**
 * Product Page Calendar — single-product integration styles.
 *
 * v1.x — INLINE MULTI-SELECT.
 *
 * Loaded by `Dior_Product_Calendar_Render::enqueue_assets()` on WC single-
 * product pages whose product has an associated event. The calendar now
 * lives directly inside `.entry-summary` (rendered via the
 * `woocommerce_single_product_summary` hook at priority 35) as an inline
 * multi-select picker — no modal pop-up, no CTA button. The styles below
 * are scoped under `.dior-product-calendar-wrapper` so they never leak
 * into the Elementor calendar widget (which keeps its own modal styles).
 *
 * Layout:
 *   .dior-product-calendar-wrapper
 *     └─ .dior-product-calendar
 *          ├─ .dior-product-calendar__rules           (optional)
 *          ├─ .dior-product-calendar__counter          (3 colour states)
 *          ├─ .dior-product-calendar__clear            (reset, optional)
 *          └─ .dior-calendar                           (the month grid)
 *               └─ .dior-calendar__event-chip.is-selected
 *
 * @package Diorarteestudios_Addons
 */

/* =========================================================================
   Wrapper — used as the visual root for every state below. The wrapper is
   block-level so it stretches the full column width and stacks below the
   Add-to-Cart form in entry-summary.
   ========================================================================= */

.dior-product-calendar-wrapper {
	margin: 1.25em 0 0.5em;
	clear: both;
}

.dior-product-calendar-wrapper[hidden] {
	/* Defensive: if the JS promotion flow hides the wrapper before moving
	   it into the product column, never let it paint (defense in depth
	   against any future child leaking in). */
	display: none !important;
}

/* =========================================================================
   Inner card — soft border + light background so the calendar visually
   anchors itself inside entry-summary without overpowering the price /
   add-to-cart block above.
   ========================================================================= */

.dior-product-calendar {
	background: #fafafa;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-radius: 8px;
	padding: 1em 1em 1.1em;
	box-sizing: border-box;
}

.dior-product-calendar__rules {
	margin: 0 0 0.85em;
	padding: 0.65em 0.85em;
	background: #eff6ff;
	border: 1px solid #3b82f6;
	border-radius: 6px;
	color: #1e3a8a;
	font-size: 0.9em;
	line-height: 1.4;
}

/* =========================================================================
   Status row — counter on the left, "Clear selection" button on the
   right. One-line flex container so the picker stays compact even when
   the clickable days grow long.
   ========================================================================= */

.dior-product-calendar__status {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.85em;
}

/* Counter — three colour states that mirror the picker status. */
.dior-product-calendar__counter {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0.7em 0.9em;
	border-radius: 6px;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.dior-product-calendar__clear{
	height: 35px!important;
    width: 35px!important;
    font-size: 30px!important;
	color: #000000 !important;
    font-family: "Fira Sans", Sans-serif;
    font-weight: 400;
    background: transparent !important;
    border: 1px solid #000000;
    line-height: 20px;
    border-radius: 3px !important;
    cursor: pointer;
    padding: 0 0 !important;
    box-shadow: .9px -1px 0 0 #000, 1.5px -2px 0 0 #000, 2.5px -3px 0 0 #000, 3.5px -4px 0 0 #000;
    transition: all .3s;
}

.dior-product-calendar__clear:hover{
	background: #000000 !important;
	border-color: #000 !important;
    color: #ffffff !important;
    box-shadow: none;
}

/* Empty state — neutral, mirrors the "instructions" state. */
.dior-product-calendar__counter--empty {
	background: #f3f4f6;
	color: #4b5563;
	border: 1px solid #e5e7eb;
}

/* Partial — encourages the customer to keep picking. */
.dior-product-calendar__counter--partial {
	background: #fef3c7;
	color: #92400e;
	border: 1px solid #fcd34d;
}

/* Ready — the count matches; visual "go" signal. */
.dior-product-calendar__counter--ready {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #10b981;
}

/* v1.x — Triggered by `flashCap()` / form-submit guard when the customer
   tries to add with too few / too many days. Brief shake + flash to draw
   attention. */
.dior-counter--flash {
	animation: dior-counter-flash 0.55s ease-in-out;
}

@keyframes dior-counter-flash {
	0%, 100% { transform: translateX( 0 ); }
	25%      { transform: translateX( -6px ); }
	75%      { transform: translateX( 6px ); }
}

/* =========================================================================
   Clear-selection button — minimal X icon aligned to the right of the
   counter. Hidden until the customer has picked at least one date so the
   row stays compact while the picker is empty.
   ========================================================================= */

.dior-product-calendar__clear {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	height: 2.2em;
	padding: 0;
	background: transparent;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	color: #6b7280;
	font-size: 1.15em;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.dior-product-calendar__clear:hover,
.dior-product-calendar__clear:focus-visible {
	background: #f3f4f6;
	border-color: #9ca3af;
	color: #111827;
	outline: none;
}

.dior-product-calendar__clear .dior-product-calendar__clear-icon {
	display: block;
	line-height: 1;
	transform: translateY( -1px );
}

.dior-product-calendar__clear[hidden] {
	display: none !important;
}

/* =========================================================================
   Calendar grid — the same `.dior-calendar` widget the Elementor version
   uses, just slightly compacted to fit inside the product summary column.
   ========================================================================= */

.dior-product-calendar .dior-calendar {
	font-size: 14px;
	border: 1px solid rgba( 0, 0, 0, 0.06 );
	border-radius: 6px;
	padding: 0.5em;
	background: #ffffff;
	box-sizing: border-box;
}

.dior-product-calendar .dior-calendar__grid {
	min-height: 220px;
}

/* =========================================================================
   Selected-day state — multi-select.
   The calendar JS toggles `.is-selected` on BOTH the day cell (so the
   entire day lights up) AND the chip itself (so the visual "checkmark"
   we already have keeps working). Both are needed because some days only
   have one chip and the chip alone is too small to read at a glance.
   ========================================================================= */

.dior-product-calendar .dior-calendar__day.is-selected,
.dior-product-calendar .dior-calendar__event-chip.is-selected {
	background: #ecfdf5 !important;
	box-shadow: inset 0 0 0 2px #10b981;
}

.dior-product-calendar .dior-calendar__event-chip.is-selected {
	color: #065f46;
	font-weight: 700;
}

.dior-product-calendar .dior-calendar__event-chip.is-selected::after {
	content: '✓';
	display: inline-block;
	margin-left: 0.4em;
	font-weight: 700;
	color: #065f46;
}

/* Days outside the configured booking window must look un-clickable. The
   calendar JS still fires click handlers on them, but we style them as
   disabled so the customer gets visual feedback. The window end is read
   via `data-window-end` on the wrapper — we use it via attribute selector
   only as a structural hint; the real cap is enforced in JS + PHP. */
.dior-product-calendar .dior-calendar__event-chip[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* =========================================================================
   Add-to-Cart button locked state — applied when the customer hasn't yet
   selected the required count of days. Mirrors the previous CSS so any
   theme that already styles `.dior-add-to-cart-locked` keeps working.
   ========================================================================= */

.dior-add-to-cart-locked,
button.single_add_to_cart_button.dior-add-to-cart-locked,
button.single_add_to_cart_button[disabled].dior-add-to-cart-locked {
	opacity: 0.55;
	cursor: not-allowed;
}

/* When the form has the `dior-needs-day` class the add-to-cart button is
   visually muted even without the JS-toggled `disabled` attribute. */
form.dior-needs-day .single_add_to_cart_button:not( .dior-add-to-cart-locked ) {
	opacity: 0.75;
}

/* =========================================================================
   Cart row meta — the multi-date cart line shows a list of dates under the
   product name. The legacy single-date path still renders a single
   `<small>` line; the new path renders a `<ul>` so the markup is
   self-describing.
   ========================================================================= */

.dior-cart-event-dates {
	margin: 0.35em 0 0;
	padding-left: 1.2em;
	list-style: disc;
	font-size: 0.85em;
	color: #4b5563;
}

.dior-cart-event-dates li {
	margin: 0.1em 0;
}

body.dior-product-has-event .single_add_to_cart_button,
body.dior-product-has-event .related.products .product_type_simple.add_to_cart_button {
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight);
    text-transform: var(--e-global-typography-accent-text-transform);
    font-weight: 500;
    text-transform: uppercase;
    color: #000000!important;
	background-color: var(--e-global-color-accent)!important;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #000000!important;
    border-radius: 3px 3px 3px 3px;
    padding: 12px 16px 12px 16px;
    box-shadow: .9px -1px 0 0 #000, 1.5px -2px 0 0 #000, 2.5px -3px 0 0 #000, 3.5px -4px 0 0 #000, 4.5px -5px 0 0 #000, 5.5px -6px 0 0 #000, 6.5px -7px 0 0 #000, 7.5px -8px 0 0 #000, 8.5px -9px 0 0 #000, 9.5px -10px 0 0 #000;
	transition: all .3s;
}

body.dior-product-has-event .single_add_to_cart_button:not(.dior-add-to-cart-locked):hover,
body.dior-product-has-event .related.products .product_type_simple.add_to_cart_button:hover {
	box-shadow: none;
}

body.dior-product-has-event .summary.entry-summary .product_meta{
	display: none;
}

body.dior-product-has-event .woocommerce-product-gallery__wrapper {
	margin-top: 12px!important;
}

body.dior-product-has-event .related.products {
	clear: both;
}

body.dior-product-has-event .related.products .woocommerce-loop-product__title {
	color: #000000;
}

/* =========================================================================
   Responsive — collapse spacing on narrow viewports so the calendar +
   counter + form still fit comfortably on a phone.
   ========================================================================= */

@media ( max-width: 480px ) {
	.dior-product-calendar {
		padding: 0.85em 0.85em 1em;
	}

	.dior-product-calendar__counter {
		font-size: 0.9em;
	}

	.dior-product-calendar .dior-calendar {
		font-size: 13px;
	}
}