/**
 * Capacitor / native WebView overrides for ASÕP app theme.
 */

html.is-capacitor-app {
	font-size: 16px !important;
	-webkit-text-size-adjust: 100%;
	background-color: #fff0ee;
	/* Pad html once. .is-capacitor-app is also on body — padding both doubled the status-bar gap.
	   Capacitor 8 injects --safe-area-inset-*; env() is the iOS / WebView fallback. */
	padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
	padding-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
	padding-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
}

/* Register: no app chrome, page-coloured status area (not the splash pink). */
html.is-capacitor-app.register-flow-page {
	background-color: #faf9f8;
	padding-top: 0;
	overscroll-behavior: none;
}

body.is-capacitor-app.register-flow-page {
	padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
	background-color: #faf9f8;
	overscroll-behavior: none;
}

body.is-capacitor-app.register-flow-page::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
	background: #faf9f8;
	z-index: 200;
	pointer-events: none;
}

/* iOS zooms any focused control under 16px and often cannot zoom back out. */
html.is-capacitor-app input,
html.is-capacitor-app select,
html.is-capacitor-app textarea,
body.is-capacitor-app input,
body.is-capacitor-app select,
body.is-capacitor-app textarea,
html.is-capacitor-app .log-in .form-control,
html.is-capacitor-app .log-in .form-select,
html.is-capacitor-app .log-in .form-floating > .form-control,
html.is-capacitor-app .form-floating > .form-control,
html.is-capacitor-app .form-floating > .form-select,
body.is-capacitor-app .log-in .form-control {
	font-size: 16px !important;
}

/* Hide web chrome / consent float in the app */
.is-capacitor-app.auth-page .auth-close-main-site,
body.is-capacitor-app .auth-close-main-site,
.is-capacitor-app #wpconsent-container,
.is-capacitor-app .wpconsent-banner,
.is-capacitor-app [class*="wpconsent"] {
	display: none !important;
}

/* ─── Native auth (login / register) ─────────────────────────────────────── */

.is-capacitor-app.auth-page {
	background: #fff0ee;
}

.is-capacitor-app.auth-page .log-in--native {
	min-height: auto;
	padding: 28px 0 calc(32px + env(safe-area-inset-bottom, 0px));
}

.is-capacitor-app.auth-page .log-in--native .row > [class*="col"] {
	align-items: flex-start !important;
}

.is-capacitor-app.auth-page .log-in--native .form {
	max-width: 420px;
	margin: 0 auto;
	padding: 0 4px;
	justify-content: flex-start !important;
}

.is-capacitor-app.auth-page .log-in--native .form-control,
.is-capacitor-app.auth-page .log-in--native .form-select {
	height: 52px;
	font-size: 16px !important;
	line-height: 22px;
	background: #fff;
}

.is-capacitor-app.auth-page .app-auth-hero {
	text-align: center;
	margin-bottom: 1.75rem;
}

.is-capacitor-app.auth-page .app-auth-hero__logo {
	display: inline-flex;
	margin-bottom: 0.75rem;
}

.is-capacitor-app.auth-page .app-auth-hero__logo svg {
	width: 96px;
	height: auto;
}

.is-capacitor-app.auth-page .app-auth-hero__tagline {
	margin: 0;
	font-family: Epilogue, sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	color: #ff7666;
}

.is-capacitor-app.auth-page .log-in--native .form > .h2,
.is-capacitor-app.auth-page .log-in--native .form > h1 {
	text-align: center;
	margin-bottom: 1.25rem;
}

.is-capacitor-app.auth-page .app-auth-remember {
	margin: 1rem 0 0;
}

.is-capacitor-app.auth-page .app-auth-remember-hint {
	color: #777;
	font-size: 0.85em;
	margin-left: 0.25rem;
}

.is-capacitor-app.auth-page .app-auth-submit {
	display: block;
	width: 100%;
	margin-top: 1.25rem;
	text-align: center;
}

.is-capacitor-app.auth-page .app-auth-secondary-link {
	display: block;
	text-align: center;
	margin-top: 1rem;
	color: #008080;
	text-decoration: none;
	font-weight: 500;
}

.is-capacitor-app.auth-page .app-auth-switch {
	text-align: center;
	margin: 1.75rem 0 0;
	color: #555;
	font-size: 0.95rem;
}

.is-capacitor-app.auth-page .app-auth-switch a {
	color: #008080;
	font-weight: 600;
	text-decoration: none;
	margin-left: 0.25rem;
}

.is-capacitor-app.auth-page .app-auth-topbar {
	padding: 12px 20px 8px;
}

.is-capacitor-app.auth-page .app-auth-back {
	color: #008080;
	font-weight: 600;
	text-decoration: none;
	font-size: 0.95rem;
}

/* ─── Register (app site, always app layout) ─────────────────────────────── */

.auth-page:has(.register--native) {
	background: #fff0ee;
}

.auth-page .register--native .app-auth-hero {
	text-align: center;
	margin-bottom: 1.75rem;
}

.auth-page .register--native .app-auth-hero__logo {
	display: inline-flex;
	margin-bottom: 0.75rem;
}

.auth-page .register--native .app-auth-hero__logo svg {
	width: 96px;
	height: auto;
}

.auth-page .register--native .app-auth-hero__tagline {
	margin: 0;
	font-family: Epilogue, sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	color: #ff7666;
}

