/* ============================================================================
 * A4U Pricing Calculator — shared styles
 * .a4u-pcb = compact banner/hero card    .a4u-pc = full-width section card
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * Shared primitives
 * ------------------------------------------------------------------------ */
.a4u-calc *,
.a4u-calc *::before,
.a4u-calc *::after { box-sizing: border-box; }
.a4u-calc p { margin: 0; padding: 0; }
.a4u-calc ul { list-style: none; margin: 0; padding: 0; }
.a4u-calc li { margin: 0; padding: 0; list-style: none; }
.a4u-calc h2, .a4u-calc h3 { margin: 0; padding: 0; font-family: inherit; }
.a4u-calc [hidden] { display: none !important; }

.a4u-calc select,
.a4u-calc input[type="date"],
.a4u-calc input[type="text"] {
	width: 100%;
	font-family: inherit;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.a4u-calc select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 11px 7px;
}

/* Urgent add-on checkbox — same in both variants */
.a4u-urgent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 12px;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 10px;
	cursor: pointer;
}
.a4u-urgent input { margin: 1px 0 0; width: 15px; height: 15px; flex: 0 0 auto; accent-color: #ea580c; cursor: pointer; }
.a4u-urgent__text { font-size: 12px; font-weight: 600; color: #7c2d12; line-height: 1.35; }
.a4u-urgent__fee { display: block; font-weight: 500; color: #9a3412; opacity: .85; }

/* ---------------------------------------------------------------------------
 * BANNER CARD — .a4u-pcb
 * Sits in the hero, right column, in place of a form.
 * ------------------------------------------------------------------------ */
.a4u-pcb {
	--a4u-pcb-accent: #f5821f;
	--a4u-pcb-accent-dark: #d96f10;
	--a4u-pcb-text: #0f172a;
	--a4u-pcb-muted: #64748b;
	--a4u-pcb-border: #dde4ef;
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--a4u-pcb-text);
	line-height: 1.4;
	text-align: left;
}
.a4u-pcb__card {
	background: #fff;
	border-radius: 16px;
	padding: 22px 20px;
	box-shadow: 0 18px 45px rgba(6, 20, 60, .22);
}
.a4u-pcb__title { font-size: 21px; font-weight: 800; line-height: 1.25; text-align: center; color: var(--a4u-pcb-text); }
.a4u-pcb__sub { font-size: 12.5px; color: var(--a4u-pcb-muted); text-align: center; margin-top: 5px !important; }

.a4u-pcb__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.a4u-pcb__field { min-width: 0; }
.a4u-pcb__field--full { grid-column: 1 / -1; }
.a4u-pcb__label { display: block; font-size: 12px; font-weight: 700; color: #334155; margin: 0 0 4px; }

.a4u-pcb select,
.a4u-pcb input[type="date"] {
	height: 42px;
	padding: 0 30px 0 12px;
	border: 1px solid var(--a4u-pcb-border);
	background-color: #fff;
	border-radius: 10px;
	font-size: 13.5px;
	color: #1e293b;
}
.a4u-pcb input[type="date"] { padding-right: 10px; }
.a4u-pcb select:focus,
.a4u-pcb input[type="date"]:focus {
	border-color: var(--a4u-pcb-accent);
	box-shadow: 0 0 0 3px rgba(245, 130, 31, .15);
}

/* When the date range is showing, Education Level has no partner cell beside
   it, so let it span. :has() is progressive - older browsers keep it at half
   width, which still reads fine. */
.a4u-pcb__fields:has([data-row="dates"]:not([hidden])) [data-row="level"] { grid-column: 1 / -1; }

/* Start/end dates share one row */
.a4u-pcb__dates { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.a4u-pcb__weeks-hint { grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; color: var(--a4u-pcb-accent-dark); margin-top: -2px !important; }

.a4u-pcb__price-box {
	margin-top: 14px;
	background: #f4f7fd;
	border: 1px solid #e4eaf6;
	border-radius: 12px;
	padding: 12px 14px;
	text-align: center;
}
.a4u-pcb__price-label { font-size: 12px; font-weight: 600; color: var(--a4u-pcb-muted); }
.a4u-pcb__price { font-size: 30px; font-weight: 800; color: var(--a4u-pcb-text); line-height: 1.15; margin: 3px 0 2px !important; }
.a4u-pcb__meta { font-size: 11.5px; color: var(--a4u-pcb-muted); min-height: 16px; }

.a4u-pcb__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	padding: 13px 16px;
	background: var(--a4u-pcb-accent);
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	text-decoration: none !important;
	border-radius: 10px;
	transition: background-color .2s, transform .12s;
}
.a4u-pcb__btn:hover { background: var(--a4u-pcb-accent-dark); color: #fff !important; transform: translateY(-1px); }
.a4u-pcb__btn svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }

.a4u-pcb__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 14px;
	margin-top: 12px !important;
	padding-top: 12px;
	border-top: 1px solid #eef1f7;
}
.a4u-pcb__badges li { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #475569; }
.a4u-pcb__badges svg { width: 13px; height: 13px; flex: 0 0 auto; fill: #16a34a; }

@media (max-width: 420px) {
	.a4u-pcb__card { padding: 18px 16px; border-radius: 14px; }
	.a4u-pcb__fields { grid-template-columns: 1fr; }
	.a4u-pcb__dates { grid-template-columns: 1fr; }
	.a4u-pcb__title { font-size: 19px; }
}

/* ---------------------------------------------------------------------------
 * FULL-WIDTH CARD — .a4u-pc
 * ------------------------------------------------------------------------ */
.a4u-pc {
	--a4u-brand: #103178;
	--a4u-brand-dark: #0b2654;
	--a4u-accent: #2563eb;
	--a4u-field: #f3f7fa;
	--a4u-border: #d7e0ec;
	--a4u-text: #0f172a;
	--a4u-muted: #64748b;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	color: var(--a4u-text);
	font-family: inherit;
	line-height: 1.45;
	text-align: left;
}
.a4u-pc__head { text-align: center; margin: 0 0 16px; }
.a4u-pc__title { font-size: clamp(22px, 2.8vw, 32px); line-height: 1.2; font-weight: 800; color: var(--a4u-text); }
.a4u-pc__sub { font-size: 15px; color: var(--a4u-muted); margin-top: 6px !important; }

.a4u-pc__card {
	display: grid;
	grid-template-columns: 1.18fr .82fr;
	gap: 20px;
	background: #fff;
	border: 1px solid var(--a4u-border);
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(16, 49, 120, .08);
	padding: 20px;
}
.a4u-pc__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-content: start; }
.a4u-pc__field { min-width: 0; }
.a4u-pc__field--full { grid-column: 1 / -1; }
.a4u-pc__label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin: 0 0 5px; }

.a4u-pc select,
.a4u-pc input[type="date"],
.a4u-pc input[type="text"] {
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--a4u-border);
	background-color: var(--a4u-field);
	border-radius: 8px;
	font-size: 14px;
	color: #334155;
}
.a4u-pc select { padding-right: 32px; }
.a4u-pc select:focus,
.a4u-pc input[type="date"]:focus,
.a4u-pc input[type="text"]:focus {
	border-color: var(--a4u-brand);
	box-shadow: 0 0 0 3px rgba(16, 49, 120, .12);
}
.a4u-pc__hint { font-size: 11.5px; color: var(--a4u-muted); margin-top: 5px !important; }

.a4u-pc__summary {
	background: linear-gradient(180deg, #f7faff 0%, #eef3fb 100%);
	border: 1px solid var(--a4u-border);
	border-radius: 12px;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
.a4u-pc__eyebrow { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--a4u-muted); font-weight: 600; }
.a4u-pc__price { font-size: clamp(34px, 4.4vw, 46px); font-weight: 800; color: var(--a4u-brand); line-height: 1.05; margin: 4px 0 5px !important; }
.a4u-pc__breakdown { font-size: 12px; color: var(--a4u-muted); min-height: 18px; }

.a4u-pc__btn {
	display: block;
	margin-top: 14px;
	padding: 12px 16px;
	background: var(--a4u-brand);
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none !important;
	border-radius: 8px;
	transition: background-color .2s;
}
.a4u-pc__btn:hover { background: var(--a4u-brand-dark); color: #fff !important; }

/* Plan feature list, driven by the sheet's "Recommended TAG" columns */
.a4u-pc__plan { margin-top: 14px !important; padding-top: 13px; border-top: 1px solid #dde5f2; text-align: left; }
.a4u-pc__plan-title { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--a4u-muted); font-weight: 700; margin-bottom: 7px !important; }
.a4u-pc__features { display: flex; flex-direction: column; gap: 5px; }
.a4u-pc__features li { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; font-weight: 500; color: #334155; line-height: 1.35; }
.a4u-pc__features svg { width: 13px; height: 13px; margin-top: 2px; flex: 0 0 auto; fill: #16a34a; }
.a4u-pc__note { font-size: 11px; color: var(--a4u-muted); line-height: 1.5; margin-top: 12px !important; }

@media (max-width: 980px) {
	.a4u-pc__card { grid-template-columns: 1fr; gap: 16px; }
	.a4u-pc__summary { padding: 16px; }
}
@media (max-width: 520px) {
	.a4u-pc__card { padding: 16px; border-radius: 12px; }
	.a4u-pc__fields { grid-template-columns: 1fr; gap: 10px; }
	.a4u-pc__sub { font-size: 14px; }
}