/* ==========================================================================
   Project Cards Widget — frontend
   --------------------------------------------------------------------------
   Class contract shared by every style preset:
     .pcw-cards            grid wrapper, also carries .pcw-preset-<id>
     .pcw-card             one card
     .pcw-card__link       the whole card as a link, laid over it
     .pcw-card__media      gallery holder
     .pcw-card__body       text block
     .pcw-card__price      .pcw-card__price-label .pcw-card__price-value .pcw-card__price-suffix
                           several prices: .pcw-card__price--many wrapping
                           .pcw-card__price-lines > .pcw-card__price-line, each
                           with its own .pcw-card__price-note
     .pcw-card__title      .pcw-card__title-en
     .pcw-card__badge      .pcw-card__badge-icon .pcw-card__badge-prefix .pcw-card__badge-text
     .pcw-card__rule       the line between the details and the short text
     .pcw-card__meta       .pcw-card__meta-item .pcw-card__meta-icon .pcw-card__meta-prefix .pcw-card__meta-text
                           each line also carries its own name: .pcw-card__developer
                           .pcw-card__location .pcw-card__unit-types .pcw-card__handover
     .pcw-card__excerpt
     .pcw-card__actions    .pcw-card__btn and one modifier per button:
                           --whatsapp --call --interest
     .pcw-modal            the interest form over the page, one per widget:
                           .pcw-modal__overlay .pcw-modal__dialog .pcw-modal__title
                           .pcw-modal__close
     .pcw-form             .pcw-form__field .pcw-form__label .pcw-form__control
                           .pcw-form__icon .pcw-form__input .pcw-form__submit
                           .pcw-form__error .pcw-form__done .pcw-form__privacy
   A new preset reuses these names and inherits every style control for free.
   ========================================================================== */

.pcw-cards {
	--pcw-columns: 3;
	--pcw-gap: 24px;
	--pcw-image-ratio: 4 / 3;
	--pcw-image-fit: cover;
	--pcw-image-position: center center;
	--pcw-slides: 1;
	--pcw-slide-gap: 0px;
	--pcw-excerpt-lines: 2;
	--pcw-card-padding: 18px;
	--pcw-badge-top: 10px;
	--pcw-badge-right: 10px;
	--pcw-badge-bottom: 10px;
	--pcw-badge-left: 10px;
	--pcw-navy: #0d2344;
	--pcw-gold: #b18435;
	--pcw-gold-soft: #d6c092;
	--pcw-muted: #858e9c;

	display: grid;
	grid-template-columns: repeat(var(--pcw-columns), minmax(0, 1fr));
	gap: var(--pcw-gap);
	box-sizing: border-box;
	/* Each card is a grid item, so the default `stretch` pulls every card to the
	   height of the tallest one whatever its own height says. That is why a card
	   with no price used to show a gap above its buttons. Equal card height is a
	   panel switch, and it writes `stretch` back when it is on. */
	align-items: start;
}

.pcw-cards *,
.pcw-cards *::before,
.pcw-cards *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Card shell
   -------------------------------------------------------------------------- */

.pcw-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: var(--pcw-card-height, auto);
	min-width: 0;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid rgba(13, 35, 68, 0.08);
	border-radius: 14px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* The whole card as one link. An <a> may not contain buttons, so the anchor is
   laid over the card instead: above the text, below every control. The arrows
   and the dots are already at z-index 2, which is what keeps them clickable. */
.pcw-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.pcw-card__actions,
.pcw-card__title a {
	position: relative;
	z-index: 2;
}

.pcw-card__media {
	position: relative;
	min-width: 0;
}

.pcw-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 8px;
	padding: var(--pcw-card-padding);
}

/* --------------------------------------------------------------------------
   Gallery — CSS scroll-snap carousel, no slider library
   -------------------------------------------------------------------------- */

