/*
Theme Name: Doraan
Description: Child theme of Twenty Twenty-Five for the Doraan book club shop. Persian, right to left, with the Vazirmatn font bundled so no font is loaded from an external server.
Template: twentytwentyfive
Version: 0.2.1
Requires at least: 6.7
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: doraan
*/

/* Colours, type sizes, buttons and links live in theme.json. This file holds
   what theme.json cannot express: block styles, WooCommerce details and the
   booking panel classes the capacity plugin will print. */

/* ---------- Block styles ---------- */

/* Double rule ("jadval"): ink line over a lapis line, taken from the ruling
   around text in Persian manuscripts. Registered in functions.php. */
.wp-block-separator.is-style-jadval {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--accent-1);
	height: 5px;
	background: none;
	opacity: 1;
	width: 100%;
}

/* Wide rules keep the layout's wide size, so they line up with the content
   next to them instead of running out to the page edges. */
.wp-block-separator.is-style-jadval:not(.alignwide, .alignfull) {
	max-width: none;
}

/* Headings the owner writes in a product description, page or post get
   the same double rule underneath, as the section headings in the design.
   Theme-made sections place a jadval separator block instead. */
:is(.wp-block-woocommerce-product-description, .wp-block-post-content) h2::after {
	content: "";
	display: block;
	height: 5px;
	margin-top: 0.5rem;
	border-top: 1px solid var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--accent-1);
}

.wp-block-group.is-style-doraan-card {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 8px;
	padding: 1.5rem;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--accent-1);
	border: 1.5px solid var(--wp--preset--color--accent-1);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-3);
}

/* Native checkboxes and radios (login, filters) in the theme colour */
body {
	accent-color: var(--wp--preset--color--accent-1);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* German legal text inside the Persian page */
.doraan-ltr {
	direction: ltr;
	unicode-bidi: isolate;
}

/* ---------- Header and footer ---------- */

.doraan-header .wp-block-navigation-item__content {
	padding-block: 0.375rem;
}

.doraan-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-1);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent-1);
}

/* Header cart: icon, the word "Cart" (added in functions.php), then the
   count in a lapis circle. WooCommerce floats the count over the icon;
   here it sits after the label instead. */
.doraan-header .wc-block-mini-cart__button {
	padding-inline: 0;
	font-weight: 500;
}

/* Account link in the text colour, like the cart next to it */
.doraan-header .wc-block-customer-account__link {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	text-decoration: none;
}

.doraan-header .wc-block-customer-account__link:hover {
	color: var(--wp--preset--color--accent-1);
}

/* Phone: logo, menu button, account and cart on one row. The account and
   cart words are hidden visually (still read out); the icons stay. */
@media (max-width: 600px) {
	.doraan-header > .alignwide,
	.doraan-header > .alignwide > .wp-block-group {
		flex-wrap: nowrap;
		gap: 1rem;
	}

	.doraan-header .wc-block-customer-account__link .label,
	.doraan-header .doraan-cart-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.doraan-logo img {
		height: 28px;
	}
}

/* Checkout header: "back to cart" stays on one line */
.doraan-back {
	white-space: nowrap;
}

.doraan-back a {
	text-decoration: none;
}

.doraan-back a:hover {
	text-decoration: underline;
}

.doraan-header .wc-block-mini-cart__quantity-badge {
	gap: 0.5rem;
}

.doraan-header .wc-block-mini-cart__icon {
	order: 0;
}

.doraan-cart-label {
	order: 1;
}

.doraan-header .wc-block-mini-cart__badge {
	order: 2;
	position: static;
	transform: none;
	margin: 0;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	/* WooCommerce's script writes inline colours on the count after the page
	   loads (taken from the surrounding text and background), so these need
	   !important to win. */
	background-color: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--surface) !important;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

