/* WFY24 Weather Widget — admin styles
 *
 * Premium 2-column layout (settings on the left, sticky live preview + quick
 * actions on the right). Card-based, soft shadows, system font stack. Collapses
 * to a single column < 1080px so the preview drops below the settings rather
 * than getting squished into a narrow side rail.
 *
 * Legacy classes preserved at the bottom for combobox / language pickers and
 * notice/disclosure callouts that the activation flow and Gutenberg-side
 * rendering still rely on.
 */

/* ============================================================
   Design tokens
   ============================================================ */
.wfy24-app {
	--wfy24-bg:           #f8fafc;
	--wfy24-card-bg:      #ffffff;
	--wfy24-card-border:  #e2e8f0;
	--wfy24-card-shadow:  0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06);
	--wfy24-card-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.08);
	--wfy24-text:         #0f172a;
	--wfy24-text-muted:   #64748b;
	--wfy24-text-soft:    #94a3b8;
	--wfy24-primary:      #2563eb;
	--wfy24-primary-dark: #1d4ed8;
	--wfy24-primary-soft: #eff6ff;
	--wfy24-success:      #15803d;
	--wfy24-success-soft: #f0fdf4;
	--wfy24-danger:       #b91c1c;
	--wfy24-danger-soft:  #fef2f2;
	--wfy24-radius:       12px;
	--wfy24-radius-sm:    8px;
	--wfy24-radius-lg:    16px;
	--wfy24-gap:          20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--wfy24-text);
}
.wfy24-app *, .wfy24-app *::before, .wfy24-app *::after { box-sizing: border-box; }

/* WP wraps everything in #wpcontent which has a grey background already; we
 * paint our own subtle backdrop only inside .wfy24-app so the rest of admin
 * is untouched. */
.wfy24-app { padding: 4px 4px 32px; }

/* ============================================================
   Header bar
   ============================================================ */
.wfy24-app__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 12px 0 20px;
}
.wfy24-app__title {
	display: flex;
	align-items: center;
	gap: 12px;
}
.wfy24-app__title h1 {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	color: var(--wfy24-text);
	line-height: 1.2;
}
.wfy24-app__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 10px;
	background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
	color: #fff;
	font-size: 20px;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.wfy24-pro-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
}
.wfy24-pro-pill--free {
	background: #f1f5f9;
	color: var(--wfy24-text-muted);
	border: 1px solid var(--wfy24-card-border);
}
.wfy24-pro-pill--pro {
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
	color: #78350f;
	border: 1px solid #fcd34d;
	box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

/* ============================================================
   Two-column grid
   ============================================================ */
.wfy24-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--wfy24-gap);
	align-items: start;
}
.wfy24-grid__main { min-width: 0; }
.wfy24-grid__aside { min-width: 0; }

.wfy24-sticky {
	position: sticky;
	top: 46px; /* below WP admin bar */
	display: grid;
	gap: var(--wfy24-gap);
}

@media (max-width: 1080px) {
	.wfy24-grid { grid-template-columns: 1fr; }
	.wfy24-sticky { position: static; }
}

/* When the selected variant is aqi-wide, the 360px sticky sidebar is too
   narrow to render the horizontal weather+AQI bar — the gradient bar
   collapses and "AIR / QUALITY" wraps onto 2 lines. JS (admin.js)
   toggles this class on the grid when the variant changes; we collapse
   the grid to a single column AND reverse the visual order so the
   preview appears above the form. The sidebar is no longer sticky in
   this layout — the form is now the long-scrolling element. */
.wfy24-grid--wide-preview {
	grid-template-columns: 1fr;
}
.wfy24-grid--wide-preview .wfy24-grid__aside {
	order: -1;
}
.wfy24-grid--wide-preview .wfy24-sticky {
	position: static;
}

/* ============================================================
   Card primitive
   ============================================================ */