.pcw-gallery {
	/* Defaults repeat what the stylesheet always drew, so the new controls in the
	   panel start from the look the card already had. */
	--pcw-arrow-size: 34px;
	--pcw-arrow-radius: 50%;
	--pcw-arrow-offset: 10px;
	--pcw-arrow-idle-opacity: 0;
	--pcw-dot-size: 7px;
	--pcw-dot-radius: 50%;
	--pcw-dot-gap: 6px;
	--pcw-dots-offset: 10px;
	--pcw-dot-active-scale: 1.3;
	position: relative;
}

.pcw-gallery__track {
	display: flex;
	gap: var(--pcw-slide-gap, 0px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pcw-gallery__track::-webkit-scrollbar {
	display: none;
}

.pcw-gallery__slide {
	flex: 0 0 calc((100% - (var(--pcw-slides, 1) - 1) * var(--pcw-slide-gap, 0px)) / var(--pcw-slides, 1));
	scroll-snap-align: start;
	aspect-ratio: var(--pcw-image-ratio, 4 / 3);
	overflow: hidden;
	min-width: 0;
	background-color: rgba(13, 35, 68, 0.05);
}

/* Two classes on purpose: Elementor ships `.elementor img { height: auto }`,
   which outweighs a single class and leaves the picture at its own height
   inside a slide that already has the chosen shape. */
.pcw-cards .pcw-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--pcw-image-fit, cover);
	object-position: var(--pcw-image-position, center center);
}

.pcw-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pcw-arrow-size);
	height: var(--pcw-arrow-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--pcw-arrow-radius);
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--pcw-navy);
	cursor: pointer;
	opacity: var(--pcw-arrow-idle-opacity);
	transition: opacity 0.2s ease, background-color 0.2s ease;
	z-index: 2;
}

.pcw-gallery__nav svg {
	width: 55%;
	height: 55%;
}

.pcw-gallery:hover .pcw-gallery__nav,
.pcw-gallery__nav:focus-visible {
	opacity: 1;
}

.pcw-gallery__nav[disabled] {
	opacity: 0.25;
	cursor: default;
}

.pcw-gallery__nav--prev {
	inset-inline-start: var(--pcw-arrow-offset);
}

.pcw-gallery__nav--next {
	inset-inline-end: var(--pcw-arrow-offset);
}

/* The arrows point along the reading direction, so they flip in RTL. */
[dir="rtl"] .pcw-gallery__nav svg {
	transform: scaleX(-1);
}

.pcw-gallery__dots {
	position: absolute;
	inset-inline: 0;
	bottom: var(--pcw-dots-offset);
	display: flex;
	justify-content: center;
	gap: var(--pcw-dot-gap);
	z-index: 2;
}

.pcw-gallery__dot {
	width: var(--pcw-dot-size);
	height: var(--pcw-dot-size);
	padding: 0;
	border: 0;
	border-radius: var(--pcw-dot-radius);
	background-color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.pcw-gallery__dot.is-active {
	background-color: #fff;
	transform: scale(var(--pcw-dot-active-scale));
}

.pcw-gallery--single .pcw-gallery__track {
	overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Card text
   -------------------------------------------------------------------------- */

.pcw-card__price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.pcw-card__price-label {
	color: var(--pcw-muted);
	font-size: 0.82em;
}

.pcw-card__price-value {
	padding: 3px 10px;
	border-radius: 7px;
	background-color: rgba(214, 192, 146, 0.25);
	color: var(--pcw-gold);
	font-weight: 700;
}

/* Several prices: the prefix is written once and the prices stack under it, each
   with what it buys beside it. One price keeps the old markup, so none of this
   applies to a card that has always had a single price. */
.pcw-card__price--many {
	align-items: flex-start;
}

.pcw-card__price-lines {
	display: flex;
	flex-direction: column;
	gap: var(--pcw-price-gap, 6px);
	min-width: 0;
}

.pcw-card__price-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}

.pcw-card__price-note {
	color: var(--pcw-muted);
	font-size: 0.85em;
	min-width: 0;
	overflow-wrap: break-word;
}

.pcw-card__title {
	margin: 2px 0 0;
	color: var(--pcw-navy);
	font-size: 1.25em;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.pcw-card__title a {
	color: inherit;
	text-decoration: none;
}

.pcw-card__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pcw-card__meta-item {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--pcw-muted);
	font-size: 0.9em;
	min-width: 0;
}

/* The square the icon sits in. It is shaped here, in the shared layer, and
   coloured by the panel, whose colours ship filled in. Shaping it here means
   a background from the panel looks the same in every style instead of
   clinging to the glyph in the styles that never drew a square. */
.pcw-card__meta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.9em;
	height: 1.9em;
	border-radius: 7px;
	font-size: 0.85em;
	line-height: 1;
}

