/* ============================================================================
   Wish Ant (وش انت) — front-end styles.

   RTL-first: layout uses CSS logical properties throughout, and direction is
   driven by the dir="" attribute set on .wa-app (and the modal panels), so the
   same rules serve Arabic and English without duplication.

   Colour language: warm amber for the seeker ("looking for work") side, network
   teal (#2a96be, shared across the property network) for the hiring side, so a
   worker ant can tell an individual from a company at a glance. The dotted
   amber+teal rule under the brand bar (.wa-trail) is the signature — an ant
   trail. Font stack is Cairo / Noto Kufi Arabic, matching the other sites.

   Everything is namespaced under .wa-app / .wa-modal so it never leaks into the
   host theme.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/*  Tokens (defined on both roots — modals render outside .wa-app)             */
/* -------------------------------------------------------------------------- */
.wa-app,
.wa-modal {
	--wa-ink: #1e2833;
	--wa-muted: #5f6f7e;
	--wa-faint: #8493a0;
	--wa-line: #e4e9ed;
	--wa-line-strong: #cdd6dd;
	--wa-surface: #ffffff;
	--wa-page: #f6f8f9;
	--wa-panel: #f4f7f9;

	--wa-teal: #2a96be;
	--wa-teal-ink: #1b6d8d;
	--wa-teal-soft: #e8f4fa;
	--wa-teal-line: #bfe1ef;

	--wa-amber: #c9791a;
	--wa-amber-ink: #98590f;
	--wa-amber-soft: #fbf1e2;
	--wa-amber-line: #f0d5b1;

	--wa-danger: #c0392b;
	--wa-danger-ink: #97281c;
	--wa-danger-soft: #fbecea;

	--wa-radius: 14px;
	--wa-radius-sm: 9px;
	--wa-pill: 999px;

	--wa-shadow: 0 1px 2px rgba(20, 40, 55, .06), 0 6px 18px rgba(20, 40, 55, .06);
	--wa-shadow-lg: 0 12px 44px rgba(20, 40, 55, .20);

	--wa-maxw: 1080px;
	--wa-narrow: 640px;

	font-family: "Cairo", "Noto Kufi Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
	color: var(--wa-ink);
	-webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------- */
/*  App shell + brand bar                                                      */
/* -------------------------------------------------------------------------- */
.wa-app {
	background: var(--wa-page);
	line-height: 1.5;
	min-height: 60vh;
}
.wa-app *,
.wa-modal * { box-sizing: border-box; }

.wa-bar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(140%) blur(8px);
}
.wa-bar__inner {
	max-width: var(--wa-maxw);
	margin-inline: auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.wa-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--wa-ink);
	font-weight: 700;
	font-size: 1.2rem;
}
.wa-brand__mark { font-size: 1.35rem; line-height: 1; }
.wa-brand__name { letter-spacing: .2px; }

