/* ================================================
   AMOTZ — CHECKOUT  (Figma 805:681)
   ================================================
   hero         1440x240 · #FCFCF7
   body         1440x906 · row gap36 · form 734 + summary 430
   reassurance  1440x73  · #FAF6ED

   Same light palette as the thank-you page — cream and near-black, not the gold-on-black of the
   sales pages. Colours are written out here rather than pulled from the shared tokens, which are
   tuned for the dark pages.

   MOST OF THIS STYLES SOMEONE ELSE'S MARKUP. The form is Elementor Pro's Checkout widget, which
   brings WooCommerce's own field structure. So the rules below reach into `.elementor-widget-
   woocommerce-checkout-page` and WooCommerce classes to give them the drawn appearance. That is
   deliberate and unavoidable — the alternative is rebuilding a payment form by hand, which would
   look right and take no money.
   ================================================ */

/* ------------------------------------------------
   1 · HERO
   ------------------------------------------------ */
.azc-hero {
	display: flex;
	justify-content: center;
	/* TOP PADDING CLEARS THE OVERLAPPING HEADER.
	   The header template carries `margin-bottom: -90px` so it can sit over the dark hero photo on
	   the sales pages. On this page there is no photo to sit over, so it landed on the eyebrow —
	   measured live, the eyebrow rendered at y110 inside the header band (46-136).
	   64px of design padding + the 90px the header occupies. */
	padding: 154px var(--az-edge) 40px;
	background-color: #FCFCF7;
}

.azc-hero__inner {
	display: flex;
	flex-direction: column;
	/* `cross:MAX` on the LTR canvas = the right edge, which under RTL is flex-start. */
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	max-width: 1200px;
	text-align: right;
}

.azc-hero__eyebrow {
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	color: #B88029;
}

.azc-hero__title {
	margin: 0;
	font-size: 44px;
	font-weight: 900;
	line-height: 64px;
	color: #1B1916;
}

.azc-hero__sub {
	margin: 0;
	max-width: 720px;
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	color: #524D42;
}

/* ------------------------------------------------
   2 · BODY
   ------------------------------------------------ */
.azc-body {
	display: flex;
	justify-content: center;
	padding: 24px var(--az-edge) 96px;
	background-color: #FCFCF7;
}

.azc-body__inner {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 36px;
	width: 100%;
	max-width: 1200px;
}

/* 734 and 430 against a 1200 column, gap 36 — the two add up exactly. */
.azc-form { flex: 1 1 734px; min-width: 0; }
.azc-side { flex: 0 0 430px; max-width: 430px; display: flex; flex-direction: column; gap: 20px; }

/* ---- form card ---- */
.azc-form__card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 22px;
	padding: 40px;
	border: 1px solid #E3DECF;
	border-radius: 18px;
	background-color: #FFFFFF;
}

.azc-form__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 32px;
	color: #1B1916;
	text-align: right;
}

.azc-form__fine {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 19px;
	color: #9E998C;
	text-align: right;
}

/* ---- Elementor / WooCommerce checkout, dressed to match the design ---- */
.azc-form__slot .elementor-widget-woocommerce-checkout-page,
.azc-form__slot .woocommerce {
	margin: 0;
}

/* Field labels: 14/600 #575247 in the file. */
.azc-form__slot .woocommerce form .form-row label,
.azc-form__slot .woocommerce-checkout label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #575247;
	text-align: right;
}

/* Inputs: 54 high, 1.5px #E3DECF, r10, 18px inline padding, placeholder 16/500 #9E998C. */
.azc-form__slot .woocommerce form .form-row input.input-text,
.azc-form__slot .woocommerce form .form-row textarea,
.azc-form__slot .woocommerce form .form-row select,
.azc-form__slot .woocommerce-checkout input[type="text"],
.azc-form__slot .woocommerce-checkout input[type="email"],
.azc-form__slot .woocommerce-checkout input[type="tel"],
.azc-form__slot .woocommerce-checkout select {
	width: 100%;
	min-height: 54px;
	padding: 0 18px;
	border: 1.5px solid #E3DECF;
	border-radius: 10px;
	background-color: #FFFFFF;
	font-size: 16px;
	font-weight: 500;
	line-height: 23px;
	color: #1B1916;
	text-align: right;
}