.doraan-plain-list {
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.doraan-footer .doraan-plain-list a {
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
}

.doraan-footer .doraan-plain-list a:hover {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
}

/* ---------- Home ---------- */

.doraan-facts {
	border-top: 1px solid var(--wp--preset--color--accent-6);
	padding-top: 1.25rem;
}

.doraan-facts p {
	margin: 0;
}

/* Home intro on its own (the left box returns with the blog): full width,
   the lead paragraph kept to a readable line length. */
.doraan-intro .wp-block-heading {
	max-width: 22ch;
}

.doraan-intro > .has-large-font-size {
	max-width: 46rem;
	line-height: 1.9;
}

.doraan-step-num {
	font-size: 2.25rem;
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--accent-1);
	margin-bottom: 0.5rem;
}

.doraan-faq .wp-block-details:last-child {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

/* Question on the start side, a plus or minus on the end side */
.doraan-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	font-size: 1.0625rem;
}

.doraan-faq summary::-webkit-details-marker {
	display: none;
}

.doraan-faq summary::after {
	content: "+";
	flex: none;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--accent-1);
}

.doraan-faq details[open] > summary::after {
	content: "−";
}

.doraan-faq summary:hover {
	color: var(--wp--preset--color--accent-1);
}

.doraan-faq .wp-block-details p {
	color: var(--wp--preset--color--contrast);
	max-width: 760px;
}

/* ---------- Club cards and list ---------- */

/* Category terms (online / in person, city) shown as small tags */
.doraan-tags a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 10px;
	border-radius: 4px;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

/* Programme colours (classes added in functions.php from the category
   name): dark tone for the tag text, light tone for the bar beside the card. */
.doraan-tags a.doraan-tag--dor,
.doraan-tags a.doraan-tag--doraan,
.doraan-tags a.doraan-tag--dorkar {
	background: var(--wp--preset--color--surface);
	border: 1px solid currentColor;
}

.doraan-tags a.doraan-tag--dor { color: var(--wp--preset--color--dor); }
.doraan-tags a.doraan-tag--doraan { color: var(--wp--preset--color--doraan); }
.doraan-tags a.doraan-tag--dorkar { color: var(--wp--preset--color--dorkar); }

.doraan-club-grid .wc-block-product:has(.doraan-tag--dor),
.doraan-club-row:has(.doraan-tag--dor) {
	--doraan-programme: var(--wp--preset--color--dor-light);
}

.doraan-club-grid .wc-block-product:has(.doraan-tag--doraan),
.doraan-club-row:has(.doraan-tag--doraan) {
	--doraan-programme: var(--wp--preset--color--doraan-light);
}

.doraan-club-grid .wc-block-product:has(.doraan-tag--dorkar),
.doraan-club-row:has(.doraan-tag--dorkar) {
	--doraan-programme: var(--wp--preset--color--dorkar-light);
}

.doraan-club-grid .wc-block-product:has(.doraan-tags a[class*="doraan-tag--"]) {
	border-inline-start: 4px solid var(--doraan-programme);
}

.doraan-club-row:has(.doraan-tags a[class*="doraan-tag--"]) {
	padding-inline-start: 14px;
	border-inline-start: 4px solid var(--doraan-programme);
}

.doraan-tags .wp-block-post-terms__separator {
	display: none;
}

.doraan-tags a + a,
.doraan-tags .wp-block-post-terms__separator + a {
	margin-inline-start: 6px;
}

.doraan-club-grid .wc-block-product {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 8px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: start;
}

.doraan-club-grid .wc-block-product > * {
	margin: 0;
}

.doraan-club-grid .wp-block-post-title a,
.doraan-club-list .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.doraan-club-grid .wp-block-post-title a:hover,
.doraan-club-list .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-1);
}

.doraan-club-grid .wc-block-components-product-image img,
.doraan-club-list .wc-block-components-product-image img,
.doraan-club .wc-block-components-product-image img {
	border-radius: 3px;
}

