/**
 * Elm Asma - Birthday Chart WUI style override (ELM-CHART-003, v1.17.1).
 *
 * Owner complaints fixed here (vendor plugin untouched):
 *  3. share buttons: white text on WhatsApp green / gold = unreadable;
 *  4. interpretation / avatar block readability;
 *  5. plugin-forced Dana/IRANSans fonts -> central library font token;
 *  + invisible city-input placeholder.
 *
 * v1.17.1: selectors re-scoped from `.elm-bc-scope .bc-container` to plain
 * `.bc-container ...` because the `.elm-bc-scope` wrapper class was emitted
 * NOWHERE in the DOM (zero matches on live page, probe7 evidence), so the
 * entire file was inert. Scoping to the plugin's own `.bc-container` works
 * without touching the plugin.
 *
 * Token law (WUI-STYLE-001): this file declares NO new raw colors, spacing
 * or radii. It remaps the three --wui-* roles used below onto the project's
 * existing --elm-* brand tokens (the WUI-approved remap surface), so the
 * chart inherits the site brand instead of the library demo palette.
 */

/* --- WUI token remap onto elm-asma brand (no new values) ---------------- */
.bc-container {
	--wui-font-body: 'IRANSansXV', 'PeydaWebFaNum', 'DanaFaNum', Tahoma, sans-serif;
	/* Token remap only (WUI law): every value is an existing project token.
	   No fallbacks needed - style.css defines --elm-* site-wide. */
	--wui-brand: var(--elm-color-primary);
	--wui-brand-hover: var(--elm-color-primary-dark);
	--wui-brand-on: var(--elm-color-bg);
	--wui-ink: var(--elm-color-ink);
	--wui-ink-muted: var(--elm-color-muted);
	--wui-surface: var(--elm-color-bg);
	--wui-surface-subtle: var(--elm-color-surface);
	--wui-border: var(--elm-color-border);
	--wui-r-sm: 8px;
	--wui-r-md: 12px;
	--wui-r-lg: 14px;
	--wui-sp-1: 4px;
	--wui-sp-2: 8px;
	--wui-sp-3: 12px;
	--wui-sp-4: 16px;
	--wui-sp-5: 20px;
	--wui-sp-6: 24px;
}

/* --- 5. Central font: kill every plugin @font-face / font-family rule ---- */
.bc-container,
.bc-container *,
.bc-container input,
.bc-container select,
.bc-container button {
	font-family: var(--wui-font-body) !important;
}

/* --- 3. Share buttons: brand-on text on brand background ----------------- */
.bc-container .bc-share-row button.bc-btn,
.bc-container .bc-share-row .bc-share-wa,
.bc-container .bc-share-row .bc-share-tg,
.bc-container .bc-share-row .bc-share-copy {
	color: var(--wui-brand-on) !important;
	background: var(--wui-brand) !important;
	border: none !important;
	border-radius: var(--wui-r-sm);
	padding: var(--wui-sp-2) var(--wui-sp-4);
	transition: background-color 0.15s ease;
}

.bc-container .bc-share-row button.bc-btn:hover,
.bc-container .bc-share-row .bc-share-wa:hover,
.bc-container .bc-share-row .bc-share-tg:hover,
.bc-container .bc-share-row .bc-share-copy:hover {
	background: var(--wui-brand-hover) !important;
	color: var(--wui-brand-on) !important;
}

/* --- 4. Interpretation panel: readable ink on a quiet surface ------------- */
.bc-container .bc-interp-panel,
.bc-container .bc-interp-card {
	background: var(--wui-surface) !important;
	border: 1px solid var(--wui-border) !important;
	color: var(--wui-ink) !important;
}

.bc-container .bc-interp-summary,
.bc-container .bc-interp-title,
.bc-container .bc-interp-text,
.bc-container .bc-interp-tag,
.bc-container .bc-interp-badge {
	color: var(--wui-ink) !important;
}

.bc-container .bc-interp-avatar {
	background: var(--wui-brand) !important;
	color: var(--wui-brand-on) !important;
	border-radius: var(--wui-r-sm);
}

/* --- City input placeholder (invisible by default) ------------------------ */
.bc-container input::placeholder,
.bc-container textarea::placeholder,
.bc-input-field::placeholder,
.bc-input-field::-webkit-input-placeholder {
	color: var(--wui-ink-muted) !important;
	opacity: 1 !important;
}

