/* ==========================================================================
   WhatsApp Link Generator — page styles (loaded on that page only).
   Uses the theme's design tokens (--accent, --glass-*, --radius-*, fonts).
   The only extra colour is a restrained WhatsApp green for "ready" states.
   ========================================================================== */

.wa-hero, .wa-how, .wa-about, .wa-faq { --wa: #25d366; --wa-soft: color-mix(in srgb, #25d366 14%, transparent); --wa-line: color-mix(in srgb, #25d366 42%, transparent); }

/* Hero + tool -------------------------------------------------------------- */
.wa-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + clamp(40px, 6vw, 96px)) 0 clamp(48px, 6vw, 96px); }
.wa-hero__glow { position: absolute; width: 60vmax; height: 60vmax; inset-inline-start: -24vmax; bottom: -40vmax; background: radial-gradient(closest-side, var(--wa-soft), transparent 70%); opacity: 0.55; }
.wa-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
@media (min-width: 1024px) { .wa-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); } .wa-hero__main { padding-top: clamp(8px, 3vw, 48px); } }
.wa-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.wa-hero__top .eyebrow { margin: 0; }
.wa-hero__title { font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: var(--lh-head); max-width: 16ch; margin: 0; }
.wa-hero__lead { max-width: 54ch; margin: 22px 0 0; font-size: clamp(1.02rem, 0.5vw + 0.92rem, 1.2rem); color: var(--text-2); }

.wa-lang { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.8rem; font-family: var(--font-body); }
.wa-lang span { color: var(--muted); }
.wa-lang a { display: inline-grid; place-items: center; min-width: 40px; min-height: 32px; padding: 0 10px; border-radius: 999px; color: var(--text-2); letter-spacing: 0.06em; transition: background-color var(--dur-micro, .2s), color var(--dur-micro, .2s); }
.wa-lang a:hover { color: var(--text); }
.wa-lang a[aria-current="page"] { background: var(--accent-soft); color: var(--text); }

.wa-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.wa-badges li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass-1); font-size: 0.86rem; color: var(--text-2); }
.wa-badges .icon { color: var(--accent); flex: none; }

