@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── Login 2 — Split Layout ──────────────────────────────────── */
.styled-logo {
    margin: 0 auto;
    width: 100%;
    max-width: 200px;
    filter: drop-shadow(0 4px 16px rgba(229, 57, 53, 0.22));
}

.logo {
    margin: 48px auto 36px auto;
    text-align: center;
}

/* ── Gallery (Right Panel) ───────────────────────────────────── */
.gallery-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

/* ── Outer Wrapper ───────────────────────────────────────────── */
.user-login-5 {
    font-family: 'Outfit', 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 10% 20%, rgba(229, 57, 53, 0.18) 0%, transparent 42%),
        radial-gradient(ellipse at 90% 80%, rgba(59, 130, 246, 0.14) 0%, transparent 40%),
        linear-gradient(160deg, #0a0f1e 0%, #111827 50%, #0d1424 100%);
}

.user-login-5 .bs-reset {
    margin: 0;
    padding: 0;
}

/* ── Left Panel — Login Container ────────────────────────────── */
.user-login-5 .login-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0;
}

.user-login-5 .login-bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* ── Logo ────────────────────────────────────────────────────── */
.user-login-5 .login-container .logo {
    margin: 0 auto 32px auto;
    text-align: center;
}

/* ── Form Title (h3.form-title) ──────────────────────────────── */
.user-login-5 .login-container .form-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.03em;
    margin-bottom: 28px;
}

/* ── Alert ───────────────────────────────────────────────────── */
.user-login-5 .login-container .alert {
    border-radius: 14px;
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-base, 13px);
    margin-bottom: 20px;
    border: 1px solid rgba(229, 57, 53, 0.30);
    background: rgba(229, 57, 53, 0.10);
    color: #fca5a5;
}

/* ── Input Groups ────────────────────────────────────────────── */
.user-login-5 .login-container .form-group {
    margin-bottom: 16px;
}

.user-login-5 .login-container .input-icon {
    position: relative;
    border-radius: 12px !important;
    overflow: hidden;
}

.user-login-5 .login-container .input-icon > i {
    z-index: 4 !important;
    color: var(--ui-primary, #e53935) !important;
}

.user-login-5 .login-container .input-icon .form-control,
.user-login-5 .login-container select.form-control {
    display: block !important;
    width: 100% !important;
    font-family: 'Outfit', sans-serif !important;
    border: 2px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    height: 46px !important;
    padding: 0 14px 0 40px !important;
    font-size: var(--fs-md, 14px);
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* Native <select> (Database/Language) — a plain <select class="form-control">
   was computing a native intrinsic width (~56px, sized to the shortest
   reasonable content) instead of stretching to fill its .input-icon
   wrapper like the text inputs do, because nothing here ever set an
   explicit width — Bootstrap's own .form-control base rule apparently
   wasn't reaching it either. Result: a small native-chrome select box
   floating inside the larger dark pill wrapper, reading as "a field
   inside a field". Fixed by the width:100% above; modernized here by
   stripping the native OS dropdown chrome (appearance:none) and drawing
   a themed chevron instead, same technique already used for the
   DataTables length dropdown elsewhere in the app (common.css). Kept
   CSS-only deliberately — this exact page has twice had a select2 (JS)
   conversion reverted after login-risk concerns, so a native-select
   restyle avoids that risk category entirely. */
.user-login-5 .login-container select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer;
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 13px !important;
}

.user-login-5 .login-container .input-icon .form-control::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.user-login-5 .login-container .input-icon .form-control:-webkit-autofill,
.user-login-5 .login-container .input-icon .form-control:-webkit-autofill:hover,
.user-login-5 .login-container .input-icon .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(15, 20, 40, 0.95) inset !important;
    box-shadow: 0 0 0 1000px rgba(15, 20, 40, 0.95) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
    border-color: rgba(255, 255, 255, 0.12) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.user-login-5 .login-container .input-icon .form-control:focus {
    border-color: var(--ui-primary) !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 0 0 4px var(--ui-primary-soft) !important;
    outline: none !important;
}

/* ── Database picker (select2) ────────────────────────────────
   47 connection names in a native <select> meant scrolling an OS list with no
   way to type; select2 gives it a search box. Only the database select is
   converted - see User.InitDatabaseSelect in user.js, which no-ops if the
   plugin is missing so the native select keeps working.

   select2 v3 copies the source element's classes onto its container, so
   .form-control lands there and the container inherits the dark pill above.
   These rules deal with what select2 draws inside that pill, and with the
   dropdown - which select2 appends to <body>, out of reach of any
   .user-login-5 scope, hence the dropdownCssClass passed at init. */
.user-login-5 .login-container .input-icon .select2-container.login-select2 {
    padding: 0 !important;
    overflow: hidden;
}

/* The source select becomes .select2-offscreen: 1x1, clipped, pinned to the
   wrapper's top-left. The select rules on this page are more specific than
   select2's own !important geometry, so without this they stretch that hidden
   select back to 100% x 46px - still invisible, but sitting on top of the
   container and swallowing every click meant for it. */
.user-login-5 .login-container select.form-control.select2-offscreen {
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background-image: none !important;
}

.user-login-5 .login-container .login-select2 .select2-choice {
    height: 42px;
    line-height: 42px;
    padding: 0 36px 0 40px;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-md, 14px);
}