.wa-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.wa-nav__link {
	text-decoration: none;
	color: var(--wa-muted);
	font-weight: 600;
	font-size: .95rem;
	padding: 7px 11px;
	border-radius: var(--wa-radius-sm);
	transition: color .15s, background .15s;
}
.wa-nav__link:hover { color: var(--wa-teal-ink); background: var(--wa-teal-soft); }
.wa-nav__link.is-active { color: var(--wa-teal-ink); }
.wa-nav__join {
	background: var(--wa-teal);
	color: #fff;
	border-radius: var(--wa-pill);
	padding-inline: 15px;
}
.wa-nav__join:hover { background: var(--wa-teal-ink); color: #fff; }

.wa-lang a {
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border: 1px solid var(--wa-line-strong);
	border-radius: var(--wa-pill);
	color: var(--wa-muted);
	text-decoration: none;
	font-weight: 700;
	font-size: .85rem;
}
.wa-lang a:hover { border-color: var(--wa-teal); color: var(--wa-teal-ink); }

/* The trail: dotted amber+teal footprints, the network's signature flourish. */
.wa-trail {
	height: 4px;
	background-image:
		radial-gradient(circle at 3px 50%, var(--wa-amber) 1.4px, transparent 1.9px),
		radial-gradient(circle at 10px 50%, var(--wa-teal) 1.4px, transparent 1.9px);
	background-size: 14px 100%;
	background-repeat: repeat-x;
	opacity: .8;
}

.wa-main {
	max-width: var(--wa-maxw);
	margin-inline: auto;
	padding: 26px 20px 64px;
}
.wa-narrow { max-width: var(--wa-narrow); margin-inline: auto; }
.wa-h1 { font-size: 1.55rem; font-weight: 700; margin: 0 0 6px; }

/* -------------------------------------------------------------------------- */
/*  Buttons                                                                    */
/* -------------------------------------------------------------------------- */
.wa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font: inherit;
	font-weight: 600;
	line-height: 1.1;
	padding: .62em 1.05em;
	border: 1px solid var(--wa-line-strong);
	border-radius: var(--wa-radius-sm);
	background: var(--wa-surface);
	color: var(--wa-ink);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s, transform .05s;
	white-space: nowrap;
}
.wa-btn:hover { background: var(--wa-panel); }
.wa-btn:active { transform: translateY(1px); }
.wa-btn:disabled { opacity: .6; cursor: default; transform: none; }

.wa-btn--sm { padding: .42em .7em; font-size: .86rem; border-radius: 7px; }
.wa-btn--lg { padding: .8em 1.4em; font-size: 1.02rem; }
.wa-btn--block { display: flex; width: 100%; }

.wa-btn--primary { background: var(--wa-teal); border-color: var(--wa-teal); color: #fff; }
.wa-btn--primary:hover { background: var(--wa-teal-ink); border-color: var(--wa-teal-ink); }

.wa-btn--ghost { background: transparent; border-color: transparent; color: var(--wa-muted); }
.wa-btn--ghost:hover { background: var(--wa-panel); color: var(--wa-ink); }

.wa-btn--danger { background: var(--wa-surface); border-color: var(--wa-danger); color: var(--wa-danger-ink); }
.wa-btn--danger:hover { background: var(--wa-danger-soft); }

.wa-linklike {
	background: none;
	border: 0;
	padding: 4px 2px;
	font: inherit;
	color: var(--wa-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.wa-linklike:hover { color: var(--wa-ink); }
.wa-linklike--danger { color: var(--wa-danger-ink); }

/* -------------------------------------------------------------------------- */
/*  Browse: toggle, filters, grid                                             */
/* -------------------------------------------------------------------------- */
.wa-toggle {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--wa-panel);
	border-radius: var(--wa-pill);
	margin-block-end: 18px;
}
.wa-toggle__opt {
	text-decoration: none;
	color: var(--wa-muted);
	font-weight: 700;
	font-size: .95rem;
	padding: 8px 18px;
	border-radius: var(--wa-pill);
	transition: background .15s, color .15s, box-shadow .15s;
}
.wa-toggle__opt.is-on { background: var(--wa-surface); color: var(--wa-ink); box-shadow: var(--wa-shadow); }

.wa-filters {
	background: var(--wa-surface);
	border: 1px solid var(--wa-line);
	border-radius: var(--wa-radius);
	padding: 14px 16px;
	margin-block-end: 18px;
	box-shadow: var(--wa-shadow);
}
.wa-filters__row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: end;
}
.wa-filters__f {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 150px;
	min-width: 130px;
}
.wa-filters__f > span { font-size: .8rem; font-weight: 600; color: var(--wa-muted); }
.wa-filters__f--search { flex: 2 1 220px; }

.wa-filters__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 12px;
}
.wa-filters__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-block-start: 12px;
}
.wa-count { font-size: .9rem; color: var(--wa-muted); font-weight: 600; }

.wa-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: 16px;
	transition: opacity .15s;
}
.wa-grid[aria-busy="true"] { opacity: .45; }