.azc-form__slot .woocommerce form .form-row textarea {
	min-height: 96px;
	padding: 14px 18px;
}

.azc-form__slot input::placeholder,
.azc-form__slot textarea::placeholder {
	color: #9E998C;
	opacity: 1;
}

.azc-form__slot input:focus,
.azc-form__slot select:focus,
.azc-form__slot textarea:focus {
	outline: 2px solid #D9A64A;
	outline-offset: 2px;
	border-color: #D9A64A;
}

/* Section headings WooCommerce prints — "פרטי חיוב" and friends — matched to ours. */
.azc-form__slot .woocommerce h3,
.azc-form__slot .woocommerce-billing-fields h3,
.azc-form__slot .woocommerce-checkout h3 {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 700;
	line-height: 32px;
	color: #1B1916;
	text-align: right;
}

/* The payment box: the design draws a #FBF9F4 panel with a 2px gold edge. */
.azc-form__slot #payment,
.azc-form__slot .woocommerce-checkout-payment {
	padding: 24px;
	border: 2px solid #D9A64A;
	border-radius: 12px;
	background-color: #FBF9F4;
}

.azc-form__slot #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* Place-order button: the gold pill the design draws, not WooCommerce's default. */
.azc-form__slot #place_order,
.azc-form__slot .woocommerce button.button.alt {
	display: block;
	width: 100%;
	min-height: 50px;
	margin-top: 8px;
	padding: 14px 28px;
	border: 0;
	border-radius: 1000px;
	background-image: var(--az-gradient-gold);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #FFFFFF;
	cursor: pointer;
}

/* Hello Elementor paints #c36 on every button hover. Not our palette — see amotz.css. */
.azc-form__slot #place_order:hover,
.azc-form__slot #place_order:focus,
.azc-form__slot .woocommerce button.button.alt:hover,
.azc-form__slot .woocommerce button.button.alt:focus {
	background-color: transparent;
	background-image: var(--az-gradient-gold);
	color: #FFFFFF;
}

/* ---- order summary ---- */
.azc-sum {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 32px;
	border: 1px solid #E3DECF;
	border-radius: 18px;
	background-color: #FFFFFF;
}

.azc-sum__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: #1B1916;
}

.azc-sum__row {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	/* NOWRAP. The product names here run to 34 characters, and without this the price was pushed
	   onto its own line above the name — the design keeps them on one row, price at the far end.
	   The name wraps internally instead, which is what `min-width: 0` on it allows. */
	flex-wrap: nowrap;
	gap: 12px;
	width: 100%;
}

.azc-sum__name {
	flex: 1 1 auto;
	min-width: 0;
	/* Long course names wrap here rather than pushing the price out of the row. */
	overflow-wrap: anywhere;
	font-size: 15px;
	font-weight: 600;
	line-height: 21px;
	color: #1B1916;
}

.azc-sum__price {
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	color: #1B1916;
}

/* A free line is gold, not black — it is the offer, so it should read as one. */
.azc-sum__price--free {
	font-size: 15px;
	font-weight: 600;
	color: #B88029;
}

.azc-sum__meta {
	margin-top: -8px;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: #999487;
}

