/* lead-magnet.css - sitewide lead-magnet UI: modal, capture forms, sticky upgrade.
   Loaded in header.php after brand.css so it applies on every page.
   Palette: teal #00CC99 / blue #0066CC / ink #0f172a  */

/* ---- Capture form (free-kit page + popup) ---- */
.fk-form { display: flex; flex-direction: column; gap: 10px; }
.fk-input {
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: .95rem !important;
    border: 1px solid #d1d5db !important;
    background: #fff !important;
    color: #0f172a !important;
}
.fk-input:focus {
    border-color: #00CC99 !important;
    box-shadow: 0 0 0 3px rgba(0,204,153,.15) !important;
}
.fk-submit { margin-top: 6px; }

/* forms.js injects .po-form-msg inside the form */
.po-form-msg { margin-top: 10px; }

/* ---- Upsell block (revealed on successful signup) ---- */
.fk-upsell {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}
.fk-upsell p {
    color: #0066CC;
    font-weight: 600;
    margin: 0 0 6px;
    font-size: .95rem;
}
.fk-upsell-link {
    color: #00CC99;
    font-weight: 600;
    text-decoration: underline;
    font-size: .93rem;
}
.fk-upsell-link:hover { color: #0066CC; }

/* ---- Lead-magnet popup modal ---- */
.fk-modal {
    border-radius: 16px;
    overflow: hidden;
    border: none;
}
.fk-modal-head {
    background: linear-gradient(135deg, #0f172a, #0066CC);
    padding: 28px 28px 22px;
    position: relative;
    text-align: center;
}
.fk-modal-head .btn-close {
    position: absolute;
    top: 14px;
    right: 16px;
}
.fk-modal-icon {
    font-size: 32px;
    color: #00CC99;
    margin-bottom: 8px;
}
.fk-modal-title {
    color: #fff;
    font-family: 'DM Serif Display', serif;
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0;
}
.fk-modal-body {
    padding: 24px 28px 28px;
}
.fk-modal-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.fk-modal-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: .93rem;
    color: #334155;
}
.fk-modal-list li i {
    color: #00CC99;
    font-size: 1rem;
}
.fk-modal-proof {
    margin: 16px 0 0;
    font-size: .82rem;
    color: #64748b;
    text-align: center;
}
.fk-modal-proof i { margin-right: 4px; }

/* ---- Sticky upgrade banner tweaks ---- */
.po-sticky-upgrade-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    text-align: center;
}
.po-sticky-upgrade-inner .po-sticky-bar-text { font-weight: 500; }
.po-sticky-upgrade-inner .po-sticky-bar-text strong { color: #00CC99; }
.po-sticky-upgrade-inner .custom-btn {
    background: #0066CC;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.po-sticky-upgrade-inner .custom-btn:hover { background: #00CC99; color: #fff; }