/**
 * Form LOOQ — Jalali/Hijri date picker popover.
 *
 * Only enqueued on a form with a non-Gregorian date field - see
 * Frontend_Form::enqueue_date_assets(). A Gregorian date field uses the
 * native <input type="date"> and needs none of this; the calendar icon on
 * the input itself lives in forms.css so both kinds share it.
 */

/*
 * Month and weekday names are Persian/Arabic script whatever the site language,
 * so the popover defaults to a bundled Vazirmatn (SIL OFL 1.1, see
 * assets/fonts/vazirmatn/README.txt). It follows --looq-font as soon as one is
 * set on the form (or on an Elementor widget), so a chosen form font wins.
 */
@font-face {
	font-family: 'Looq Vazirmatn';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/vazirmatn/vazirmatn-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Looq Vazirmatn';
	font-style: normal;
	font-weight: 500 600;
	font-display: swap;
	src: url('../fonts/vazirmatn/vazirmatn-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Looq Vazirmatn';
	font-style: normal;
	font-weight: 700 900;
	font-display: swap;
	src: url('../fonts/vazirmatn/vazirmatn-700.woff2') format('woff2');
}

.looq-date-control {
	position: relative;
}

.looq-date-icon {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 44px;
	cursor: pointer;
}

.looq-date-popover {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + 6px);
	z-index: 30;
	box-sizing: border-box;
	width: 288px;
	max-width: 92vw;
	padding: 12px;
	background: var(--looq-surface);
	border: 1px solid var(--looq-border);
	border-radius: calc(var(--looq-radius) + 2px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	font-family: var(--looq-font, 'Looq Vazirmatn', Tahoma, sans-serif);
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--looq-text);
	user-select: none;
}

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

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

.looq-date-popover__title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: var(--looq-radius);
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
}

.looq-date-popover__caret {
	width: 0;
	height: 0;
	border-inline: 4px solid transparent;
	border-top: 5px solid var(--looq-muted);
	transition: transform 0.15s ease;
}

.looq-date-popover__title[aria-expanded="true"] .looq-date-popover__caret {
	transform: rotate(180deg);
}

.looq-date-popover__navgroup {
	display: flex;
	gap: 2px;
}

.looq-date-popover__nav {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: var(--looq-radius);
	cursor: pointer;
}

/* Native-style up/down chevrons: up = previous month, down = next month.
   Physical borders on purpose, so RTL does not flip them sideways. */
.looq-date-popover__nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-left: 2px solid var(--looq-text);
	border-top: 2px solid var(--looq-text);
	transform: translate(-50%, -30%) rotate(45deg);
}

.looq-date-popover__nav--next::before {
	transform: translate(-50%, -70%) rotate(225deg);
}

.looq-date-popover__title:hover,
.looq-date-popover__nav:hover,
.looq-date-popover__title:focus-visible,
.looq-date-popover__nav:focus-visible {
	background: var(--looq-hover);
	outline: none;
}

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

.looq-date-popover__weekday {
	padding: 6px 0;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--looq-muted);
}

.looq-date-popover__day {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
}

.looq-date-popover__day.is-outside {
	color: var(--looq-outside);
}

.looq-date-popover__day:hover,
.looq-date-popover__day:focus-visible {
	background: var(--looq-hover);
	outline: none;
}

.looq-date-popover__day.is-today {
	font-weight: 700;
	box-shadow: inset 0 0 0 1.5px var(--looq-primary);
}

.looq-date-popover__day.is-selected,
.looq-date-popover__day.is-selected:hover {
	background: var(--looq-primary);
	color: #fff;
	font-weight: 700;
}

.looq-date-popover__day:focus-visible,
.looq-date-popover__option:focus-visible,
.looq-date-popover__action:focus-visible {
	outline: 2px solid var(--looq-primary);
	outline-offset: 1px;
}

.looq-date-popover__picker {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.looq-date-popover__list {
	max-height: 232px;
	overflow-y: auto;
	padding: 2px;
	border: 1px solid var(--looq-border);
	border-radius: var(--looq-radius);
}

.looq-date-popover__option {
	padding: 8px 10px;
	border-radius: calc(var(--looq-radius) - 2px);
	cursor: pointer;
	text-align: start;
}

.looq-date-popover__option:hover {
	background: var(--looq-hover);
}

.looq-date-popover__option.is-selected {
	background: var(--looq-primary);
	color: #fff;
	font-weight: 700;
}

.looq-date-popover__footer {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--looq-border);
}

.looq-date-popover__action {
	padding: 6px 10px;
	border-radius: var(--looq-radius);
	font-weight: 700;
	color: var(--looq-primary);
	cursor: pointer;
}

.looq-date-popover__action:hover {
	background: var(--looq-hover);
}