/* ================================================================
   FONDSCASHRAPIDE — AUTH FINANCIAL STYLE
   ================================================================ */

/* ── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --cyan:       #00BCD4;
    --cyan-dark:  #0097A7;
    --cyan-light: #E0F7FA;
    --navy:       #0D1B3E;
    --blue-mid:   #1565C0;
    --blue-top:   #1A237E;
    --white:      #ffffff;
    --gray-light: #F5F7FA;
    --gray-text:  #6C757D;
    --dark:       #263238;
    --gold:       #FFD700;
    --red:        #E53935;
    --shadow:     0 24px 64px rgba(0,0,0,0.18);
}

/* ── BASE ───────────────────────────────────────────────────────── */
html, body { height: 100%; font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif; overflow-x: hidden; }

/* ── SCENE ──────────────────────────────────────────────────────── */
.auth-scene {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        #0D1B3E 0%,
        #1A237E 30%,
        #1565C0 65%,
        #006064 100%);
    overflow: hidden;
    padding: 100px 20px 80px;
}

/* Subtle grid pattern */
.auth-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 55px 55px;
    pointer-events: none;
    z-index: 0;
}

/* ── LOGO HEADER ────────────────────────────────────────────────── */
.auth-header {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    text-decoration: none;
    white-space: nowrap;
}
.auth-header__logo {
    height: 38px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.auth-header__name {
    font-size: 19px; font-weight: 800;
    color: white; letter-spacing: .01em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ── BACK LINK ──────────────────────────────────────────────────── */
.auth-back {
    position: absolute;
    top: 34px; left: 26px;
    color: rgba(255,255,255,0.65);
    font-size: 12.5px; font-weight: 500;
    text-decoration: none;
    display: flex; align-items: center; gap: 6px;
    z-index: 10;
    transition: color .2s;
}
.auth-back:hover { color: white; }

/* ── FINANCIAL DECORATIONS ──────────────────────────────────────── */

/* Glass bank card */
.fin-card {
    position: absolute;
    top: 14%; right: 9%;
    width: 230px; height: 140px;
    background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 3;
    padding: 22px 24px;
    animation: floatCard 7s ease-in-out infinite;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}
.fin-card__chip {
    width: 38px; height: 28px;
    background: linear-gradient(135deg, #FFD700, #FFA000);
    border-radius: 5px;
    margin-bottom: 18px;
}
.fin-card__wave {
    position: absolute;
    top: 22px; right: 24px;
    font-size: 18px; color: rgba(255,255,255,0.5);
    transform: rotate(90deg);
}
.fin-card__number {
    font-family: 'Courier New', monospace;
    font-size: 12px; letter-spacing: 2px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 10px;
}
.fin-card__meta {
    display: flex; justify-content: space-between;
    font-size: 9px; text-transform: uppercase;
    color: rgba(255,255,255,0.5); letter-spacing: .08em;
}
.fin-card__logo {
    position: absolute;
    right: 24px; bottom: 18px;
    display: flex; gap: -6px;
}
.fin-card__logo span {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-block;
}
.fin-card__logo span:first-child { background: #E53935; margin-right: -8px; opacity: .9; }
.fin-card__logo span:last-child  { background: #FFD700; opacity: .9; }

@keyframes floatCard {
    0%,100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-14px) rotate(0deg); }
}

/* Growth chart */
.fin-chart {
    position: absolute;
    bottom: 13%; left: 7%;
    width: 260px; z-index: 3;
    animation: floatChart 9s ease-in-out infinite;
    animation-delay: 3s;
}
.fin-chart img { width: 100%; opacity: .85; }
@keyframes floatChart {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Currency symbols */
.fin-currency {
    position: absolute;
    font-size: 90px; font-weight: 900;
    color: rgba(255,255,255,0.06);
    z-index: 2;
    line-height: 1;
    pointer-events: none;
    animation: floatSlow 18s ease-in-out infinite;
}
.fin-currency--eur { top: 28%; left: 17%; animation-delay: 0s; }
.fin-currency--usd { bottom: 22%; right: 14%; animation-delay: 6s; font-size: 80px; }
.fin-currency--pct { top: 55%; right: 22%; font-size: 70px; animation-delay: 12s; }

@keyframes floatSlow {
    0%,100% { transform: translateY(0) rotate(0deg); opacity:.06; }
    50%      { transform: translateY(-28px) rotate(8deg); opacity:.11; }
}

/* Hexagon shapes */
.fin-hex {
    position: absolute;
    clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    z-index: 2;
    pointer-events: none;
}
.fin-hex--1 {
    width: 110px; height: 110px;
    background: rgba(255,255,255,0.05);
    top: 42%; left: 12%;
    animation: floatSlow 12s ease-in-out infinite;
}
.fin-hex--2 {
    width: 70px; height: 70px;
    background: rgba(0,188,212,0.08);
    top: 20%; left: 38%;
    animation: floatSlow 15s ease-in-out infinite;
    animation-delay: 4s;
}

/* Geometric rectangles */
.fin-rect {
    position: absolute;
    border-radius: 10px;
    z-index: 2;
    pointer-events: none;
    animation: floatSlow 14s ease-in-out infinite;
}
.fin-rect--1 {
    width: 160px; height: 90px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    top: 18%; left: 23%;
    animation-delay: 7s;
}

/* Connection dots */
.fin-dot {
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    z-index: 3;
    pointer-events: none;
}
.fin-dot::after {
    content: '';
    position: absolute;
    width: 1.5px; height: 80px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.18), transparent);
    top: 8px; left: 3px;
    transform: rotate(40deg);
    transform-origin: top center;
}
.fin-dot--1 { top: 22%; left: 28%; animation: pulse 5s ease-in-out infinite; }
.fin-dot--2 { top: 48%; right: 22%; animation: pulse 7s ease-in-out infinite; animation-delay: 2s; }
.fin-dot--3 { bottom: 30%; left: 42%; animation: pulse 6s ease-in-out infinite; animation-delay: 4s; }

@keyframes pulse { 0%,100%{opacity:.35;transform:scale(1)} 50%{opacity:.7;transform:scale(1.3)} }

/* Orbit ring */
.fin-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0,188,212,0.18);
    z-index: 2;
    pointer-events: none;
    animation: rotateSlow 30s linear infinite;
}
.fin-ring--1 { width: 300px; height: 300px; top: 10%; right: -60px; }
.fin-ring--2 { width: 180px; height: 180px; bottom: 15%; left: -30px; animation-direction: reverse; }

