/**
 * Cart and checkout.
 *
 * Both pages are built from WooCommerce's Cart and Checkout blocks, which
 * arrive with a design of their own: 13px totals, 4px corners, a dark grey
 * button and #14181f for every piece of type on the page. None of that is
 * this site. What follows is the same markup wearing the site's tokens.
 *
 * Selectors carry a .wc-block-cart / .wc-block-checkout ancestor throughout.
 * The blocks' own rules are single-class, and this stylesheet cannot rely on
 * load order: WooCommerce enqueues its block styles on its own schedule.
 *
 * @package TourismMonth
 */

/* --- The page itself ------------------------------------------------------ */

.woocommerce-cart .page-article__header,
.woocommerce-checkout .page-article__header {
	margin-block-end: var(--sp-6);
	padding-block-end: var(--sp-5);
	border-block-end: 1px solid var(--c-line);
}

/* The prose rules in main.css are for a page of text. A cart is not one. */
.woocommerce-cart .page-article__content > * + *,
.woocommerce-checkout .page-article__content > * + * {
	margin-block-start: 0;
}

/* --- Headings ------------------------------------------------------------- */

.woocommerce-cart .wc-block-cart .wc-block-components-title,
.woocommerce-checkout .wc-block-checkout .wc-block-components-title,
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__title,
.woocommerce-cart .wc-block-cart .wc-block-cart__totals-title {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 800;
	color: var(--c-brand);
	letter-spacing: -0.01em;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__description,
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__heading-content {
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
}

/* A hairline between the steps, so the form reads as a sequence rather than
   one long column of fields. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step {
	margin-block-end: var(--sp-6);
	padding-block-end: var(--sp-6);
	border-block-end: 1px solid var(--c-line);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step:last-of-type {
	border-block-end: 0;
}

/* --- Fields --------------------------------------------------------------- */

.woocommerce-cart .wc-block-cart .wc-block-components-text-input input[type="text"],
.woocommerce-cart .wc-block-cart .wc-block-components-text-input input[type="email"],
.woocommerce-cart .wc-block-cart .wc-block-components-text-input input[type="tel"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input[type="text"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input[type="email"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input[type="tel"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input[type="number"],
.woocommerce-cart .wc-block-cart .wc-blocks-components-select__select,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select__select,
.woocommerce-checkout .wc-block-checkout .wc-block-components-textarea {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: #fff;
	color: var(--c-ink);
	font-family: inherit;
	font-size: var(--fs-base);
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

/* The teal is the site's focus colour everywhere else. */
.woocommerce-cart .wc-block-cart .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input:focus,
.woocommerce-cart .wc-block-cart .wc-blocks-components-select__select:focus,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select__select:focus,
.woocommerce-checkout .wc-block-checkout .wc-block-components-textarea:focus {
	border-color: var(--c-logo-teal);
	box-shadow: 0 0 0 3px rgb(0 170 203 / 25%);
	outline: none;
}

/* The label floats inside the field and sits on the value once it has one, so
   it has to be quieter than the thing it names. */
.woocommerce-cart .wc-block-cart .wc-block-components-text-input label,
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input label,
.woocommerce-cart .wc-block-cart .wc-blocks-components-select__label,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select__label {
	color: var(--c-ink-soft);
	font-family: inherit;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input.is-active label,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select__label {
	font-size: var(--fs-xs);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-validation-error,
.woocommerce-cart .wc-block-cart .wc-block-components-validation-error {
	font-size: var(--fs-xs);
}

/* --- Checkboxes and radios ------------------------------------------------ */

.woocommerce-cart .wc-block-cart .wc-block-components-checkbox__input[type="checkbox"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox__input[type="checkbox"] {
	border: 1.5px solid var(--c-ink-soft);
	border-radius: 5px;
	transition: background 0.14s ease, border-color 0.14s ease;
}

.woocommerce-cart .wc-block-cart .wc-block-components-checkbox__input[type="checkbox"]:checked,
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--c-brand);
	border-color: var(--c-brand);
}

.woocommerce-cart .wc-block-cart .wc-block-components-checkbox__mark,
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox__mark {
	fill: #fff;
}

.woocommerce-cart .wc-block-cart .wc-block-components-checkbox__input[type="checkbox"]:focus,
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox__input[type="checkbox"]:focus {
	box-shadow: 0 0 0 3px rgb(0 170 203 / 30%);
	outline: none;
}

.woocommerce-cart .wc-block-cart .wc-block-components-checkbox__label,
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox__label {
	color: var(--c-ink);
	font-size: var(--fs-sm);
}

/* Shipping and payment are radio lists. Same treatment: the brand marks the
   chosen one, and the panel it sits in picks up the site's corner. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option {
	border-radius: var(--radius);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__input:checked {
	border-color: var(--c-brand);
	color: var(--c-brand);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option {
	accent-color: var(--c-brand);
}

/* --- The order summary ---------------------------------------------------- */

.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block,
.woocommerce-cart .wc-block-cart .wc-block-cart__totals-title + *,
.woocommerce-cart .wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
	padding: var(--sp-5) var(--sp-5) var(--sp-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	/* Warmer and stronger than --c-bg-alt (#f9f5ea) so the summary panel
	   stands out from the white form beside it — WCAG AA needs ≥ 3:1 for
	   non-text contrast against adjacent surfaces. */
	background: #f2edd9;
}

.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title.wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text,
.woocommerce-cart .wc-block-cart .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title.wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 800;
	color: var(--c-brand);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name,
.woocommerce-cart .wc-block-cart .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-weight: 700;
	color: var(--c-brand);
}

/* The departure - the date and the hour - is the one line on this page that
   the visitor has to check, so it is not grey 13px type. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-product-details__name,
.woocommerce-cart .wc-block-cart .wc-block-components-product-details__name {
	color: var(--c-ink-soft);
	font-style: normal;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-product-details__value,
.woocommerce-cart .wc-block-cart .wc-block-components-product-details__value {
	color: var(--c-ink);
	font-weight: 600;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__quantity,
.woocommerce-cart .wc-block-cart .wc-block-components-order-summary-item__quantity {
	border-color: var(--c-brand);
	background: var(--c-brand);
	color: #fff;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__image img,
.woocommerce-cart .wc-block-cart .wc-block-components-order-summary-item__image img {
	border-radius: var(--radius);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item__label,
.woocommerce-cart .wc-block-cart .wc-block-components-totals-item__label,
.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item__value,
.woocommerce-cart .wc-block-cart .wc-block-components-totals-item__value {
	font-size: var(--fs-sm);
	color: var(--c-ink);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item__description,
.woocommerce-cart .wc-block-cart .wc-block-components-totals-item__description {
	font-size: var(--fs-xs);
	color: var(--c-ink-soft);
}

/* The sum to pay. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--c-brand);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-wrapper,
.woocommerce-cart .wc-block-cart .wc-block-components-totals-wrapper {
	border-color: rgb(8 50 88 / 12%);
}

/* The coupon disclosure.

   WooCommerce lays this out as a block button with the chevron absolutely
   positioned, and on the cart the wrapper's padding is lopsided (20px over
   the text, 8px under it). Between the two, the label sat high in the row and
   the chevron lower than it, so the two did not line up. Flexing the button
   puts label and chevron on one centred line, and the icon is pulled back
   into that flow rather than floated over it. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-panel__button,
.woocommerce-cart .wc-block-cart .wc-block-components-panel__button {
	display: flex;
	/* row-reverse, so the label takes the right edge (where an RTL reader
	   starts) and the chevron sits at the left. The markup order is
	   [chevron, label]; reversing the row puts the label first visually and
	   pushes the chevron to the far side. */
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	padding-inline: 0;
	color: var(--c-brand);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-panel__button > svg,
.woocommerce-cart .wc-block-cart .wc-block-components-panel__button > svg {
	position: static;
	margin: 0;
	transform: none;
}

/* The wrapper's own padding was uneven; even it out so the label reads as
   centred within the row, and open up the space beneath the separator so the
   coupon row is not crowded against the total that follows it. */
.woocommerce-cart .wc-block-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	padding-block: 14px 20px;
	margin-block-end: 10px;
}

/* --- Buttons -------------------------------------------------------------- */

.woocommerce-cart .wc-block-cart .wc-block-components-button:not(.is-link),
.woocommerce-checkout .wc-block-checkout .wc-block-components-button:not(.is-link) {
	border-radius: var(--radius-pill);
	background: var(--c-brand);
	color: #fff;
	font-family: inherit;
	font-size: var(--fs-base);
	font-weight: 700;
	transition: background 0.18s ease, transform 0.18s ease;
}

.woocommerce-cart .wc-block-cart .wc-block-components-button:not(.is-link):hover,
.woocommerce-checkout .wc-block-checkout .wc-block-components-button:not(.is-link):hover {
	background: var(--c-brand-dark);
	color: #fff;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-place-order-button {
	min-height: 56px;
}

/* The coupon's "apply" sits next to a field and should not shout. */
.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon__button,
.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon__button {
	font-size: var(--fs-sm);
}

.woocommerce-cart .wc-block-cart .wc-block-components-button.is-link,
.woocommerce-checkout .wc-block-checkout .wc-block-components-button.is-link {
	color: var(--c-brand);
}

/* --- Notices -------------------------------------------------------------- */

.woocommerce-checkout .wc-block-checkout .wc-block-components-notice-banner,
.woocommerce-cart .wc-block-cart .wc-block-components-notice-banner {
	border-radius: var(--radius);
	font-size: var(--fs-sm);
}

.woocommerce-checkout .wc-block-checkout .wc-block-checkout__guest-checkout-notice {
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
}

/* --- Terms, and the line under the button --------------------------------- */

.woocommerce-checkout .wc-block-checkout .wc-block-checkout__terms {
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}

.woocommerce-checkout .wc-block-checkout .wc-block-checkout__terms a,
.woocommerce-cart .wc-block-cart .wc-block-components-product-name {
	color: var(--c-brand);
}

/* --- The cart's own furniture --------------------------------------------- */

.woocommerce-cart .wc-block-cart .wc-block-cart-item__product-name,
.woocommerce-cart .wc-block-cart .wc-block-components-product-name {
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: 700;
}

.woocommerce-cart .wc-block-cart .wc-block-cart-item__image img {
	border-radius: var(--radius);
}

.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector {
	border-radius: var(--radius-pill);
	border-color: var(--c-line);
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items th {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--c-ink-soft);
}

/* The empty cart, which is a heading and a shop link and wants to look like
   the rest of the site rather than like a 404. */
.woocommerce-cart .wc-block-cart__empty-cart__title {
	font-family: var(--font-display);
	font-weight: 900;
	color: var(--c-brand);
}

/* The sum to pay, whose value is a formatted-money span rather than the
   __value the other rows use. */
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-formatted-money-amount,
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 900;
	color: var(--c-brand);
}

/* --- Underlines ----------------------------------------------------------
   The prose rules in main.css underline every link inside a page's content,
   which is right for a page of text and wrong here: it underlined the "go to
   checkout" button and the name of the tour in the cart. Inside the blocks a
   link is furniture, not a citation - except in the terms line, which is the
   one place a real link belongs.
   ------------------------------------------------------------------------- */

.woocommerce-cart .page-article__content .wc-block-cart a,
.woocommerce-checkout .page-article__content .wc-block-checkout a,
.woocommerce-cart .page-article__content a.wc-block-components-button,
.woocommerce-checkout .page-article__content a.wc-block-components-button {
	text-decoration: none;
}

.woocommerce-cart .page-article__content .wc-block-cart a:hover,
.woocommerce-checkout .page-article__content .wc-block-checkout a:hover {
	color: var(--c-logo-teal);
}

.woocommerce-checkout .page-article__content .wc-block-checkout__terms a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- The yishuv picker ---------------------------------------------------- 
   The city field is a picker over the CBS locality register rather than free
   text, so departures can be grouped by where people travel from. The list is
   anchored to the field rather than laid out inline: the checkout's fields sit
   in a grid, and a list that took up space would shove the row below it down
   every time someone typed.
   ------------------------------------------------------------------------- */

.tm-yishuv {
	position: relative;
}

.tm-yishuv__list {
	position: absolute;
	inset-inline: 0;
	top: 4px;
	z-index: 20;

	max-height: 260px;
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;

	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	box-shadow: 0 10px 30px rgba(8, 50, 88, 0.14);
}

.tm-yishuv__item {
	padding: 9px 12px;
	border-radius: var(--radius-sm);
	cursor: pointer;

	font-size: 15px;
	line-height: 1.4;
	color: var(--c-ink);
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Hover and keyboard selection share one state. The list is short enough that
   two competing highlights would read as a rendering fault rather than as two
   different kinds of "here". */
.tm-yishuv__item:hover,
.tm-yishuv__item.is-active {
	background: var(--c-ground);
	color: var(--c-brand);
	font-weight: 600;
}

/* Every departure leaves from inside the country, so the store sells to Israel
   only and the select has exactly one option in it. WooCommerce renders the
   field anyway. Hidden rather than dropped: it is a required field that React
   has already filled with IL, and removing it from the form would take the
   value with it. */
.wc-block-checkout .wc-block-components-address-form__country {
	display: none;
}

/* --- One section, not two -------------------------------------------------
   WooCommerce keeps contact details apart from the billing address because a
   billing address is what a payment gateway verifies against and what tax is
   worked out from. A tour has neither: nothing is posted, and after the field
   cleanup no address is collected at all. The "כתובת לחיוב" block holds a
   name, a yishuv and a phone number - so the heading named something that was
   not there, and the pair now reads as one group under one heading.

   The heading text itself is rewritten in assets/js/checkout.js: the blocks
   render their titles from hardcoded strings, with no title attribute in
   block.json and no filter on the PHP side to reach them.
   ------------------------------------------------------------------------- */

/* The hairline and trailing space set on every step further up this file are
   what held the two apart. Same three-class specificity as that rule, or it
   would not win. */
.woocommerce-checkout
	.wc-block-checkout
	.wp-block-woocommerce-checkout-contact-information-block {
	margin-block-end: 0;
	padding-block-end: var(--sp-4);
	border-block-end: 0;
}

/* Second heading gone. The fieldset's <legend> is relabelled in JS rather
   than hidden with it - it is the only name a screen reader gets for this
   group, and left alone it would still say "billing address". */
.wc-block-checkout
	.wp-block-woocommerce-checkout-billing-address-block
	.wc-block-components-checkout-step__heading-container {
	display: none;
}

/* The email and the name row are now two rows of one form, so what separates
   them is the gap between rows rather than the gap between sections. */
.woocommerce-checkout
	.wc-block-checkout
	.wp-block-woocommerce-checkout-billing-address-block {
	padding-block-start: 0;
}

/* "התשלום שלך בקופה מתבצע כאורח" - a note about WooCommerce's account system,
   addressed to someone who is booking a tour and has no stake in whether the
   shop considers them a guest. */
.wc-block-checkout .wc-block-checkout__guest-checkout-notice {
	display: none;
}

/* --- Back to the cart from the summary ------------------------------------
   The order summary lists quantities but the block cannot edit them. This is
   the link to the cart, where WooCommerce keeps the quantity control - placed
   under the items, where someone reading "3 places" and wanting two looks.

   An outlined pill rather than a plain link: sitting inside the tinted summary
   panel, underlined text read as part of the recap rather than as the one
   thing on that panel a customer can act on. The border and the centring make
   it a button, and the space beneath it holds it apart from the coupon row. */
.tm-edit-order {
	display: block;
	width: fit-content;
	margin: 10px auto 20px;
	padding: 8px 20px;
	border: 1px solid var(--c-brand);
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 700;
	color: var(--c-brand);
	text-align: center;
	text-decoration: none;
	transition: background 0.16s ease, color 0.16s ease;
}

.tm-edit-order:hover,
.tm-edit-order:focus {
	background: var(--c-brand);
	color: #fff;
}

/* The empty-cart button is a core button block, which ships a dark-grey fill
   and picks up the theme's link colour for its text - navy on charcoal, barely
   legible. Dressed here as the site's primary button so the one action on the
   empty cart reads as one. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
	background-color: var(--c-brand);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link:focus {
	background-color: var(--c-brand-dark);
	color: #fff;
}

/* On the phone layout WooCommerce moves the order summary out of the sidebar
   and into the actions block, stacking it directly on top of the place-order
   button with the two a hair apart. Two gaps to open, both only on the phone
   (WooCommerce stacks the columns at 700px, and a viewport query is reliable
   where the container-width .is-large class is not under device emulation):
   the whole summary-plus-button group away from the fields above it, and -
   the one the eye actually reads as cramped - the button away from the summary
   sitting right on top of it inside the same block. */
@media (max-width: 700px) {
	.woocommerce-checkout .wp-block-woocommerce-checkout-actions-block {
		margin-block-start: var(--sp-12);
	}

	.woocommerce-checkout .wc-block-checkout__actions_row {
		margin-block-start: var(--sp-8);
	}
}

/* The card logos on the payment row, on a phone.

   The gateway writes its own layout inline: the label is a flex row at
   width:100%, the logo strip is pushed to the far end with margin-inline-start
   :auto, and every logo is a fixed 24px tall. On a 375px screen that strip
   needs 233px and is handed 184, and flex shrinks the container without
   shrinking what is in it - so the last logo in the line, Visa, ran 14px past
   the edge of the screen.

   The logos are a trust signal at the moment someone is deciding to type a
   card number, so they are moved rather than hidden: the strip wraps onto its
   own line under the label and keeps every card readable. Overriding inline
   style is what the !important is for, not specificity against our own rules. */
@media (max-width: 600px) {
	.woocommerce-checkout .wc-pelecard-label {
		flex-wrap: wrap !important;
		row-gap: var(--sp-2);
	}

	/* On its own line it starts where the text starts, rather than being
	   shoved to the far end of a row it no longer shares. */
	.woocommerce-checkout .wc-pelecard-icons {
		margin-inline-start: 0 !important;
		flex-wrap: wrap;
		row-gap: var(--sp-1);
	}
}

/* Narrower than a phone - a fold, a large display zoom - where even a line of
   its own is not enough for five logos at full height. */
@media (max-width: 400px) {
	.woocommerce-checkout .wc-pelecard-icons img {
		height: 20px !important;
	}
}