/* Customer login card (frontend/includes/login-card): the /login page and the booking page's popup. */

.sw-auth {
	--au-ink: #12233D;
	--au-text: #51627A;
	--au-line: #D5E3EF;
	--au-navy: #0E2340;
	--au-blue: #1D6FA8;
	position: relative; width: 100%; max-width: 440px; margin: 0 auto; padding: 44px 36px 30px;
	border-radius: 26px; background: #fff; box-shadow: 0 24px 60px rgba(10, 40, 80, .16);
	color: var(--au-ink); font: 400 15px/1.5 "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left;
}
.sw-auth *, .sw-auth *::before, .sw-auth *::after { box-sizing: border-box; }
.sw-auth-badge {
	position: absolute; top: -30px; left: 50%; width: 60px; height: 60px; margin-left: -30px;
	display: flex; align-items: center; justify-content: center; border: 4px solid #fff; border-radius: 50%;
	background: linear-gradient(135deg, #3DA9E1, #1D6FA8); color: #fff; box-shadow: 0 10px 24px rgba(29, 111, 168, .35);
}
.sw-auth .sw-auth-title { margin: 0 0 4px; color: var(--au-ink); font: 700 26px/1.2 "Fredoka", "DM Sans", sans-serif; letter-spacing: 0; text-align: center; }
.sw-auth .sw-auth-sub { margin: 0 0 22px; color: var(--au-text); font-size: 14px; text-align: center; }
.sw-auth .sw-auth-msg { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #FDECEC; color: #A52A2A; font-size: 14px; }
.sw-auth-msg.is-ok { background: #E6F5EC; color: #1C6B3C; }

.sw-auth-field { display: block; margin: 0 0 16px; color: var(--au-ink); font-size: 14px; font-weight: 700; }
.sw-auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sw-auth-field input {
	display: block; width: 100%; height: 50px; margin-top: 6px; padding: 0 16px; border: 1.5px solid var(--au-line); border-radius: 14px;
	background: #fff; color: var(--au-ink); font: 400 15px "DM Sans", system-ui, sans-serif; transition: border-color .15s, box-shadow .15s;
}
.sw-auth-field input::placeholder { color: #98A6B8; }
.sw-auth-field input:focus { outline: none; border-color: var(--au-blue); box-shadow: 0 0 0 4px rgba(29, 111, 168, .14); }
.sw-auth-pass { position: relative; display: block; }
.sw-auth-pass input { padding-right: 50px; }
.sw-auth-eye {
	position: absolute; right: 6px; top: 50%; width: 40px; height: 40px; margin-top: -17px; display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 10px; background: none; color: #7A8BA2; cursor: pointer;
}
.sw-auth-eye:hover, .sw-auth-eye[aria-pressed="true"] { color: var(--au-blue); background: #EEF6FC; }

.sw-auth-link { padding: 0; border: 0; background: none; color: var(--au-blue); font: 600 13px "DM Sans", system-ui, sans-serif; cursor: pointer; }
.sw-auth-link:hover { text-decoration: underline; }
.sw-auth-btn {
	display: block; width: 100%; height: 52px; margin-top: 6px; border: 0; border-radius: 14px; background: var(--au-navy); color: #fff;
	font: 700 16px "DM Sans", system-ui, sans-serif; cursor: pointer; transition: background .15s, transform .15s;
}
.sw-auth-btn:hover { background: #1A3560; }
.sw-auth-btn:active { transform: translateY(1px); }
.sw-auth-btn:disabled { opacity: .7; cursor: default; }
.sw-auth .sw-auth-foot { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #EBF1F6; color: var(--au-text); font-size: 14px; text-align: center; }
.sw-auth-foot a { color: var(--au-blue); font-weight: 700; }

/* /login page */
.sw-auth-page { padding: 70px 16px 80px; background: #EAF4FB; }

/* popup (booking page) */
.sw-auth-dialog { width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 34px 0 4px; overflow-y: auto; border: 0; background: transparent; }
.sw-auth-dialog::backdrop { background: rgba(8, 22, 45, .55); backdrop-filter: blur(3px); }
.sw-auth-dialog[open] { animation: sw-auth-in .2s ease-out; }
.sw-auth-close {
	position: absolute; z-index: 2; top: 46px; right: 12px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; background: #F1F6FA; color: #51627A; cursor: pointer;
}
.sw-auth-close:hover { background: #E2EDF6; color: #12233D; }
/* Log in with: Email | Mobile number. */
.sw-auth-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 20px; padding: 4px; border-radius: 14px; background: #EEF4F9; }
.sw-auth-switch button { height: 40px; border: 0; border-radius: 11px; background: none; color: var(--au-text); font: 700 14px "DM Sans", system-ui, sans-serif; cursor: pointer; }
.sw-auth-switch button[aria-pressed="true"] { background: #fff; color: var(--au-ink); box-shadow: 0 2px 8px rgba(14, 35, 64, .1); cursor: default; }
.sw-auth-mobile { position: relative; display: block; }
.sw-auth-mobile > span { position: absolute; left: 16px; top: 0; height: 50px; display: flex; align-items: center; color: var(--au-text); font-weight: 600; pointer-events: none; }
.sw-auth-field .sw-auth-mobile input { padding-left: 52px; }
.sw-auth-field input.sw-auth-code { letter-spacing: .35em; font-size: 20px; text-align: center; }
.sw-auth-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.sw-auth-link:disabled { color: #98A6B8; cursor: default; text-decoration: none; }
@keyframes sw-auth-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
	.sw-auth { padding: 42px 20px 24px; border-radius: 22px; }
	.sw-auth-page { padding-top: 56px; }
}

/* hidden always wins: .sw-auth-row (display: flex) showed "Change number" / "Resend code" before a code was sent. */
.sw-auth [hidden] { display: none !important; }

/* A button while its request runs (login-card busy()): spinner + "Sending code…", no second click. */
.sw-auth-btn.is-busy { display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 1; cursor: progress; background: #1A3560; animation: sw-auth-pulse 1.4s ease-in-out infinite; }
.sw-auth-btn.is-busy:active { transform: none; }
.sw-auth-spin { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: sw-auth-rotate .75s linear infinite; }
.sw-auth-link.is-busy { display: inline-flex; align-items: center; gap: 6px; color: #98A6B8; cursor: progress; text-decoration: none; }
.sw-auth-link .sw-auth-spin { width: 12px; height: 12px; flex-basis: 12px; border-width: 2px; border-color: #C9D5E3; border-top-color: var(--au-blue); }
@keyframes sw-auth-rotate { to { transform: rotate(360deg); } }
@keyframes sw-auth-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(26, 53, 96, .35); } 50% { box-shadow: 0 0 0 6px rgba(26, 53, 96, 0); } }
@media (prefers-reduced-motion: reduce) {
	.sw-auth-btn.is-busy { animation: none; }
	.sw-auth-spin { animation-duration: 1.5s; }
}