/* =========================================
   BAGIAN 1: TOMBOL SUBMIT FORM
   ========================================= */
.submit-frame {
    display: inline-block; 
    padding: 8px;
    border: 2px dashed #cbd5e1; 
    border-radius: 10px;
    background-color: #f8fafc; 
}

.submit-btn {
    background-color: #4361ee; 
    color: white;
    border-radius: 6px;
    border: none;
    box-shadow: 0 4px 6px rgba(67, 97, 238, 0.2); 
    transition: all 0.3s ease; 
}

.submit-btn:hover {
    background-color: #3f37c9; 
    color: white;
    box-shadow: 0 6px 12px rgba(67, 97, 238, 0.3); 
    transform: translateY(-2px); 
}

/* =========================================
   BAGIAN 2: TEKS LOGO NAVBAR
   ========================================= */
.brand-text-keren {
    font-size: 1.3rem; 
    font-weight: 900; 
    letter-spacing: 1px; 
    
    background: linear-gradient(45deg, #ff8a00, #ff3d00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    filter: drop-shadow(0px 3px 4px rgba(255, 106, 0, 0.3));
    
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

/* =========================================
   BAGIAN 3: KALKULATOR KURS (ANTI ZOOM BUG)
   =========================================
   Akar masalah "berantakan saat zoom 80%-50%":
   Bootstrap (flex-md-row, d-md-flex, dst) menghitung breakpoint dari
   lebar VIEWPORT browser. Saat halaman di-zoom, lebar viewport dalam
   CSS px ikut berubah (zoom out = viewport "terasa" lebih lebar),
   sehingga breakpoint itu bisa tiba-tiba aktif/nonaktif walau ukuran
   widget di layar terlihat sama. Solusinya: pakai CSS Container Query,
   yang menghitung breakpoint dari lebar WIDGET itu sendiri
   (.kurs-widget), bukan dari viewport. Widget jadi konsisten di zoom
   level berapa pun, dan tetap konsisten kalau nanti ditaruh di kolom
   sempit (sidebar/modal).
*/

.kurs-widget {
    container-type: inline-size;
    container-name: kurswidget;
}

/* --- Layout default: sempit (mobile / widget dipepet) --- */
.currency-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.swap-btn-container {
    display: none;
}

.rate-footer-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.rate-actions {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.rate-actions .btn {
    flex: 1 1 0;
}

/* --- Layout: TUMPUK adalah default, SEJAJAR baru muncul saat kontainer
   benar-benar lega (setara zoom di-turunkan ke ~80% ke bawah).

   Angka 510px ini BUKAN proyeksi/tebakan lagi -- ini dihitung dari
   pengukuran ASLI di DevTools kamu:
     - 100% zoom -> lebar .kurs-widget terukur ~472px (harus TUMPUK)
     - 80%  zoom -> lebar .kurs-widget terukur ~552px (harus SEJAJAR)
   510px dipilih karena ada di antara keduanya, dengan margin aman ke
   kedua sisi. Percobaan 760px sebelumnya salah karena berasumsi lebar
   kontainer terus membesar linear mengikuti kebalikan zoom -- padahal
   Bootstrap (.container/.col-lg-8) punya lebar maksimum bertingkat per
   breakpoint, jadi begitu breakpoint tertentu tercapai, lebar mentok di
   situ dan tidak terus melonjak walau zoom diturunkan lagi (ini yang
   bikin di 25% kemarin ternyata masih di bawah 760px, tidak sesuai
   proyeksi awal). */
@container kurswidget (min-width: 510px) {
    .currency-row {
        flex-direction: row;
        align-items: center;
    }
    .swap-btn-container {
        display: flex;
    }
    .rate-footer-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .rate-actions {
        width: auto;
    }
    .rate-actions .btn {
        flex: 0 0 auto;
    }

    /* Nominal dibikin lebih kecil khusus saat SEJAJAR, biar jelas &
       tidak berdesakan di dalam kolom yang lebih ramping berdampingan. */
    .currency-symbol,
    .currency-input {
        font-size: clamp(0.9rem, 4cqi, 1.15rem);
    }
}

.currency-box {
    border: 1px solid #d1d5db;
    transition: all 0.2s ease-in-out;
    background-color: white;
    min-height: 4.5rem;
    min-width: 0; /* wajib: flex child harus boleh menyusut, jangan dorong overflow */
}

.currency-box:focus-within {
    border-color: #0b5ed7;
    box-shadow: 0 0 0 1.5px #0b5ed7;
}

.floating-label {
    position: absolute;
    top: -10px;
    left: 12px;
    background-color: white;
    padding: 0 6px;
    font-size: 0.85rem;
    color: #6b7280;
    z-index: 5;
    white-space: nowrap;
}

/* Font "$" dan angka pakai clamp() + cqi (container query inline unit).
   1cqi = 1% lebar .kurs-widget. Karena relatif ke lebar WIDGET (bukan
   viewport), proporsinya otomatis tetap pas di zoom berapa pun, dan
   otomatis mengecil sendiri saat widget dipepet sempit. */
.currency-symbol {
    font-size: clamp(0.95rem, 5cqi, 1.375rem);
    font-weight: 700;
    flex-shrink: 0;
    color: #111827;
}

.currency-input {
    color: #111827;
    outline: none !important;
    box-shadow: none !important;
    font-size: clamp(0.95rem, 5cqi, 1.375rem);
    font-weight: 700;
    min-width: 4rem;        /* jaminan lebar minimum ~64px, cukup buat angka default (mis. 17,933) tanpa terpotong */
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.currency-selector {
    flex-shrink: 0;
    min-width: 0;
}

.currency-selector img {
    width: clamp(15px, 4cqi, 22px);
    height: clamp(15px, 4cqi, 22px);
    flex-shrink: 0;
}

.currency-selector span {
    font-size: clamp(0.68rem, 3.5cqi, 1rem);
    white-space: nowrap;
}

.swap-btn-container button {
    width: clamp(28px, 8cqi, 40px);
    height: clamp(28px, 8cqi, 40px);
}

.hover-swap {
    transition: all 0.2s;
    background: #fff;
}

.hover-swap:hover {
    background-color: #f4f7ff;
    transform: scale(1.05);
}