body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f4;
    background-image: url('../img/background.jpg');
    background-size: cover;
}

.container {
    text-align: center;
    background: #969595;
    color: #fff;
    margin: 24px auto;
    /* A fixed 400px overflowed the viewport on every phone (iPhone SE at
       375px, standard iPhones at 390px, most Android at 360-412px) --
       calc() keeps a 16px gutter on narrow screens while still capping at
       400px on anything wider. */
    width: calc(100% - 32px);
    max-width: 400px;
    border-radius: 3px;
    padding-bottom: 14px;
}

.login-header {
    background: darkred;
    border-radius: 3px 3px 0 0;
    padding: 12px 0 10px;
}

.login-header h1 {
    margin: 0;
    padding: 0;
}

.login-header-sub {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, .85);
}

.login-header-sub a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, .1);
    border-left: 4px solid #db3460;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    display: none;
    margin: 10px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.disableLoginButtons {
    pointer-events: none;
    cursor: default;
    opacity: .6;
}

.button-container {
    max-width: 300px;
    margin: 0 auto;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 0 10px;
    margin: 10px 0;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #007BFF;
    border: 1px solid #007BFF;
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 16px;
}

.google-button {
    margin: 10px 0;
}

.facebook-button {
    background-color: #3b5998;
}

.apple-button {
    background-color: #000;
    border-color: #000;
}

.apple-email-prompt-text {
    font-size: .85rem;
    color: #fff;
    margin: 0 0 10px;
    text-align: left;
}

.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    font-size: 12px;
    color: rgba(255, 255, 255, .85);
    margin: 4px 0 12px;
    cursor: pointer;
}

.terms-check input {
    margin: 2px 0 0;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.terms-check a {
    color: pink;
}

.terms-warning {
    background: #ffe0e0;
    color: #a00;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    text-align: left;
    margin: -6px 0 12px;
}

.auth-actions {
    position: relative;
}

/* Blocks every sign-in control (including Google's own embedded iframe
   button, which we can't otherwise disable) until the terms checkbox
   above is checked. Removed (not just hidden) on check so real clicks
   reach Google's iframe normally -- see onTermsCheckboxChange(). */
.terms-gate-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: not-allowed;
}

.divider {
    margin: 12px 0;
    color: #e0e0e0;
    font-size: .85rem;
    text-transform: uppercase;
}

.otp-mode-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.otp-mode-toggle button {
    flex: 1;
    padding: 8px;
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.otp-mode-toggle button.active {
    background: #fff;
    color: #333;
    font-weight: bold;
}

.otp-group input,
.otp-group select {
    width: 100%;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    /* 16px, not the browser's smaller UA-stylesheet default for form
       controls -- anything under 16px triggers iOS Safari's automatic
       zoom-on-focus. */
    font-size: 16px;
}

.otp-cells {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 12px;
}

.otp-group input.otp-cell {
    width: 40px;
    flex: 0 0 40px;
    height: 48px;
    padding: 0;
    margin-bottom: 0;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    /* letter-spacing/font-variant-numeric keep each cell's single digit
       visually centered the same way across all ten glyphs. */
    font-variant-numeric: tabular-nums;
}

.mobile-input-row {
    display: flex;
    gap: 8px;
}

.mobile-input-row select {
    flex: 0 0 90px;
}

.mobile-input-row input {
    flex: 1;
}

.status-message {
    display: none;
    background: #ffe0e0;
    color: #a00;
    padding: 8px;
    border-radius: 4px;
    margin: 10px auto 0;
    max-width: 300px;
    font-size: .85rem;
}

.new-to-saval {
    margin-top: 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 13px;
}

/* ?mode=simple (see login.html) reuses this page inside another flow
   (e.g. event registration checking membership for pricing) -- the
   Member Zone / download-app framing doesn't apply there. */
.simple-mode .new-to-saval {
    display: none;
}

.new-to-saval p {
    margin: 0 0 8px;
    font-weight: 700;
    color: #fff;
}

.app-badge-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 4px;
    background: #222;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .3);
}

.app-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.env-banner {
    background-color: #ae5555;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    padding: 6px 12px;
    letter-spacing: 0.02em;
}