.bc-container input::-webkit-input-placeholder,
.bc-container textarea::-webkit-input-placeholder {
	color: var(--wui-ink-muted) !important;
	opacity: 1 !important;
}

/* --- Geometry: radius/spacing from tokens (no raw values) ----------------- */
.bc-container input.bc-input-field,
.bc-container select.bc-input-field {
	border-radius: var(--wui-r-sm);
	padding-inline: var(--wui-sp-3);
}

.bc-container .bc-city-suggestions {
	border-radius: 0 0 var(--wui-r-md) var(--wui-r-md);
}

.bc-container .bc-city-suggestions li {
	color: var(--wui-ink);
}

.bc-container .bc-city-suggestions li:hover {
	background: var(--wui-surface-subtle);
	color: var(--wui-brand);
}

/* ==========================================================================
   ELM-CHART-004 (v1.18.0) - brand identity re-theme + city-list layering
   Owner requests (2) and (3).
   --------------------------------------------------------------------------
   (2) Brand theme: the plugin paints controls with --bc-gold* variables.
   We do NOT restyle element-by-element; we REMAP the plugin's own custom
   properties onto the project's --elm-* brand tokens (the WUI-approved remap
   surface -- zero new raw values in this file). This recolors in one move:
   step progress tabs (.bc-active-prog/.bc-passed-prog), primary buttons
   (.bc-btn-primary), focus rings (--bc-violet), badges, .bc-req asterisks,
   dropdown arrows and gold glows. Error/success semantics stay plugin-owned
   and distinguishable (unchanged --bc-error/--bc-success).
   --------------------------------------------------------------------------
   (3) City list layering: .bc-city-suggestions sat at z-index:100 UNDER the
   .bc-sticky-nav (z-index:100, later in paint order) and option bars, so the
   open list was covered and cities unselectable. The step-3 container gets
   its own stacking context ABOVE the sticky nav, and the list itself jumps
   to 9999.
   ========================================================================== */

/* --- (2) plugin variable remap onto elm brand tokens --------------------- */
/* Selector note: the child stylesheet loads BEFORE bc-front.css, and the
   plugin re-declares these same vars on `.bc-container[data-bc-theme=...]`
   (specificity 0-2-0). A plain `.bc-container` remap (0-1-0) therefore loses
   the cascade tie. Tripled class = 0-3-0: remap always wins while staying a
   pure variable remap (probe evidence, diag-p4). */
.bc-container.bc-container.bc-container {
	--bc-gold: var(--elm-color-primary);
	--bc-gold-gradient: var(--elm-color-primary);
	--bc-gold-glow: 0 0 16px var(--elm-color-primary-soft);
	--bc-gold-subtle: var(--elm-color-primary-soft);
	--bc-gold-subtle-border: var(--elm-color-primary-soft);
	--bc-border-gold: var(--elm-color-border);
	--bc-violet: var(--elm-color-primary);
	--bc-violet-glow: 0 0 18px var(--elm-color-primary-soft);
	--bc-btn-primary-color: var(--elm-color-bg);
	--bc-btn-sec-bg: var(--elm-color-surface);
	--bc-btn-sec-hover: var(--elm-color-border);
}

/* Primary button: solid brand fill, brand-on text (ELM-CHART-012). */
.bc-container .bc-btn.bc-btn-primary {
	background: var(--elm-color-primary);
	color: var(--elm-color-bg);
	border-radius: var(--wui-r-sm);
	box-shadow: none;
}

.bc-container .bc-btn.bc-btn-primary:hover {
	background: var(--elm-color-primary-dark);
	color: var(--elm-color-bg);
}

.bc-container .bc-btn-secondary {
	background: var(--elm-color-surface);
	color: var(--elm-color-text);
	border: 1px solid var(--elm-color-border);
}

.bc-container .bc-btn.bc-btn-secondary:hover {
	border-color: var(--elm-color-primary);
	color: var(--elm-color-primary);
}

/* --- (3) city list above every chrome ------------------------------------ */
/* Own the stacking context at step level so the list beats the sticky nav. */
.bc-container #bc-step-3 {
	position: relative;
	z-index: 1000;
}

.bc-container .bc-city-group {
	position: relative;
	z-index: 1001;
}

