/* Additions on top of the Base44 Tailwind build (base44.css). Only what the build does not already contain. */

html { scroll-behavior: smooth; }
body.wl { margin: 0; background: #fff; }

/* Struck regular price ($400) — requirements doc §1; red on Preet's instruction 2026-09-25.
   One red per background so it stays readable: light (default), amber, navy. */
.wl-strike { text-decoration: line-through; text-decoration-thickness: 2px; color: #dc2626; }
.wl-strike.wl-strike-amber { color: #b91c1c; }
.wl-strike.wl-strike-dark { color: #f87171; }

/* Numbers bar: three figures in one row at every width (the Base44 build only has md:grid-cols-3) */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Winston College logo bar */
.wl-logo { display: block; height: 3rem; width: auto; }
@media (min-width: 768px) { .wl-logo { height: 3.75rem; } }

/* "25 Hr Program" label — requirements doc §3 */
.wl-badge {
	display: inline-flex; align-items: center;
	background: #f59e0b; color: #0f1e3d;
	font-weight: 700; font-size: .875rem; letter-spacing: .02em;
	padding: .25rem .75rem; border-radius: 9999px;
}

/* Empty student photo frame — requirements doc §7 */
.wl-photo-frame {
	display: flex; align-items: center; justify-content: center;
	width: 100%; max-width: 36rem; aspect-ratio: 4 / 3; margin-inline: auto;
	border: 2px dashed #cbd5e1; border-radius: .75rem;
	background: #fff;
}

/* Booking form controls (Base44 used Radix/shadcn components; these are plain inputs styled to match) */
.wl-input {
	display: block; width: 100%; height: 2.25rem;
	border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px);
	background: transparent; padding: .25rem .75rem;
	font-size: 1rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
	transition: border-color .15s, box-shadow .15s;
}
.wl-input::placeholder { color: hsl(var(--muted-foreground)); }
.wl-input:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--ring)); }
.wl-textarea { height: auto; min-height: 60px; padding-top: .5rem; padding-bottom: .5rem; }
@media (min-width: 768px) { .wl-input { font-size: .875rem; } }

.wl-radio { border-color: #e2e8f0; }
.wl-radio:has(input:checked) { border-color: #f59e0b; background: #fffbeb; }
.wl-radio input { width: 1rem; height: 1rem; margin: 0; accent-color: #0f1e3d; }

.wl-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Enrol details dialog (step before Stripe). Padding sits on the form so a click on the dialog itself is a backdrop click. */
.wl-dialog {
	width: min(28rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
	margin: auto; padding: 0; border: 0; border-radius: 1rem; overflow-y: auto;
	background: #fff; color: #0f172a;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / .35);
}
.wl-dialog::backdrop { background: rgb(15 30 61 / .6); }
.wl-dialog-body { padding: 1.5rem; }
.wl-dialog-close {
	font-size: 1.75rem; line-height: 1; color: #94a3b8;
	background: none; border: 0; padding: 0 .25rem; cursor: pointer;
}
.wl-dialog-close:hover { color: #0f1e3d; }
body.wl-dialog-open { overflow: hidden; }

/* Thank-you page: keeps the short schedule list narrow under the centred heading */
.max-w-sm { max-width: 24rem; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}

/* Refund policy page (template wl-ielts-refund.php): long-form text on a white card, same navy/amber as the course page */
.wl-refund-card { background: #fff; border-radius: 1rem; box-shadow: 0 0 0 1px #e2e8f0, 0 1px 2px rgba(0,0,0,.05); padding: 1.5rem; }
@media (min-width: 768px) { .wl-refund-card { padding: 2.5rem; } }
.wl-refund-card h1 { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.2; color: #0f1e3d; }
.wl-refund-sub { margin: .5rem 0 0; color: #64748b; }
.wl-refund-rule { height: 2px; margin: 1.5rem 0; background: #f59e0b; border: 0; }
.wl-refund-card h2 { margin: 2rem 0 .5rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: #0f1e3d; }
.wl-refund-card p, .wl-refund-card li { color: #334155; line-height: 1.7; }
.wl-refund-card p { margin: .5rem 0 0; }
.wl-refund-card ul, .wl-refund-card ol { margin: .5rem 0 0; padding-left: 1.4rem; }
.wl-refund-card ul { list-style: disc; }
.wl-refund-card ol { list-style: decimal; }
.wl-refund-card li { margin-top: .4rem; }
.wl-refund-card a { color: #b45309; text-decoration: underline; }
.wl-refund-card u { text-decoration: underline; }
.wl-refund-promise { margin: 0; padding: 1rem 1.25rem; background: #fffbeb; border-left: 4px solid #f59e0b; border-radius: 0 .5rem .5rem 0; }
.wl-refund-promise h2 { margin: 0 0 .25rem; font-size: 1.125rem; }
.wl-refund-promise p { margin: 0; }
.wl-refund-fine { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; font-size: .875rem; color: #64748b; }

/* Fluent Forms form inside the enrol dialog: same look as our own fields */
.wl-dialog .fluentform .ff-el-group { margin-bottom: 1rem; }
.wl-dialog .fluentform .ff-el-input--label label { font-size: .875rem; font-weight: 500; color: #0f1e3d; }
.wl-dialog .fluentform .ff-el-form-control { width: 100%; height: 2.5rem; padding: .5rem .75rem; border: 1px solid #e2e8f0; border-radius: .375rem; font-size: 1rem; background: #fff; box-shadow: none; }
.wl-dialog .fluentform .ff-el-form-control:focus { outline: none; border-color: #0f1e3d; box-shadow: 0 0 0 1px #0f1e3d; }
.wl-dialog .fluentform .ff-el-form-check { display: block; margin: .25rem 0; }
.wl-dialog .fluentform .ff-el-form-check-label { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; }
.wl-dialog .fluentform .ff-el-form-check-input { width: 1rem; height: 1rem; margin: 0; accent-color: #0f1e3d; }
.wl-dialog .fluentform .ff-btn-submit { width: 100%; padding: 1rem 1.75rem; border: 0; border-radius: .5rem; background: #f59e0b !important; color: #0f1e3d !important; font-size: 1.125rem; font-weight: 600; cursor: pointer; }
.wl-dialog .fluentform .ff-btn-submit:hover { background: #fbbf24 !important; }
.wl-dialog .ff-message-success { margin-top: 1rem; padding: 1rem; border-radius: .5rem; background: #ecfdf5; color: #065f46; border: 0; }