/* SMRC Auth - login/register/reset chooser and forms */
/* =====================================================
   AUTH: chooser cards + slide-in glass panel
   ===================================================== */
.smrc-auth-wrap {
	max-width:460px; margin:48px auto; border-radius: 24px; padding:36px;
	background: rgba(255,255,255,.7);
	backdrop-filter: blur(22px) saturate(160%);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	border: 1px solid var(--smrc-glass-border);
	box-shadow: var(--smrc-shadow-lg);
}
.smrc-auth-header { text-align:center; margin-bottom:28px; }
.smrc-auth-logo {
	width:60px; height:60px; margin:0 auto 14px; border-radius:18px;
	background: linear-gradient(135deg, var(--smrc-primary), var(--smrc-accent));
	display:flex; align-items:center; justify-content:center; font-size:28px;
	box-shadow: var(--smrc-shadow-lg);
}
.smrc-auth-header h1 { font-size:22px; margin:0 0 4px; font-weight:800; color:#000; }

.smrc-auth-chooser { display:flex; flex-direction:column; gap:12px; }
.smrc-choice-card {
	display:flex; align-items:center; gap:14px; text-align:left; width:100%;
	background: rgba(255,255,255,.55); border:1.5px solid rgba(15,23,42,.08); border-radius: var(--smrc-radius-sm);
	padding:15px 17px; cursor:pointer; transition: all .18s ease; font-family:var(--smrc-font);
	backdrop-filter: blur(8px);
}
.smrc-choice-card:hover {
	border-color: var(--smrc-primary); background: rgba(255,255,255,.85);
	transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(99,102,241,.4);
}
.smrc-choice-icon {
	width:44px; height:44px; flex-shrink:0; border-radius:13px;
	display:flex; align-items:center; justify-content:center; font-size:21px; color:#fff;
}
.smrc-choice-card[data-open="login"] .smrc-choice-icon { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.smrc-choice-card[data-open="register"] .smrc-choice-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.smrc-choice-card[data-open="reset"] .smrc-choice-icon { background: linear-gradient(135deg, #ec4899, #db2777); }
.smrc-choice-title { display:block; font-weight:700; color:var(--smrc-ink); font-size:14.5px; }
.smrc-choice-desc { display:block; font-size:12.5px; color:var(--smrc-muted); margin-top:1px; }

.smrc-panel { animation: smrc-fade-in .25s ease; }
@keyframes smrc-fade-in { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:translateY(0); } }

.smrc-back-btn {
	background: rgba(99,102,241,.1); border:none; color:var(--smrc-primary-dark); font-weight:700; font-size:12.5px;
	cursor:pointer; padding:7px 13px; border-radius:20px; display:inline-flex; align-items:center; gap:4px;
	font-family:var(--smrc-font); margin-bottom:18px; transition: background .15s ease;
}
.smrc-back-btn:hover { background: rgba(99,102,241,.18); }

.smrc-auth-wrap label { display:block; margin:12px 0 5px; font-size:12.5px; font-weight:700; color:#334155; letter-spacing:.01em; }
.smrc-auth-wrap input, .smrc-auth-wrap select, .smrc-auth-wrap textarea {
	width:100%; padding:12px 13px; border:1.5px solid rgba(15,23,42,.1); border-radius: var(--smrc-radius-sm);
	font-size:14px; font-family:var(--smrc-font); transition: all .15s ease; background: rgba(255,255,255,.7);
}
.smrc-auth-wrap input:focus, .smrc-auth-wrap select:focus, .smrc-auth-wrap textarea:focus {
	outline:none; border-color: var(--smrc-primary); box-shadow: 0 0 0 4px rgba(99,102,241,.15); background:#fff;
}

/* =====================================================
   AUTH: "what the system supports" cards - guest-only,
   read-only display sitting below the login/register card.
   ===================================================== */
.smrc-services-wrap { max-width: 960px; margin: 28px auto 0; padding: 0 16px; }
.smrc-services-header { text-align:center; margin-bottom:22px; }
.smrc-services-header h2 {
	font-size:20px; font-weight:800; margin:0 0 6px; color:#000;
	font-family: var(--smrc-heading-font);
}
.smrc-services-header p { margin:0; font-size:13.5px; font-weight:700; }

.smrc-services-grid {
	display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px;
}
.smrc-service-card {
	display:flex; flex-direction:column; gap:8px; text-align:left; padding:18px 17px;
	background: rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.55); border-radius: var(--smrc-radius-sm);
	backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
	box-shadow: 0 10px 28px -12px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.6);
	transition: all .18s ease;
}
.smrc-service-card:nth-child(6n+1) { background: linear-gradient(160deg, rgba(99,102,241,.26), rgba(255,255,255,.42)); box-shadow: 0 10px 28px -12px rgba(99,102,241,.4), inset 0 1px 0 rgba(255,255,255,.6); }
.smrc-service-card:nth-child(6n+2) { background: linear-gradient(160deg, rgba(16,185,129,.26), rgba(255,255,255,.42)); box-shadow: 0 10px 28px -12px rgba(16,185,129,.4), inset 0 1px 0 rgba(255,255,255,.6); }
.smrc-service-card:nth-child(6n+3) { background: linear-gradient(160deg, rgba(245,158,11,.28), rgba(255,255,255,.42)); box-shadow: 0 10px 28px -12px rgba(245,158,11,.4), inset 0 1px 0 rgba(255,255,255,.6); }
.smrc-service-card:nth-child(6n+4) { background: linear-gradient(160deg, rgba(236,72,153,.26), rgba(255,255,255,.42)); box-shadow: 0 10px 28px -12px rgba(236,72,153,.4), inset 0 1px 0 rgba(255,255,255,.6); }
.smrc-service-card:nth-child(6n+5) { background: linear-gradient(160deg, rgba(139,92,246,.26), rgba(255,255,255,.42)); box-shadow: 0 10px 28px -12px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.6); }
.smrc-service-card:nth-child(6n+6) { background: linear-gradient(160deg, rgba(14,165,233,.26), rgba(255,255,255,.42)); box-shadow: 0 10px 28px -12px rgba(14,165,233,.4), inset 0 1px 0 rgba(255,255,255,.6); }
.smrc-service-card:hover {
	border-color: rgba(255,255,255,.8); transform: translateY(-3px);
	box-shadow: 0 16px 36px -12px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.7);
}
.smrc-service-icon {
	width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
	font-size:19px; color:#fff; background: linear-gradient(135deg, var(--smrc-primary), var(--smrc-accent));
	box-shadow: var(--smrc-shadow);
}
.smrc-service-title { font-weight:700; font-size:14px; color:var(--smrc-ink); }
.smrc-service-desc { font-size:12.5px; color:#000; line-height:1.45; font-weight:700; }

.smrc-contacts-wrap { margin-top:30px; padding-top:22px; border-top:1px solid rgba(15,23,42,.12); }
.smrc-contacts-header { text-align:center; margin-bottom:16px; }
.smrc-contacts-header h3 { font-size:16px; font-weight:800; margin:0 0 4px; color:#000; font-family: var(--smrc-heading-font); }
.smrc-contacts-header p { margin:0; font-size:13px; font-weight:700; }
.smrc-contact-grid {
	display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-top:14px;
}
.smrc-contact-card {
	display:flex; flex-direction:column; gap:4px; text-align:left; padding:16px 17px;
	background: rgba(255,255,255,.55); border:1.5px dashed rgba(99,102,241,.35); border-radius: var(--smrc-radius-sm);
}
.smrc-contact-icon { font-size:18px; margin-bottom:2px; }
.smrc-contact-label { font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--smrc-primary-dark); }
.smrc-contact-name { font-size:14px; font-weight:700; color:var(--smrc-ink); }
.smrc-contact-value { font-size:12.5px; color:var(--smrc-body); }


/* Google Sign-In (spec item 25: fits the existing SMRC auth UI while
   respecting Google's own branding requirements - the button itself is
   rendered by Google's library, this only lays out the divider + slot). */
.smrc-auth-divider {
	display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--smrc-body, #64748b);
	font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.smrc-auth-divider::before, .smrc-auth-divider::after {
	content: ''; flex: 1; height: 1px; background: rgba(15,23,42,.12);
}
.smrc-google-btn-slot { display: flex; justify-content: center; min-height: 44px; }


/* =====================================================
   AUTH: optional big-screen photo (Super Admin setting).
   Below 1100px the wrappers are transparent to layout, so phones,
   tablets and small laptops see exactly the classic centred card.
   The photo URL is only referenced inside the min-width media query,
   so small screens never download it.
   ===================================================== */
.smrc-auth-page, .smrc-auth-main { display: contents; }
.smrc-auth-photo { display: none; }

@media (min-width: 1100px) {
	.smrc-auth-page.smrc-auth-has-photo {
		display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(480px, .85fr);
		position: fixed; inset: 0; z-index: 99990;
		background-color: #eef1fb;
		background-image:
			radial-gradient(800px 500px at 95% 10%, rgba(6,182,212,.20), transparent 55%),
			radial-gradient(700px 460px at 60% 100%, rgba(236,72,153,.14), transparent 60%),
			linear-gradient(180deg, #eef1fb 0%, #f4f6fd 100%);
	}
	body.smrc-dark .smrc-auth-page.smrc-auth-has-photo {
		background-color: #061420;
		background-image: linear-gradient(180deg, #061420 0%, #071a2b 100%);
	}
	.smrc-auth-has-photo .smrc-auth-photo {
		display: block; position: relative; min-height: 100%;
		background-color: #1e3a8a;
		background-image: var(--smrc-auth-photo), linear-gradient(135deg, #312e81, #0e7490);
		background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
	}
	.smrc-auth-has-photo .smrc-auth-photo::after {
		content: ''; position: absolute; inset: 0; pointer-events: none;
		background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%);
	}
	.smrc-auth-photo-caption {
		position: absolute; left: 40px; right: 40px; bottom: 36px; z-index: 1; color: #fff;
		display: flex; flex-direction: column; gap: 6px; text-shadow: 0 2px 12px rgba(0,0,0,.45);
	}
	.smrc-auth-photo-caption strong { font-size: 28px; font-weight: 800; font-family: var(--smrc-heading-font); line-height: 1.15; }
	.smrc-auth-photo-caption span { font-size: 15px; opacity: .92; }
	.smrc-auth-has-photo .smrc-auth-main {
		display: block; overflow-y: auto; padding: 32px 28px 40px; position: relative;
	}
	.smrc-auth-has-photo .smrc-auth-main .smrc-auth-wrap { margin: 16px auto; }
	.smrc-auth-has-photo .smrc-auth-main .smrc-services-wrap { margin-top: 20px; }
}


/* =====================================================
   Boxed one-time-code entry (login OTP / Authenticator code,
   password-reset code, Authenticator setup confirmation).
   The original input stays in the form but is visually hidden.
   ===================================================== */
.smrc-otp-real {
	position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
	padding: 0 !important; margin: -1px !important; border: 0 !important; opacity: 0 !important;
	overflow: hidden !important; clip: rect(0 0 0 0) !important; pointer-events: none !important;
}
.smrc-otp { margin: 6px 0 4px; }
.smrc-otp-boxes { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; }
.smrc-auth-wrap .smrc-otp .smrc-otp-box,
.smrc-otp .smrc-otp-box {
	flex: 1 1 0; min-width: 36px; max-width: 54px; width: auto; height: 56px; padding: 0;
	text-align: center; font-size: 22px; font-weight: 700; font-family: var(--smrc-font);
	color: var(--smrc-ink); background: rgba(255,255,255,.85);
	border: 2px solid rgba(15,23,42,.18); border-radius: 12px; caret-color: var(--smrc-primary);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.smrc-auth-wrap .smrc-otp .smrc-otp-box:focus,
.smrc-otp .smrc-otp-box:focus {
	outline: none; border-color: var(--smrc-primary); background: #fff;
	box-shadow: 0 0 0 4px rgba(99,102,241,.2);
}
.smrc-otp .smrc-otp-box.smrc-otp-filled { border-color: var(--smrc-primary); }
body.smrc-dark .smrc-auth-wrap .smrc-otp .smrc-otp-box,
body.smrc-dark .smrc-otp .smrc-otp-box {
	color: #f8fafc; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28);
}
body.smrc-dark .smrc-otp .smrc-otp-box:focus { background: rgba(255,255,255,.14); }
.smrc-link-btn {
	background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit;
	color: var(--smrc-primary-dark); text-decoration: underline; font-weight: 700;
}
.smrc-link-btn:hover { color: var(--smrc-primary); }