.wa-empty {
	text-align: center;
	color: var(--wa-muted);
	padding: 48px 16px;
	font-size: 1.02rem;
}

.wa-more { text-align: center; margin-block-start: 22px; }
.wa-more .wa-btn { min-width: 200px; }

.wa-fab {
	position: fixed;
	inset-block-end: 22px;
	inset-inline-end: 22px;
	z-index: 25;
}
.wa-btn--fab {
	border-radius: var(--wa-pill);
	padding: .85em 1.5em;
	box-shadow: var(--wa-shadow-lg);
	font-weight: 700;
}

/* -------------------------------------------------------------------------- */
/*  Card                                                                       */
/* -------------------------------------------------------------------------- */
.wa-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--wa-surface);
	border: 1px solid var(--wa-line);
	border-inline-start: 4px solid var(--wa-line-strong);
	border-radius: var(--wa-radius);
	padding: 16px 18px;
	box-shadow: var(--wa-shadow);
	transition: transform .12s, box-shadow .12s;
}
.wa-card:hover { transform: translateY(-2px); box-shadow: var(--wa-shadow-lg); }
.wa-card--seeker { border-inline-start-color: var(--wa-amber); }
.wa-card--hiring { border-inline-start-color: var(--wa-teal); }

.wa-card__badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 14px;
	background: var(--wa-teal-soft);
	color: var(--wa-teal-ink);
	border: 1px solid var(--wa-teal-line);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .3px;
	padding: 3px 9px;
	border-radius: var(--wa-pill);
	text-transform: uppercase;
}
.wa-card__badge--lg { position: static; display: inline-block; font-size: .72rem; margin-block-end: 8px; }

.wa-card__meta { display: flex; flex-wrap: wrap; gap: 6px; padding-inline-end: 70px; }
.wa-card__headline { margin: 0; font-size: 1.06rem; font-weight: 700; line-height: 1.35; }
.wa-card__headline a { color: var(--wa-ink); text-decoration: none; }
.wa-card__headline a:hover { color: var(--wa-teal-ink); }

.wa-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-block-start: 2px;
}
.wa-card__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wa-card__age { font-size: .78rem; color: var(--wa-faint); }
.wa-card__social {
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	height: 30px;
	border-radius: var(--wa-pill);
	border: 1px solid var(--wa-line-strong);
	color: var(--wa-muted);
	text-decoration: none;
}
.wa-card__social:hover { border-color: var(--wa-teal); color: var(--wa-teal-ink); }
.wa-card__social--text { padding: 0 10px; font-size: .82rem; width: auto; }

/* -------------------------------------------------------------------------- */
/*  Chips + tags                                                               */
/* -------------------------------------------------------------------------- */
.wa-chip {
	font-size: .76rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var(--wa-pill);
	border: 1px solid transparent;
	white-space: nowrap;
}
.wa-chip--skill { background: var(--wa-amber-soft); color: var(--wa-amber-ink); border-color: var(--wa-amber-line); }
.wa-chip--place { background: var(--wa-panel); color: var(--wa-muted); border-color: var(--wa-line); }
.wa-chip--avail { background: var(--wa-teal-soft); color: var(--wa-teal-ink); border-color: var(--wa-teal-line); }

.wa-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wa-tag {
	font-size: .74rem;
	color: var(--wa-muted);
	background: transparent;
	border: 1px solid var(--wa-line-strong);
	border-radius: var(--wa-pill);
	padding: 2px 9px;
}
.wa-tags--lg .wa-tag { font-size: .82rem; padding: 4px 12px; }

