/* ==========================================================================
   NAVIONFX — remove-account.css  (v4 — full dark)
   ========================================================================== */

/* ── GLOWS ── */
.ra-main { position: relative; overflow: hidden; }
.ra-glow-tl { position: absolute; top: -200px; left: -200px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(220,38,38,0.1) 0%, transparent 65%); pointer-events: none; z-index: 0; }
.ra-glow-br { position: absolute; bottom: -150px; right: -150px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(37,99,235,0.1) 0%, transparent 65%); pointer-events: none; z-index: 0; }
.ra-main .container { position: relative; z-index: 1; }

/* ── LAYOUT ── */
.ra-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 100px; align-items: center; }

/* ── LEFT ── */
.ra-left { display: flex; flex-direction: column; gap: 20px; }
.ra-left .pill-no-desc-dark { margin-bottom: 0; align-self: flex-start; }
.ra-left .section-sub { margin-bottom: 0; }

.ra-notice { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(240,244,255,0.4); background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.18); border-radius: 100px; padding: 7px 14px; align-self: flex-start; }
.ra-notice svg { color: #f87171; flex-shrink: 0; }

/* ── FORM CARD — WHITE ── */
.ra-form-card { background: #fff; border: 1.5px solid rgba(37,99,235,0.1); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.2); }

.ra-form-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid rgba(37,99,235,0.08); background: rgba(37,99,235,0.02); }
.ra-form-card-title { font-size: 13px; font-weight: 700; color: #0d1321; }
.ra-form-card-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; animation: raPulse 1.8s ease-in-out infinite; flex-shrink: 0; }
@keyframes raPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }

/* ── FORM ── */
.ra-form { padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.ra-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ra-form-field { display: flex; flex-direction: column; gap: 5px; }

.ra-form-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(15,23,42,0.4); }
.ra-optional { font-size: 10px; font-weight: 500; color: rgba(15,23,42,0.3); text-transform: none; letter-spacing: 0; margin-left: 4px; }

.ra-form-input { width: 100%; background: #e8edf8; border: 1.5px solid rgba(37,99,235,0.1); border-radius: var(--radius-sm); padding: 10px 13px; font-size: 13px; font-weight: 500; color: #0d1321; font-family: var(--font); transition: border-color 0.2s, box-shadow 0.2s; appearance: none; -webkit-appearance: none; }
.ra-form-input:focus { outline: none; border-color: rgba(37,99,235,0.4); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); background: #fff; }
.ra-form-input::placeholder { color: rgba(15,23,42,0.3); }

select.ra-form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; }

.ra-textarea { min-height: 90px; resize: vertical; }

.ra-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(15,23,42,0.6); line-height: 1.5; }
.ra-checkbox input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; accent-color: var(--color-accent); cursor: pointer; }
.ra-checkbox strong { color: #b91c1c; font-weight: 700; }

.ra-submit-btn { width: 100%; padding: 12px; background: #dc2626; border: none; border-radius: var(--radius-sm); color: #fff; font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; margin-top: 4px; }
.ra-submit-btn:hover { background: #b91c1c; }
.ra-submit-btn:active { transform: scale(0.99); }
.ra-submit-btn.loading { opacity: 0.7; pointer-events: none; }

.ra-success { display: none; padding: 11px 14px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: #16a34a; text-align: center; line-height: 1.6; }
.ra-success.visible { display: block; }
.ra-error { display: none; padding: 11px 14px; background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.15); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: #b91c1c; text-align: center; }
.ra-error.visible { display: block; }

.ra-contact-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(240,244,255,0.4); align-self: flex-start; }
.ra-contact-link svg { color: #60a5fa; flex-shrink: 0; }
.ra-contact-anchor { color: #60a5fa; font-weight: 600; transition: opacity 0.2s; }
.ra-contact-anchor:hover { opacity: 0.7; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) { .ra-layout { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 767px) { .ra-support-bar { flex-direction: column; align-items: flex-start; padding: 20px; } .ra-support-btn { width: 100%; text-align: center; } }
@media (max-width: 580px) { .ra-form-row { grid-template-columns: 1fr; } .ra-form { padding: 18px 14px; } }