.wfy24-card {
	background: var(--wfy24-card-bg);
	border: 1px solid var(--wfy24-card-border);
	border-radius: var(--wfy24-radius);
	box-shadow: var(--wfy24-card-shadow);
	margin-bottom: var(--wfy24-gap);
	overflow: hidden;
	transition: box-shadow 150ms ease;
}
.wfy24-card:last-child { margin-bottom: 0; }
.wfy24-card:hover { /* gentle lift on cards that are interactive — not all */ }

.wfy24-card__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px 0;
}
.wfy24-card__header h2,
.wfy24-card__header h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--wfy24-text);
	line-height: 1.3;
}
.wfy24-card__header h2 { font-size: 17px; }
.wfy24-card__subtitle {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--wfy24-text-muted);
	line-height: 1.5;
}
.wfy24-card__meta {
	font-size: 11px;
	color: var(--wfy24-text-soft);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 500;
}
.wfy24-card__body { padding: 16px 20px 20px; }

/* Collapsible (uses <details><summary>) */
.wfy24-card--collapsible > summary {
	list-style: none;
	cursor: pointer;
	user-select: none;
	padding-bottom: 16px;
}
.wfy24-card--collapsible > summary::-webkit-details-marker { display: none; }
.wfy24-card--collapsible > summary::after { content: none; }
.wfy24-card--collapsible[open] > summary { padding-bottom: 0; }
.wfy24-chevron {
	font-size: 12px;
	color: var(--wfy24-text-muted);
	transition: transform 150ms ease;
}
.wfy24-card--collapsible[open] .wfy24-chevron { transform: rotate(180deg); }

/* Hero card variant — used in welcome state */
.wfy24-card--hero { padding: 32px 36px; }
.wfy24-hero h2 {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	color: var(--wfy24-text);
	line-height: 1.25;
}
.wfy24-hero p {
	margin: 0 0 24px;
	font-size: 15px;
	color: var(--wfy24-text-muted);
}

/* Status card */
.wfy24-card--status .wfy24-card__body { padding: 14px 20px; }
.wfy24-status__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.wfy24-status__key {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.wfy24-status__label {
	font-size: 11px;
	color: var(--wfy24-text-soft);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 500;
}
.wfy24-status__key code {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--wfy24-text-muted);
	background: transparent;
}

/* Badge */
.wfy24-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}
.wfy24-badge--ok {
	background: var(--wfy24-success-soft);
	color: var(--wfy24-success);
}

/* ============================================================
   Form fields
   ============================================================ */
.wfy24-field { margin-bottom: 18px; }
.wfy24-field:last-child { margin-bottom: 0; }
.wfy24-field > label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--wfy24-text);
	margin-bottom: 6px;
}
.wfy24-field input[type="text"],
.wfy24-field input[type="email"],
.wfy24-field select {
	width: 100%;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: var(--wfy24-radius-sm);
	font-size: 14px;
	font-family: inherit;
	color: var(--wfy24-text);
	transition: border-color 150ms ease, box-shadow 150ms ease;
	line-height: 1.4;
}
.wfy24-field input[type="text"]:focus,
.wfy24-field input[type="email"]:focus,
.wfy24-field select:focus {
	outline: 0;
	border-color: var(--wfy24-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.wfy24-field input[readonly] {
	background: #f8fafc;
	color: var(--wfy24-text-muted);
	cursor: default;
}
.wfy24-hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--wfy24-text-muted);
	line-height: 1.5;
}
.wfy24-hint a { color: var(--wfy24-primary); text-decoration: none; }
.wfy24-hint a:hover { text-decoration: underline; }

.wfy24-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 18px;
}
.wfy24-field-row .wfy24-field { margin-bottom: 0; }
@media (max-width: 600px) {
	.wfy24-field-row { grid-template-columns: 1fr; }
}

/* Checkbox field */
.wfy24-field--check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: start;
	margin-bottom: 18px;
}
.wfy24-field--check input[type="checkbox"] {
	margin: 4px 0 0;
	width: 16px; height: 16px;
}
.wfy24-field--check label {
	font-size: 13px;
	font-weight: 600;
	color: var(--wfy24-text);
	margin: 0;
	display: block;
	cursor: pointer;
}

