/* =====================================================================
   Sign in / Sign up popups in the Only Ticket MOCKUP style
   (auth-card: 18px radius card, uppercase field labels, red full-width
   button, centred title + subtitle). Loaded after modal-signin.css /
   modal-signup.css; ".modal.ot-auth" ids keep these rules on top.
   ===================================================================== */
.modal.ot-auth .modal-dialog { max-width: 440px; }
.modal.ot-auth.ot-auth-wide .modal-dialog { max-width: 520px; }
.modal.ot-auth .modal-content {
    position: relative; border: 1px solid var(--ot-line, #e6e8f0); border-radius: 18px;
    box-shadow: 0 18px 50px rgba(30,33,48,.22); overflow: hidden;
}
.modal.ot-auth .modal-body { padding: 0; }
.modal.ot-auth .ot-auth-close {
    position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 999px; background-color: var(--ot-bg, #f5f6fa); background-size: 11px; opacity: .8;
}
.modal.ot-auth .ot-auth-close:hover { opacity: 1; background-color: var(--ot-brand-light, #fdecec); }

/* Card */
#signin-popup.ot-auth .ot-auth-card,
#signup-popup.ot-auth .ot-auth-card {
    padding: 30px; border-radius: 0; background: #fff; color: var(--ot-ink, #1e2130); text-align: left;
}
.modal.ot-auth .ot-auth-logo { display: block; height: 44px; width: auto; margin: 0 auto 12px; }
.modal.ot-auth .ot-auth-title { font-size: 22px; font-weight: 600; text-align: center; margin: 0 0 6px; color: var(--ot-ink, #1e2130); letter-spacing: -.01em; }
.modal.ot-auth .ot-auth-sub { font-size: 13.5px; color: var(--ot-muted, #6b7084); line-height: 1.5; text-align: center; margin: 0 0 20px; }

/* Perks (sign up) */
.modal.ot-auth .ot-auth-perks {
    background: var(--ot-brand-light, #fdecec); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px;
    font-size: 13px; line-height: 1.9; color: #7a1518;
}
.modal.ot-auth .ot-auth-perks i { color: var(--ot-brand, #e31e24); margin-right: 6px; font-size: 12px; }

/* Fields: uppercase small label above a 10px-radius input */
.modal.ot-auth .ot-field { margin-bottom: 14px; }
.modal.ot-auth .ot-auth-grid { margin: 0; }
.modal.ot-auth .ot-auth-grid > .col-md-6:first-child { padding-right: 6px; }
.modal.ot-auth .ot-auth-grid > .col-md-6:nth-child(2) { padding-left: 6px; }
.modal.ot-auth .ot-auth-grid > .col-md-3 { padding-right: 6px !important; }
.modal.ot-auth .ot-auth-grid > .col-md-9 { padding-left: 6px !important; }
.modal.ot-auth .ot-field > label {
    display: block; font-size: 12px; font-weight: 500; color: var(--ot-muted, #6b7084);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
#signin-popup.ot-auth .form-control,
#signup-popup.ot-auth .form-control,
#signup-popup.ot-auth .form-select {
    width: 100%; height: auto; padding: 11px 13px; border: 1px solid var(--ot-line, #e6e8f0) !important; border-radius: 10px !important;
    font-size: 14px; color: var(--ot-ink, #1e2130); background-color: #fff; box-shadow: none;
}
#signup-popup.ot-auth .form-select { padding-right: 30px; background-position: right 10px center; }
#signin-popup.ot-auth .form-control::placeholder,
#signup-popup.ot-auth .form-control::placeholder { color: #a3a8b8; opacity: 1; font-weight: 400; font-size: 14px; }
#signin-popup.ot-auth .form-control:focus,
#signup-popup.ot-auth .form-control:focus,
#signup-popup.ot-auth .form-select:focus { border-color: var(--ot-brand, #e31e24) !important; box-shadow: 0 0 0 3px rgba(227,30,36,.12); outline: none; }
.modal.ot-auth .form-control.is-invalid { border-color: var(--ot-danger, #e5484d) !important; }

/* Password eye */
.modal.ot-auth .password-field { position: relative; }
.modal.ot-auth .password-field input { padding-right: 40px; }
.modal.ot-auth .password-field .toggle-visibility {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%); margin: 0;
    color: var(--ot-muted, #6b7084); font-size: 14px;
}
.modal.ot-auth .password-field .toggle-visibility:hover { color: var(--ot-brand, #e31e24); }

/* Captcha row: image | refresh | input */
.modal.ot-auth .ot-captcha { display: grid; grid-template-columns: minmax(0, 1.1fr) 40px minmax(0, 1fr); gap: 8px; align-items: center; }
.modal.ot-auth .ot-captcha img { width: 100%; height: 44px; object-fit: fill; display: block; border-radius: 10px; } /* picture fills the whole box */
#signup-popup.ot-auth .captcha-refresh {
    width: 40px; height: 44px; border-radius: 10px; border: 1px solid var(--ot-line, #e6e8f0); background: #fff; color: var(--ot-ink, #1e2130);
}
#signup-popup.ot-auth .captcha-refresh:hover { border-color: var(--ot-brand, #e31e24); color: var(--ot-brand, #e31e24); filter: none; }

/* Terms checkbox */
.modal.ot-auth .ot-auth-terms { font-size: 13px; color: #3a3e52; line-height: 1.5; margin: 2px 0 16px; }
.modal.ot-auth .ot-auth-terms .form-check-input:checked { background-color: var(--ot-brand, #e31e24); border-color: var(--ot-brand, #e31e24); }
.modal.ot-auth .ot-auth-terms a { color: var(--ot-brand, #e31e24); font-weight: 500; text-decoration: none; }
.modal.ot-auth .ot-auth-terms a:hover { text-decoration: underline; }

/* Row under the fields (Forgot password) */
.modal.ot-auth .ot-auth-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin: -4px 0 14px; }

/* Links (Forgot password, Create an account, Log in) */
#signin-popup.ot-auth .link-text,
#signup-popup.ot-auth .link-text { padding: 0; color: var(--ot-brand, #e31e24); font-weight: 500; cursor: pointer; }
#signin-popup.ot-auth .link-text::after,
#signup-popup.ot-auth .link-text::after { display: none; }
#signin-popup.ot-auth .link-text:hover,
#signup-popup.ot-auth .link-text:hover { color: var(--ot-brand-dark, #c0151b); text-decoration: underline; }

/* Primary button */
#signin-popup.ot-auth .ot-auth-btn,
#signup-popup.ot-auth .ot-auth-btn {
    display: block; width: 100%; text-align: center; padding: 12px; margin: 0;
    border: none; border-radius: 12px; background: var(--ot-grad, linear-gradient(135deg, #ff6a3d, #e31e24));
    color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
    box-shadow: 0 5px 14px rgba(227,30,36,.25); transition: transform .15s, box-shadow .15s;
}
#signin-popup.ot-auth .ot-auth-btn:hover,
#signup-popup.ot-auth .ot-auth-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(227,30,36,.32); color: #fff; background: var(--ot-grad, linear-gradient(135deg, #ff6a3d, #e31e24)); }

.modal.ot-auth .ot-auth-alt { text-align: center; font-size: 13.5px; margin-top: 16px; color: var(--ot-muted, #6b7084); }

/* "or" divider + guest button (sign in) */
.modal.ot-auth .ot-auth-divider { display: flex; align-items: center; gap: 12px; color: var(--ot-muted, #6b7084); font-size: 12px; margin: 16px 0; }
.modal.ot-auth .ot-auth-divider::before,
.modal.ot-auth .ot-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--ot-line, #e6e8f0); }
.modal.ot-auth .ot-auth-ghost {
    display: block; width: 100%; padding: 11px; border: 1.5px solid var(--ot-line, #e6e8f0); border-radius: 10px;
    background: #fff; color: var(--ot-ink, #1e2130); font-size: 14px; font-weight: 500; cursor: pointer;
}
.modal.ot-auth .ot-auth-ghost:hover { border-color: var(--ot-brand, #e31e24); color: var(--ot-brand, #e31e24); }

@media (max-width: 575.98px) {
    #signin-popup.ot-auth .ot-auth-card, #signup-popup.ot-auth .ot-auth-card { padding: 26px 20px; }
    .modal.ot-auth .ot-auth-grid > .col-md-6 { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Text logo, as in the mockup: red "Only" + dark "Ticket" */
.modal.ot-auth .ot-auth-mark { text-align: center; font-size: 26px; font-weight: 600; margin: 0 0 8px; color: var(--ot-ink, #1e2130); letter-spacing: -.01em; }
.modal.ot-auth .ot-auth-mark .o-red { color: var(--ot-brand, #e31e24); }

/* Continue with Google / Facebook */
.modal.ot-auth .ot-auth-social {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; margin-bottom: 10px;
    border: 1.5px solid var(--ot-line, #e6e8f0); border-radius: 10px; background: #fff; color: var(--ot-ink, #1e2130);
    font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .15s;
}
.modal.ot-auth .ot-auth-social:hover { border-color: var(--ot-brand, #e31e24); }
.modal.ot-auth .ot-auth-social svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Remember me */
.modal.ot-auth .ot-auth-remember { display: inline-flex; align-items: center; gap: 7px; margin: 0; cursor: pointer; color: #3a3e52; }
.modal.ot-auth .ot-auth-remember input { width: 15px; height: 15px; accent-color: var(--ot-brand, #e31e24); }
.modal.ot-auth .ot-auth-row { margin: 0 0 14px; }

/* Guest option under "Create an account" */
.modal.ot-auth .ot-auth-guest { text-align: center; font-size: 12.5px; margin-top: 8px; color: var(--ot-muted, #6b7084); }

/* Verification block (2026-10-26): code shown in a light patterned box with a square refresh button beside it */
.modal.ot-auth .ot-optional { font-weight: 400; color: #9ca3af; }
.modal.ot-auth .ot-verify-hint { margin: -2px 0 8px; font-size: 13px; color: #6b7280; }
.modal.ot-auth .ot-verify { display: flex; align-items: center; gap: 10px; }
.modal.ot-auth .ot-verify-code {
    flex: 1; min-width: 0; height: 56px; padding: 6px 12px; border-radius: 12px; border: 1px solid #eceef2;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background-color: #f6f7f9;
    background-image:
        repeating-linear-gradient(45deg, rgba(148, 163, 184, .16) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(-45deg, rgba(148, 163, 184, .16) 0 1px, transparent 1px 9px);
}
.modal.ot-auth .ot-verify-code img { max-width: 100%; height: 44px; object-fit: contain; display: block; mix-blend-mode: multiply; }
.modal.ot-auth .ot-verify-refresh {
    flex: none; width: 56px; height: 56px; border-radius: 12px; border: 1.5px solid var(--ot-brand, #e31e24);
    background: rgba(227, 30, 36, .06); color: var(--ot-brand, #e31e24); font-size: 20px;
    display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s, transform .15s;
}
.modal.ot-auth .ot-verify-refresh:hover { background: var(--ot-brand, #e31e24); color: #fff; }
.modal.ot-auth .ot-verify-refresh:active i { transform: rotate(180deg); transition: transform .3s; }

/* Sign-up popup, desktop (2026-10-26): wider dialog, passwords side by side, verification code + refresh + input on one row */
@media (min-width: 768px) {
    .modal.ot-auth.ot-auth-wide .modal-dialog { max-width: 720px; }
    .modal.ot-auth .ot-auth-grid > .ot-pair-left { padding-right: 6px; }
    .modal.ot-auth .ot-auth-grid > .ot-pair-right { padding-left: 6px; }
}
.modal.ot-auth .ot-verify { flex-wrap: wrap; }
.modal.ot-auth .ot-verify .ot-verify-input { flex: 1 1 100%; height: 56px; }
@media (min-width: 768px) {
    .modal.ot-auth .ot-verify { flex-wrap: nowrap; }
    .modal.ot-auth .ot-verify .ot-verify-code { flex: 0 1 240px; }
    .modal.ot-auth .ot-verify .ot-verify-input { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 767.98px) {
    .modal.ot-auth .ot-auth-grid > .ot-pair-left,
    .modal.ot-auth .ot-auth-grid > .ot-pair-right { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Country-code flag picker in the sign-up popup (2026-10-26) */
.modal.ot-auth .ot-phone-flag .iti { display: block; width: 100%; }
.modal.ot-auth .ot-phone-flag .ot-iti-input { caret-color: transparent; cursor: pointer; padding-right: 4px; }
.modal.ot-auth .ot-phone-flag .iti__selected-country { border-radius: 10px; padding: 0 8px; }
.iti--container, .modal.ot-auth .iti__dropdown-content { z-index: 2000; }
.modal.ot-auth .iti__dropdown-content { border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .12); border: 1px solid #e5e7eb; }
.modal.ot-auth .iti__search-input { height: 38px; border-radius: 10px; border: 1px solid #d9dde3; padding: 0 12px 0 34px; font-size: 14px; }
.modal.ot-auth .iti__country-list { max-height: 220px; }
.modal.ot-auth .iti__country { padding: 7px 12px; font-size: 14px; }
.modal.ot-auth .ot-phone-flag .iti__dropdown-content { width: 300px; max-width: calc(100vw - 48px); }

/* 2026-10-26: password fields already have the eye icon, so drop Bootstrap's red "!" icon there (it doubled up) */
.modal.ot-auth .password-field .form-control.is-invalid { background-image: none !important; padding-right: 40px; }
/* Sign-up popup: wider country-code column (col-md-4 / col-md-8) so the country name shows */
.modal.ot-auth .ot-auth-grid > .col-md-4 { padding-right: 6px !important; }
.modal.ot-auth .ot-auth-grid > .col-md-8 { padding-left: 6px !important; }

/* Login success card (modal-signin.js), 2026-10-27 */
.swal2-popup.ot-swal-popup { border-radius: 18px; padding: 28px 24px 22px; box-shadow: 0 18px 50px rgba(30,33,48,.22); overflow: hidden; }
.ot-swal-popup .ot-swal-body { margin: 0; padding: 0; }
.ot-swal-check {
    width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ot-brand-light, #fdecec); color: var(--ot-brand, #e31e24); font-size: 34px;
    animation: otSwalPop .35s ease-out;
}
.ot-swal-title { font-size: 20px; font-weight: 700; color: var(--ot-ink, #1e2130); margin-bottom: 4px; }
.ot-swal-text { font-size: 15px; color: #5b6070; }
.ot-swal-hint { font-size: 12px; color: #9aa0ad; margin-top: 10px; }
.swal2-timer-progress-bar.ot-swal-progress { background: var(--ot-brand, #e31e24); height: 4px; }
@keyframes otSwalPop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Logout confirm (Partials/User/logout.cshtml), same card as the login popup, 2026-10-27 */
#logoutModal.ot-auth .modal-dialog { max-width: 400px; }
#logoutModal.ot-auth .ot-logout-card { padding: 34px 30px 26px; background: #fff; text-align: center; }
#logoutModal.ot-auth .ot-auth-btn {
    display: block; width: 100%; text-align: center; padding: 12px; margin: 0 0 10px;
    border: none; border-radius: 12px; background: var(--ot-grad, linear-gradient(135deg, #ff6a3d, #e31e24));
    color: #fff; font-size: 15px; font-weight: 600;
    box-shadow: 0 5px 14px rgba(227,30,36,.25); transition: transform .15s, box-shadow .15s;
}
#logoutModal.ot-auth .ot-auth-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(227,30,36,.32); }
#logoutModal.ot-auth .ot-auth-btn-outline {
    display: block; width: 100%; padding: 11px; border-radius: 12px; background: #fff;
    border: 1px solid var(--ot-line, #e6e8f0); color: var(--ot-ink, #1e2130); font-size: 15px; font-weight: 600;
}
#logoutModal.ot-auth .ot-auth-btn-outline:hover { background: var(--ot-bg, #f5f6fa); }

/* Logo at the top of the login / sign-up popups and the sign-up page (2026-10-27, replaces the "OnlyTicket" text) */
.ot-auth-logo { display: block; height: 44px; width: auto; margin: 0 auto 12px; }