:root {
    --primary: #e54b13;
    --primary-rgb: 229, 75, 19;
    --auth-card-bg: #ffffff;
    --auth-text-main: #2d3436;
    --auth-text-muted: #636e72;
    --auth-input-bg: #f8f9fa;
    --auth-input-border: #dfe6e9;
    --auth-shadow: 0 10px 30px rgba(229, 75, 19, 0.15);
}

.authincation {
    background-color: #e54b13 !important;
    background-image: url('../images/auth-bg.svg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.authincation-content {
    background: var(--auth-card-bg) !important;
    box-shadow: var(--auth-shadow) !important;
    border-radius: 24px !important;
    overflow: hidden;
    border: 1px solid var(--auth-input-border);
    backdrop-filter: blur(10px);
}

.auth-form {
    padding: 40px !important;
}

.auth-form h3,
.auth-form h4 {
    color: var(--auth-text-main) !important;
    font-weight: 700;
    font-size: 1.5rem;
}

.form-label,
label.form-label {
    color: var(--auth-text-main) !important;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 10px !important;
    display: block;
    letter-spacing: 0.5px;
}

/* Specific fix for dark mode labels */
/* HIGH CONTRAST DARK MODE LABELS */
[data-theme-version="dark"] .form-label,
[data-theme-version="dark"] label.form-label {
    color: #ffffff !important;
    opacity: 1 !important;
    display: block !important;
}

[data-theme-version="dark"] .custom-checkbox .form-check-label {
    color: var(--auth-text-muted) !important;
}

.form-control {
    background: var(--auth-input-bg) !important;
    border-color: var(--auth-input-border) !important;
    color: var(--auth-text-main) !important;
    border-radius: 12px !important;
    height: 50px !important;
    padding-left: 20px !important;
    transition: all 0.3s ease;
}

.input-group-text {
    background: var(--auth-input-bg) !important;
    border-color: var(--auth-input-border) !important;
    color: #e54b13 !important;
    padding-left: 15px;
    padding-right: 10px;
}

.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1) !important;
}

.btn-primary {
    background-color: #e54b13 !important;
    border-color: #e54b13 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    height: 50px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(229, 75, 19, 0.35);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #c73e0e !important;
    border-color: #c73e0e !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(229, 75, 19, 0.50) !important;
}

.show-pass {
    color: var(--auth-text-muted) !important;
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    transform: translateY(-50%) !important;
    z-index: 10;
    height: auto !important;
    display: flex;
    align-items: center;
}

.custom-checkbox .form-check-label {
    color: var(--auth-text-muted) !important;
}

.auth-form a {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
}

.auth-form a:hover {
    color: #c73e0e !important;
    text-decoration: underline;
    opacity: 1 !important;
}

/* Turnstile adjustments */
.cf-turnstile {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* ══════════════════════════════════════════════
   Auth Partner Logos Section
   ══════════════════════════════════════════════ */
.auth-partner-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--auth-input-border);
    gap: 12px;
}

.auth-partner-logos .partner-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.auth-partner-logos .partner-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.auth-partner-logos img {
    height: 46px;
    width: auto;
    object-fit: contain;
    filter: none !important;
}

/* ══════════════════════════════════════════════
   Force Light Mode — Auth Pages Only
   Semua warna ditetapkan ke light mode.
   Dark mode TIDAK berlaku di halaman auth.
   ══════════════════════════════════════════════ */

/* Override theme variables agar selalu light */
[data-theme-version="dark"] .authincation,
[data-theme-version="dark"] .authincation-content,
[data-theme-version="dark"] .auth-form {
    --auth-card-bg: #ffffff !important;
    --auth-text-main: #2d3436 !important;
    --auth-text-muted: #636e72 !important;
    --auth-input-bg: #f8f9fa !important;
    --auth-input-border: #dfe6e9 !important;
}

/* Force card background putih */
.authincation-content,
[data-theme-version="dark"] .authincation-content {
    background: #ffffff !important;
    color: #2d3436 !important;
}

/* Force teks di dalam auth form */
.auth-form,
[data-theme-version="dark"] .auth-form {
    background: #ffffff !important;
    color: #2d3436 !important;
}

/* Force input background */
.auth-form .form-control,
[data-theme-version="dark"] .auth-form .form-control {
    background: #f8f9fa !important;
    color: #2d3436 !important;
    border-color: #dfe6e9 !important;
}

/* Force input-group-text background */
.auth-form .input-group-text,
[data-theme-version="dark"] .auth-form .input-group-text {
    background: #f8f9fa !important;
    border-color: #dfe6e9 !important;
    color: #e54b13 !important;
}

/* Force label warna gelap */
.auth-form .form-label,
[data-theme-version="dark"] .auth-form .form-label {
    color: #2d3436 !important;
}

/* Force h4 page-title warna gelap */
.auth-form h4,
[data-theme-version="dark"] .auth-form h4 {
    color: #2d3436 !important;
}

/* Force teks muted */
.auth-form .text-muted,
[data-theme-version="dark"] .auth-form .text-muted {
    color: #636e72 !important;
}

/* Force checkbox label */
.auth-form .form-check-label,
[data-theme-version="dark"] .auth-form .form-check-label {
    color: #636e72 !important;
}

/* Force checkbox input — tidak menggunakan dark theme */
.auth-form .form-check-input,
[data-theme-version="dark"] .auth-form .form-check-input {
    background-color: #ffffff !important;
    border-color: #dfe6e9 !important;
}

.auth-form .form-check-input:checked,
[data-theme-version="dark"] .auth-form .form-check-input:checked {
    background-color: #e54b13 !important;
    border-color: #e54b13 !important;
}

/* color-scheme agar browser tidak menerapkan dark scrollbar dll */
.authincation,
.authincation * {
    color-scheme: light;
}