/* "Choose" link styled as an outline button */
.wp-block-read-more.doraan-choose {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.5rem;
	border-radius: 6px;
	border: 1.5px solid var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
	text-decoration: none;
	margin-top: auto;
}

.wp-block-read-more.doraan-choose:hover {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-3);
}

.doraan-club-grid .doraan-choose {
	align-self: stretch;
}

/* Home page club grid: cards of at least 320px, as many per row as fit */
.doraan-club-grid .wc-block-product-template.wc-block-product-template__responsive,
.doraan-club-grid .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 24px;
}

.doraan-clubs > * + * {
	margin-block-start: 28px;
}

.doraan-clubs__head h2 {
	font-size: 1.875rem;
	font-weight: 800;
	margin: 0;
}

.doraan-clubs__head p {
	margin: 0;
}

/* Cover on the start side, details next to it */
.doraan-club-card__top {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 16px;
	align-items: start;
}

.doraan-club-card__top .wc-block-components-product-image {
	margin: 0;
}

.doraan-club-card__top .wc-block-components-product-image img {
	width: 112px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.doraan-club-card__info {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.doraan-club-card__info > * {
	margin: 0;
}

.doraan-club-card__info .wp-block-post-title {
	font-size: 1.3125rem;
	line-height: 1.5;
}

.doraan-club-card__note,
.doraan-club-card__note p {
	margin: 0;
	color: var(--wp--preset--color--accent-4);
	font-size: 0.875rem;
}

.doraan-club-card__price {
	font-size: 0.9375rem;
	font-weight: 600;
}

/* The product price is always per month and seat */
.doraan-club-card__price .wc-block-components-product-price::after {
	content: " در ماه";
}

/* Time slots with next month's free seats (doraan/club-slots) */
.doraan-club-slots {
	list-style: none;
	margin: 0;
	padding: 0;
}

.doraan-club-slots__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--wp--preset--color--accent-6);
	font-size: 0.9375rem;
}

/* "All clubs" link at the end of the section head */
.doraan-clubs__all a {
	font-weight: 600;
	text-decoration: none;
}

.doraan-clubs__all a:hover {
	text-decoration: underline;
}

/* Shop page: one row per club (cover, details, slots, price and button) */
.doraan-shop-head > * {
	margin: 0;
}

.doraan-shop-head .wp-block-query-title {
	font-size: 2.25rem;
	font-weight: 800;
}

.doraan-club-list .wc-block-product {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	padding: 24px 0;
	margin: 0;
}

.doraan-club-list .wc-block-product[hidden],
.doraan-club-slots__row[hidden] {
	display: none;
}

.doraan-club-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	margin: 0;
}

.doraan-club-row > * {
	margin: 0;
}

.doraan-club-row__cover {
	flex: none;
	width: 72px;
}

.doraan-club-row__cover img {
	width: 72px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.doraan-club-row__info {
	flex: 2 1 260px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.doraan-club-row__info > * {
	margin: 0;
}

.doraan-club-row__info .wp-block-post-title {
	font-size: 1.3125rem;
	line-height: 1.5;
}

/* Slots as light pills on the shop page */
.doraan-club-row__slots {
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.doraan-club-row__slots .doraan-club-slots__row {
	border-top: 0;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--wp--preset--color--cream);
	gap: 16px;
}

.doraan-club-row__end {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.doraan-club-row__price {
	font-size: 1.125rem;
	font-weight: 700;
}

.doraan-club-row__price .wc-block-components-product-price::after {
	content: " / ماه";
	color: var(--wp--preset--color--accent-4);
	font-size: 0.875rem;
	font-weight: 400;
}

.wp-block-read-more.doraan-choose.is-primary {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

.wp-block-read-more.doraan-choose.is-primary:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

/* Shop filter bar (doraan/club-filters) */
.doraan-club-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
	padding: 20px;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 8px;
	/* Padding inside the wide size, so the box lines up with the title */
	box-sizing: border-box;
}

.doraan-club-filters .doraan-club-filters__label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent-4);
}

/* WooCommerce gives every label on its pages a bottom margin
   (.woocommerce-page label), which lifts the checkbox above the segmented
   buttons. The selector below is more specific so the margin is removed. */
.doraan-club-filters > *,
.doraan-club-filters__field > * {
	margin: 0;
}

.doraan-club-filters label.doraan-club-filters__free {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	margin: 0;
	cursor: pointer;
}

.doraan-club-filters label.doraan-club-filters__free[hidden] {
	display: none;
}

.doraan-club-filters__free input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--wp--preset--color--accent-1);
}