/* ============================================================
   Buttons
   ============================================================ */
.wfy24-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: var(--wfy24-radius-sm);
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.4;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
	white-space: nowrap;
}
.wfy24-btn:active { transform: translateY(1px); }
.wfy24-btn:focus { outline: 0; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }
.wfy24-btn--lg { padding: 12px 24px; font-size: 15px; }
.wfy24-btn--block { display: flex; width: 100%; }
.wfy24-btn--primary {
	background: var(--wfy24-primary);
	color: #fff;
	border-color: var(--wfy24-primary);
}
.wfy24-btn--primary:hover { background: var(--wfy24-primary-dark); border-color: var(--wfy24-primary-dark); color: #fff; }
.wfy24-btn--ghost {
	background: #fff;
	color: var(--wfy24-text);
	border-color: #cbd5e1;
}
.wfy24-btn--ghost:hover { background: #f8fafc; border-color: #94a3b8; color: var(--wfy24-text); }
.wfy24-btn--text {
	background: transparent;
	color: var(--wfy24-primary);
	border: 0;
	padding: 8px 12px;
	justify-content: flex-start;
}
.wfy24-btn--text:hover { background: var(--wfy24-primary-soft); color: var(--wfy24-primary-dark); }

.wfy24-form__actions {
	margin-top: 4px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ============================================================
   Preview card
   ============================================================ */
.wfy24-card--preview .wfy24-card__body {
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
	padding: 20px;
	min-height: 200px;
}
.wfy24-preview-host {
	display: flex;
	justify-content: center;
	align-items: center;
}
.wfy24-preview-host > div[data-wfy24-widget] {
	width: 100%;
}

/* ============================================================
   Quick actions card
   ============================================================ */
.wfy24-card--actions .wfy24-card__body { padding: 12px 16px 16px; }
.wfy24-action { margin-bottom: 10px; }
.wfy24-action:last-child { margin-bottom: 0; }
.wfy24-action--done {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	background: var(--wfy24-success-soft);
	border-radius: var(--wfy24-radius-sm);
	border: 1px solid #bbf7d0;
}
.wfy24-action--done .wfy24-action__icon {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--wfy24-success);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
}
.wfy24-action--done strong { display: block; font-size: 13px; color: var(--wfy24-success); margin-bottom: 2px; }
.wfy24-action__links { display: flex; gap: 14px; font-size: 12px; }
.wfy24-action__links a { color: var(--wfy24-text-muted); text-decoration: none; }
.wfy24-action__links a:hover { color: var(--wfy24-primary); }
.wfy24-action .wfy24-btn .wfy24-action__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	font-size: 16px;
	font-weight: 700;
	color: var(--wfy24-primary);
}

/* ============================================================
   Embed card
   ============================================================ */
.wfy24-card--embed .wfy24-card__body { padding: 16px 20px; }
.wfy24-codeblock {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: #0f172a;
	border-radius: var(--wfy24-radius-sm);
	margin-bottom: 8px;
}
.wfy24-codeblock code {
	flex: 1;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 12px;
	color: #e2e8f0;
	background: transparent;
	user-select: all;
	overflow-x: auto;
	white-space: nowrap;
}
.wfy24-codeblock--small {
	padding: 8px 10px;
	background: #f1f5f9;
}
.wfy24-codeblock--small code { color: var(--wfy24-text); font-size: 11px; }
.wfy24-copy-btn {
	background: rgba(255, 255, 255, 0.1);
	color: #e2e8f0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background 120ms ease;
}
.wfy24-copy-btn:hover { background: rgba(255, 255, 255, 0.2); }
.wfy24-copy-btn.is-copied { background: #15803d; color: #fff; border-color: #15803d; }

.wfy24-disclosure-toggle { margin-top: 12px; }
.wfy24-disclosure-toggle > summary {
	cursor: pointer;
	font-size: 12px;
	color: var(--wfy24-text-muted);
	user-select: none;
}
.wfy24-disclosure-toggle > summary:hover { color: var(--wfy24-primary); }
.wfy24-disclosure-toggle[open] > summary { margin-bottom: 8px; }

/* ============================================================
   Notices (top of page)
   ============================================================ */
.wfy24-notice {
	padding: 12px 16px;
	border-radius: var(--wfy24-radius-sm);
	font-size: 14px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.wfy24-notice::before { font-size: 16px; font-weight: 700; }
.wfy24-notice--success {
	background: var(--wfy24-success-soft);
	color: var(--wfy24-success);
	border-left: 3px solid var(--wfy24-success);
}
.wfy24-notice--success::before { content: '✓'; }
.wfy24-notice--error {
	background: var(--wfy24-danger-soft);
	color: var(--wfy24-danger);
	border-left: 3px solid var(--wfy24-danger);
}
.wfy24-notice--error::before { content: '⚠'; }

/* ============================================================
   Disclosure (data-sent disclaimer)
   ============================================================ */
.wfy24-disclosure {
	background: var(--wfy24-primary-soft);
	border: 1px solid #bfdbfe;
	border-radius: var(--wfy24-radius-sm);
	padding: 12px 14px;
	margin: 8px 0 20px;
	font-size: 13px;
	color: var(--wfy24-text-muted);
	line-height: 1.55;
}
.wfy24-disclosure strong { color: var(--wfy24-text); }
.wfy24-disclosure code {
	background: #fff;
	padding: 1px 6px;
	border-radius: 4px;
	border: 1px solid #bfdbfe;
	font-size: 12px;
	color: var(--wfy24-text);
}

/* ============================================================
   Required-city hint (shown when geolocation off + no city)
   ============================================================ */
.wfy24-city-required-hint {
	display: none;
	margin-top: 6px;
	color: var(--wfy24-danger);
	font-size: 12px;
}
.wfy24-city-required-hint.is-visible { display: block; }

/* ============================================================
   Combobox (city / language picker) — UNCHANGED CONTRACT
   Used by the city + language search fields. Class hooks must stay
   stable because admin.js (initCityPicker, initLangCombobox) and
   the existing onboarding template both rely on them.
   ============================================================ */
.wfy24-combobox {
	position: relative;
}
.wfy24-suggestions {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 50;
	margin: 4px 0 0;
	padding: 4px;
	max-height: 280px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--wfy24-card-border);
	border-radius: var(--wfy24-radius-sm);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
	list-style: none;
}
.wfy24-suggestion {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.4;
}
.wfy24-suggestion.is-active { background: var(--wfy24-primary-soft); }
.wfy24-suggestion-flag {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}
.wfy24-suggestion-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}
.wfy24-suggestion-name {
	font-weight: 600;
	color: var(--wfy24-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wfy24-suggestion-sub {
	font-size: 11px;
	color: var(--wfy24-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wfy24-lang-native { font-weight: 600; color: var(--wfy24-text); }
.wfy24-lang-english { font-size: 11px; color: var(--wfy24-text-muted); margin-left: 6px; }

/* ============================================================
   Geolocation row (legacy class — kept for onboarding wizard)
   ============================================================ */
.wfy24-geolocation-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.wfy24-geolocation-row input[type="checkbox"] { margin-top: 4px; }

/* ============================================================
   Variant gallery (used in onboarding if/when re-enabled)
   ============================================================ */
.wfy24-variant-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
}
.wfy24-variant-gallery .variant-card {
	border: 1px solid var(--wfy24-card-border);
	border-radius: var(--wfy24-radius-sm);
	padding: 16px;
	cursor: pointer;
	transition: border-color 120ms ease, box-shadow 120ms ease;
	background: #fff;
}
.wfy24-variant-gallery .variant-card:hover { border-color: var(--wfy24-primary); }
.wfy24-variant-gallery .variant-card.selected {
	border-color: var(--wfy24-primary);
	box-shadow: 0 0 0 3px var(--wfy24-primary-soft);
}