/*
 * File: css/registration_style.css
 * Styles for html/register/index.php (secure/classes/115__registration.php).
 *
 * This page now uses the same chrome as html/join/, html/about/, etc.
 * (bhaarathi_style.css + sitelook_loader.php + the homepage_sections
 * header/footer) instead of the old STAR-portal StandardPageTools chrome.
 * That site is deliberately Bootstrap-free (sitelook_config.json:
 * bootstrap.use=false) -- bhaarathi_style.css has its own .card/.btn, but
 * nothing for form controls or a grid, and the registration form's markup
 * (secure/classes/115__registration.php) is written in Bootstrap-shaped
 * classes (.form-control, .col-sm-4, .btn-primary, etc.). Rather than
 * flip Bootstrap on site-wide (affects every other page using
 * sitelook_loader.php) or rewrite the form's markup, this is a themed,
 * minimal, register-page-only stand-in for just the Bootstrap pieces this
 * one form actually uses -- built on the same CSS custom properties
 * (--maroon, --gold, --radius-*, etc.) bhaarathi_style.css already defines,
 * so it reads as part of the same design system rather than a bolted-on
 * Bootstrap island.
 *
 * UserAuth's login forms (521__user_auth.php, displayFormForEmail() /
 * displayUsernameInput() / displayOtpForm()) render plain, class-less
 * <input>/<button> elements -- can't add classes there without modifying
 * UserAuth, so those are styled by type selector scoped to #choose-an-option
 * instead, further down.
 */

/* ── Mini grid (container / row / col-*) ───────────────────────────── */

.container {
	max-width: var(--page-max-w, 1100px);
	margin: 0 auto;
	padding: 0 1rem;
	width: 100%;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -0.6rem;
}

.row > [class*="col-"] {
	padding: 0 0.6rem;
	width: 100%;
}