.auth-page .register--native .app-auth-submit {
	display: block;
	width: 100%;
	margin-top: 1.25rem;
	text-align: center;
}

.auth-page .register--native .app-auth-switch {
	text-align: center;
	margin: 1.75rem 0 0;
	color: #555;
	font-size: 0.95rem;
}

.auth-page .register--native .app-auth-switch a {
	color: #008080;
	font-weight: 600;
	text-decoration: none;
	margin-left: 0.25rem;
}

.auth-page .register--native,
.auth-page .register--native {
	padding: 28px 0 calc(32px + env(safe-area-inset-bottom, 0px));
}

.auth-page .register--native form.registration-form {
	max-width: 420px;
	margin: 0 auto;
	padding: 0 4px !important;
	box-shadow: none !important;
	background: transparent !important;
	border-radius: 0;
}

.auth-page .register--native form.registration-form > .h2,
.auth-page .register--native form.registration-form > h1 {
	text-align: center;
	color: #008080;
	margin-bottom: 1.25rem;
}

.auth-page .register--native .form-floating {
	position: relative;
}

.auth-page .register--native .form-control,
.auth-page .register--native .form-select {
	height: 52px;
	border-radius: 8px;
	background: #fff;
}

.auth-page .register--native .form-floating > label {
	padding: 14px 16px;
	color: #8a8584;
}

.auth-page .register--native .togglePassword {
	top: 18px;
	z-index: 3;
}

.auth-page .app-auth-roles {
	display: flex;
	gap: 4px;
	margin-bottom: 1.25rem;
	padding: 4px;
	background: #fff;
	border: 1px solid #e8e0de;
	border-radius: 12px;
}

.auth-page .app-auth-role {
	flex: 1;
	margin: 0;
	cursor: pointer;
}

.auth-page .app-auth-role input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.auth-page .app-auth-role span {
	display: block;
	text-align: center;
	padding: 10px 8px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.2;
	color: #555;
}

.auth-page .app-auth-role input:checked + span {
	background: #008080;
	color: #fff;
}

.auth-page .app-auth-terms {
	margin: 0.25rem 0 0;
	padding-left: 1.6em;
}

.auth-page .app-auth-terms .form-check-label {
	font-size: 0.85rem;
	line-height: 1.4;
	color: #555;
	font-weight: 500;
}

.auth-page .app-auth-terms a {
	color: #008080;
	font-weight: 600;
	text-decoration: none;
}

.auth-page .register--native .form-text {
	font-size: 0.8rem;
	line-height: 1.4;
	color: #777;
	margin: -0.25rem 0 1rem;
}

.auth-page .register--native .form-text a {
	color: #008080;
	font-weight: 600;
	text-decoration: none;
}

.auth-page .register--native .select2-container {
	width: 100% !important;
}

.auth-page .register--native .select2-container--small .select2-selection,
.auth-page .register--native .select2-container .select2-selection {
	min-height: 52px;
	border-radius: 8px;
	border: 1px solid #cbcbcb;
	background: #fff;
	display: flex;
	align-items: center;
	padding: 4px 8px;
}

.auth-page .register--native .select2-container--small .select2-selection__rendered,
.auth-page .register--native .select2-container .select2-selection__rendered {
	line-height: 1.3;
	padding-left: 8px;
	color: #514d4c;
}

/* ─── Post-signup flow (identify + steps) ───────────────────────────────── */

.register-flow-page .identify-methods #smartid-login-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.register-flow-page .identify-methods .login-button,
.register-flow-page #smartid-login-block .login-button {
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	min-height: 64px;
	margin: 0 !important;
	padding: 12px 16px;
	background: #fff;
	border: 1.5px solid #087777;
	border-radius: 12px;
	cursor: pointer;
	box-sizing: border-box;
}

.register-flow-page #smartid-login-block .login-button img {
	height: 40px !important;
	width: auto !important;
	max-width: 180px;
	margin: 0 !important;
}

.is-capacitor-app.register-flow-page header,
.is-capacitor-app.register-flow-page .mobile-nav,
.is-capacitor-app.register-flow-page footer.mt-auto {
	display: none !important;
}

.is-capacitor-app.register-flow-page .content-container .content {
	padding: 12px 16px calc(96px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}

.is-capacitor-app.register-flow-page .register-flow__intro h1,
.is-capacitor-app.register-flow-page .register-flow__intro h2 {
	font-size: 1.5rem;
}

.is-capacitor-app.register-flow-page .register-flow__actions {
	bottom: 0;
	padding-bottom: calc(10px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}

.is-capacitor-app #notification-prefs-prompt .modal-dialog {
	margin: 16px;
	max-width: calc(100% - 32px);
}

.is-capacitor-app #notification-prefs-prompt .modal-body {
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.is-capacitor-app #notification-prefs-prompt .notification-preferences {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * Full-screen drawers are position:fixed to the viewport, so they ignore
 * html safe-area padding. On Android (edge-to-edge) that puts the header
 * under the status bar and the footer under the nav bar.
 */
.is-capacitor-app .modal:not(.modal-centered):not(.global-search-modal):not(.announcement-modal)
	> .modal-dialog:not(.modal-confirmation)
	> .modal-content {
	padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
	padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
}

/* Bottom sheets dock above the system nav / home indicator. */
.is-capacitor-app .modal > .modal-dialog.modal-confirmation {
	bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}