/* Selectable tag pill in the filter bar (label wraps a hidden checkbox). */
.wa-tag--pick { cursor: pointer; display: inline-flex; align-items: center; transition: background .12s, border-color .12s, color .12s; }
.wa-tag--pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.wa-tag--pick:has(input:checked) { background: var(--wa-teal); border-color: var(--wa-teal); color: #fff; }
.wa-tag--pick:focus-within { outline: 2px solid var(--wa-teal); outline-offset: 2px; }

/* -------------------------------------------------------------------------- */
/*  Single listing ("the CV")                                                  */
/* -------------------------------------------------------------------------- */
.wa-single { max-width: var(--wa-maxw); }
.wa-back {
	display: inline-block;
	color: var(--wa-muted);
	text-decoration: none;
	font-weight: 600;
	margin-block-end: 14px;
}
.wa-back:hover { color: var(--wa-teal-ink); }

.wa-single__head { margin-block-end: 20px; }
.wa-single__title { margin: 6px 0 10px; font-size: 1.7rem; font-weight: 700; line-height: 1.3; }
.wa-single__age { color: var(--wa-faint); font-size: .86rem; margin: 8px 0 0; }

.wa-single__grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 24px;
	align-items: start;
}
.wa-single__main { min-width: 0; }

.wa-block { margin-block-end: 22px; }
.wa-block__title {
	font-size: 1.08rem;
	font-weight: 700;
	margin: 0 0 10px;
	padding-block-end: 6px;
	border-block-end: 2px solid var(--wa-line);
	display: inline-block;
}
.wa-bio { line-height: 1.75; color: var(--wa-ink); }
.wa-bio p { margin: 0 0 .8em; }

.wa-single__side { display: flex; flex-direction: column; gap: 14px; }
.wa-panel {
	background: var(--wa-surface);
	border: 1px solid var(--wa-line);
	border-radius: var(--wa-radius);
	padding: 16px 18px;
	box-shadow: var(--wa-shadow);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wa-panel--owner { background: var(--wa-panel); box-shadow: none; }
.wa-fact { display: flex; flex-direction: column; gap: 2px; }
.wa-fact__k { font-size: .76rem; font-weight: 700; color: var(--wa-faint); text-transform: uppercase; letter-spacing: .3px; }
.wa-fact__v { font-size: .96rem; color: var(--wa-ink); }
.wa-fact__v a { color: var(--wa-teal-ink); text-decoration: none; font-weight: 600; }
.wa-fact__v a:hover { text-decoration: underline; }

.wa-notice {
	border-radius: var(--wa-radius-sm);
	padding: 12px 16px;
	margin-block-end: 16px;
	font-weight: 600;
	font-size: .95rem;
}
.wa-notice--muted { background: var(--wa-panel); color: var(--wa-muted); }
.wa-notice--pending { background: var(--wa-amber-soft); color: var(--wa-amber-ink); border: 1px solid var(--wa-amber-line); }

/* -------------------------------------------------------------------------- */
/*  Forms (create/edit, signup, login)                                        */
/* -------------------------------------------------------------------------- */
.wa-form, .wa-formwrap { display: flex; flex-direction: column; gap: 16px; }
.wa-formwrap .wa-form { margin-block-start: 4px; }

.wa-form__step { border: 0; padding: 0; margin: 0; }
.wa-form__step legend { font-weight: 700; font-size: .95rem; padding: 0; margin-block-end: 8px; }

.wa-field { display: flex; flex-direction: column; gap: 6px; }
.wa-field > label,
.wa-label { font-weight: 600; font-size: .92rem; }
.wa-req { font-style: normal; font-size: .78rem; font-weight: 600; color: var(--wa-faint); margin-inline-start: 4px; }

.wa-field input[type="text"],
.wa-field input[type="email"],
.wa-field input[type="url"],
.wa-field input[type="tel"],
.wa-field input[type="password"],
.wa-field input[type="number"],
.wa-field input[type="search"],
.wa-field select,
.wa-field textarea,
.wa-filters__f select,
.wa-filters__f input,
.wa-modal input,
.wa-modal textarea {
	width: 100%;
	font: inherit;
	color: var(--wa-ink);
	background: var(--wa-surface);
	border: 1px solid var(--wa-line-strong);
	border-radius: var(--wa-radius-sm);
	padding: .6em .75em;
	transition: border-color .15s, box-shadow .15s;
}
.wa-field textarea, .wa-modal textarea { resize: vertical; line-height: 1.6; }
.wa-field input:focus,
.wa-field select:focus,
.wa-field textarea:focus,
.wa-filters__f select:focus,
.wa-filters__f input:focus,
.wa-modal input:focus,
.wa-modal textarea:focus {
	outline: none;
	border-color: var(--wa-teal);
	box-shadow: 0 0 0 3px var(--wa-teal-soft);
}

.wa-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.wa-help { font-size: .82rem; color: var(--wa-muted); }
.wa-help--lock { color: var(--wa-amber-ink); }

.wa-choice { display: flex; gap: 10px; flex-wrap: wrap; }
.wa-choice__opt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--wa-line-strong);
	border-radius: var(--wa-radius-sm);
	padding: 9px 14px;
	cursor: pointer;
	font-weight: 600;
	transition: border-color .15s, background .15s;
}
.wa-choice__opt:has(input:checked) { border-color: var(--wa-teal); background: var(--wa-teal-soft); color: var(--wa-teal-ink); }