.doraan-club-filters__count {
	margin-inline-start: auto;
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent-4);
}

.doraan-club-filters__empty {
	padding: 40px 0;
	color: var(--wp--preset--color--accent-4);
}

/* Segmented buttons */
.doraan-seg {
	display: inline-flex;
	flex-wrap: wrap;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.doraan-seg__btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-inline-start: 1px solid var(--wp--preset--color--accent-6);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.doraan-seg__btn:first-child {
	border-inline-start: 0;
}

.doraan-seg__btn:hover {
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--contrast);
}

.doraan-seg__btn.is-on {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--surface);
	font-weight: 600;
}

/* Seat counts, shared by the plugin's output */
.doraan-seats {
	font-size: 0.9375rem;
}

.doraan-seats.is-low {
	color: var(--wp--preset--color--amber);
	font-weight: 600;
}

.doraan-seats.is-full {
	color: var(--wp--preset--color--accent-4);
}

/* Next-month panel on the home page (doraan/next-month block from the
   capacity plugin) */
.doraan-next-month {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 8px;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.doraan-next-month__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.doraan-next-month__title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.doraan-next-month__start {
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
}

.doraan-next-month .wp-block-separator {
	margin: 0;
}

.doraan-next-month__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.doraan-next-month__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.25rem 1rem;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.doraan-next-month__row:hover .doraan-next-month__name {
	color: var(--wp--preset--color--accent-1);
}

.doraan-next-month__name {
	font-weight: 700;
}

.doraan-next-month__meta,
.doraan-next-month__price {
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
}

.doraan-next-month__all {
	font-weight: 600;
}

@media (max-width: 600px) {
	.doraan-club-row {
		flex-wrap: wrap !important;
	}

	.doraan-club-row__end {
		flex-basis: 100% !important;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

/* ---------- Club page ---------- */

/* "Per person per month" right under the price */
.doraan-club__head .wp-block-woocommerce-product-price + p {
	margin-top: 0.25rem;
}

/* Phone: the columns stack, so keep the cover book-sized instead of
   letting it fill the screen width */
@media (max-width: 781px) {
	.doraan-club__head > .wp-block-column:first-child {
		max-width: 140px;
	}
}

.doraan-club__panel .doraan-booking {
	padding: 0;
	overflow: hidden;
}

.doraan-booking > .wp-block-heading,
.doraan-booking > p {
	padding-inline: 1.5rem;
}

.doraan-booking > .wp-block-heading {
	padding-top: 1.375rem;
	margin-bottom: 0;
}

.doraan-booking > p:last-child {
	padding-bottom: 1.25rem;
}

/*
 * Booking panel classes. The capacity plugin prints this markup inside the
 * add-to-cart form; the theme only styles it.
 *
 *   .doraan-booking__step            one numbered step (time, months, people)
 *   .doraan-booking__step-title      its heading, with .doraan-booking__num
 *   .doraan-booking__option          a time slot button; .is-selected
 *   .doraan-booking__months          grid of month buttons
 *   .doraan-booking__month           a month; .is-selected (start), .is-in-range,
 *                                  [disabled] or .is-closed for closed months
 *   .doraan-booking__count           1 to 4 month segmented control
 *   .doraan-booking__person          one name field per seat
 *   .doraan-booking__add             "one more seat" link button
 *   .doraan-booking__waitlist        shown when the slot and month is full
 *   .doraan-booking__total           price line and add-to-cart button
 */
.doraan-booking__step {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.375rem 1.5rem;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.doraan-booking__step-title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
}

.doraan-booking__num {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 13px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
	font-size: 0.8125rem;
	font-weight: 700;
}

.doraan-booking__option {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 52px;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.doraan-booking__option:hover,
.doraan-booking__month:hover {
	border-color: var(--wp--preset--color--accent-1);
}

.doraan-booking__option.is-selected {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-2);
}

.doraan-booking__months {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
}

.doraan-booking__month {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 0.375rem 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	line-height: 1.5;
	cursor: pointer;
}

.doraan-booking__month small {
	font-size: 0.75rem;
	color: var(--wp--preset--color--accent-4);
}

.doraan-booking__month.is-in-range {
	border-color: var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-2);
}

.doraan-booking__month.is-selected {
	border-color: var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--surface);
}

.doraan-booking__month.is-selected small {
	color: var(--wp--preset--color--surface);
}

.doraan-booking__month[disabled],
.doraan-booking__month.is-closed {
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-4);
	border-style: dashed;
	cursor: not-allowed;
}