/* Card --------------------------------------------------------------------- */
.wa-tool { min-width: 0; }
.wa-card { border-radius: var(--radius-xl); padding: clamp(22px, 3vw, 38px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.wa-card__title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
.wa-card__dot { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--wa-soft); color: var(--wa); flex: none; }
.wa-field { display: grid; gap: 8px; min-width: 0; }
.wa-label { font-size: 0.9rem; color: var(--text-2); }
.wa-opt { color: var(--muted); font-size: 0.82rem; }
.wa-hint, .wa-count, .wa-note { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
.wa-count { text-align: end; font-variant-numeric: tabular-nums; }
.wa-note:empty, .wa-error:empty, .wa-copied:empty { display: none; }
.wa-note { color: var(--text-2); }
.wa-error { margin: 0; font-size: 0.85rem; color: #ef8a78; line-height: 1.6; }

.wa-input-group { position: relative; display: flex; min-width: 0; align-items: stretch; min-height: 56px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: rgba(0, 0, 0, 0.28); transition: border-color var(--dur-micro, .2s), background-color var(--dur-micro, .2s); }
.wa-input-group:hover { border-color: rgba(255, 255, 255, 0.28); }
.wa-input-group:focus-within { border-color: var(--accent); background: rgba(0, 0, 0, 0.38); }
.wa-field.has-error .wa-input-group { border-color: #e06c5a; }
.wa-field.is-valid .wa-input-group { border-color: var(--wa-line); }

.wa-cc { position: static; display: flex; }
.wa-cc__btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 14px; border: 0; border-inline-end: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 500 1rem/1 var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; border-start-start-radius: inherit; border-end-start-radius: inherit; min-width: 112px; }
.wa-cc__btn:hover { background: rgba(255, 255, 255, 0.04); }
.wa-cc__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wa-cc__btn .icon { color: var(--text-2); transition: transform var(--dur-ui, .4s) var(--ease-out, ease); }
.wa-cc__btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.wa-cc__flag { font-size: 1.25rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.wa-cc__flag.is-text { font: 600 0.72rem/1 var(--font-body); letter-spacing: 0.04em; padding: 4px 5px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--text-2); }

.wa-phone { flex: 1 1 0; width: 100%; min-width: 0; padding: 0 16px; border: 0; background: transparent; color: var(--text); font: 500 1.08rem/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-align: left; border-start-end-radius: inherit; border-end-end-radius: inherit; }
.wa-phone::placeholder { color: var(--muted); opacity: 0.8; }
.wa-phone:focus { outline: none; }

.wa-cc__pop { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 8px); border-radius: var(--radius-lg); background: var(--glass-3); padding: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.wa-cc__pop[hidden] { display: none; }
.wa-cc__search { position: relative; }
.wa-cc__search .icon { position: absolute; top: 50%; margin-top: -8px; inset-inline-start: 14px; color: var(--muted); pointer-events: none; }
html[dir="rtl"] .wa-cc__search input { direction: rtl; }
.wa-cc__search input { width: 100%; min-height: 46px; padding: 0 14px; padding-inline-start: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgba(0, 0, 0, 0.35); color: var(--text); font: inherit; font-size: 0.95rem; }
.wa-cc__search input:focus { outline: none; border-color: var(--accent); }
.wa-cc__list { list-style: none; margin: 8px 0 0; padding: 0; max-height: min(320px, 46vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.wa-cc__group { padding: 10px 10px 6px; font-size: 0.72rem; color: var(--muted); letter-spacing: var(--track-label); }
.wa-cc__opt { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; cursor: pointer; color: var(--text-2); font-size: 0.95rem; }
.wa-cc__opt .wa-cc__flag { width: 28px; text-align: center; flex: none; }
.wa-cc__opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-cc__opt-code { font-family: var(--font-body); font-variant-numeric: tabular-nums; color: var(--muted); direction: ltr; }
.wa-cc__opt.is-active, .wa-cc__opt:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.wa-cc__opt[aria-selected="true"] { color: var(--text); }
.wa-cc__opt[aria-selected="true"] .wa-cc__opt-code { color: var(--accent); }
.wa-cc__empty { padding: 18px 10px; color: var(--muted); font-size: 0.9rem; text-align: center; }

.wa-msg { width: 100%; min-height: 96px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: rgba(0, 0, 0, 0.28); color: var(--text); font: inherit; line-height: 1.7; resize: vertical; transition: border-color var(--dur-micro, .2s); }
.wa-msg:hover { border-color: rgba(255, 255, 255, 0.28); }
.wa-msg:focus { outline: none; border-color: var(--accent); background: rgba(0, 0, 0, 0.38); }

.wa-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.wa-generate { flex: 1 1 240px; justify-content: center; }
.wa-reset { flex: 0 0 auto; }
.wa-card .btn:focus-visible, .wa-result .btn:focus-visible, .wa-lang a:focus-visible, .wa-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Result ------------------------------------------------------------------- */
.wa-result { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--wa-line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--wa-soft), transparent 80%); }
.wa-result[hidden] { display: none; }
.wa-result:focus { outline: none; }
.wa-result.is-in { animation: wa-in var(--dur-ui, .45s) var(--ease-out, ease) both; }
@keyframes wa-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wa-result__title { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; color: var(--text); }
.wa-result__title .icon { color: var(--wa); flex: none; }
.wa-result__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
.wa-result__row { display: grid; gap: 6px; }
.wa-result__row dt { font-size: 0.78rem; color: var(--muted); }
.wa-result__row dd { margin: 0; min-width: 0; }
.wa-result__num { font: 600 1.15rem/1.3 var(--font-body); font-variant-numeric: tabular-nums; color: var(--text); }
.wa-result__link { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgba(0, 0, 0, 0.35); color: var(--text); font: 500 0.95rem/1 var(--font-body); text-align: left; text-overflow: ellipsis; }
.wa-result__link:focus { outline: none; border-color: var(--wa-line); }
.wa-result__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wa-result__actions .btn { flex: 1 1 180px; justify-content: center; }
.wa-copy.is-done { background: var(--wa); color: #06210f; }
.wa-open__ico { display: inline-grid; color: var(--wa); }
.wa-copied { margin: 0; font-size: 0.85rem; color: var(--wa); }

.wa-credit { margin: 14px 4px 0; font-size: 0.8rem; color: var(--muted); text-align: center; }
.wa-credit a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 4px; }
.wa-credit a:hover { color: var(--text); text-decoration-color: var(--accent); }

/* How it works ------------------------------------------------------------- */
.wa-h2 { font-size: clamp(1.7rem, 3vw, 2.8rem); margin: 0 0 clamp(26px, 3vw, 44px); max-width: 22ch; }
.wa-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 820px) { .wa-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wa-step { display: grid; align-content: start; gap: 10px; }
.wa-step__num { font: 500 0.85rem/1 var(--font-body); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }
.wa-step__title { margin: 0; font-size: 1.2rem; }
.wa-step__text { margin: 0; color: var(--text-2); font-size: 0.97rem; }

/* About -------------------------------------------------------------------- */
.wa-about__grid { display: grid; gap: 12px 64px; }
@media (min-width: 1024px) { .wa-about__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }

/* FAQ ---------------------------------------------------------------------- */
.wa-faq__grid { display: grid; gap: 16px 64px; }
@media (min-width: 1024px) { .wa-faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.wa-faq__list { display: grid; gap: 10px; }
.wa-faq__item { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0 20px; background: rgba(255, 255, 255, 0.02); transition: border-color var(--dur-ui, .4s); }
.wa-faq__item[open] { border-color: var(--line-strong); }
.wa-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; }
.wa-faq__item summary::-webkit-details-marker { display: none; }
.wa-faq__q { margin: 0; font-size: 1.02rem; font-weight: 600; line-height: 1.6; color: var(--text); font-family: var(--font-text); }
.wa-faq__icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); transition: transform var(--dur-ui, .4s) var(--ease-out, ease), border-color var(--dur-ui, .4s); }
.wa-faq__icon::before, .wa-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1px; margin: -0.5px 0 0 -5.5px; background: var(--text); }
.wa-faq__icon::after { transform: rotate(90deg); }
.wa-faq__item[open] .wa-faq__icon { transform: rotate(45deg); border-color: var(--accent-line); }
.wa-faq__a { padding-bottom: 18px; color: var(--text-2); }
.wa-faq__a p { margin: 0; }

