/* ── OF Anon Magnet – Frontend Lead Magnet ──────────────────────────────── */

.ofam-wrap {
    background: #000;
    color: #fff;
    padding: 32px;
    margin: 24px 0;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    border-radius: 4px;
}

/* States */
.ofam-state { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.ofam-hidden { display: none !important; }

/* Copy block (left) */
.ofam-copy { flex: 1 1 300px; }
.ofam-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.25;
}
.ofam-sub {
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.6;
    margin: 0 0 12px;
}
.ofam-sub strong { color: #fff; }

/* Action block (right) */
.ofam-action {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Inputs */
.ofam-wrap .ofam-input {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 0.95rem !important;
    font-family: inherit !important;
    border: 1.5px solid #555 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: #000000 !important;
    outline: none !important;
    transition: border-color 0.2s;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
}
.ofam-wrap .ofam-input:focus { border-color: #ef5350 !important; }
.ofam-wrap .ofam-input::placeholder { color: #999 !important; }

/* Button */
.ofam-btn {
    width: 100%;
    padding: 13px 20px;
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 700;
    background: #ef5350;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.2s, opacity 0.2s;
}
.ofam-btn:hover   { background: #e53935; }
.ofam-btn:active  { background: #c62828; }
.ofam-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Small inline text links — edit email, resend */
.ofam-link-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
    display: inline;
}
.ofam-link-btn:hover         { color: #ddd; }
.ofam-link-btn:disabled      { color: #555; cursor: not-allowed; text-decoration: none; }

/* Error messages */
.ofam-error {
    font-size: 0.82rem;
    color: #ef9a9a;
    min-height: 18px;
    margin: 0;
}

/* OTP digit row */
.ofam-otp-wrap {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.ofam-wrap .ofam-otp-digit {
    width: 40px !important;
    height: 50px !important;
    text-align: center !important;
    font-size: 1.4rem !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    border: 1.5px solid #555 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: #000000 !important;
    outline: none !important;
    transition: border-color 0.2s;
    -webkit-appearance: none !important;
}
.ofam-wrap .ofam-otp-digit:focus { border-color: #ef5350 !important; }
.ofam-wrap .ofam-otp-digit.ofam-otp-filled { border-color: #ef5350 !important; }

/* Resend / countdown */
.ofam-countdown { font-size: 0.8rem; color: #666; }

/* Spinner */
.ofam-spinner { text-align: center; }
.ofam-spin-ring {
    display: inline-block;
    width: 36px; height: 36px;
    border: 3px solid #333;
    border-top-color: #ef5350;
    border-radius: 50%;
    animation: ofam-spin 0.8s linear infinite;
    margin-bottom: 10px;
}
@keyframes ofam-spin { to { transform: rotate(360deg); } }
#ofam-gen-status { font-size: 0.8rem; color: #aaa; margin-top: 6px; min-height: 18px; }

/* Download fallback message */
.ofam-download-msg { font-size: 0.85rem; color: #aaa; text-align: center; }
.ofam-download-msg a { color: #ef5350; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ofam-wrap { padding: 24px 20px; }
    .ofam-state { flex-direction: column; gap: 20px; }
    .ofam-copy { flex: 1 1 auto; }
    .ofam-action { flex: 1 1 auto; width: 100%; }
    .ofam-heading { font-size: 1.2rem; }
    .ofam-otp-digit { width: 36px; height: 46px; font-size: 1.2rem; }
}