.user-login-5 .login-container .login-select2 .select2-choice > .select2-chosen {
    margin-right: 0;
    color: #ffffff;
}

.user-login-5 .login-container .login-select2 .select2-choice abbr {
    display: none !important;
}

/* select2 draws its arrow from a sprite; this is the same chevron the native
   selects on this page use. */
.user-login-5 .login-container .login-select2 .select2-choice .select2-arrow {
    width: 36px;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
}

.user-login-5 .login-container .login-select2 .select2-choice .select2-arrow b {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: 13px !important;
}

/* A div cannot take :focus, so the pill's focus ring hangs off the class
   select2 puts on the container while it is open or focused. */
.user-login-5 .login-container .input-icon .select2-container.login-select2.select2-container-active,
.user-login-5 .login-container .input-icon .select2-container.login-select2.select2-dropdown-open {
    border-color: var(--ui-primary) !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 0 0 4px var(--ui-primary-soft) !important;
}

/* ── The dropdown (body level, scoped by dropdownCssClass) ──── */
.select2-drop.login-select2-drop {
    background: #1a1d2e;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    padding: var(--sp-6, 6px);
    margin-top: var(--sp-4, 4px);
    overflow: hidden;
}

.select2-drop.login-select2-drop.select2-drop-above {
    margin-top: 0;
    margin-bottom: var(--sp-4, 4px);
    border-radius: 12px !important;
}

.select2-drop.login-select2-drop .select2-search {
    padding: var(--sp-4, 4px) var(--sp-4, 4px) var(--sp-6, 6px);
}

.select2-drop.login-select2-drop .select2-search input {
    height: 34px;
    min-height: 0;
    padding: 0 var(--sp-10, 10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    background-image: none !important;
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-base, 13px);
}

.select2-drop.login-select2-drop .select2-search input:focus {
    border-color: var(--ui-primary);
    outline: none;
}

.select2-drop.login-select2-drop .select2-results {
    max-height: 260px;
    margin: 0;
    padding: 0;
}

.select2-drop.login-select2-drop .select2-results .select2-result-label {
    padding: var(--sp-8, 8px) var(--sp-10, 10px);
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.86);
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-base, 13px);
}

.select2-drop.login-select2-drop .select2-results .select2-highlighted {
    background: transparent;
}

.select2-drop.login-select2-drop .select2-results .select2-highlighted .select2-result-label {
    background: var(--ui-primary);
    color: #ffffff;
}

.select2-drop.login-select2-drop .select2-results .select2-no-results,
.select2-drop.login-select2-drop .select2-results .select2-searching {
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--fs-sm, 12px);
}

/* option elements in dark selects */
.user-login-5 .login-container select.form-control option {
    background: #1a1d2e;
    color: #fff;
}

/* ── Login Button ────────────────────────────────────────────── */
.user-login-5 .login-container .form-actions {
    padding: 8px 0 0;
    margin: 0;
}

.user-login-5 .login-container .form-actions .btn,
.user-login-5 .login-container .form-actions .btn.blue,
.user-login-5 .login-container .btn-block {
    font-family: 'Outfit', sans-serif !important;
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #ef5350 0%, #e53935 50%, #c62828 100%) !important;
    border: none !important;
    color: #fff !important;
    font-size: var(--fs-lg, 15px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 20px rgba(229, 57, 53, 0.45) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    cursor: pointer;
}

.user-login-5 .login-container .form-actions .btn:hover,
.user-login-5 .login-container .form-actions .btn.blue:hover {
    background: linear-gradient(135deg, #e53935 0%, #c62828 100%) !important;
    box-shadow: 0 6px 28px rgba(229, 57, 53, 0.55) !important;
    transform: translateY(-2px) !important;
}

/* ── Links (create account, register, KVKK etc.) ─────────────── */
.user-login-5 .login-container a,
.user-login-5 .login-links a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-base, 13px);
    transition: color 0.18s ease;
}