.pcw-card__meta-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.pcw-card__meta-text {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Lines per detail item is written entirely by the panel control ("Lines per
   line", section Project details lines): it clamps a long value AND reserves the
   height a short one does not fill, because the clamp alone leaves a one-line
   value one line tall and the cards still disagree. Nothing is written here, so
   a card that never asked for it keeps its content height. */

.pcw-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: var(--pcw-excerpt-lines, 2);
	line-clamp: var(--pcw-excerpt-lines, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--pcw-muted);
	font-size: 0.92em;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

/* Buttons share a row while they fit and stack when the card gets narrow. The
   divider is the top border of each button, so it reads correctly either way:
   one line under the content when side by side, and a line between them when
   stacked. A left border would survive wrapping as a stray mark. */
.pcw-card__actions {
	display: flex;
	flex-wrap: wrap;
	margin-top: auto;
}

.pcw-card__btn {
	display: inline-flex;
	flex: 1 1 7.5rem;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 0;
	padding: 12px 10px;
	border: 0;
	border-top: 1px solid rgba(13, 35, 68, 0.08);
	color: var(--pcw-navy);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pcw-card__btn-text {
	min-width: 0;
	overflow-wrap: break-word;
}

.pcw-card__btn-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.pcw-card__btn-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.pcw-card__btn--whatsapp {
	color: #1d8a4e;
}

.pcw-card__btn--whatsapp:hover,
.pcw-card__btn--whatsapp:focus-visible {
	background-color: rgba(29, 138, 78, 0.08);
}

.pcw-card__btn--call:hover,
.pcw-card__btn--call:focus-visible {
	background-color: rgba(13, 35, 68, 0.06);
}

.pcw-card__btn--interest:hover,
.pcw-card__btn--interest:focus-visible {
	background-color: rgba(214, 192, 146, 0.18);
}

/* --------------------------------------------------------------------------
   States
   -------------------------------------------------------------------------- */

.pcw-empty,
.pcw-error {
	padding: 14px 16px;
	border-radius: 10px;
	background-color: rgba(13, 35, 68, 0.04);
	color: var(--pcw-muted, #858e9c);
	font-size: 0.95em;
}

.pcw-error {
	background-color: rgba(185, 28, 28, 0.08);
	color: #b91c1c;
}

@media (prefers-reduced-motion: reduce) {
	.pcw-card,
	.pcw-gallery__track,
	.pcw-gallery__nav,
	.pcw-gallery__dot,
	.pcw-card__btn {
		transition: none;
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   preset: one
   ========================================================================== */

.pcw-preset-one .pcw-card__price {
	margin-block-end: 2px;
}

/* Prefixes and the price suffix: inert until the owner types one, so a card
   that sets none looks exactly as it did before they existed. */
.pcw-card__meta-prefix {
	flex: 0 0 auto;
	opacity: 0.75;
}

.pcw-card__price-suffix {
	font-weight: inherit;
}

/* ==========================================================================
   Parts a later style introduced
   --------------------------------------------------------------------------
   Every one is inert in the styles that came before: the English name and the
   delivery badge draw nothing until a project carries that value, and the
   separator is hidden until a style asks for it. So a card built before these
   existed looks exactly as it did.
   ========================================================================== */

.pcw-card__title-en {
	margin-inline-start: 8px;
	color: var(--pcw-muted);
	font-size: 0.62em;
	font-weight: 500;
	white-space: nowrap;
}

/* The badge sits over the images, clear of the arrows, which start at the
   vertical middle. z-index 2 keeps it above the whole-card link overlay. */
.pcw-card__badge {
	position: absolute;
	top: var(--pcw-badge-top);
	right: var(--pcw-badge-right);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - var(--pcw-badge-left) - var(--pcw-badge-right));
	padding: 5px 11px;
	border-radius: 8px;
	background-color: rgba(13, 35, 68, 0.72);
	color: #fff;
	font-size: 0.82em;
	line-height: 1.4;
}

.pcw-card__badge-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.pcw-card__badge-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.pcw-card__badge-prefix {
	opacity: 0.8;
}

/* Drawn whenever there are details above the short text, and shown only by a
   style that wants it or by the panel's "Line under the details". */
.pcw-card__rule {
	display: none;
	height: 1px;
	margin-block: 12px;
	border: 0;
	background-color: rgba(13, 35, 68, 0.1);
}

/* ==========================================================================
   preset: three
   --------------------------------------------------------------------------
   Reference: design-reference/style-03-data.jpg. Same parts and same markup
   as every other style; what differs is the shape — the price as an outlined
   pill opposite its label, the name carrying its English twin, each detail
   line behind a tinted icon square, and two solid buttons under a separator.
   ========================================================================== */

.pcw-preset-three .pcw-card {
	border: 1px solid rgba(13, 35, 68, 0.08);
	box-shadow: 0 6px 20px rgba(13, 35, 68, 0.06);
}

/* The label sits where the text starts and the price goes to the far side, so
   in Arabic the label is on the right and the price on the left, and in English
   the mirror of that. Never with `order`: flow order flips with the direction,
   which turned the reference upside down in Arabic. */
.pcw-preset-three .pcw-card__price {
	justify-content: space-between;
	width: 100%;
	margin-block-end: 6px;
}

.pcw-preset-three .pcw-card__price-value {
	padding: 5px 14px;
	border: 1px solid var(--pcw-gold);
	border-radius: 999px;
	background-color: transparent;
	color: var(--pcw-navy);
}

.pcw-preset-three .pcw-card__price-suffix {
	color: var(--pcw-navy);
}

.pcw-preset-three .pcw-card__title {
	font-size: 1.45em;
	font-weight: 700;
}

.pcw-preset-three .pcw-card__meta {
	gap: 10px;
}

.pcw-preset-three .pcw-card__meta-text {
	color: var(--pcw-navy);
	font-weight: 600;
}

.pcw-preset-three .pcw-card__rule {
	display: block;
}

.pcw-preset-three .pcw-card__excerpt {
	text-align: center;
}

/* Two solid buttons inside the padded body, not the edge-to-edge row style 1
   draws, so the top border that divides that row is dropped here. */
.pcw-preset-three .pcw-card__actions {
	gap: 10px;
	padding: 0 var(--pcw-card-padding) var(--pcw-card-padding);
}

.pcw-preset-three .pcw-card__btn {
	padding: 11px 14px;
	border-top: 0;
	border-radius: 10px;
	background-color: rgba(13, 35, 68, 0.05);
}

.pcw-preset-three .pcw-card__btn--whatsapp {
	background-color: #1d8a4e;
	color: #fff;
}

.pcw-preset-three .pcw-card__btn--whatsapp:hover,
.pcw-preset-three .pcw-card__btn--whatsapp:focus-visible {
	background-color: #16703e;
}

.pcw-preset-three .pcw-card__btn--call {
	background-color: rgba(13, 35, 68, 0.06);
	color: var(--pcw-navy);
}

.pcw-preset-three .pcw-card__btn--call:hover,
.pcw-preset-three .pcw-card__btn--call:focus-visible {
	background-color: rgba(13, 35, 68, 0.12);
}

.pcw-preset-three .pcw-card__btn--interest {
	background-color: var(--pcw-navy);
	color: #fff;
}

.pcw-preset-three .pcw-card__btn--interest:hover,
.pcw-preset-three .pcw-card__btn--interest:focus-visible {
	background-color: #091a33;
}

/* ==========================================================================
   The interest form
   --------------------------------------------------------------------------
   One window per widget, laid over the page. Its own values default to the
   card's palette, and every one of them is a variable so the panel can set it
   without this file knowing which style asked.
   ========================================================================== */

.pcw-modal {
	--pcw-modal-width: 420px;
	--pcw-modal-radius: 16px;
	--pcw-modal-padding: 24px;
	--pcw-modal-background: #fff;
	--pcw-modal-overlay: rgba(13, 35, 68, 0.55);
	--pcw-field-radius: 10px;
	--pcw-field-border: rgba(13, 35, 68, 0.16);
	--pcw-navy: #0d2344;
	--pcw-gold: #b18435;
	--pcw-muted: #858e9c;
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

/* `display: flex` on a class outweighs the browser's own `[hidden]` rule, so
   without this the window stands open on every page load. */
.pcw-modal[hidden] {
	display: none;
}

.pcw-modal * {
	box-sizing: border-box;
}

.pcw-modal__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--pcw-modal-overlay);
}

.pcw-modal__dialog {
	position: relative;
	width: 100%;
	max-width: var(--pcw-modal-width);
	max-height: calc(100vh - 32px);
	/* `overflow-y: auto` alone turns overflow-x into `auto` too, which is how a
	   sideways scrollbar appeared under a form that is never wider than its
	   window. The vertical scroll is wanted; the horizontal one never is. */
	overflow-x: hidden;
	overflow-y: auto;
	padding: var(--pcw-modal-padding);
	border-radius: var(--pcw-modal-radius);
	background-color: var(--pcw-modal-background);
	box-shadow: 0 20px 60px rgba(13, 35, 68, 0.25);
}

/* Themes style every <button> on the page - a theme turned this one into a pink
   pill with its glyph invisible on it. The window has to look the same on every
   client site, so each inherited property is answered rather than assumed. */
.pcw-modal__close,
.pcw-form__submit {
	-webkit-appearance: none;
	appearance: none;
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
}

.pcw-modal__close {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--pcw-muted);
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
}

.pcw-modal__close:hover,
.pcw-modal__close:focus-visible {
	background-color: rgba(13, 35, 68, 0.06);
	color: var(--pcw-navy);
}

.pcw-modal__title {
	margin: 0 0 16px;
	padding-inline-end: 32px;
	color: var(--pcw-form-title-color, var(--pcw-navy));
	font-size: 1.25em;
	line-height: 1.35;
}

/* Body scrolling under an open window is what makes a long page jump when it
   closes, so it is stopped while one is open. */
body.pcw-modal-open {
	overflow: hidden;
}

.pcw-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Same reason as the window above: a class that sets `display` outweighs the
   browser's `[hidden]`, and the form has to really go when the thank you
   replaces it. One rule for anything in here that is shown and hidden. */
.pcw-modal [hidden] {
	display: none;
}

.pcw-form__label {
	display: block;
	margin-block-end: 4px;
	color: var(--pcw-form-label-color, var(--pcw-navy));
	font-size: 0.88em;
	font-weight: 600;
}

.pcw-form__required {
	margin-inline-start: 3px;
	color: #b91c1c;
}

/* The icon sits inside the field, and the input's own inline padding opens the
   space for it - in both directions, so Arabic and English both read right. */
.pcw-form__control {
	position: relative;
	display: block;
}

/* The icon has a lane of its own at the start of the field, closed with a thin
   line, and the typed text begins after that line. The lane is one width,
   `--pcw-form-icon-gutter`, which is also what the input is padded by, so the
   two can never drift apart and the glyph can never sit on the text - which is
   what happened while the padding alone held them apart and a theme rewrote it.
   The lane is transparent until the panel colours it. */
.pcw-form__control {
	--pcw-form-icon-gutter: var(--pcw-form-icon-width, 44px);
}

.pcw-form__icon {
	position: absolute;
	inset-block: 1px;
	inset-inline-start: 1px;
	width: calc(var(--pcw-form-icon-gutter) - 1px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--pcw-form-icon-color, var(--pcw-gold));
	background-color: var(--pcw-form-icon-background, transparent);
	border-start-start-radius: var(--pcw-form-icon-radius, var(--pcw-field-radius));
	border-end-start-radius: var(--pcw-form-icon-radius, var(--pcw-field-radius));
	border-inline-end: 1px solid var(--pcw-field-border);
	line-height: 1;
	pointer-events: none;
}

.pcw-form__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* A text box is taller than one line, so its icon sits at the top of its lane
   rather than halfway down it. */
.pcw-form__field--message .pcw-form__icon {
	align-items: flex-start;
	padding-block-start: 12px;
}

.pcw-form__input {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--pcw-field-border);
	border-radius: var(--pcw-field-radius);
	background-color: var(--pcw-form-field-background, #fff);
	color: var(--pcw-form-text-color, var(--pcw-navy));
	font: inherit;
	line-height: 1.5;
}

/* Written with the field in the selector on purpose: this padding is what
   keeps the text out of the icon's lane, and a theme styling `input` must not
   be able to win it. */
.pcw-form .pcw-form__field .pcw-form__input {
	padding-inline-start: calc(var(--pcw-form-icon-gutter) + 10px);
}

.pcw-form .pcw-form__field:not(:has(.pcw-form__icon)) .pcw-form__input {
	padding-inline-start: 14px;
}

/* A focused field says so with its own border and a soft ring, not with a
   second box drawn outside the first: an outline plus the theme's own focus
   ring was two borders around one field. */
.pcw-form__input:focus,
.pcw-form__input:focus-visible,
.pcw-form .iti__selected-country:focus-visible {
	outline: none;
	border-color: var(--pcw-form-focus-color, var(--pcw-gold));
	box-shadow: 0 0 0 3px var(--pcw-form-focus-ring, rgba(177, 132, 53, 0.18));
}

textarea.pcw-form__input {
	resize: vertical;
}

/* The honeypot: out of sight for people, untouched by screen readers, and not
   `display: none`, which a form filler skips. */
.pcw-form__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	/* Clipped rather than thrown off to the left: a field at -9999px is still a
	   field at -9999px, and the window counted it as content it could scroll to. */
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pcw-form__privacy {
	margin: 0;
	color: var(--pcw-muted);
	font-size: 0.82em;
	line-height: 1.5;
}

.pcw-form__error {
	margin: 0;
	padding: 9px 12px;
	border-radius: 8px;
	background-color: rgba(185, 28, 28, 0.08);
	color: #b91c1c;
	font-size: 0.88em;
}

.pcw-form__submit {
	padding: 12px 16px;
	border: 0;
	border-radius: var(--pcw-field-radius);
	background-color: var(--pcw-navy);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.pcw-form__submit:hover:not(:disabled),
.pcw-form__submit:focus-visible:not(:disabled) {
	background-color: #091a33;
}

.pcw-form__submit:disabled {
	cursor: default;
}

/* A button that is waiting for the server says so in its own colour and with a
   turning ring, instead of the same button greyed out: the gold is the one
   other colour this card already uses, and the ring is what tells a slow
   connection apart from a click that did nothing. It keeps its full strength -
   only a button disabled for another reason is dimmed. */
.pcw-form__submit:disabled:not(.is-sending) {
	opacity: 0.65;
}

.pcw-form .pcw-form__submit.is-sending {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background-color: var(--pcw-form-submit-sending-background, var(--pcw-gold));
	color: var(--pcw-form-submit-sending-color, #fff);
}

.pcw-form .pcw-form__submit.is-sending::before {
	content: "";
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: pcw-spin 0.7s linear infinite;
}

@keyframes pcw-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcw-form__submit.is-sending::before {
		animation-duration: 2.4s;
	}
}

.pcw-form__done {
	padding: 18px 16px;
	border-radius: var(--pcw-field-radius);
	background-color: rgba(29, 138, 78, 0.08);
	color: #1d8a4e;
	font-weight: 600;
	text-align: center;
}

/* --------------------------------------------------------------------------
   The phone field
   --------------------------------------------------------------------------
   The library draws the flag button and the country list; everything here is
   what makes the two look like the rest of this form rather than like a
   library dropped into it.
   -------------------------------------------------------------------------- */

.pcw-form .iti {
	display: block;
	width: 100%;
}

.pcw-form .iti__tel-input {
	padding-inline-start: 14px;
}

.pcw-form__field--phone .pcw-form__icon {
	display: none;
}

/* A phone number is read left to right in every language, so in Arabic the
   whole field is turned around: the flag and the dial code sit on the LEFT,
   in front of the number, exactly as they do in English. Turning the FIELD
   rather than nudging its pieces is what keeps the library's own measuring
   right - it writes the padding for the flag itself, on the side it believes
   the flag is on. The list is turned back to Arabic further down. */
[dir="rtl"] .pcw-form .pcw-form__field--phone .pcw-form__control {
	direction: ltr;
}

.pcw-form .iti__tel-input {
	direction: ltr;
	text-align: start;
}

/* The selected country, as a part of the field instead of a button a theme
   has had its way with. */
.pcw-form .iti__selected-country {
	-webkit-appearance: none;
	appearance: none;
	height: 100%;
	padding: 0 10px;
	border: 0;
	border-radius: var(--pcw-field-radius) 0 0 var(--pcw-field-radius);
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
}

.pcw-form .iti__selected-country:hover {
	background-color: rgba(13, 35, 68, 0.04);
}

.pcw-form .iti__selected-dial-code {
	color: var(--pcw-form-text-color, var(--pcw-navy));
	font-size: 0.95em;
	direction: ltr;
}

/* The list, drawn where it now lives - over the page, not inside the window -
   in the form's own shapes: same radius, same border, roomy rows. */
.iti--container .iti__dropdown-content {
	border: 1px solid var(--pcw-field-border, rgba(13, 35, 68, 0.16));
	border-radius: var(--pcw-field-radius, 10px);
	background-color: var(--pcw-modal-background, #fff);
	box-shadow: 0 12px 32px rgba(13, 35, 68, 0.16);
	overflow: hidden;
}

.iti--container .iti__search-input {
	width: 100%;
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid var(--pcw-field-border, rgba(13, 35, 68, 0.16));
	border-radius: 0;
	background-color: transparent;
	color: var(--pcw-form-text-color, #0d2344);
	font: inherit;
}

.iti--container .iti__search-input:focus {
	outline: none;
	box-shadow: none;
}

.iti--container .iti__country-list {
	max-height: 230px;
	padding: 4px 0;
	border: 0;
	box-shadow: none;
}

.iti--container .iti__country {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-size: 0.95em;
	line-height: 1.4;
}

.iti--container .iti__country-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.iti--container .iti__dial-code {
	color: var(--pcw-muted, #858e9c);
	direction: ltr;
	margin-inline-start: auto;
}

.iti--container .iti__country.iti__highlight,
.iti--container .iti__country:hover {
	background-color: rgba(13, 35, 68, 0.06);
}

/* In Arabic the list reads right to left like the rest of the window, while
   every dial code inside it stays a number. */
[dir="rtl"] .iti--container {
	direction: rtl;
	text-align: right;
}

/* The list is hung on the page, where the library's own stacking (1060) puts
   it under our window (99999). Raised only while a window of ours is open, so
   another plugin's phone field keeps its own stacking. */
body.pcw-modal-open .iti--container {
	z-index: 100001;
}