/* 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; }
@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; }
}