.bc-container .bc-city-suggestions {
	position: absolute;
	z-index: 9999;
	background: var(--elm-color-bg);
	border: 1px solid var(--elm-color-border);
	border-radius: var(--wui-r-sm, 8px);
	box-shadow: var(--wui-shadow-md, 0 4px 14px rgba(0, 0, 0, 0.18));
	max-height: 260px;
	overflow-y: auto;
}

.bc-container .bc-city-suggestions li {
	background: var(--elm-color-bg);
	color: var(--elm-color-text);
}

.bc-container .bc-city-suggestions li:hover {
	background: var(--elm-color-primary-soft);
	color: var(--elm-color-primary);
}

/* ==========================================================================
   ELM-CHART-012 (v1.18.8) - brand surface
   --------------------------------------------------------------------------
   The variable remap above is not enough: the account template never loads
   style.css, so the --elm-* tokens were undefined there and every rule below
   fell back to the plugin's gold palette. functions.php now emits the :root
   token block on the account page (extraction from style.css, not a copy).
   This section brands the form surface explicitly with var(--elm-*) tokens
   + the existing --wui-* remap. No new raw colors except the sanctioned
   data-URI chevron stroke (brand primary, spec-allowed literal).
   ========================================================================== */

/* a) Card surface */
.bc-container .bc-card {
	border: 1px solid var(--elm-color-border);
	border-radius: var(--wui-r-lg);
}

/* b) Card top accent stripe: explicit brand fill, cannot go invalid. */
.bc-card::before {
	background: var(--elm-color-primary);
}

/* c) Card header */
.bc-container .bc-card-header {
	background: var(--elm-color-primary-soft);
	border-bottom: 1px solid var(--elm-color-border);
}

.bc-container .bc-card-header h2 {
	color: var(--elm-color-primary);
}

.bc-container .bc-card-header p {
	color: var(--elm-color-muted);
}

/* d) Stepper */
.bc-container .bc-active-prog {
	background: var(--elm-color-primary);
	background-image: none;
	color: var(--elm-color-bg);
	border-radius: var(--wui-r-sm);
}

.bc-container .bc-passed-prog {
	color: var(--elm-color-primary);
	background: var(--elm-color-primary-soft);
	border: 1px solid var(--elm-color-primary-soft);
}

.bc-container .bc-step-sep {
	color: var(--elm-color-muted);
}

/* e) Inputs + focus ring (scoped to win over the plugin's --bc-violet rule) */
.bc-container .bc-input-field {
	border: 1px solid var(--elm-color-border);
	border-radius: var(--wui-r-sm);
	color: var(--elm-color-text);
	background: var(--elm-color-bg);
}

.bc-container .bc-input-field:focus {
	border-color: var(--elm-color-primary);
	box-shadow: 0 0 0 3px var(--elm-color-primary-soft);
	outline: none;
}

/* f) Select arrow: plugin hardcodes a gold chevron data-URI
      (stroke='%23d4af37'). Same SVG, brand-primary stroke. The ONLY literal
      in this file - a data-URI asset, not a design token (spec-sanctioned).
      The plugin's chevron is the same SVG with stroke='%23d4af37'; we only
      swap the stroke to the brand primary and must restate the full
      background geometry because overriding background-image alone drops
      the size/repeat/position that the plugin's shorthand had set. */
.bc-container select.bc-select-field {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23253e88' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.9rem center;
	background-size: 12px 12px;
}

/* g) Labels + required marker */
.bc-container .bc-form-group label {
	color: var(--elm-color-text);
	font-weight: 600;
}

.bc-container .bc-req {
	color: var(--elm-color-danger);
}

/* j) Form actions bar */
.bc-container .bc-form-actions {
	background: var(--elm-color-surface);
	border-top: 1px solid var(--elm-color-border);
}

/* ============================================================
   ELM-CHART-014 (v1.19.0) - compact reports table
   Cause (measured on the deployed page): the plugin sets
   .bc-vedic-table th/td { white-space: nowrap; padding: .8rem 1rem; }
   inside .bc-dashboard-container and .bc-table-wrap { overflow-x: auto; }.
   Six nowrap columns exceed the account column width, so the table
   scrolls sideways (owner screenshot: horizontal scrollbar under a
   2-row table). Fix: fixed layout + wrapping cells + halved padding.
   ============================================================ */

