/* ============================================================
   VERIXID — UPLOAD CTA PATCH
   Depends on: style.css, upload.css (harus diload lebih dulu)
   ============================================================ */

/* ─── UPLOAD CTA WRAPPER ─────────────────────────────────────*/
/* Identik dengan .notice-info — border, background, radius sama */
.notice-upload-cta {
    background:     var(--slate-50);
    border:         1px solid var(--color-border);
    border-left:    3px solid var(--blue-400);
    border-radius:  var(--radius-md);
    padding:        var(--space-4);
    font-size:      0.875rem;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

/* Hint text — identik .notice-hint */
.notice-upload-cta .notice-hint {
    font-size:   0.75rem;
    /*color:       var(--color-text-muted);*/
    margin:      0;
    line-height: 1.55;
}

/* ─── EMAIL INPUT GROUP ──────────────────────────────────────*/
.email-reminder-wrap {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
}

.email-reminder-label {
    font-size:      0.75rem;
    font-weight:    600;
    color:          var(--color-text);
    letter-spacing: 0.01em;
}

.email-reminder-label span {
    font-weight: 400;
    color:       var(--color-text-muted);
}

.email-reminder-input {
    width:         100%;
    padding:       var(--space-2) var(--space-3);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size:     0.875rem;
    font-family:   var(--font-sans);
    color:         var(--color-text);
    background:    var(--color-bg);
    box-sizing:    border-box;
    transition:    border-color var(--transition), box-shadow var(--transition);
    outline:       none;
}

.email-reminder-input::placeholder {
    color: var(--color-text-subtle);
}

.email-reminder-input:focus {
    border-color: var(--color-border-focus);
    box-shadow:   0 0 0 3px var(--blue-100);
}

.email-reminder-hint {
    font-size:   0.6875rem;
    color:       var(--color-text-muted);
    margin:      0;
    line-height: 1.5;
}

/* ─── UPLOAD TO LEDGER BUTTON ────────────────────────────────*/
/* Identik .btn-primary dari upload.css */
.btn-upload-ledger {
    width:           100%;
    background:      var(--blue-600);
    color:           #fff;
    font-weight:     700;
    font-family:     var(--font-sans);
    font-size:       0.95rem;
    padding:         var(--space-4);
    border-radius:   var(--radius-md);
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    transition:      background var(--transition), transform 0.15s ease;
    margin:          0;
}

.btn-upload-ledger:hover {
    background: var(--blue-700);
}

.btn-upload-ledger:active {
    transform: scale(0.98);
}

.btn-upload-ledger:focus-visible {
    outline:        3px dotted currentColor;
    outline-offset: -3px;
}

.btn-upload-ledger svg {
    width:       1rem;
    height:      1rem;
    min-width:   1rem;
    flex-shrink: 0;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────*/
@media (max-width: 640px) {
    .notice-upload-cta {
        padding: var(--space-3);
        gap:     var(--space-2);
    }

    .email-reminder-input {
        font-size: 0.8125rem;
    }

    .btn-upload-ledger {
        font-size: 0.875rem;
        padding:   var(--space-3);
    }
}