/**
 * Account tiers — customer-facing styles.
 *
 * Scoped entirely under yat- prefixed classes so nothing here can reach into
 * ReHub or an Elementor-built section. Mobile-first: the base rules are the
 * narrow layout and the single breakpoint widens it.
 *
 * @package Yanshur_Account_Tiers
 */

:root {
	--yat-ink: #182430;
	--yat-muted: #69707e;
	--yat-line: rgba(24, 36, 48, 0.12);
	--yat-cream: #f8f5ee;
	--yat-gold: #b08935;
	--yat-alert: #c33f31;
	--yat-alert-bg: #fbeae7;
	--yat-ok: #1a7f37;
	--yat-radius: 10px;
	--yat-gap: 18px;
}

/* ---------------------------------------------------------------- Badge -- */

/* Sits inside the theme's identity card, on the seam it exposes under the
   customer's name. The tokens are the account area's own (--ysc-*) with the
   plugin's palette behind them, so the badge follows the card if the theme
   palette is retuned. */
.yat-card-tier {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
}

.yat-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 10px;
	border: 1px solid var(--ysc-line, var(--yat-line));
	border-radius: 999px;
	background: var(--ysc-paper, var(--yat-cream));
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--ysc-ink, var(--yat-ink));
}

.yat-badge__dot {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--ysc-slate, var(--yat-muted));
}

.yat-badge--verified-agency .yat-badge__dot {
	background: var(--yat-gold);
}

.yat-badge__label {
	font-weight: 600;
}

.yat-badge__flag {
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--ysc-red-soft, var(--yat-alert-bg));
	color: var(--ysc-red, var(--yat-alert));
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.yat-card-tier__hint {
	flex: 0 0 100%;
	margin: 2px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--ysc-slate, var(--yat-muted));
}

.yat-card-tier__hint a {
	color: var(--ysc-ink, var(--yat-ink));
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.yat-card-tier__hint a:hover {
	color: var(--yat-gold);
}

/* ---------------------------------------------------- Navigation icon -- */

/* The account navigation draws each glyph from a --yac-icon custom property
   and falls back to a generic circled "i" for any endpoint it does not know
   about — which is what this one was sharing with Inquiries. Setting the
   property is all that is needed; the theme's ::before rule does the rest. */
.woocommerce-account .woocommerce-MyAccount-navigation-link--agency-application > a {
	--yac-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V9l6-4 6 4v12'/%3E%3Cpath d='M15 21V13h6v8'/%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M7 12h2M7 16h2'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- Panels -- */

.yat-panel {
	margin: 0 0 28px;
	padding: 22px;
	border: 1px solid var(--yat-line);
	border-radius: var(--yat-radius);
	background: #fff;
}

/* The account area already wraps its content in a white card, so the form
   adds no second frame of its own — only the intro block is set apart. */
.yat-apply {
	margin: 0;
}

.yat-apply__head {
	margin: 0 0 26px;
	padding: 22px 24px;
	border-radius: var(--yat-radius);
	background: var(--ysc-paper, var(--yat-cream));
}

.yat-apply__head > :last-child {
	margin-bottom: 0;
}

.yat-panel--warning {
	border-color: rgba(195, 63, 49, 0.3);
	background: var(--yat-alert-bg);
}

.yat-eyebrow {
	margin: 0 0 6px;
	font-family: "Courier New", Courier, monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yat-gold);
}

.yat-panel__title,
.yat-apply__title {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.25;
	color: var(--yat-ink);
}

.yat-panel__head{
    padding: 20px;
    margin-bottom: 20px;
}

.yat-panel__lead,
.yat-apply__lead {
	margin: 0 0 16px;
	color: var(--yat-muted);
	line-height: 1.6;
}

.yat-subtitle {
	margin: 26px 0 10px;
	font-size: 15px;
	color: var(--yat-ink);
}

.yat-muted {
	color: var(--yat-muted);
	font-size: 14px;
}

.yat-footnote {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--yat-line);
	font-size: 13px;
	color: var(--yat-muted);
}

