/* ------------------------------------------------------------------
   REFUNDA auth screens — the few bits the compiled Tailwind sheet
   cannot express (logo spin, native select skin, phone row).
   ------------------------------------------------------------------ */

html, body { background: #050012; }

/* ---------- constellation canvas ----------
   A <canvas> is a replaced element, so `position:fixed; inset:0` alone leaves it
   at its intrinsic 300x150 — the backdrop has to be sized explicitly or the
   script only ever gets a postage stamp to draw on. */
#rfaNet { width: 100%; height: 100%; }

/* ---------- logo mark ---------- */
.rfa-spin     { animation: rfa-spin 25s linear infinite; transform-origin: 50% 50%; }
.rfa-spin-rev { animation: rfa-spin 15s linear infinite reverse; transform-origin: 50% 50%; }
@keyframes rfa-spin { to { transform: rotate(360deg); } }

/* ---------- native selects on a dark card ---------- */
.rfa-select {
    background-color: #050012;
    color: #fff;
    appearance: none;
    -webkit-appearance: none;
}
.rfa-select option { background-color: #0a001a; color: #fff; }

/* ---------- phone row ---------- */

/* Padding lives here, not on a Tailwind class: the compiled sheet this page
   loads has px-12 but no pl-12, so leaning on it dropped the flag chip to the
   far left, underneath the field's own phone icon. */
.rfa-phone-row { padding-left: 48px; padding-right: 16px; }

.rfa-phone-flag {
    width: 21px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
    flex: none;
}

/* The country <select> sits invisibly over the flag + caret so the whole chip
   opens the list. It has to be lifted above them (z-index) or the caret takes
   the click, and it needs the field's full height — following the chip's own
   15px leaves a target too small to hit. */
.rfa-phone-pick { position: relative; display: flex; align-items: center; gap: 4px; }
.rfa-phone-pick .rfa-select {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 46px;
    opacity: 0;
    cursor: pointer;
    z-index: 20;
}

/* ---------- autofill ---------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #0d0018 inset;
    caret-color: #fff;
    transition: background-color 9999s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .rfa-spin, .rfa-spin-rev { animation: none !important; }
}