.doraan-booking__count {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.doraan-booking__count button {
	font: inherit;
	min-height: 44px;
	border: 0;
	border-inline-start: 1px solid var(--wp--preset--color--accent-6);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.doraan-booking__count button:first-child {
	border-inline-start: 0;
}

.doraan-booking__count button.is-selected {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--surface);
	font-weight: 600;
}

.doraan-booking__count button[disabled] {
	color: var(--wp--preset--color--border);
	background: var(--wp--preset--color--cream);
	cursor: not-allowed;
}

.doraan-booking__person label {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	margin-bottom: 0.375rem;
}

.doraan-booking__add {
	font: inherit;
	background: none;
	border: 0;
	padding: 0.375rem 0;
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
	text-align: start;
	cursor: pointer;
}

.doraan-booking__add[disabled] {
	color: var(--wp--preset--color--border);
	cursor: not-allowed;
}

.doraan-booking__waitlist {
	background: rgba(246, 196, 83, 0.25);
	border-radius: 6px;
	padding: 0.875rem 1rem;
	color: var(--wp--preset--color--contrast);
}

.doraan-booking__total {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: 1.25rem 1.5rem 1.5rem;
	background: var(--wp--preset--color--cream);
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

/* Phone: keep the price and button reachable at the bottom of the screen */
@media (max-width: 781px) {
	.doraan-booking__total {
		position: sticky;
		bottom: 0;
		z-index: 5;
		box-shadow: 0 -4px 16px rgba(15, 61, 46, 0.06);
	}
}

/* ---------- Form fields (WooCommerce and core) ---------- */

.doraan-booking input[type="text"],
.doraan-booking input[type="email"],
.woocommerce form .input-text,
.woocommerce form select {
	min-height: 48px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 0 0.875rem;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	width: 100%;
	/* Keep padding and border inside the 100% width, or the field runs past
	   the panel edge. min-width lets it shrink beside a button in a flex row. */
	box-sizing: border-box;
	min-width: 0;
}

/* ---------- Cart, checkout, account ---------- */

.wc-block-cart,
.wc-block-checkout {
	--doraan-radius: 8px;
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-cart .wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	background: var(--wp--preset--color--cream);
	border-radius: var(--doraan-radius);
}

/* Cart totals as a white card, like the order summary on the checkout */
.wc-block-cart .wc-block-cart__sidebar {
	align-self: flex-start;
	border: 1px solid var(--wp--preset--color--accent-6);
	padding: 16px;
}

.wc-block-components-button:not(.is-link) {
	border-radius: 6px;
	font-weight: 600;
}

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select {
	border-color: var(--wp--preset--color--border);
	border-radius: 6px;
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-2);
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.625rem 0.875rem;
	border-radius: 6px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-3);
	font-weight: 600;
}