.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.d-flex { display: flex; }
.text-center { text-align: center; }
.text-white { color: #fff; }
.text-muted { color: var(--ink-soft, #666); }
.bg-primary { background: var(--maroon); }

.mt-3 { margin-top: 1rem; }
.mt-5 { margin-top: 2.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.ms-2 { margin-left: 0.5rem; }

@media (min-width: 768px) {
	.col-md-6 { width: 50%; }
	.col-md-8 { width: 66.6667%; margin: 0 auto; }
}

@media (min-width: 576px) {
	.col-sm-4 { width: 33.3333%; }
	.col-sm-8 { width: 66.6667%; }
	.col-sm-12 { width: 100%; }
	.offset-sm-4 { margin-left: 33.3333%; }
}

/* ── Cards (card-header / card-body layer on bhaarathi_style.css's .card) ── */

.card {
	overflow: hidden; /* so .card-header's corners follow the card's */
}

.card-header {
	background: var(--maroon);
	color: #fff;
	font-weight: 700;
	padding: 0.75rem 1.1rem;
	margin: -1.1rem -1.1rem 1.1rem; /* cancel .card's own padding on this edge */
	border-radius: calc(var(--radius-card, 12px) - 1px) calc(var(--radius-card, 12px) - 1px) 0 0;
}

.card-body {
	padding: 0; /* .card already has padding; this just groups the content */
}

/* ── Form controls ──────────────────────────────────────────────────── */

.form-group {
	margin-bottom: 1rem;
	align-items: start;
}

.form-group.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.col-form-label {
	font-weight: 600;
	color: var(--ink, #222);
	padding-top: 0.4rem;
}

.form-control,
.form-select,
#choose-an-option input[type="text"],
#choose-an-option input[type="email"],
#choose-an-option input[type="password"] {
	display: block;
	width: 100%;
	padding: 0.55rem 0.8rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--ink, #222);
	background: #fff;
	border: 1px solid var(--gold-soft, #d9c896);
	border-radius: var(--radius-input, 6px);
	transition: border-color var(--transition-speed, .2s), box-shadow var(--transition-speed, .2s);
}

.form-control:focus,
.form-select:focus,
#choose-an-option input:focus {
	outline: none;
	border-color: var(--maroon);
	box-shadow: 0 0 0 3px rgba(123, 17, 19, .12);
}

.form-control[readonly],
.form-control:disabled {
	background: var(--paper, #fbf6e8);
	color: var(--ink-soft, #666);
}

.form-control.is-invalid {
	border-color: #b42318;
	box-shadow: 0 0 0 3px rgba(180, 35, 24, .1);
}

.form-text {
	display: block;
	font-size: 0.82rem;
	color: var(--ink-soft, #666);
	margin-top: 0.3rem;
}

.form-check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0.75rem 0;
}

.form-check-input {
	width: 1.3em;
	height: 1.3em;
	accent-color: var(--maroon);
	flex-shrink: 0;
}

.form-check-label {
	font-size: 0.92rem;
	line-height: 1.4;
}

/* ── Buttons (aliases matching bhaarathi_style.css's .btn.primary look) ── */

.btn-primary {
	background: var(--maroon);
	color: #fff;
	border: 2px solid var(--maroon);
}

.btn-primary:hover { opacity: 0.9; }

.btn-outline-secondary {
	background: #fff;
	color: var(--maroon);
	border: 2px solid var(--maroon);
}

.btn-outline-secondary:hover { background: var(--paper, #fbf6e8); }

#choose-an-option input[type="submit"],
#choose-an-option button[type="submit"] {
	display: inline-block;
	margin-top: 0.75rem;
	padding: .7rem 1.4rem;
	border-radius: var(--radius-btn, 999px);
	font-weight: 800;
	background: var(--maroon);
	color: #fff;
	border: 2px solid var(--maroon);
	cursor: pointer;
}

#choose-an-option input[type="submit"]:hover,
#choose-an-option button[type="submit"]:hover {
	opacity: 0.9;
}

#choose-an-option form {
	margin-top: 0.75rem;
}

#choose-an-option label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4rem;
}

/* ── Alerts / notes ─────────────────────────────────────────────────── */

.alert {
	padding: 1rem 1.2rem;
	border-radius: var(--radius-card, 12px);
	margin: 1rem 0;
}

.alert-success {
	background: #eaf7f0;
	border: 1px solid var(--green, #0d7a45);
	color: #0d5a34;
}

.alert-danger {
	background: #fdeceb;
	border: 1px solid #b42318;
	color: #8a1c12;
}

.note {
	background: var(--paper, #fbf6e8);
	border-left: 4px solid var(--gold, #d8b36a);
	padding: var(--note-pad, 0.85rem 1.1rem);
	margin: 1rem 0;
	border-radius: var(--radius-note, 0 8px 8px 0);
	font-size: 0.92rem;
}

.note-closed {
	background: #fff8e6;
	border-left: 4px solid #c98a12;
	padding: 1.2rem 1.4rem;
	margin: 1.5rem 0;
	border-radius: var(--radius-note, 0 8px 8px 0);
}

.note-closed h3 { margin-top: 0; color: var(--maroon); }

/* ── Reveal gate ("press and hold") ─────────────────────────────────── */

#status-check-gate {
	margin: 1.5rem 0;
	text-align: center;
}

#status-check-hold-progress-track {
	height: 6px;
	background: var(--gold-soft, #ead7a8);
	border-radius: 3px;
	margin: 0.6rem auto 0;
	max-width: 420px;
	overflow: hidden;
}

#status-check-hold-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--maroon);
}

/* ── Admission-status summary table ─────────────────────────────────── */

.reg-summary-table {
	display: table;
	margin: 1rem auto;
	border: 1px solid var(--gold-soft, #d9c896);
	border-radius: var(--radius-card, 12px);
	background: var(--cream, #fffaf0);
	overflow: hidden;
}

.reg-summary-row { display: table-row; }

.reg-summary-cell {
	display: table-cell;
	padding: 0.6rem 1.2rem;
	border-bottom: 1px solid var(--gold-soft, #d9c896);
}

.reg-summary-row:last-child .reg-summary-cell { border-bottom: none; }

.reg-summary-label { font-weight: 700; color: var(--maroon); }