/* =====================================================
   AUTH PAGES — REGISTER / LOGIN / VERIFY
   BookmarkDofollow Theme — Final Version
   ===================================================== */

/* =====================================================
   WRAPPER & LAYOUT
   ===================================================== */
.auth-wrapper {
    background: #f5f7fa;
    min-height: 80vh;
    padding: 30px 20px 60px;
}

.auth-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Breadcrumb */
.auth-breadcrumb {
    background: #edf2f7;
    padding: 14px 22px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 14px;
    color: #718096;
    display: flex;
    align-items: center;
    gap: 10px;
}
.auth-breadcrumb a {
    color: #3182ce;
    text-decoration: none;
    font-weight: 500;
}
.auth-breadcrumb a:hover { text-decoration: underline; }
.auth-breadcrumb .current { color: #2d3748; font-weight: 600; }

/* Grid layout */
.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .auth-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Kolom form */
.auth-form-col {
    min-width: 0;
}

/* =====================================================
   FORM CARD
   ===================================================== */
.auth-form {
    background: #fff;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    box-sizing: border-box;
}

.auth-form p {
    margin: 0 0 20px 0;
    padding: 0;
    width: 100%;
}
.auth-form p:last-child {
    margin-bottom: 0;
}

/* =====================================================
   LABEL & INPUT
   ===================================================== */
.auth-form label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    color: #2d3748;
    font-size: 15px;
    line-height: 1.4;
}

/* Semua input types */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="url"],
.auth-form input[type="number"],
.auth-form input[type="tel"],
.auth-form input[type="search"],
.auth-form textarea,
.auth-form select {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #cbd5e0;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: #2d3748;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    box-sizing: border-box;
    line-height: 1.4;
    height: auto;
    min-height: 44px;
    margin: 0;
}

.auth-form input:focus,
.auth-form textarea:focus,
.auth-form select:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49,130,206,.15);
}

/* Chrome Autofill */
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #2d3748;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* =====================================================
   WP_LOGIN_FORM() FIX
   ===================================================== */
.auth-form .login-username,
.auth-form .login-password {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

.auth-form .login-username label,
.auth-form .login-password label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    color: #2d3748;
    font-size: 15px;
}

/* Remember me */
.auth-form .login-remember {
    display: block;
    width: 100%;
    margin-bottom: 22px;
}

.auth-form .login-remember label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
    color: #4a5568;
    cursor: pointer;
    margin-bottom: 0;
    width: auto;
}

.auth-form .login-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    accent-color: #3182ce;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

/* Submit button */
.auth-form .login-submit {
    display: block;
    width: 100%;
    margin: 0;
}

.auth-form input[type="submit"],
.auth-form button[type="submit"],
.auth-form #wp-submit {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: #3182ce;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    letter-spacing: .3px;
    line-height: 1.4;
    height: auto;
    min-height: 48px;
    box-shadow: none;
    text-shadow: none;
    margin: 0;
}

.auth-form input[type="submit"]:hover,
.auth-form button[type="submit"]:hover,
.auth-form #wp-submit:hover {
    background: #2b6cb0;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(49,130,206,.3);
}

/* =====================================================
   FIELD WRAPPER (Register Form)
   ===================================================== */
.auth-field {
    margin-bottom: 22px;
}

.auth-field label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    color: #2d3748;
    font-size: 15px;
}

.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"],
.auth-field input[type="url"],
.auth-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #cbd5e0;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: #2d3748;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    min-height: 44px;
}

.auth-field input:focus,
.auth-field textarea:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49,130,206,.15);
}

.field-hint {
    display: block;
    margin-top: 6px;
    color: #a0aec0;
    font-size: 12.5px;
    line-height: 1.4;
}

/* =====================================================
   PASSWORD TOGGLE
   ===================================================== */
.password-wrap {
    position: relative;
    width: 100%;
}
.password-wrap input {
    padding-right: 45px;
}
.toggle-pass {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 6px;
    opacity: .6;
    transition: opacity .2s;
    line-height: 1;
}
.toggle-pass:hover { opacity: 1; }

/* =====================================================
   PASSWORD STRENGTH METER
   ===================================================== */
