:root {
    --primary-blue: #1848a0;
    --light-bg: #e1ecf7;
    --text-dark: #001f65;
    --gradient-btn: linear-gradient(180deg, #001f65 0%, #6895fd 100%);
    --emergency-red: linear-gradient(180deg, #d9534f 0%, #ff4d4d 100%);
    --success-green: #2e7d32;
    --fs-h1: 2.2rem;
    --fs-h2: 1.6rem;
    --fs-body: 1rem;
    --fs-small: 0.85rem;
}

html { font-size: 16px; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

@media (max-width: 480px) {
    html { font-size: 14px; }
    :root {
        --fs-h1: 1.8rem;
        --fs-h2: 1.4rem;
    }
}

body, html {
    margin: 0; padding: 0;
    font-family: 'Outfit', sans-serif;
    background-color: var(--light-bg);
    min-height: 100vh;
    color: var(--text-dark);
}

.header {
    background-color: var(--primary-blue);
    min-height: 30vh;
    padding: 40px 20px 80px; 
    display: flex; justify-content: center; align-items: center; color: white;
}

.header-content { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; }
.logo-img { width: clamp(120px, 40vw, 200px); }
.header-text h1 { margin: 0; font-size: var(--fs-h1); font-weight: 800; }
.text-now { color: #bfe5ef; }

@media (min-width: 768px) {
    .header-content { flex-direction: row; text-align: left; }
    .header { height: 35vh; }
}

.signup-container { 
    display: flex; justify-content: center; 
    margin-top: -60px;
    padding: 0 15px 40px; 
}

.signup-card {
    background: white; padding: 2.5rem 2rem; border-radius: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 100%; max-width: 400px;
    text-align: center; position: relative; z-index: 10;
    box-sizing: border-box;
}

.input-group { position: relative; margin-bottom: 15px; width: 100%; }

/* Styling untuk Ikon Kiri (User, Mail, Lock) */
.input-group svg:not(.eye-icon) { 
    position: absolute; 
    left: 15px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 18px; 
    fill: var(--primary-blue); 
}

/* Styling untuk Ikon Mata (Kanan) */
.eye-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    cursor: pointer;
    fill: #ccc;
    z-index: 11;
    display: none; /* Disembunyikan secara default, JS akan panggil class .active */
}

.eye-icon.active {
    display: block;
}

.input-group input, .phone-number-box, .country-code-box {
    height: 50px; border: 2px solid var(--primary-blue); border-radius: 12px;
    font-size: var(--fs-body); outline: none; box-sizing: border-box;
}
.input-group input { width: 100%; padding: 0 45px 0 45px; }

.phone-input-container { display: flex; gap: 10px; margin-bottom: 15px; align-items: stretch; }
.country-code-box { background: #f0f4f8; padding: 0 12px; display: flex; align-items: center; gap: 8px; font-weight: bold; min-width: 95px; }
.phone-number-box { flex: 1; padding: 0 15px; width: 100%; }
.flag-icon { width: 25px; height: auto; }

.phone-error-text {
    color: #dc3545; font-size: 0.75rem; text-align: left;
    margin-top: -10px; margin-bottom: 10px; display: none; padding-left: 5px;
}

.requirements-container { background-color: #f8f9fa; border-radius: 12px; padding: 12px; margin-bottom: 15px; text-align: left; }
.requirement { font-size: 0.75rem; margin: 4px 0; display: flex; align-items: center; gap: 5px; }
.requirement.invalid { color: #dc3545; }
.requirement.valid { color: var(--success-green); font-weight: 700; }

.terms-container {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 15px 0 20px; font-size: var(--fs-small); color: #4a4a4a;
}
.terms-container input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--primary-blue); }
.terms-link { color: var(--primary-blue); font-weight: 800; text-decoration: none; cursor: pointer; }
.terms-link:hover { text-decoration: underline; }

.btn-signup { width: 100%; padding: 14px; border: none; border-radius: 30px; background: var(--gradient-btn); color: white; font-weight: bold; cursor: pointer; }
.btn-vendor { display: block; padding: 12px; text-decoration: none; color: var(--primary-blue); border: 2px solid var(--primary-blue); border-radius: 30px; margin-top: 10px; font-weight: bold; }

.modal { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.7); display: none; justify-content: center; 
    align-items: center; z-index: 2000; backdrop-filter: blur(5px); 
    padding: 20px; box-sizing: border-box; 
}
.modal-content { 
    background: white; padding: 2rem; border-radius: 25px; 
    width: 100%; max-width: 450px; text-align: center; 
    max-height: 85vh; overflow-y: auto; box-sizing: border-box; 
}
.modal-body { text-align: left; font-size: 0.9rem; margin: 20px 0; line-height: 1.6; }
#closeModal { background: var(--gradient-btn); color: white; border: none; padding: 12px 0; width: 100%; border-radius: 30px; cursor: pointer; }

.status-icon-circle { width: 65px; height: 65px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 15px; color: white; font-size: 1.5rem; }
.divider { margin: 20px 0; display: flex; align-items: center; color: #999; font-size: 0.8rem; }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #ddd; margin: 0 15px; }

.login-link { margin-top: 20px; font-size: var(--fs-small); }
.login-link a { color: var(--primary-blue); font-weight: 700; text-decoration: none; }