/* Small screens ------------------------------------------------------------ */
@media (max-width: 480px) {
	.wa-card { padding: 20px 16px; border-radius: var(--radius-lg); }
	.wa-cc__btn { min-width: 96px; padding: 0 8px 0 10px; gap: 6px; }
	.wa-phone { padding: 0 12px; font-size: 1rem; }
	.wa-reset { flex: 1 1 100%; justify-content: center; }
	.wa-result { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.wa-result.is-in { animation: none; }
	.wa-faq__icon, .wa-cc__btn .icon { transition: none; }
}
/* iOS Safari zooms into inputs smaller than 16px on focus. */
@media (max-width: 767px) { .wa-phone, .wa-msg, .wa-cc__search input { font-size: max(16px, 1rem); } }

/* Full-guide card (link to the tool's article) */
.ae-guide { padding: 8px 0 clamp(8px, 2vw, 24px); }
.ae-guide__card { display: grid; gap: 6px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--accent-line); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--accent-soft), transparent 70%); color: var(--text); transition: border-color var(--dur-ui, .4s), transform var(--dur-ui, .4s) var(--ease-out, ease); }
.ae-guide__card:hover { border-color: var(--accent); transform: translateY(-2px); }
.ae-guide__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ae-guide__tag { font-size: 0.76rem; color: var(--accent); letter-spacing: var(--track-label, .04em); }
.ae-guide__title { font: 600 clamp(1.1rem, 1.6vw, 1.35rem)/1.45 var(--font-text); }
.ae-guide__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-2); }
html[dir="rtl"] .ae-guide__cta .icon { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .ae-guide__card { transition: none; } .ae-guide__card:hover { transform: none; } }