.pass-strength {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
.strength-bar {
    flex: 1;
    height: 5px;
    background: #edf2f7;
    border-radius: 3px;
    overflow: hidden;
}
.strength-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: #f56565;
    transition: all .3s;
}
.strength-text {
    color: #718096;
    font-weight: 500;
    min-width: 110px;
}
.strength-weak .strength-bar span { width: 33%; background: #f56565; }
.strength-medium .strength-bar span { width: 66%; background: #ed8936; }
.strength-strong .strength-bar span { width: 100%; background: #48bb78; }

.strength-weak .strength-text { color: #f56565; }
.strength-medium .strength-text { color: #ed8936; }
.strength-strong .strength-text { color: #48bb78; }

/* =====================================================
   CAPTCHA
   ===================================================== */
.captcha-field {
    background: #f7fafc;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.captcha-box {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.captcha-question {
    flex: 1;
    min-width: 180px;
}
.captcha-label {
    display: block;
    font-size: 12px;
    color: #718096;
    margin-bottom: 4px;
}
.captcha-math {
    font-size: 1.3rem;
    color: #2d3748;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}
.captcha-input {
    width: 130px !important;
    padding: 10px 12px !important;
    text-align: center;
    font-size: 16px !important;
    font-weight: 600;
}

/* =====================================================
   CHECKBOX
   ===================================================== */
.auth-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
    color: #4a5568;
    cursor: pointer;
    margin-bottom: 0;
}
.auth-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    accent-color: #3182ce;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

/* =====================================================
   SUBMIT BUTTON (Register)
   ===================================================== */
.auth-submit {
    margin-top: 25px;
}
.btn-auth-primary {
    width: 100%;
    padding: 14px 24px;
    background: #3182ce;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    letter-spacing: .3px;
    min-height: 48px;
}
.btn-auth-primary:hover {
    background: #2b6cb0;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(49,130,206,.3);
}
.btn-auth-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* =====================================================
   FOOTER LINK
   ===================================================== */
.auth-footer-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #718096;
}
.auth-footer-link a {
    color: #3182ce;
    text-decoration: none;
    font-weight: 600;
}
.auth-footer-link a:hover { text-decoration: underline; }

.auth-flex-between {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* =====================================================
   ALERTS
   ===================================================== */
.auth-alert {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
}
.auth-alert ul {
    margin: 6px 0 0 18px;
    padding: 0;
}
.auth-alert li { margin-bottom: 4px; }
.auth-alert a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.auth-alert-error {
    background: #fed7d7;
    color: #822727;
    border-left: 4px solid #f56565;
}
.auth-alert-success {
    background: #c6f6d5;
    color: #22543d;
    border-left: 4px solid #48bb78;
}
.auth-alert-info {
    background: #bee3f8;
    color: #2c5282;
    border-left: 4px solid #4299e1;
}
.auth-alert-warning {
    background: #fefcbf;
    color: #744210;
    border-left: 4px solid #ecc94b;
}

/* =====================================================
   INFO COLUMN
   ===================================================== */
.auth-info-col {
    padding-top: 20px;
    min-width: 0;
}
.info-title {
    font-size: 1.9rem;
    color: #1a202c;
    margin-bottom: 15px;
    font-weight: 800;
}
.info-desc {
    color: #4a5568;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
}
.info-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}
.info-list li {
    padding: 10px 0 10px 28px;
    position: relative;
    color: #2d3748;
    font-size: 15px;
    border-bottom: 1px solid #f7fafc;
}
.info-list li::before {
    content: "•";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #3182ce;
    font-size: 1.5rem;
    line-height: 1;
}
.info-verify-note {
    background: #fffaf0;
    border-left: 4px solid #ed8936;
    padding: 18px;
    border-radius: 8px;
    margin-top: 20px;
}
.info-verify-note strong {
    display: block;
    color: #7b341e;
    margin-bottom: 6px;
}
.info-verify-note p {
    color: #744210;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* =====================================================
   LOGIN NOTICE
   ===================================================== */
.login-notice {
    margin-top: 20px;
    padding: 14px 18px;
    background: #ebf8ff;
    color: #2c5282;
    border-left: 4px solid #4299e1;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.6;
}
.login-notice strong { font-weight: 700; }

/* =====================================================
   HONEYPOT (Bot Trap)
   ===================================================== */
.bd-honeypot {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

/* =====================================================
   VERIFY PAGE
   ===================================================== */
.auth-verify .verify-box {
    max-width: 560px;
    margin: 40px auto;
    background: #fff;
    padding: 45px 40px;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    text-align: center;
}
.verify-icon {
    font-size: 4rem;
    margin-bottom: 15px;
    line-height: 1;
    display: block;
}
.verify-icon-success {
    animation: bounceIn .6s;
}
@keyframes bounceIn {
    0% { transform: scale(.3); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
.verify-box h1 {
    font-size: 1.7rem;
    color: #1a202c;
    margin-bottom: 15px;
}
.verify-box > p {
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 20px;
    font-size: 15px;
}
.verify-note {
    background: #fefcbf;
    padding: 12px 16px;
    border-radius: 8px;
    color: #744210 !important;
    font-size: 13.5px !important;
    line-height: 1.6;
}
.verify-form {
    text-align: left;
    margin-top: 25px;
    padding: 0;
    box-shadow: none;
    background: transparent;
}
.verify-form .auth-field {
    margin-bottom: 18px;
}
.verify-form input[type="email"] {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #cbd5e0;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: #2d3748;
    transition: border-color .2s, box-shadow .2s;
}
.verify-form input[type="email"]:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49,130,206,.15);
}
.verify-back {
    margin-top: 20px;
}
.verify-back a {
    color: #3182ce;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}
.verify-back a:hover { text-decoration: underline; }

/* =====================================================
   CLOUDFLARE TURNSTILE (kalau plugin aktif)
   ===================================================== */
.cf-turnstile,
#cf-turnstile,
.turnstile-widget {
    margin: 15px 0;
    display: block;
    clear: both;
}

/* =====================================================
   DARK MODE — Auto-detect OS setting
   ===================================================== */
@media (prefers-color-scheme: dark) {

    /* Wrapper & background */
    body,
    .auth-wrapper {
        background: #0f1419;
    }

    /* Breadcrumb */
    .auth-breadcrumb {
        background: #1a202c;
        color: #a0aec0;
        border: 1px solid #2d3748;
    }
    .auth-breadcrumb a { color: #63b3ed; }
    .auth-breadcrumb a:hover { color: #90cdf4; }
    .auth-breadcrumb .current { color: #e2e8f0; }

    /* Form card */
    .auth-form {
        background: #1a202c;
        color: #e2e8f0;
        border: 1px solid #2d3748;
        box-shadow: 0 4px 16px rgba(0,0,0,.4);
    }

    /* Label */
    .auth-form label,
    .auth-field label,
    .auth-form .login-username label,
    .auth-form .login-password label {
        color: #e2e8f0;
    }

    /* Input fields */
    .auth-form input[type="text"],
    .auth-form input[type="email"],
    .auth-form input[type="password"],
    .auth-form input[type="url"],
    .auth-form input[type="number"],
    .auth-form input[type="tel"],
    .auth-form input[type="search"],
    .auth-form textarea,
    .auth-form select,
    .auth-field input[type="text"],
    .auth-field input[type="email"],
    .auth-field input[type="password"],
    .auth-field input[type="url"],
    .auth-field textarea {
        background: #0f1419;
        border-color: #2d3748;
        color: #e2e8f0;
    }

    .auth-form input::placeholder,
    .auth-field input::placeholder,
    .auth-form textarea::placeholder {
        color: #718096;
    }

    .auth-form input:focus,
    .auth-form textarea:focus,
    .auth-form select:focus,
    .auth-field input:focus,
    .auth-field textarea:focus {
        border-color: #4299e1;
        background: #1a202c;
        box-shadow: 0 0 0 3px rgba(66,153,225,.25);
    }

    /* Chrome autofill dark */
    .auth-form input:-webkit-autofill,
    .auth-form input:-webkit-autofill:hover,
    .auth-form input:-webkit-autofill:focus {
        -webkit-text-fill-color: #e2e8f0;
        -webkit-box-shadow: 0 0 0 1000px #0f1419 inset;
        transition: background-color 5000s ease-in-out 0s;
    }

    /* Submit button */
    .auth-form input[type="submit"],
    .auth-form button[type="submit"],
    .auth-form #wp-submit,
    .btn-auth-primary {
        background: #4299e1;
        color: #fff;
    }

    .auth-form input[type="submit"]:hover,
    .auth-form button[type="submit"]:hover,
    .auth-form #wp-submit:hover,
    .btn-auth-primary:hover {
        background: #3182ce;
        box-shadow: 0 6px 16px rgba(66,153,225,.4);
    }

    /* Checkbox remember me */
    .auth-form .login-remember label,
    .auth-checkbox label {
        color: #cbd5e0;
    }

    .auth-form .login-remember input[type="checkbox"],
    .auth-checkbox input[type="checkbox"] {
        accent-color: #4299e1;
    }

    /* Password toggle */
    .toggle-pass {
        color: #cbd5e0;
        opacity: .8;
    }
    .toggle-pass:hover {
        opacity: 1;
        color: #fff;
    }

    /* Strength meter */
    .strength-bar { background: #2d3748; }
    .strength-text { color: #a0aec0; }

    /* CAPTCHA */
    .captcha-field {
        background: #0f1419;
        border-color: #2d3748;
    }
    .captcha-label { color: #a0aec0; }
    .captcha-math { color: #e2e8f0; }
    .captcha-input {
        background: #1a202c !important;
        border-color: #2d3748 !important;
        color: #e2e8f0 !important;
    }
    .captcha-input:focus {
        border-color: #4299e1 !important;
    }

    /* Info column */
    .info-title { color: #fff; }
    .info-desc { color: #cbd5e0; }
    .info-list li {
        color: #e2e8f0;
        border-color: #2d3748;
    }
    .info-list li::before { color: #63b3ed; }

    /* Info verify note */
    .info-verify-note {
        background: #744210;
        border-left-color: #ed8936;
    }
    .info-verify-note strong { color: #fefcbf; }
    .info-verify-note p { color: #fefcbf; }

    /* Login notice */
    .login-notice {
        background: #1a365d;
        color: #bee3f8;
        border-left-color: #4299e1;
    }
    .login-notice strong { color: #fff; }

    /* Alerts */
    .auth-alert-error {
        background: #742a2a;
        color: #fed7d7;
        border-left-color: #fc8181;
    }
    .auth-alert-success {
        background: #22543d;
        color: #c6f6d5;
        border-left-color: #48bb78;
    }
    .auth-alert-info {
        background: #1a365d;
        color: #bee3f8;
        border-left-color: #4299e1;
    }
    .auth-alert-warning {
        background: #744210;
        color: #fefcbf;
        border-left-color: #ecc94b;
    }

    /* Footer link */
    .auth-footer-link { color: #a0aec0; }
    .auth-footer-link a { color: #63b3ed; }
    .auth-footer-link a:hover { color: #90cdf4; }

    /* Verify page */
    .verify-box {
        background: #1a202c;
        color: #e2e8f0;
        border: 1px solid #2d3748;
        box-shadow: 0 4px 16px rgba(0,0,0,.4);
    }
    .verify-box h1 { color: #fff; }
    .verify-box > p { color: #cbd5e0; }
    .verify-note {
        background: #744210 !important;
        color: #fefcbf !important;
    }
    .verify-form input[type="email"] {
        background: #0f1419;
        border-color: #2d3748;
        color: #e2e8f0;
    }
    .verify-form input[type="email"]:focus {
        border-color: #4299e1;
        background: #1a202c;
        box-shadow: 0 0 0 3px rgba(66,153,225,.25);
    }
    .verify-back a { color: #63b3ed; }
    .verify-back a:hover { color: #90cdf4; }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
    .auth-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 600px) {
    .auth-form { padding: 24px 20px; }
    .auth-breadcrumb { padding: 12px 16px; font-size: 13px; }
    .info-title { font-size: 1.5rem; }
    .captcha-box { flex-direction: column; align-items: stretch; }
    .captcha-input { width: 100% !important; }
    .verify-box { padding: 30px 22px; }
    .verify-box h1 { font-size: 1.4rem; }
    .verify-icon { font-size: 3rem; }
    .auth-flex-between {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}