.yat-alert {
	margin: 0 0 18px;
	padding: 14px 16px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.6);
	color: var(--yat-ink);
	line-height: 1.55;
}

.yat-quote {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 3px solid var(--yat-alert);
	background: rgba(255, 255, 255, 0.6);
	color: var(--yat-ink);
	font-style: normal;
}

/* --------------------------------------------------------------- Credit -- */

.yat-credit__figures {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--yat-gap);
	margin: 0 0 16px;
}

.yat-credit__figure {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.yat-credit__value {
	font-size: 24px;
	font-weight: 600;
	color: var(--yat-ink);
	line-height: 1.2;
}

.yat-credit__value--muted {
	font-size: 18px;
	color: var(--yat-muted);
}

.yat-credit__caption {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--yat-muted);
}

.yat-meter {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--yat-cream);
	overflow: hidden;
}

.yat-meter__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--yat-gold);
	transition: width 0.3s ease;
}

/* --------------------------------------------------------------- Tables -- */

.yat-table-wrap {
	overflow-x: auto;
}

.yat-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.yat-table th,
.yat-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--yat-line);
	text-align: left;
	vertical-align: middle;
}

.yat-table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--yat-muted);
}

.yat-table tr.is-overdue td {
	background: var(--yat-alert-bg);
}

.yat-table__action {
	text-align: right;
	white-space: nowrap;
}

.yat-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.yat-tag--overdue {
	background: var(--yat-alert);
	color: #fff;
}

/* ----------------------------------------------------------------- Form -- */

.yat-fieldset {
	margin: 0 0 26px;
	padding: 0;
	border: 0;
}

.yat-legend {
	width: 100%;
	margin: 0 0 14px;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--yat-line);
	font-size: 15px;
	font-weight: 600;
	color: var(--yat-ink);
}

.yat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--yat-gap);
}

.yat-field {
	margin: 0;
}

.yat-field label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--yat-ink);
}

.yat-optional {
	margin-left: 4px;
	font-weight: 400;
	font-size: 12px;
	color: var(--yat-muted);
}

.yat-field .required {
	border: 0;
	color: var(--yat-alert);
	text-decoration: none;
}

.yat-input,
.yat-select,
.yat-textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--yat-line);
	border-radius: 8px;
	background: #fff;
	color: var(--yat-ink);
	font-size: 15px;
	line-height: 1.4;
}

.yat-input:focus,
.yat-select:focus,
.yat-textarea:focus {
	border-color: var(--yat-gold);
	outline: 2px solid rgba(176, 137, 53, 0.25);
	outline-offset: 1px;
}

.yat-hint {
	display: block;
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--yat-muted);
}

.yat-checkgroup {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	padding: 12px;
	border: 1px solid var(--yat-line);
	border-radius: 8px;
	background: var(--yat-cream);
}

.yat-checkgroup__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

.yat-checkgroup__item input {
	margin: 0;
	flex: 0 0 auto;
}

.yat-field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	line-height: 1.5;
}

.yat-field--checkbox input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.yat-file {
	width: 100%;
	padding: 10px;
	border: 1px dashed var(--yat-line);
	border-radius: 8px;
	background: var(--yat-cream);
	font-size: 14px;
}

.yat-file-error {
	display: block;
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--yat-alert);
}

.yat-form__actions {
	margin: 24px 0 0;
}

/* Checkout: the credit line under the gateway description. */
.yat-gateway-credit {
	display: inline-block;
	margin-top: 4px;
	color: var(--yat-muted);
}

/* ----------------------------------------------------------- Wider view -- */

@media (min-width: 600px) {

	.yat-credit__figures {
		grid-template-columns: repeat(3, 1fr);
	}

	.yat-checkgroup {
		grid-template-columns: repeat(2, 1fr);
	}

	.yat-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.yat-field--multiselect,
	.yat-field--files,
	.yat-field--checkbox {
		grid-column: 1 / -1;
	}
}

@media (min-width: 900px) {

	.yat-checkgroup {
		grid-template-columns: repeat(3, 1fr);
	}
}