/* STEP 20N-BL — BulkPostAds premium login page */
.login-page{--lp-navy:#101d38;--lp-blue:#366cf5;--lp-ink:#17243c;--lp-muted:#63728b;color:var(--lp-ink);background:#fff}
.login-page *{box-sizing:border-box}
.login-page a{text-decoration:none}
.login-container{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.login-hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 5% 5%,#253e76 0%,transparent 43%),linear-gradient(125deg,#0d1932 0%,#13264a 56%,#10284d 100%);padding:85px 0 98px}
.login-hero:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.17;background-image:radial-gradient(#a5c5ff 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(90deg,transparent,#000)}
.login-hero-glow{position:absolute;width:390px;height:390px;border-radius:50%;right:-180px;bottom:-230px;background:#487cf8;filter:blur(110px);opacity:.23;z-index:-1;pointer-events:none}
.login-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,450px);gap:70px;align-items:center}
.login-intro{color:#fff;padding:25px 0}
.login-kicker{display:inline-flex;align-items:center;gap:11px;color:#c0d3ff;font-size:11px;font-weight:800;letter-spacing:2.2px}
.login-kicker-dot{width:8px;height:8px;border-radius:50%;background:#78e1c0;box-shadow:0 0 0 5px #78e1c01a}
.login-intro h1{font-size:clamp(44px,5vw,70px);line-height:1.08;letter-spacing:-2.7px;margin:28px 0 23px;color:#fff;font-weight:850}
.login-intro h1 span{color:#a9c5ff}
.login-lead{font-size:17px;line-height:1.85;color:#b9c9e3;max-width:530px;margin:0}
.login-hero-points{display:grid;gap:23px;margin-top:41px}
.login-hero-point{display:flex;gap:16px;align-items:flex-start}
.login-point-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;background:#ffffff13;border:1px solid #ffffff27;border-radius:11px;color:#89e5c6;font-weight:800}
.login-hero-point strong{display:block;font-size:15px;color:#fff;margin:1px 0 5px}
.login-hero-point div span{display:block;color:#a8bbd8;font-size:13px;line-height:1.65}
.login-hero-bottom{display:flex;gap:13px;align-items:center;margin-top:42px;padding-top:25px;border-top:1px solid #ffffff20;color:#b7c9e4;font-size:12px}
.login-mini-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#ffffff15;color:#a9c5ff}
.login-card{background:#fff;border:1px solid #e7edfa;border-radius:24px;padding:35px;box-shadow:0 30px 85px #0004;position:relative}
.login-card-badge{display:inline-flex;align-items:center;gap:7px;background:#edf4ff;color:#355aa7;padding:8px 11px;border-radius:100px;font-size:10px;font-weight:800;letter-spacing:1.2px}
.login-card-badge span{color:#4b83ff}
.login-card-top{margin-top:20px}
.login-icon{display:grid;place-items:center;width:53px;height:53px;border-radius:16px;background:linear-gradient(135deg,#eaf1ff,#f4f7ff);font-size:23px;margin-bottom:18px}
.login-card h2{font-size:30px;letter-spacing:-.8px;color:#17243c;margin:0 0 7px;line-height:1.2}
.login-card-top p{font-size:14px;color:#748198;margin:0 0 22px}
.login-notice{display:grid;gap:5px;padding:14px 15px;background:#f0f6ff;border:1px solid #d6e6ff;border-radius:12px;color:#3a5a92;font-size:12px;line-height:1.65;margin-bottom:21px}
.login-notice strong{color:#244a87;font-size:13px}
.login-social{display:grid;gap:10px}
.login-social-button{display:flex;justify-content:center;align-items:center;gap:12px;position:relative;min-height:49px;padding:11px 55px 11px 15px;border:1px solid #e0e6f0;background:#f9fbff;color:#506078;border-radius:11px;font:inherit;font-size:13px;font-weight:750;cursor:not-allowed;width:100%;opacity:1}
.login-social-google{font-size:21px;font-weight:850;color:#4285f4}
.login-social-facebook{display:grid;place-items:center;background:#1877f2;color:#fff;width:23px;height:23px;border-radius:50%;font:800 19px Arial,sans-serif}
.login-social-soon{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:#e9eef7;color:#66768f;font-size:10px;border-radius:6px;padding:4px 7px}
.login-divider{display:flex;align-items:center;gap:12px;margin:21px 0;color:#98a3b6;font-size:10px;font-weight:850;letter-spacing:1px;text-align:center}
.login-divider:before,.login-divider:after{content:"";height:1px;background:#e5eaf2;flex:1}
.login-field{margin-bottom:17px}
.login-field label{display:block;color:#34445e;font-size:13px;font-weight:750;margin-bottom:8px}
.login-field input{width:100%;height:49px;padding:0 14px;border:1px solid #d9e1ed;background:#fff;border-radius:10px;font:inherit;font-size:14px;color:#17243c}
.login-field input:focus{outline:3px solid #dbe8ff;border-color:#477ff3}
.login-label-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.login-label-row label{margin-bottom:8px}
.login-password-wrap{position:relative}
.login-password-wrap input{padding-right:78px}
.login-password-wrap button{position:absolute;right:7px;top:7px;border:0;border-radius:7px;padding:9px 12px;background:#eef3fb;color:#36527a;font-size:12px;font-weight:750;cursor:pointer}
.login-password-wrap button:focus-visible,.login-inline-link:focus-visible,.login-back:focus-visible,.login-guide-link:focus-visible,.login-bottom-cta a:focus-visible,.login-faq summary:focus-visible{outline:3px solid #80acff;outline-offset:3px}
.login-submit{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;border:0;border-radius:11px;background:#8799b8;color:#fff;font:inherit;font-size:14px;font-weight:800;cursor:not-allowed;padding:13px}
.login-submit span{font-size:10px;font-weight:750;background:#ffffff28;padding:5px 7px;border-radius:5px}
.login-card-foot{border-top:1px solid #edf0f6;margin-top:24px;padding-top:19px;text-align:center}
.login-register{font-size:13px;color:#65738a;margin:0 0 15px}
.login-inline-link{color:#346df1;font-weight:750}
.login-inline-link:hover{text-decoration:underline}
.login-back{display:inline-block;color:#74839a;font-size:12px;font-weight:700}
.login-back:hover{color:#346df1}
.login-benefits{padding:94px 0;background:#f7f9fd}
.login-section-heading{text-align:center;max-width:730px;margin:0 auto 42px}
.login-section-label{font-size:11px;font-weight:850;letter-spacing:2px;color:#4477e9}
.login-section-heading h2,.login-guide h2{font-size:clamp(29px,3.5vw,42px);letter-spacing:-1.3px;line-height:1.18;color:#17243c;margin:13px 0 16px}
.login-section-heading p,.login-guide p{color:#64738a;line-height:1.8;font-size:15px;margin:0}
.login-benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.login-benefit-card{background:#fff;border:1px solid #e6ebf4;border-radius:19px;padding:31px;box-shadow:0 8px 25px #13294a08;transition:transform .2s ease,box-shadow .2s ease}
.login-benefit-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px #13294a12}
.login-benefit-icon{display:grid;place-items:center;width:51px;height:51px;border-radius:15px;background:#eaf1ff;color:#4476eb;font-size:25px;margin-bottom:24px}
.login-benefit-card h3{font-size:19px;color:#17243c;margin:0 0 11px}
.login-benefit-card p{font-size:14px;line-height:1.8;color:#64738a;margin:0}
.login-guide{padding:91px 0;background:#fff}
.login-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}
.login-guide-grid>div:first-child>p{max-width:470px}
.login-guide-link{display:inline-flex;gap:15px;align-items:center;margin-top:25px;padding:13px 18px;border-radius:10px;background:#1d3e7d;color:#fff;font-size:13px;font-weight:800}
.login-guide-link:hover{background:#3159a3;color:#fff}
.login-guide-steps{display:grid;gap:14px}
.login-guide-steps>div{display:flex;align-items:flex-start;gap:18px;background:#f7f9fd;border:1px solid #e9edf5;border-radius:15px;padding:21px}
.login-guide-steps>div>span{font-size:18px;font-weight:850;color:#4d7bed}
.login-guide-steps p{font-size:13px;line-height:1.75}
.login-guide-steps strong{display:block;color:#1c2c46;font-size:15px}
.login-faq{padding:90px 0 100px;background:#f7f9fd}
.login-faq-container{max-width:850px}
.login-faq-list{display:grid;gap:12px}
.login-faq details{background:#fff;border:1px solid #e4eaf3;border-radius:13px;overflow:hidden}
.login-faq details[open]{border-color:#b8cff9;box-shadow:0 8px 22px #2a57a10a}
.login-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;padding:21px 24px;color:#233550;font-size:14px;font-weight:800;line-height:1.5}
.login-faq summary::-webkit-details-marker{display:none}
.login-faq summary span{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;background:#edf3ff;border-radius:8px;color:#4277e7;font-size:20px;font-weight:400}
.login-faq details[open] summary span{transform:rotate(45deg)}
.login-faq-answer{border-top:1px solid #eef1f7;margin:0 24px;padding:17px 0 22px;color:#65748a;font-size:14px;line-height:1.85}
.login-faq-answer a{color:#346df1;font-weight:750;text-decoration:underline}
.login-bottom-cta{background:#142b53;padding:54px 0;color:#fff}
.login-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.login-cta-inner>div>span{color:#a7c1f7;font-size:10px;letter-spacing:2px;font-weight:850}
.login-cta-inner h2{font-size:clamp(25px,3vw,35px);letter-spacing:-.8px;margin:10px 0}
.login-cta-inner p{color:#b7c8e5;margin:0;font-size:14px}
.login-bottom-cta a{display:inline-flex;gap:13px;align-items:center;white-space:nowrap;background:#fff;color:#1b3b77;border-radius:11px;padding:15px 19px;font-size:13px;font-weight:850}
.login-bottom-cta a:hover{background:#e8f0ff;color:#1b3b77}
@media(max-width:1000px){.login-hero-grid{gap:36px;grid-template-columns:minmax(0,1fr) minmax(340px,420px)}.login-intro h1{font-size:49px}.login-guide-grid{gap:40px}}
@media(max-width:780px){.login-hero{padding:55px 0 70px}.login-hero-grid{grid-template-columns:1fr;gap:25px;max-width:570px}.login-intro{padding:0}.login-intro h1{font-size:clamp(38px,8vw,56px)}.login-hero-points{margin-top:27px;gap:18px}.login-hero-bottom{margin-top:27px}.login-card{max-width:570px;width:100%}.login-benefits,.login-guide,.login-faq{padding:65px 0}.login-benefit-grid{grid-template-columns:1fr;max-width:570px;margin:auto}.login-guide-grid{grid-template-columns:1fr}.login-cta-inner{align-items:flex-start;flex-direction:column}}
@media(max-width:480px){.login-container{width:calc(100% - 32px)}.login-hero{padding:40px 0 52px}.login-intro h1{letter-spacing:-1.6px}.login-lead{font-size:15px}.login-card{padding:24px 19px;border-radius:18px}.login-card h2{font-size:26px}.login-social-button{font-size:12px}.login-benefit-card{padding:25px}.login-faq summary{padding:17px;font-size:13px}.login-faq-answer{margin:0 17px;font-size:13px}.login-section-heading h2,.login-guide h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){.login-benefit-card{transition:none}.login-benefit-card:hover{transform:none}}


/* ==========================================================
   STEP 20N-BM — PREMIUM COMPACT SPACING REFINEMENT
   Scoped exclusively to the BulkPostAds login page.
   ========================================================== */

@media (min-width: 781px) {
    .login-page .login-hero {
        padding-top: 52px;
        padding-bottom: 60px;
    }

    .login-page .login-hero-grid {
        gap: 52px;
    }

    .login-page .login-intro {
        padding: 8px 0;
    }

    .login-page .login-intro h1 {
        margin-top: 20px;
        margin-bottom: 17px;
    }

    .login-page .login-hero-points {
        margin-top: 27px;
        gap: 17px;
    }

    .login-page .login-hero-bottom {
        margin-top: 27px;
        padding-top: 18px;
    }

    .login-page .login-benefits {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .login-page .login-guide {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .login-page .login-faq {
        padding-top: 58px;
        padding-bottom: 64px;
    }

    .login-page .login-bottom-cta {
        padding-top: 36px;
        padding-bottom: 36px;
    }
}

/* More deliberate heading rhythm */
.login-page .login-section-heading {
    margin-bottom: 27px;
}

.login-page .login-section-heading h2 {
    margin-top: 10px;
    margin-bottom: 11px;
}

.login-page .login-section-heading p {
    line-height: 1.65;
}

/* Refined premium content cards */
.login-page .login-benefit-grid {
    gap: 16px;
}

.login-page .login-benefit-card {
    padding: 25px;
    border-radius: 17px;
    box-shadow: 0 7px 24px rgba(18, 40, 79, .045);
}

.login-page .login-benefit-card:hover {
    box-shadow: 0 16px 36px rgba(18, 40, 79, .095);
}

.login-page .login-benefit-icon {
    margin-bottom: 17px;
}

.login-page .login-benefit-card h3 {
    margin-bottom: 7px;
}

.login-page .login-benefit-card p {
    line-height: 1.65;
}

/* Getting started section */
.login-page .login-guide-grid {
    gap: 54px;
}

.login-page .login-guide h2 {
    margin-top: 10px;
    margin-bottom: 12px;
}

.login-page .login-guide-link {
    margin-top: 19px;
}

.login-page .login-guide-steps {
    gap: 10px;
}

.login-page .login-guide-steps > div {
    padding: 16px 19px;
    border-radius: 13px;
}

/* FAQ: compact but comfortably clickable */
.login-page .login-faq-list {
    gap: 9px;
}

.login-page .login-faq details {
    border-radius: 11px;
}

.login-page .login-faq summary {
    padding: 16px 20px;
}

.login-page .login-faq-answer {
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 13px;
    padding-bottom: 16px;
    line-height: 1.7;
}

/* Refined CTA */
.login-page .login-cta-inner h2 {
    margin-top: 7px;
    margin-bottom: 7px;
}

/* Tablet */
@media (min-width: 481px) and (max-width: 780px) {
    .login-page .login-hero {
        padding-top: 42px;
        padding-bottom: 48px;
    }

    .login-page .login-benefits,
    .login-page .login-guide,
    .login-page .login-faq {
        padding-top: 47px;
        padding-bottom: 49px;
    }

    .login-page .login-bottom-cta {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    .login-page .login-guide-grid {
        gap: 26px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .login-page .login-hero {
        padding-top: 30px;
        padding-bottom: 38px;
    }

    .login-page .login-hero-grid {
        gap: 18px;
    }

    .login-page .login-intro h1 {
        margin-top: 18px;
        margin-bottom: 14px;
    }

    .login-page .login-hero-points {
        margin-top: 22px;
        gap: 14px;
    }

    .login-page .login-hero-bottom {
        margin-top: 20px;
        padding-top: 15px;
    }

    .login-page .login-benefits,
    .login-page .login-guide,
    .login-page .login-faq {
        padding-top: 39px;
        padding-bottom: 43px;
    }

    .login-page .login-bottom-cta {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .login-page .login-benefit-card {
        padding: 21px;
    }

    .login-page .login-guide-grid {
        gap: 24px;
    }

    .login-page .login-faq summary {
        padding: 15px 16px;
    }

    .login-page .login-faq-answer {
        margin-left: 16px;
        margin-right: 16px;
    }
}


/* ======================================================
   STEP 20N-BN — PREMIUM SECTION COLOR HARMONY
   Login page only — no structural or functional changes
   ====================================================== */

.login-page {
    --lp-ink: #182b4b;
    --lp-muted: #61728b;
    background: #ffffff;
}

/* Hero — rich midnight navy with subtle blue lighting */
.login-page .login-hero {
    background:
        radial-gradient(
            ellipse at 8% 5%,
            rgba(71, 111, 192, .28) 0%,
            transparent 45%
        ),
        radial-gradient(
            ellipse at 95% 85%,
            rgba(50, 103, 197, .16) 0%,
            transparent 48%
        ),
        linear-gradient(
            125deg,
            #101c36 0%,
            #15294c 55%,
            #112547 100%
        );
}

/* Login card — warm white against dark hero */
.login-page .login-card {
    background: #ffffff;
    border-color: #e6ecf6;
    box-shadow:
        0 28px 75px rgba(3, 14, 37, .25),
        0 5px 18px rgba(3, 14, 37, .09);
}

.login-page .login-notice {
    background: #eef5ff;
    border-color: #d5e5fb;
    color: #3b5c8c;
}

/* Benefits — soft ice-blue background */
.login-page .login-benefits {
    background: linear-gradient(
        180deg,
        #f3f7fd 0%,
        #f7f9fd 100%
    );
}

.login-page .login-benefit-card {
    background: #ffffff;
    border-color: #e3eaf5;
    box-shadow: 0 8px 26px rgba(24, 48, 89, .045);
}

.login-page .login-benefit-icon {
    background: #eaf1ff;
    color: #356fe5;
}

/* Getting started — crisp white */
.login-page .login-guide {
    background: #ffffff;
}

.login-page .login-guide-steps > div {
    background: #f5f8fd;
    border-color: #e5ecf6;
}

/* FAQs — cool pearl grey */
.login-page .login-faq {
    background: linear-gradient(
        180deg,
        #f6f8fc 0%,
        #f2f6fb 100%
    );
}

.login-page .login-faq details {
    background: #ffffff;
    border-color: #e3eaf3;
}

.login-page .login-faq details[open] {
    background: #ffffff;
    border-color: #b9cef3;
    box-shadow: 0 7px 22px rgba(33, 74, 143, .06);
}

.login-page .login-faq summary span {
    background: #edf3ff;
    color: #356fe5;
}

/* Bottom CTA — complementary royal navy */
.login-page .login-bottom-cta {
    background: linear-gradient(
        110deg,
        #162d53 0%,
        #1b3d70 100%
    );
}

.login-page .login-bottom-cta a {
    background: #ffffff;
    color: #1b3b77;
}

/* Unified typography across light sections */
.login-page .login-section-heading h2,
.login-page .login-guide h2,
.login-page .login-benefit-card h3 {
    color: #182b4b;
}

.login-page .login-section-heading p,
.login-page .login-guide p,
.login-page .login-benefit-card p {
    color: #61728b;
}

.login-page .login-section-label {
    color: #356fe5;
}


/* STEP 20N-CE: Login page interaction polish */
.login-page .login-card,
.login-page .login-field input,
.login-page .login-password-wrap button,
.login-page .login-benefit-card,
.login-page .login-guide-steps > div,
.login-page .login-faq details,
.login-page .login-guide-link,
.login-page .login-bottom-cta a {
    transition:
        transform .24s ease,
        box-shadow .24s ease,
        border-color .24s ease,
        background-color .24s ease,
        color .24s ease;
}

.login-page .login-field input:hover:not(:disabled) {
    border-color: #8eafe8;
    box-shadow: 0 0 0 3px rgba(71,127,243,.07);
}

.login-page .login-field input:focus {
    border-color: #477ff3;
    outline: 3px solid #dbe8ff;
}

@media (hover:hover) and (pointer:fine) {
    .login-page .login-card:hover {
        border-color: #cfdef5;
        box-shadow:
            0 32px 85px rgba(3,14,37,.29),
            0 8px 25px rgba(3,14,37,.10);
    }

    .login-page .login-benefit-card:hover {
        transform: translateY(-6px);
        border-color: #a9c4ed;
        box-shadow: 0 18px 36px rgba(28,62,117,.11);
    }

    .login-page .login-guide-steps > div:hover {
        transform: translateX(5px);
        border-color: #b0c9f1;
        box-shadow: 0 9px 22px rgba(27,64,119,.08);
    }

    .login-page .login-faq details:hover {
        transform: translateY(-2px);
        border-color: #aac5ee;
        box-shadow: 0 7px 20px rgba(28,62,117,.065);
    }

    .login-page .login-password-wrap button:not(:disabled):hover {
        background: #dce9ff;
        color: #234b90;
        transform: translateY(-1px);
    }

    .login-page .login-guide-link:hover,
    .login-page .login-bottom-cta a:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(22,55,110,.17);
    }
}

.login-page .login-submit:disabled,
.login-page .login-social-button:disabled {
    cursor: not-allowed;
}

@media (prefers-reduced-motion:reduce) {
    .login-page .login-card,
    .login-page .login-field input,
    .login-page .login-password-wrap button,
    .login-page .login-benefit-card,
    .login-page .login-guide-steps > div,
    .login-page .login-faq details,
    .login-page .login-guide-link,
    .login-page .login-bottom-cta a {
        transition: none !important;
    }

    .login-page .login-benefit-card:hover,
    .login-page .login-guide-steps > div:hover,
    .login-page .login-faq details:hover,
    .login-page .login-password-wrap button:hover,
    .login-page .login-guide-link:hover,
    .login-page .login-bottom-cta a:hover {
        transform: none !important;
    }
}


/* STEP 20N-CF: Visible Login form and hero-card hover */
.login-page .login-card {
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.login-page .login-hero-point {
    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

@media (hover:hover) and (pointer:fine) {
    .login-page .login-card:hover {
        transform: translateY(-5px);
        border-color: #a9c5ef;
        box-shadow: 0 35px 85px rgba(3,14,37,.31);
    }

    .login-page .login-hero-point:hover {
        transform: translateX(6px);
        background-color: rgba(255,255,255,.09);
        border-color: rgba(169,197,255,.35);
        box-shadow: 0 10px 26px rgba(3,14,37,.14);
    }

    .login-page .login-field input:hover:not(:disabled) {
        border-color: #6295eb;
        box-shadow: 0 0 0 4px rgba(71,127,243,.11);
    }
}

@media (prefers-reduced-motion:reduce) {
    .login-page .login-card:hover,
    .login-page .login-hero-point:hover {
        transform: none !important;
    }
}