.wa-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.wa-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: .92rem; }
.wa-check input { accent-color: var(--wa-teal); }

.wa-tagpick { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.wa-tagpick__hint { flex: 1 1 100%; margin: 0; }

.wa-consent { align-items: flex-start; gap: 9px; line-height: 1.5; }
.wa-consent input { margin-block-start: 3px; }
.wa-consent a { color: var(--wa-teal-ink); }

.wa-note--hiring {
	margin: 0;
	background: var(--wa-amber-soft);
	color: var(--wa-amber-ink);
	border: 1px solid var(--wa-amber-line);
	border-radius: var(--wa-radius-sm);
	padding: 10px 14px;
	font-size: .9rem;
}

.wa-form__actions { margin-block-start: 4px; }
.wa-form__msg { margin: 0; font-weight: 600; min-height: 1.2em; }
.wa-form__msg.is-error { color: var(--wa-danger-ink); }
.wa-form__msg.is-ok { color: var(--wa-teal-ink); }

.wa-inline { display: flex; gap: 8px; align-items: stretch; }
.wa-inline input { flex: 1 1 auto; }
.wa-inline .wa-btn { flex: 0 0 auto; }

/* Native WP login form, lightly dressed to match. */
.wa-auth__tag { color: var(--wa-muted); margin: 0 0 16px; }
.wa-auth__alt { margin-block-start: 18px; text-align: center; }
.wa-auth__alt a { color: var(--wa-teal-ink); font-weight: 600; text-decoration: none; }
.wa-loginform label { display: block; font-weight: 600; margin-block-end: 6px; }
.wa-loginform input[type="text"],
.wa-loginform input[type="password"] {
	width: 100%;
	font: inherit;
	border: 1px solid var(--wa-line-strong);
	border-radius: var(--wa-radius-sm);
	padding: .6em .75em;
	margin-block-end: 12px;
}
.wa-loginform input:focus { outline: none; border-color: var(--wa-teal); box-shadow: 0 0 0 3px var(--wa-teal-soft); }
.wa-loginform .button,
.wa-loginform input[type="submit"] {
	font: inherit;
	font-weight: 600;
	background: var(--wa-teal);
	color: #fff;
	border: 1px solid var(--wa-teal);
	border-radius: var(--wa-radius-sm);
	padding: .62em 1.2em;
	cursor: pointer;
}
.wa-loginform .button:hover { background: var(--wa-teal-ink); }
.wa-loginform .login-remember { font-weight: 400; }
.wa-loginform .login-remember label { display: inline-flex; align-items: center; gap: 6px; }

/* -------------------------------------------------------------------------- */
/*  Dashboard                                                                  */
/* -------------------------------------------------------------------------- */
.wa-dash__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-block-end: 18px;
}
.wa-dash__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wa-dash__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--wa-surface);
	border: 1px solid var(--wa-line);
	border-radius: var(--wa-radius);
	padding: 12px 16px;
	box-shadow: var(--wa-shadow);
}
.wa-dash__info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.wa-dash__status {
	font-size: .72rem;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: var(--wa-pill);
	text-transform: uppercase;
	letter-spacing: .3px;
	background: var(--wa-panel);
	color: var(--wa-muted);
}
.wa-dash__status.is-active { background: var(--wa-teal-soft); color: var(--wa-teal-ink); }
.wa-dash__status.is-pending { background: var(--wa-amber-soft); color: var(--wa-amber-ink); }
.wa-dash__status.is-expired { background: var(--wa-panel); color: var(--wa-faint); }
.wa-dash__title { font-weight: 700; color: var(--wa-ink); text-decoration: none; }
.wa-dash__title:hover { color: var(--wa-teal-ink); }
.wa-dash__side { font-size: .82rem; color: var(--wa-faint); }
.wa-dash__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.wa-hr { border: 0; border-block-start: 1px solid var(--wa-line); margin: 30px 0 20px; }
.wa-danger__title { font-size: 1rem; font-weight: 700; color: var(--wa-danger-ink); margin: 0 0 10px; }

