/* FinAI Assistant Styles — compact text, larger spacings */

body {
    background: #252b37;
    color: #f0f2f7;
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 15px;
    letter-spacing: 0;
}

.finai-box {
    max-width: 410px;
    margin: 80px auto 0 auto;
    box-shadow: 0 4px 40px #0d2234bb;
    border-radius: 22px;
    background: #191f2b;
    padding: 48px 32px 44px 32px;
    position: relative;
}

.finai-box img {
    width: 46px;
    margin-bottom: 27px;
}

h1 {
    font-size: 1.55em;
    margin-bottom: 0.9em;
    font-weight: 700;
    line-height: 1.1;
}

.mini {
    font-size: 0.98em;
    color: #7cd576;
    margin: -16px 0 28px 0;
}

#credForm .form-label {
    font-size: 0.97em;
    font-weight: 600;
    margin-bottom: 10px;
    color: #a9bfe1;
}

#credForm input[type="tel"] {
    font-size: 0.99em;
    color: #35eda0;
    background: #20263a;
    border: 1.5px solid #374060;
    letter-spacing: 1.5px;
    border-radius: 10px;
    padding: 1em 1.4em;
    transition: border 0.25s;
    box-shadow: none;
    margin-bottom: 0.3em;
}

#credForm input[type="tel"]:focus {
    border-color: #4fd870;
    outline: none;
}

.invalid-feedback {
    font-size: 0.89em;
    color: #ff6262;
    margin-top: 6px;
}

.btn-ai {
    background: #4fd870;
    color: #191f2b;
    font-weight: bold;
    padding: 1.1em 2.4em;
    border-radius: 11px;
    border: none;
    font-size: 1em;
    margin-top: 1.2em;
    box-shadow: 0 2px 14px #9fffbe1a;
    transition: box-shadow 0.3s, background 0.2s;
}

.btn-ai:hover, .btn-ai:focus {
    box-shadow: 0 7px 38px #91ffbf24;
    background: #36ce64;
    color: #191f2b;
}

.tip {
    color: #ffd910;
    font-size: 0.95em;
    margin-top: 2.4em;
    margin-bottom: 0.5em;
}

.fineprint {
    font-size: 0.85em;
    color: #8591a2;
    margin-top: 4em;
    line-height: 1.75em;
}

.alert-danger {
    background: #45334a;
    color: #ffbaba;
    border: 1px solid #e85858;
    border-radius: 12px;
    margin-bottom: 1.7em;
    font-size: 0.97em;
    padding: 12px 10px;
}

.container {
    max-width: 470px;
}

/* Pop-up (widget) styles */
body.popup-bg {
    background: #191f2b;
}

.ai-helper {
    font-size: 0.97em;
    margin-bottom: 2.1em;
    margin-top: 1.2em;
    color: #fff;
    font-weight: 400;
    line-height: 1.35;
}

.progress {
    height: 39px;
    background: #262c36;
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 2.5em;
}

.progress-bar {
    background: linear-gradient(92deg, #4fd870 18%, #ffd956 95%);
    font-weight: bold;
    font-size: 0.90em;
    transition: width 0.6s;
    color: #234217;
    line-height: 39px;
}

#nextBtn {
    display: none;
    background: linear-gradient(93deg, #37e99e 15%, #52d47c 85%);
    border: none;
    color: #17351c;
    padding: 1.15em 2.9em;
    border-radius: 13px;
    font-size: 1.15em;
    margin-top: 2.8em;
    font-weight: 700;
    box-shadow: 0 4px 32px #3acf7680, 0 2px 14px #0002;
    cursor: pointer;
    transition: background 0.22s, color 0.22s, box-shadow 0.22s;
    letter-spacing: 1px;
}

#nextBtn:hover, #nextBtn:focus {
    background: linear-gradient(93deg, #42fb85 5%, #17e374 95%);
    color: #115c28;
    box-shadow: 0 8px 38px #24d371a0, 0 2px 14px #0002;
}


.microtext {
    color: #adb3b9;
    font-size: 0.84em;
    margin-top: 4em;
    line-height: 1.6em;
}

#pText {
    margin-bottom: 2em;
    font-size: 0.95em;
    color: #bbb;
}

@media (max-width: 600px) {
    .finai-box, .container {
        max-width: 99vw;
        padding: 22px 4vw 22px 4vw;
        margin-top: 7vw;
    }
    html, body { font-size: 92%; }
    .progress {height:30px;}
    .progress-bar {line-height:30px;font-size:0.89em;}
}

::-webkit-input-placeholder { color: #376b49; font-size:0.97em;}
::-moz-placeholder { color: #376b49; font-size:0.97em;}
:-ms-input-placeholder { color: #376b49; font-size:0.97em;}
::placeholder { color: #376b49; font-size:0.97em;}