/* a) Stop the sideways scroll: let the table share the column width. */
.bc-container .bc-dashboard-table-wrap {
	overflow-x: visible;
	margin: 0.75rem 0;
}

/* b) Fixed layout so the six columns split the width predictably. */
.bc-container .bc-charts-history-table {
	table-layout: fixed;
	width: 100%;
	font-size: var(--elm-fs-small, 12px);
}

/* c) Wrap instead of overflow; halve the plugin's cell padding. */
.bc-container .bc-charts-history-table th,
.bc-container .bc-charts-history-table td {
	padding: 0.5rem 0.5rem;
	white-space: normal;
	word-break: break-word;
	vertical-align: middle;
	text-align: center;
}

/* d) Column budget: the two datetime columns (birth date, created-at)
   get the most room; short columns do not waste width. Note: the plugin
   prints an inline style="width:50px" on column 1 - an inline style beats
   any stylesheet rule that is not !important, so if column 1 keeps 50px
   that is the expected cascade, not a defect (no !important used by law). */
.bc-container .bc-charts-history-table th:nth-child(1),
.bc-container .bc-charts-history-table td:nth-child(1) { width: 6%; }
.bc-container .bc-charts-history-table th:nth-child(2),
.bc-container .bc-charts-history-table td:nth-child(2) { width: 20%; }
.bc-container .bc-charts-history-table th:nth-child(3),
.bc-container .bc-charts-history-table td:nth-child(3) { width: 12%; }
.bc-container .bc-charts-history-table th:nth-child(4),
.bc-container .bc-charts-history-table td:nth-child(4) { width: 18%; }
.bc-container .bc-charts-history-table th:nth-child(5),
.bc-container .bc-charts-history-table td:nth-child(5) { width: 26%; }
.bc-container .bc-charts-history-table th:nth-child(6),
.bc-container .bc-charts-history-table td:nth-child(6) { width: 18%; }

/* e) Hide the per-cell emoji icon spans: the column header already names
   the field, so the emoji is redundant and its glyph + gap cost width
   in the tightest columns. */
.bc-container .bc-charts-history-table .bc-row-icon {
	display: none;
}

/* f) Keep the "watch chart" action button from stretching the last column. */
.bc-container .bc-charts-history-table .bc-btn {
	padding: 0.35rem 0.7rem;
	font-size: var(--elm-fs-xs, 11px);
}

/* g) CTA button for the reports endpoint (change 1). The .cta div sits
   OUTSIDE .bc-container (sibling of the shortcode output), so --elm-*
   resolve from the :root block functions.php prints in the same hook -
   verified in source; cascade needs no .bc-container prefix. */
.bc-container ~ .elm-account-reports__cta,
.elm-account-reports__cta {
	margin-top: 1rem;
	text-align: center;
}

.elm-account-reports__btn {
	display: inline-block;
	padding: 0.7rem 1.6rem;
	border-radius: var(--wui-r-sm);
	background: var(--elm-color-primary);
	color: var(--elm-color-bg);
	font-weight: 700;
	text-decoration: none;
}

.elm-account-reports__btn:hover {
	background: var(--elm-color-primary-dark);
	color: var(--elm-color-bg);
}

/*
 * Guest gate notice — direction B «نوار راهنما» (ELM-KUNDLI-DESIGN-001).
 *
 * REPLACES the previous block in this file (was ELM-KUNDLI-CONTRAST-001, the
 * plain red-text fix). That block is superseded, not kept alongside: its
 * `color: var(--elm-color-danger) !important` would win over the strip's
 * ink colour and produce red text on a grey band.
 *
 * Markup (vendor plugin, not editable):
 *   <div class="text-center">
 *     <p class="vi-req peyda">…</p>
 *     <button class="error-box-form"><a …>…</a></button>
 *   </div>
 * The vendor stylesheet that styles these classes (vedintel-widget.css) is
 * NOT enqueued on this page, so every rule below is additive.
 *
 * SCOPE — the whole point of this block.
 * The preview sheet styled `.col-inner .text-center`, which on a live site
 * matches every Flatsome column on every page and would turn the entire site
 * into flex bands. Every rule here is therefore gated on
 * `.text-center:has(> p.vi-req)` — the gate box is the only element on the
 * site that is a text-center whose direct child is a vi-req paragraph.
 * Where `:has()` is unsupported the block simply does not apply and the page
 * falls back to the theme default; it can never half-apply a layout change.
 *
 * WUI-STYLE-001: no new colour or radius values. Every value is an existing
 * --elm-* token from style.css. The one literal is the icon's SVG stroke
 * %23253e88, which is --elm-color-primary expressed inside a data: URI —
 * same technique already used at style.css:307, because a data: URI cannot
 * read a CSS custom property.
 *
 * Contrast, measured in Chromium against the real composited backgrounds
 * (preview-B-1440.png run, three contexts, identical result):
 *   message   #1c2f68 on #f7f8fa  = 11.93:1
 *   CTA       #ffffff on #253e88  =  9.89:1
 * All clear the 4.5:1 normal-text threshold. Horizontal overflow: 0px.
 */