.azc-sum__row--muted span { font-size: 15px; font-weight: 500; line-height: 21px; color: #999487; }

/* The struck full price. `line-through` on the number only — striking the label would read as the
   line being cancelled rather than the price being superseded. */
.azc-sum__row--muted span:last-child { text-decoration: line-through; }

.azc-sum__row--total { align-items: baseline; }
.azc-sum__totallabel { flex: 1 1 auto; font-size: 22px; font-weight: 900; line-height: 31px; color: #1B1916; }
.azc-sum__totalprice { flex: 0 0 auto; font-size: 26px; font-weight: 900; line-height: 36px; color: #B88029; }

.azc-sum__inst { font-size: 13px; font-weight: 500; line-height: 18px; color: #999487; }

.azc-sum__rule { width: 100%; height: 1px; margin: 0; border: 0; background-color: #E3DECF; }

/* ---- coupon ---- */
.azc-sum__coupon {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.az-section .azc-sum__cinput {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #E3DECF;
	border-radius: 8px;
	background-color: #FAF6ED;
	font-size: 14px;
	font-weight: 500;
	color: #1B1916;
	text-align: right;
}

.az-section .azc-sum__cinput::placeholder { color: #999487; opacity: 1; }

.az-section .azc-sum__apply {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 8px;
	background-color: #1B1916;
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
	cursor: pointer;
}

/* Again: the theme's #c36 hover has no business here. */
.az-section .azc-sum__apply:hover,
.az-section .azc-sum__apply:focus {
	background-color: #1B1916;
	color: #FFFFFF;
}

/* ---- trust card ---- */
.azc-trust {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	padding: 24px 28px;
	border-radius: 16px;
	background-color: #FAF6ED;
}

/* `main:MAX` on the canvas: the tick sits at the far end of the row, the label at the near end. */
.azc-trust__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.azc-trust__text {
	font-size: 15px;
	font-weight: 500;
	line-height: 21px;
	color: #575247;
}

.azc-trust__tick {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #D9A64A;
}

.azc-trust__tick svg { width: 10px; height: 9px; }

/* ------------------------------------------------
   3 · REASSURANCE
   ------------------------------------------------ */
.azc-reassure {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 26px var(--az-edge);
	background-color: #FAF6ED;
	text-align: center;
}

.azc-reassure__text {
	font-size: 15px;
	font-weight: 500;
	line-height: 21px;
	color: #575247;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   734 + 430 + 36 needs 1200px. Below that the summary goes ABOVE the form: on a phone, knowing
   what you are paying for should come before filling in fields. */
@media (max-width: 1200px) {
	.azc-body__inner { flex-direction: column-reverse; gap: 24px; }
	.azc-form,
	.azc-side { flex: 1 1 auto; width: 100%; max-width: 100%; }
}

@media (max-width: 700px) {
	.azc-hero { padding: 130px 20px 24px; }
	.azc-hero__title { font-size: 30px; line-height: 1.2; }
	.azc-hero__sub { font-size: 16px; line-height: 24px; }

	.azc-body { padding: 16px 20px 64px; }
	.azc-form__card { padding: 24px 20px; gap: 18px; }
	.azc-sum { padding: 24px 20px; }
	.azc-trust { padding: 20px; }

	.azc-sum__totallabel { font-size: 18px; line-height: 26px; }
	.azc-sum__totalprice { font-size: 22px; line-height: 30px; }

	.azc-reassure { padding: 20px; }
	.azc-reassure__text { font-size: 13px; line-height: 20px; }
}

/* ------------------------------------------------
   DRESSING ELEMENTOR'S CHECKOUT
   ------------------------------------------------
   Everything below reaches into markup this plugin does not own. That is the cost of using the
   real widget instead of rebuilding a payment form — and it is the right trade, because a
   hand-built form would look correct and take no money.

   THE PAGE IS RTL, THE WIDGET IS NOT. Elementor's checkout renders LTR regardless of the section
   around it, so direction is forced here rather than inherited. Without this the whole right-hand
   column reads left-to-right on a Hebrew page. */
.azc-form__slot,
.azc-form__slot .woocommerce,
.azc-form__slot .elementor-widget-woocommerce-checkout-page {
	direction: rtl;
	text-align: right;
}

/* ELEMENTOR'S ORDER TABLE IS HIDDEN — but only the TABLE.
   The widget has no control to switch its order summary off, and the design's summary card
   already carries this information plus the free-bonus line, the struck full price and the
   instalment note that Elementor's table cannot show. Two summaries on one page is the bug.

   ONLY THE TABLE, because the PAYMENT BOX lives inside the same review container. An earlier
   version hid the container and then tried to un-hide the payment box inside it, which is a
   contradiction — a hidden ancestor cannot have a visible child. So the container stays and its
   table goes.

   Both class names are needed: Elementor renders `e-checkout__order_review` in two-column mode
   and `e-checkout__order_review-2` in one-column, which is the layout this page uses. */
.azc-form__slot .woocommerce-checkout-review-order-table,
.azc-form__slot .e-checkout__order_review .shop_table,
.azc-form__slot .e-checkout__order_review-2 .shop_table {
	display: none !important;
}

/* The review container keeps its box but loses the framing — it is now only a wrapper for the
   payment methods, which have their own panel. */
.azc-form__slot .e-checkout__order_review,
.azc-form__slot .e-checkout__order_review-2 {
	padding: 0;
	border: 0;
	background: transparent;
}

/* One column, full width — `checkout_layout: one-column` handles the widget's own grid, this
   catches the wrappers it leaves behind. */
.azc-form__slot .e-checkout__container,
.azc-form__slot .col2-set,
.azc-form__slot .col-1,
.azc-form__slot .col-2 {
	display: block;
	width: 100%;
	float: none;
	max-width: 100%;
}

/* WooCommerce's own notices — "…has been added to your basket" — are English and belong to the
   cart, not this page. The design has no notice area. */
.azc-form__slot .woocommerce-message,
.azc-form__slot .woocommerce-info:not(.woocommerce-notice--empty-cart) {
	display: none;
}

/* Required-field asterisks: keep them, but in the palette rather than WooCommerce's red. */
.azc-form__slot .required,
.azc-form__slot abbr.required {
	color: #B88029;
	border: 0;
	text-decoration: none;
}

/* Rows stack full width; WooCommerce floats half-rows by default, which fights the single column. */
.azc-form__slot .form-row {
	display: block;
	width: 100%;
	float: none;
	padding: 0;
	margin: 0 0 18px;
}

.azc-form__slot .form-row-first,
.azc-form__slot .form-row-last {
	width: 100%;
	float: none;
}

/* select2, which WooCommerce uses for country/state, ships its own chrome. */
.azc-form__slot .select2-container .select2-selection--single {
	height: 54px;
	border: 1.5px solid #E3DECF;
	border-radius: 10px;
	background-color: #FFFFFF;
}

.azc-form__slot .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 54px;
	padding: 0 18px;
	color: #1B1916;
	text-align: right;
}

.azc-form__slot .select2-container .select2-selection--single .select2-selection__arrow {
	height: 54px;
	right: auto;
	left: 12px;
}

/* ------------------------------------------------
   SOLID HEADER ON THIS PAGE ONLY
   ------------------------------------------------
   The header template is transparent by design: on the sales pages it is drawn INSIDE the hero,
   over the photograph, and floats there via a -90px bottom margin. There is no photograph here, so
   it was floating over cream.

   Figma draws it on this page as a solid #1B1916 band. Scoped to `body.woocommerce-checkout` so
   the sales pages keep the overlay they were designed with — the widget does expose a global
   solid-background switch, but turning that on would change every page on the site.

   The announcement strip above it is left as it is; it already carries its own gold band. */
body.woocommerce-checkout .az-header {
	background-color: #1B1916;
}

/* With a solid band there is nothing to see through, so the negative margin no longer buys
   anything — but it still pulls the hero up under the header. The hero's 154px top padding already
   accounts for that; this just makes the band reach the full width behind it. */
body.woocommerce-checkout .az-header,
body.woocommerce-checkout .az-header__inner {
	--az-header-fg: #FCFCF7;
}

/* ------------------------------------------------
   CURRENCY SYMBOL STAYS AFTER THE NUMBER
   ------------------------------------------------
   WooCommerce outputs "396&nbsp;<span>₪</span>". A currency symbol is bidi-NEUTRAL, so inside an
   RTL block it gets pulled to the LEFT of the digits — measured live at 435..457 with the digits
   at 457..509, i.e. "₪ 396".

   Figma writes "396 ₪" and renders it as typed, symbol last. `unicode-bidi: isolate` with
   `direction: ltr` makes the price its own little LTR island, so the number and its symbol keep
   the order they were written in without affecting the Hebrew around them.

   ISOLATE, NOT EMBED OR OVERRIDE: isolate also stops the price influencing the bidi resolution of
   the text beside it, which is what keeps the label in the same row from shifting. */
/* PRICES ONLY. `.azc-sum__inst` was in this list and should not have been: "או 3 תשלומים של
   132 ₪" is a Hebrew sentence that happens to contain a number, not a price. Isolating it as LTR
   moved its shekel sign to the front — "₪ או 3 תשלומים של 132". A price is a self-contained token
   and can be an island; a sentence cannot. */
.azc-sum__price,
.azc-sum__totalprice,
.azc-sum__row--muted span {
	direction: ltr;
	unicode-bidi: isolate;
}

/* The label half of those rows stays RTL — only the number is an island. */
.azc-sum__row--muted span:last-child {
	direction: rtl;
}

/* ── form column: the payment section reads as a heading, not a second card ──────────────
   Elementor Pro frames its order-review section as a panel — white fill, 1px #D5D8DC border.
   With the table hidden that panel stood on the page as an empty box with a title in it, above
   a separate payment panel. The design has one card, with "פרטי תשלום" as a plain heading
   inside it.

   `!important` because Elementor's own rule is `.elementor-widget-woocommerce-checkout-page
   .e-checkout__order_review` — two classes, same weight as ours, and its stylesheet loads
   later. Specificity ties go to whoever is last, which is not us. */
.azc-form__slot .e-checkout__order_review,
.azc-form__slot .e-checkout__order_review-2 {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Elementor emits a heading for every section it can render, including ones switched off — the
   coupon and additional-information sections here. Those come out as empty <h3>s that still
   take their margin, opening a gap the design does not have. */
.azc-form__slot .woocommerce h3:empty,
.azc-form__slot .woocommerce-checkout h3:empty {
	display: none;
}

/* Required-field asterisks in the palette, not WooCommerce's red — its own rule carries
   `!important`, so matching it is the only way to win. The design marks required fields in the
   same warm gold as the rest of the page. */
.azc-form__slot .required,
.azc-form__slot abbr.required,
.azc-form__slot .woocommerce form .form-row .required {
	color: #B88029 !important;
	text-decoration: none;
	border: 0;
}

/* ══ FORM COLUMN, MEASURED OFF FIGMA 805:681 ("Form Col" → "Form Card") ══════════════════
   Everything below is `!important` for one reason: Elementor Pro ships its own checkout
   stylesheet, its selectors carry the widget class as well as the element class, and it loads
   after ours. On specificity ties the later sheet wins, so the rules further up this file were
   being written and then quietly discarded — the page kept Elementor's grey-filled borderless
   inputs and its two grey panels. These are the same values, stated loudly enough to survive.

   THE DESIGN IS ONE CARD, NOT THREE. Figma draws a single white #FFF / 1px #E3DECF / r18 card
   with 40px padding, and everything — both headings, the fields, the divider, the payment area
   and the button — sits inside it with a 22px rhythm. Elementor frames the billing block and
   the payment block as panels of their own, which is where the extra boxes came from.

   THE GOLD DASHED BOX IN THE FIGMA FILE IS NOT PART OF THE DESIGN. It reads "כאן נכנס טופס
   התשלום המאובטח … משולבים ב-Elementor אחרי הייבוא" — a note from the designer marking where
   this widget goes. Rendering it would ship the instruction to customers, so the payment area
   is left unframed and the real gateway fields will sit directly on the card. */

/* ---- strip Elementor's panels: the card is the only frame ---- */
.azc-form__slot .col-1,
.azc-form__slot .col-2,
.azc-form__slot .col2-set,
.azc-form__slot .e-checkout__billing-details,
.azc-form__slot .e-checkout__order_review,
.azc-form__slot .e-checkout__order_review-2,
.azc-form__slot #payment,
.azc-form__slot .woocommerce-checkout-payment {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* The 654x1 #E3DECF rule Figma draws between the fields and "פרטי תשלום". It is a border on the
   payment block rather than an element of its own, because Elementor owns the markup here and
   there is nothing of ours to hang a rule on. */
.azc-form__slot .e-checkout__order_review,
.azc-form__slot .e-checkout__order_review-2 {
	margin-top: 22px !important;
	padding-top: 22px !important;
	border-top: 1px solid #E3DECF !important;
}

/* ---- fields: white, bordered, 54 high ---- */
.azc-form__slot .woocommerce form .form-row input.input-text,
.azc-form__slot .woocommerce form .form-row textarea,
.azc-form__slot .woocommerce form .form-row select,
.azc-form__slot .woocommerce-checkout input[type="text"],
.azc-form__slot .woocommerce-checkout input[type="email"],
.azc-form__slot .woocommerce-checkout input[type="tel"],
.azc-form__slot .woocommerce-checkout select {
	width: 100% !important;
	min-height: 54px !important;
	padding: 0 18px !important;
	border: 1.5px solid #E3DECF !important;
	border-radius: 10px !important;
	background-color: #FFFFFF !important;
	box-shadow: none !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: #1B1916 !important;
	text-align: right !important;
}

/* Figma: label 14/600 #575247, 8px above its input, 22px between one field and the next. */
.azc-form__slot .woocommerce form .form-row label,
.azc-form__slot .woocommerce-checkout label {
	margin-bottom: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	color: #575247 !important;
}

.azc-form__slot .form-row {
	margin: 0 0 22px !important;
	padding: 0 !important;
}

.azc-form__slot .woocommerce-billing-fields__field-wrapper .form-row:last-child {
	margin-bottom: 0 !important;
}

/* ---- headings: 22/700 #1B1916, both of them ---- */
.azc-form__slot .woocommerce h3,
.azc-form__slot .woocommerce-billing-fields h3,
.azc-form__slot .woocommerce-checkout h3 {
	margin: 0 0 22px !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 32px !important;
	color: #1B1916 !important;
	text-align: right !important;
}

/* ---- the pill ---- */
.azc-form__slot #place_order,
.azc-form__slot .woocommerce button.button.alt,
.azc-form__slot .woocommerce #payment #place_order {
	display: block !important;
	width: 100% !important;
	min-height: 50px !important;
	margin: 22px 0 0 !important;
	padding: 14px 28px !important;
	border: 0 !important;
	border-radius: 1000px !important;
	background-color: transparent !important;
	background-image: var(--az-gradient-gold) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	color: #FFFFFF !important;
}

/* ---- one divider, not two ----------------------------------------------------------------
   Elementor emits TWO review blocks in one-column mode: `e-checkout__order_review` carries the
   section heading and `e-checkout__order_review-2` carries the payment methods. Giving the
   Figma rule to both drew a line above "פרטי תשלום" AND another one under it. The rule belongs
   above the heading, so the second block gives it up when it follows the first — and keeps it
   when it is on its own, which is what two-column mode renders. */
.azc-form__slot .e-checkout__order_review + .e-checkout__order_review-2,
.azc-form__slot .e-checkout__order_review ~ .e-checkout__order_review-2 {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
}

.azc-form__slot .e-checkout__order_review,
.azc-form__slot .e-checkout__order_review-2 {
	margin-bottom: 0 !important;
}

/* The last field's 22px already sits below it; the divider block adds its own 22px above. Both
   were being counted, opening a 66px gap where the design has 22. */
.azc-form__slot .woocommerce-billing-fields > .form-row:last-child,
.azc-form__slot .woocommerce-billing-fields__field-wrapper > .form-row:last-child,
.azc-form__slot #billing_phone_field {
	margin-bottom: 0 !important;
}

/* ---- required asterisks: the design does not draw them ----
   All three fields are required, so a marker on every one of them says nothing — which is why
   Figma labels read plainly. Only the marker is dropped; the fields stay required and still
   validate. */
.azc-form__slot .required,
.azc-form__slot abbr.required,
.azc-form__slot .woocommerce form .form-row .required {
	display: none !important;
}

/* Figma centres the consent line under the button (textAlignHorizontal: CENTER); the headings
   and labels above it are RIGHT. */
.azc-form__fine {
	text-align: center;
}

/* Elementor's billing column carries a 24px bottom margin of its own — invisible while it was a
   panel with its own frame, but with the frame gone it stacked on top of the divider block's
   22px and opened a 68px gap where Figma has 22. */
.azc-form__slot .col-1,
.azc-form__slot .col-2,
.azc-form__slot .col2-set,
.azc-form__slot .e-checkout__column {
	margin: 0 !important;
}

/* The payment area shows whatever the gateway renders, and nothing at all when there is no
   gateway. An earlier build stood a placeholder panel here describing what would appear; the
   client asked for it gone, so WooCommerce's "no available payment methods" notice stays behind
   the blanket notice-hiding rule further up this file and the space is simply empty. */
.azc-form__slot #payment .woocommerce-info,
.azc-form__slot #payment .woocommerce-notice--info {
	display: none !important;
}
/* The bottom strip's four claims. Figma draws them as one 765px line with six-space runs between
   the items; six spaces collapse to one in HTML, so the spacing is flex gap instead — ~20px, the
   width those runs occupy in the file. Wrapping is allowed, which the drawn single line cannot
   do: on a phone the claims stack rather than overflow. */
.azc-reassure__text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 20px;
}

.azc-reassure__dot {
	color: #9E998C;
}

/* ---- payment methods, once a gateway exists ----------------------------------------------
   Figma draws no styling of its own for this area — its note says the gateway's own form goes
   here — so these rules only make WooCommerce's list sit in the card without fighting it: the
   panel framing is already stripped further up, this handles the rows.

   Written against the test gateway, which renders one radio and a description. A real gateway
   usually adds an iframe it styles itself; these rules leave that alone. */
.azc-form__slot #payment ul.payment_methods {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none !important;
}

.azc-form__slot #payment ul.payment_methods > li {
	margin: 0 0 12px !important;
	padding: 18px 20px !important;
	border: 1.5px solid #E3DECF !important;
	border-radius: 10px !important;
	background: #FFFFFF !important;
	list-style: none !important;
}

.azc-form__slot #payment ul.payment_methods > li:last-child {
	margin-bottom: 0 !important;
}

.azc-form__slot #payment ul.payment_methods label {
	display: inline !important;
	margin: 0 8px 0 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #1B1916 !important;
	cursor: pointer;
}

.azc-form__slot #payment input[type="radio"] {
	accent-color: #B88029;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	vertical-align: middle;
}

/* The gateway's own description, which WooCommerce drops in a tinted box below the radio. */
.azc-form__slot #payment .payment_box {
	margin: 12px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	color: #575247 !important;
}

/* WooCommerce points a little triangle at the radio from the description box. Nothing in the
   palette, and it sits on the wrong side under RTL. */
.azc-form__slot #payment .payment_box::before {
	content: none !important;
}

/* The payment-method selector, hidden while the temporary test gateway is the only method.
   See includes/test-gateway.php for why this is hidden rather than removed: the radio inside is
   what the order posts, so removing it would stop checkout working. The body class is only added
   while there is exactly one method, so this rule stops applying by itself once a real gateway
   is connected. */
body.amotz-test-gateway-only .azc-form__slot #payment ul.payment_methods {
	display: none !important;
}

/* Without the list, the heading would sit directly on the button. */
body.amotz-test-gateway-only .azc-form__slot #payment {
	min-height: 0 !important;
}