@keyframes rotateSlow { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ── FORM CARD ──────────────────────────────────────────────────── */
.auth-card {
    position: relative;
    z-index: 8;
    background: var(--white);
    border-radius: 22px;
    padding: 44px 44px 40px;
    width: 100%;
    max-width: 450px;
    box-shadow: var(--shadow);
    animation: riseUp .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes riseUp {
    from { opacity:0; transform:translateY(40px); }
    to   { opacity:1; transform:translateY(0);   }
}

/* ── CARD HEADER ────────────────────────────────────────────────── */
.auth-card__icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--cyan-light);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}
.auth-card__icon i { font-size: 22px; color: var(--cyan-dark); }

.auth-card__title {
    font-size: 26px; font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
    text-align: center;
}
.auth-card__sub {
    font-size: 14px; color: var(--gray-text);
    margin-bottom: 28px; text-align: center;
    line-height: 1.6;
}
.auth-card__sub a { color: var(--cyan); font-weight: 600; text-decoration: none; }
.auth-card__sub a:hover { text-decoration: underline; }

/* ── ALERTS ─────────────────────────────────────────────────────── */
.auth-alert {
    padding: 11px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 500;
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 18px;
}
.auth-alert--error   { background:#FFEBEE; color:#C62828; border:1px solid #FFCDD2; }
.auth-alert--success { background:#E8F5E9; color:#1B5E20; border:1px solid #C8E6C9; }
.auth-alert i { flex-shrink: 0; }

/* ── FORM INPUTS ────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }

.form-label {
    display: block;
    font-size: 11px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    color: #90A4AE; margin-bottom: 6px;
}

.input-wrap { position: relative; }

.input-wrap i.inp-icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: #B0BEC5; font-size: 14px;
    pointer-events: none; transition: color .2s;
}

.form-input {
    width: 100%;
    padding: 13px 44px;
    border: 1.5px solid #ECEFF1;
    border-radius: 11px;
    background: var(--gray-light);
    font-size: 14px; font-family: inherit;
    color: var(--dark);
    outline: none;
    transition: border-color .22s, box-shadow .22s, background .22s;
}
.form-input:focus {
    border-color: var(--cyan);
    background: white;
    box-shadow: 0 0 0 4px rgba(0,188,212,.1);
}
.form-input:focus ~ i.inp-icon,
.input-wrap:focus-within i.inp-icon { color: var(--cyan); }
.form-input.is-error { border-color: var(--red); }
.form-input.is-error ~ i.inp-icon  { color: var(--red); }
.form-input::placeholder { color: #CFD8DC; }

.inp-toggle {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: #B0BEC5; font-size: 14px; padding: 3px;
    transition: color .2s;
}
.inp-toggle:hover { color: var(--cyan); }

.field-error {
    font-size: 11px; color: var(--red); font-weight: 600;
    margin-top: 5px; display: flex; align-items: center; gap: 4px;
}

/* ── PASSWORD STRENGTH ──────────────────────────────────────────── */
.pw-strength { margin-top: 8px; display: none; }
.pw-strength.show { display: block; }
.pw-bar { height: 4px; border-radius: 4px; background: #ECEFF1; overflow: hidden; margin-bottom: 4px; }
.pw-fill { height: 100%; border-radius: 4px; transition: width .3s, background .3s; }
.pw-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

/* ── FORM ROW ───────────────────────────────────────────────────── */
.form-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; margin-bottom: 20px;
}
.form-row a { color: var(--cyan); font-weight: 600; text-decoration: none; }
.form-row a:hover { text-decoration: underline; }

/* Custom checkbox */
.check-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: #546E7A; cursor: pointer;
}
.check-label input { display: none; }
.check-box {
    width: 18px; height: 18px; border-radius: 5px;
    border: 2px solid #CFD8DC; background: white;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all .2s;
}
.check-label input:checked ~ .check-box { background: var(--cyan); border-color: var(--cyan); }
.check-tick { display: none; }
.check-label input:checked ~ .check-box .check-tick {
    display: block; width: 8px; height: 5px;
    border-left: 2px solid white; border-bottom: 2px solid white;
    transform: rotate(-45deg) translateY(-1px);
}
.check-label a { color: var(--cyan); font-weight: 600; text-decoration: none; }

/* ── SUBMIT BUTTON ──────────────────────────────────────────────── */
.btn-submit {
    width: 100%; padding: 14px;
    background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-dark) 100%);
    color: white; border: none; border-radius: 11px;
    font-size: 15px; font-weight: 700; font-family: inherit;
    cursor: pointer; letter-spacing: .03em;
    box-shadow: 0 6px 20px rgba(0,188,212,.38);
    transition: opacity .2s, transform .15s, box-shadow .2s;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-submit:hover  { opacity:.92; transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,188,212,.44); }