.user-login-5 .login-container a:hover,
.user-login-5 .login-links a:hover {
    color: #ffffff;
    text-decoration: none;
}

.user-login-5 .red-color,
.user-login-5 a.red-color {
    color: var(--ui-primary) !important;
}

.user-login-5 a.red-color:hover {
    color: var(--ui-primary-dark) !important;
}

/* The four footer links as one centred row. They live in a 230px column at
   desktop widths (.col-lg-3 holding a .col-md-8), so the row has to wrap; what
   it must not do is break a label in the middle, which is what happened when
   each label was a shrinkable flex item. nowrap on the items moves every break
   to a gap, and row-gap keeps the two lines legible. All four share one colour:
   two of them used to be primary and bold, which read as an error rather than
   as emphasis next to the two muted ones. */
.user-login-5 .login-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: var(--sp-14, 14px);
    row-gap: var(--sp-6, 6px);
    padding: var(--sp-12, 12px) 0 0;
    text-align: center;
}

.user-login-5 .login-links a {
    white-space: nowrap;
    font-size: var(--fs-sm, 12px);
    line-height: 1.6;
    cursor: pointer;
}

.user-login-5 .login-links a:hover,
.user-login-5 .login-links a:focus-visible {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* .red-color is kept: the GDPR and Terms bodies are localisation content that
   can carry their own markup, so the class may still be referenced there. */


/* ── Copyright / Footer ──────────────────────────────────────── */
.user-login-5 .login-container footer,
.user-login-5 .login-container .copyright,
.user-login-5 .login-container .copyright p {
    color: rgba(255, 255, 255, 0.38);
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-sm, 12px);
    text-align: center;
    margin: 0;
}

.user-login-5 .login-container footer {
    margin-top: 24px;
}

/* ── Error State ─────────────────────────────────────────────── */
.user-login-5 .form-group.has-error .input-icon {
    border-color: #ef4444 !important;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1365px) {
    .logo {
        margin: 32px auto 24px auto;
        text-align: center;
    }

    .gallery-img,
    .carousel-inner,
    .carousel,
    .item,
    .active {
        max-height: 768px;
    }
}

@media (max-width: 1023px) {
    .user-login-5 {
        min-height: 50vh;
    }

    .user-login-5 .login-bg {
        min-height: 50vh;
    }

    .user-login-5 .login-container {
        min-height: 50vh;
        padding: 40px 20px;
    }

    .gallery-img,
    .carousel-inner,
    .carousel,
    .item,
    .active {
        max-height: 768px;
    }

    .logo {
        margin: 32px auto 20px auto;
    }
}

@media (max-width: 768px) {
    .gallery-img,
    .carousel-inner,
    .carousel,
    .item,
    .active {
        max-height: 500px;
    }
}

@media (max-width: 480px) {
    .gallery-img,
    .carousel-inner,
    .carousel,
    .item,
    .active {
        max-height: 300px !important;
    }

    .user-login-5 .login-container .form-title {
        font-size: var(--fs-2xl, 22px) !important;
    }
}

@media (max-width: 320px) {
    .gallery-img,
    .carousel-inner,
    .carousel,
    .item,
    .active {
        max-height: 150px !important;
    }
}

/* ── Bootbox / Bootstrap Modal ───────────────────────────────── */
.modal-backdrop { background: rgba(10,15,30,.72) !important; }

.modal-content {
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(10,15,30,.42) !important;
    overflow: hidden;
    font-family: 'Outfit','Segoe UI',Arial,sans-serif;
}

.modal-body {
    padding: 24px 28px 20px !important;
    font-family: 'Outfit','Segoe UI',Arial,sans-serif;
    font-size: var(--fs-md, 14px);
    color: #1a1d2e;
    line-height: 1.6;
}