/*
 * Seat hold time left (plugin doraan-capacity): a light lapis box above the
 * cart ("Cart" artboard), a muted line above the checkout ("Checkout"
 * artboard). The plugin's script counts it down.
 */
.doraan-hold[hidden] {
	display: none;
}

.doraan-hold p {
	margin: 0;
}

.doraan-hold--box {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-block-end: 24px;
	padding: 16px 18px;
	border-radius: 6px;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-3);
}

.doraan-hold--box svg {
	flex: none;
	margin-block-start: 3px;
}

.doraan-hold:not(.doraan-hold--box) {
	margin-block-end: 20px;
	color: var(--wp--preset--color--accent-4);
}

.doraan-hold__time {
	font-variant-numeric: tabular-nums;
}

/* Order and booking status labels (account page, plugin output) */
.doraan-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

.doraan-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: currentColor;
}

.doraan-status.is-paid { color: var(--wp--preset--color--teal); }
.doraan-status.is-pending { color: var(--wp--preset--color--amber); }
.doraan-status.is-refunded { color: var(--wp--preset--color--accent-4); }

/*
 * Checkout, following the "Checkout" artboard of the approved design:
 * a double rule over the form, numbered steps separated by rules, 48px
 * fields, payment methods as bordered rows, a full-width order button and
 * the order summary as a white card. Step numbers need the checkout block's
 * "showFormStepNumbers" (set by scripts/settings/2026-10-21-checkout-design.sh).
 */
.wc-block-checkout__main::before {
	content: "";
	display: block;
	height: 5px;
	border-top: 1px solid var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--accent-1);
}

/* The express payment box puts its title «پرداخت سریع» half above its own
   top edge, so without room the double rule above runs through the text. */
.wc-block-checkout__main .wc-block-components-express-payment--checkout {
	margin-top: 32px;
}

/* Four classes, so WooCommerce's phone rule (".is-mobile ... padding: 0")
   doesn't take the space and rule between steps away. */
.wc-block-checkout .wc-block-checkout__main .wc-block-checkout__form .wc-block-components-checkout-step {
	margin: 0;
	padding: 28px 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.wc-block-checkout__main .wc-block-components-checkout-step__heading-container {
	margin-bottom: 16px;
}

.wc-block-checkout__main .wc-block-components-checkout-step__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 1.1875rem;
	font-weight: 700;
}

.wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
	content: counter(checkout-step, persian);
	content: counter(checkout-step, persian) / "";
	position: static;
	transform: none;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 13px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
}

/* WooCommerce indents numbered steps to make room for the number */
.wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__container,
.wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content {
	padding-inline-start: 0;
	margin-inline-start: 0;
	border-inline-start: 0;
}

/* ...and draws a line down the side of each step, which the number no
   longer sits on */
.wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content::before,
.wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__description::before {
	display: none;
}

.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
	min-height: 48px;
	background: var(--wp--preset--color--surface);
}

.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 1px;
	box-shadow: none;
}

/* Payment methods: one bordered row each, the chosen one tinted */
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option::after {
	display: none;
}

.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
	box-shadow: none;
}

.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-2);
}

.wc-block-checkout .wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--accent-1);
}

.wc-block-checkout .wc-block-components-radio-control__input:checked::before {
	background: var(--wp--preset--color--accent-1);
}

.wc-block-checkout .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
}

.wc-block-checkout .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--surface);
}

/* Terms and the order button: last step, no rule under it */
.wc-block-checkout__terms {
	margin: 28px 0 16px;
}

.wc-block-checkout__actions_row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 52px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
	font-size: 1.125rem;
	font-weight: 700;
}

.wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