.btn-submit:active { transform:translateY(0); }

/* ── AUTH FOOTER LINK ───────────────────────────────────────────── */
.auth-foot {
    text-align: center; margin-top: 20px;
    font-size: 13px; color: var(--gray-text);
}
.auth-foot a { color: var(--cyan); font-weight: 700; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* ── SECURITY BADGE ─────────────────────────────────────────────── */
.auth-secure {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 18px; font-size: 11px; color: #90A4AE;
}
.auth-secure i { color: #43A047; font-size: 12px; }

/* ── TERMS MODAL ────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
    animation: fadeOverlay .25s ease;
}
.modal-overlay.open { display: flex; }

@keyframes fadeOverlay { from{opacity:0} to{opacity:1} }

.modal-box {
    background: white;
    border-radius: 18px;
    width: 100%; max-width: 660px;
    max-height: 82vh;
    display: flex; flex-direction: column;
    box-shadow: 0 32px 80px rgba(0,0,0,0.25);
    animation: riseModal .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes riseModal {
    from { opacity:0; transform:translateY(-30px) scale(.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

.modal-head {
    padding: 24px 28px;
    border-bottom: 1px solid #ECEFF1;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.modal-head h3 { font-size: 20px; font-weight: 700; color: var(--dark); }

.modal-close-btn {
    width: 34px; height: 34px; border-radius: 50%;
    background: none; border: none; cursor: pointer;
    color: #90A4AE; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
}
.modal-close-btn:hover { background: #F5F7FA; color: var(--dark); }

.modal-body {
    padding: 26px 28px;
    overflow-y: auto; flex: 1;
}
.modal-body h4 {
    font-size: 14px; font-weight: 700;
    color: var(--cyan-dark); margin: 18px 0 8px;
}
.modal-body h4:first-child { margin-top: 0; }
.modal-body p { font-size: 13.5px; color: #546E7A; line-height: 1.7; margin-bottom: 10px; }
.modal-body ul { margin-left: 18px; font-size: 13.5px; color: #546E7A; line-height: 1.8; }
.modal-date { margin-top: 22px; font-size: 12px; color: #B0BEC5; }

.modal-foot {
    padding: 18px 28px;
    border-top: 1px solid #ECEFF1;
    display: flex; justify-content: flex-end; gap: 10px;
    flex-shrink: 0;
}
.btn-modal-close {
    padding: 10px 24px;
    background: var(--gray-light); color: var(--gray-text);
    border: 1.5px solid #ECEFF1; border-radius: 9px;
    font-size: 13.5px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background .2s, border-color .2s;
}
.btn-modal-close:hover { background: #ECEFF1; border-color: #CFD8DC; }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .fin-card   { right: 3%; top: 12%; }
    .fin-chart  { left: 2%; }
    .fin-currency--eur { left: 8%; }
    .fin-currency--usd { right: 5%; }
}
@media (max-width: 800px) {
    .fin-card, .fin-chart, .fin-hex, .fin-rect { display: none; }
    .fin-currency { font-size: 60px; }
    .auth-scene { padding: 88px 16px 60px; }
}
@media (max-width: 560px) {
    .fin-currency { display: none; }
    .auth-card { padding: 34px 22px 30px; border-radius: 18px; }
    .auth-card__title { font-size: 22px; }
}