.modal-body .bootbox-body { display: flex; align-items: center; gap: 10px; }
.modal-body .fa-times-circle { color: #e53935 !important; font-size: var(--fs-xl, 18px); }
.modal-body .fa-info         { color: #3b82f6 !important; font-size: var(--fs-xl, 18px); }
.modal-body .fa-check        { color: #10b981 !important; font-size: var(--fs-xl, 18px); }
.modal-body .fa-warning      { color: #f59e0b !important; font-size: var(--fs-xl, 18px); }

.bootbox-close-button.close {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: var(--fs-xl, 18px);
    color: #9ca3af;
    opacity: 1 !important;
    line-height: 1;
}

.bootbox-close-button.close:hover { color: #374151; }

.modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e8ecf4 !important;
    padding: 14px 20px !important;
}

.modal-footer .btn,
.modal-footer .btn.btn-primary,
.modal-footer .btn.btn-default {
    font-family: 'Outfit','Segoe UI',Arial,sans-serif !important;
    font-weight: 600 !important;
    font-size: var(--fs-base, 13px) !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    min-width: 80px;
    background: linear-gradient(135deg,#ef5350,#e53935) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(229,57,53,.30) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}

.modal-footer .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(229,57,53,.45) !important;
    background: linear-gradient(135deg,#e53935,#c62828) !important;
}

/* ── Per-theme overrides (dark-themes.css loaded on _EmptyLayout for CSS vars) ── */

/* Red Dark — matches dark-themes.css palette */
[data-theme="dark"] .user-login-5 {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(224, 82, 82, .20) 0%, transparent 42%),
        radial-gradient(ellipse at 90% 80%, rgba(136, 128, 168, .12) 0%, transparent 40%),
        linear-gradient(160deg, #131118 0%, #1c1928 50%, #131118 100%) !important;
}

/* Green Dark — matches dark-themes.css palette */
[data-theme="light"] .user-login-5 {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(34, 192, 92, .18) 0%, transparent 42%),
        radial-gradient(ellipse at 90% 80%, rgba(34, 192, 92, .10) 0%, transparent 40%),
        linear-gradient(160deg, #111412 0%, #181d19 50%, #111412 100%) !important;
}

/* Blue Dark — matches dark-themes.css palette */
[data-theme="accessible"] .user-login-5 {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(42, 184, 232, .18) 0%, transparent 42%),
        radial-gradient(ellipse at 90% 80%, rgba(42, 184, 232, .10) 0%, transparent 40%),
        linear-gradient(160deg, #0f1117 0%, #171c2a 50%, #0f1117 100%) !important;
}

/* Ocean — light blue outer background, dark left panel for readability */
[data-theme="ocean"] .user-login-5 {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(2, 132, 199, .14) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 80%, rgba(124, 58, 237, .10) 0%, transparent 50%),
        linear-gradient(160deg, #deeeff 0%, #ebf4ff 50%, #dbeffe 100%) !important;
}
[data-theme="ocean"] .user-login-5 .login-container {
    background: rgba(12, 58, 92, 0.88) !important;
}

/* Emerald — light green outer background, dark left panel for readability */
[data-theme="emerald"] .user-login-5 {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(5, 150, 105, .14) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 80%, rgba(37, 99, 235, .10) 0%, transparent 50%),
        linear-gradient(160deg, #d1fae5 0%, #ecfdf5 50%, #d1fae5 100%) !important;
}
[data-theme="emerald"] .user-login-5 .login-container {
    background: rgba(5, 46, 34, 0.88) !important;
}

/* All themes: button uses theme primary color */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"], [data-theme="ocean"], [data-theme="emerald"]) .user-login-5 .login-container .form-actions .btn,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"], [data-theme="ocean"], [data-theme="emerald"]) .user-login-5 .login-container .form-actions .btn.blue,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"], [data-theme="ocean"], [data-theme="emerald"]) .user-login-5 .login-container .btn-block {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark)) !important;
    box-shadow: 0 4px 20px var(--ui-primary-soft) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"], [data-theme="ocean"], [data-theme="emerald"]) .user-login-5 .login-container .form-actions .btn:hover,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"], [data-theme="ocean"], [data-theme="emerald"]) .user-login-5 .login-container .form-actions .btn.blue:hover {
    box-shadow: 0 6px 28px var(--ui-primary-soft) !important;
}

/* Input icon accent follows theme primary */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"], [data-theme="ocean"], [data-theme="emerald"]) .user-login-5 .login-container .input-icon > i {
    color: var(--ui-primary) !important;
}