/* Order summary: a white card, light rules between lines, a large total.
   Germanized stretches the sidebar to the form's height so its order
   button can stay in view while scrolling, so the card is the summary
   block, not the stretched sidebar (which would be a tall empty box). */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
	background: transparent;
}

.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
	background: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--accent-6);
	border-radius: var(--doraan-radius);
}

.wc-block-checkout__sidebar .wc-gzd-checkout-submit {
	background: var(--wp--preset--color--base);
}

.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-order-summary-item {
	border-color: var(--wp--preset--color--accent-6);
}

.wc-block-checkout__sidebar .wc-block-components-totals-item {
	align-items: center;
	font-size: 0.9375rem;
}

/* Label and amount share one line height, so Persian text and Latin
   digits sit on the same line. */
.wc-block-checkout__sidebar .wc-block-components-totals-item__label,
.wc-block-checkout__sidebar .wc-block-components-totals-item__value {
	line-height: 1.5;
}

/* The total's box already has its own border; centre the total in it. */
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
	align-items: center;
	padding-block: 8px;
}

.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.3125rem;
	font-weight: 800;
	line-height: 1.4;
}

/*
 * Support step (plugin doraan-support). It uses WooCommerce's step markup,
 * so it takes the step styles above; these classes style its contents.
 *
 *   .doraan-support__options   none, presets and "other" as chips; .is-selected
 *   .doraan-support__other     amount field and its button, for "other"
 *   .doraan-support__error     message when an amount can't be used
 */
.doraan-support__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.doraan-support__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.doraan-support__option {
	min-height: 44px;
	min-width: 76px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	cursor: pointer;
}

.doraan-support__option:hover {
	border-color: var(--wp--preset--color--accent-1);
}

.doraan-support__option.is-selected {
	border-color: var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--surface);
	font-weight: 600;
}

.doraan-support__option[disabled] {
	cursor: wait;
}

.doraan-support__other {
	max-width: 320px;
}

.doraan-support__other label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.doraan-support__row {
	display: flex;
	gap: 8px;
}

.doraan-support__row input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.doraan-support__row input:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 1px;
}

.doraan-support__apply {
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-1);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.doraan-support__apply:hover {
	background: var(--wp--preset--color--accent-2);
}

/* Text under the amounts: smaller and muted */
.doraan-support__note {
	margin-top: 1rem;
	color: var(--wp--preset--color--accent-4);
	font-size: 0.8125rem;
	line-height: 1.9;
}

.doraan-support__note p {
	margin: 0 0 0.5rem;
}

.doraan-support__note p:last-child {
	margin-bottom: 0;
}

.doraan-support__error {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--amber);
}

/* Header logo (pattern doraan/site-logo). Height fixed, width follows the image. */
.doraan-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.doraan-logo img {
	display: block;
	height: 32px;
	width: auto;
	max-width: 240px;
}

/* ---------- Light palette: footer and highlight ---------- */

/* Dark green footer with white text. The footer part asks for the grey
   surface (accent-5), so this overrides it. */
.doraan-footer.has-background {
	background-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--surface);
}

.doraan-footer .wp-block-heading,
.doraan-footer a {
	color: var(--wp--preset--color--surface);
}

.doraan-footer a:hover {
	color: var(--wp--preset--color--gold);
}

.doraan-footer .has-accent-4-color {
	color: rgba(255, 255, 255, 0.8) !important;
}

.doraan-footer .wp-block-separator.is-style-jadval {
	border-top-color: rgba(255, 255, 255, 0.6);
	border-bottom-color: var(--wp--preset--color--gold);
}

.doraan-footer .wp-block-group[style*="border-top"] {
	border-top-color: rgba(255, 255, 255, 0.2) !important;
}

/* Highlight behind text: gold at 25% */
mark {
	background: rgba(246, 196, 83, 0.25);
	color: var(--wp--preset--color--contrast);
}