.ff-phone-integrity-hint {
    display: block;
    margin-top: 6px;
    color: #5f6f78;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}

.ff-phone-integrity-hint::before {
    content: "ⓘ";
    margin-right: 5px;
    color: var(--ff-accent, #08775c);
    font-weight: 800;
}

.ff-phone-integrity-hint.is-error {
    color: #a12424;
}

input.ff-phone-is-invalid {
    border-color: #b42318 !important;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .12) !important;
}

body.ff-phone-dialog-open {
    overflow: hidden;
}

.ff-phone-dialog-overlay {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(5, 25, 38, .72);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.ff-phone-dialog {
    position: relative;
    width: min(100%, 440px);
    max-height: calc(100vh - 36px);
    overflow: auto;
    border: 1px solid rgba(11, 122, 90, .2);
    border-radius: 22px;
    padding: 30px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(4, 31, 44, .3);
    color: #112936;
    text-align: center;
}

.ff-phone-dialog-close {
    position: absolute;
    top: 12px;
    right: 14px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #edf5f2;
    color: #183641;
    cursor: pointer;
    font: 700 25px/1 sans-serif;
}

.ff-phone-dialog-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    place-items: center;
    border-radius: 50%;
    background: #e5f6ef;
    color: #08775c;
    font: 800 25px/1 sans-serif;
}

.ff-phone-dialog-kicker {
    margin: 0 0 6px;
    color: #08775c;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-phone-dialog h2 {
    margin: 0 0 10px;
    color: #09263a;
    font-size: clamp(23px, 5vw, 30px);
    line-height: 1.12;
}

.ff-phone-dialog p {
    line-height: 1.55;
}

.ff-phone-dialog-number {
    margin: 14px 0;
    color: #163b4a;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .04em;
}

.ff-phone-dialog-status {
    min-height: 23px;
    margin: 10px 0;
    color: #52666f;
    font-size: 13px;
    font-weight: 650;
}

.ff-phone-dialog-status.is-error { color: #a12424; }
.ff-phone-dialog-status.is-success { color: #08775c; }

.ff-phone-code-label {
    display: block;
    margin: 14px 0 7px;
    color: #1e3945;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
}

.ff-phone-code {
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    border: 1.5px solid #b8c9ce;
    border-radius: 12px;
    background: #fff;
    color: #0b2938;
    font: 800 24px/1 sans-serif;
    letter-spacing: .32em;
    text-align: center;
}

.ff-phone-code:focus,
.ff-phone-dialog button:focus-visible {
    outline: 3px solid rgba(11, 122, 90, .25);
    outline-offset: 2px;
}

.ff-phone-verify,
.ff-phone-resend {
    width: 100%;
    min-height: 50px;
    margin-top: 12px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
}

.ff-phone-verify {
    background: var(--ff-cta, #c94f00);
    box-shadow: 0 10px 26px rgba(201, 79, 0, .22);
    color: #fff;
}

.ff-phone-resend {
    border: 1px solid #bfd0d4;
    background: #fff;
    color: #174052;
}

.ff-phone-dialog button:disabled {
    cursor: not-allowed;
    opacity: .52;
    box-shadow: none;
}

.ff-phone-dialog-note {
    margin: 16px 0 0;
    color: #63747c;
    font-size: 11px;
}

@media (max-width: 520px) {
    .ff-phone-dialog { padding: 28px 20px 22px; border-radius: 18px; }
    .ff-phone-dialog-overlay { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .ff-phone-dialog-overlay,
    .ff-phone-dialog { scroll-behavior: auto; }
}