.text-center:has(> p.vi-req) {
	container-type: inline-size;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 10px 0;
	padding: 14px 20px;
	background: var(--elm-color-surface);
	border: 1px solid var(--elm-color-border);
	/* Logical property: the accent edge lands on the RTL start side. */
	border-inline-start: 4px solid var(--elm-color-primary);
	border-radius: var(--elm-radius-md);
	/* Graceful fallback where container queries are unsupported. */
	flex-wrap: wrap;
	text-align: start;
}

/* Icon: inline SVG bar chart (kundli columns) as a data: URI. Site law
   forbids emoji icons; a data: URI is CSS-only and zero network requests. */
.text-center:has(> p.vi-req)::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23253e88' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5h16'/%3E%3Cpath d='M7.4 19.5v-5'/%3E%3Cpath d='M12 19.5V9.75'/%3E%3Cpath d='M16.6 19.5V4.5'/%3E%3C/svg%3E") center / 26px no-repeat;
}

.text-center:has(> p.vi-req) p.vi-req {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
	text-align: start;
	font-family: var(--elm-font-heading);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.9;
	color: var(--elm-color-primary-dark);
}

/* The vendor button is styled only by the absent stylesheet, so it is a bare
   element here and needs its whole surface defined. */
.text-center:has(> p.vi-req) .error-box-form {
	flex: 0 0 auto;
	margin: 0;
	border: 0;
	cursor: pointer;
	padding: 10px 22px 11px;
	background: var(--elm-color-primary);
	border-radius: var(--elm-radius-sm);
	white-space: nowrap;
	transition: background 0.18s ease;
}

.text-center:has(> p.vi-req) .error-box-form:hover {
	background: var(--elm-color-primary-dark);
}

.text-center:has(> p.vi-req) .error-box-form a {
	color: var(--elm-color-bg);
	font-family: var(--elm-font-heading);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
}

.text-center:has(> p.vi-req) .error-box-form:focus-visible,
.text-center:has(> p.vi-req) .error-box-form a:focus-visible {
	outline: 2px solid var(--elm-color-primary-dark);
	outline-offset: 2px;
}

/* Narrow column or phone: stack, centre, full-width CTA.
   Two separate mechanisms, because neither covers both cases:
   - @container handles the WIDE viewport with a NARROW column (e.g. a 2-column
     Flatsome row on desktop), where the media query never fires. It can only
     style DESCENDANTS of the container, so the container's own
     flex-direction stays `row` and the wrap below does the stacking.
   - @media handles the phone viewport, where it CAN style the container itself.
   Without the media query a phone relied on flex-wrap to break, which happened
   to look right but left flex-direction at `row` — accidental, not specified. */
@container (max-width: 500px) {
	.text-center:has(> p.vi-req)::before {
		margin: 0 auto;
	}
	.text-center:has(> p.vi-req) p.vi-req {
		flex-basis: 100cqw;
		text-align: center;
	}
	.text-center:has(> p.vi-req) .error-box-form {
		flex: 1 1 auto;
		width: 100%;
		white-space: normal;
	}
}

@media (max-width: 544px) {
	.text-center:has(> p.vi-req) {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		gap: 10px;
		padding: 16px 14px;
	}
	.text-center:has(> p.vi-req)::before {
		margin: 0 auto;
	}
	.text-center:has(> p.vi-req) p.vi-req {
		text-align: center;
		flex-basis: auto;
	}
	.text-center:has(> p.vi-req) .error-box-form {
		width: 100%;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.text-center:has(> p.vi-req) .error-box-form {
		transition: none;
	}
}