.wa-card-note {
	background: var(--wa-surface);
	border: 1px solid var(--wa-line);
	border-radius: var(--wa-radius);
	padding: 26px 22px;
	text-align: center;
	box-shadow: var(--wa-shadow);
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
}
.wa-card-note p { margin: 0; color: var(--wa-muted); }
.wa-card-note .wa-btn { margin-inline: 4px; }

/* -------------------------------------------------------------------------- */
/*  Modals (rendered outside .wa-app)                                          */
/* -------------------------------------------------------------------------- */
body.wa-modal-open { overflow: hidden; }
.wa-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 20px;
}
.wa-modal[hidden] { display: none; }
.wa-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 30, 42, .55); }
.wa-modal__panel {
	position: relative;
	background: var(--wa-surface);
	border-radius: var(--wa-radius);
	box-shadow: var(--wa-shadow-lg);
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	animation: wa-pop .16s ease-out;
}
@keyframes wa-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wa-modal__x {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 12px;
	background: none;
	border: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wa-faint);
	cursor: pointer;
	padding: 4px 8px;
}
.wa-modal__x:hover { color: var(--wa-ink); }
.wa-modal__title { margin: 0 24px 0 0; font-size: 1.2rem; font-weight: 700; }
.wa-modal__actions { margin-block-start: 2px; }
.wa-modal__actions .wa-btn { width: 100%; }
.wa-modal__msg { margin: 0; font-weight: 600; min-height: 1.1em; font-size: .92rem; }
.wa-modal__msg.is-ok { color: var(--wa-teal-ink); }
.wa-modal__msg.is-error { color: var(--wa-danger-ink); }

/* Honeypot — kept in the DOM for bots, never shown to people. */
.wa-hp {
	position: absolute !important;
	inset-inline-start: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------- */
/*  Focus + motion                                                             */
/* -------------------------------------------------------------------------- */
.wa-app a:focus-visible,
.wa-app button:focus-visible,
.wa-modal a:focus-visible,
.wa-modal button:focus-visible {
	outline: 2px solid var(--wa-teal);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.wa-app *, .wa-modal * { transition: none !important; animation: none !important; }
}

/* -------------------------------------------------------------------------- */
/*  Responsive                                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 780px) {
	.wa-single__grid { grid-template-columns: 1fr; }
	.wa-single__title { font-size: 1.4rem; }
}
@media (max-width: 560px) {
	.wa-bar__inner { padding: 12px 16px; }
	.wa-main { padding: 20px 16px 72px; }
	.wa-field-row { grid-template-columns: 1fr; }
	.wa-nav { gap: 4px; }
	.wa-nav__link { padding: 6px 8px; font-size: .9rem; }
	.wa-fab { inset-block-end: 16px; inset-inline-end: 16px; }
	.wa-grid { grid-template-columns: 1fr; }
}