/* ===== Base tokens ===== */
:root {
    --radius-card: 16px;
    --pad-card: 30px;
    --shadow-soft: 0 4px 10px rgba(0,0,0,0.12);
    --shadow-softer: 0 4px 10px rgba(0,0,0,0.14);
    --ink: #111827;
    --ink-strong: #111;
    --ink-inverse: #fff;
    --ink-subtle: rgba(0,0,0,0.08);
    --bg-soft: #f7f8fb;
    --bg-muted: #eceff5;
    --bg-deep: #0f172a;

    --accent-teal: #0f766e;
    --accent-blue: #2563eb;
    --accent-violet: #7c3aed;
    --accent-orange: #ea580c;
    --accent-green: #22c55e;
    --accent-amber: #f59e0b;
    --accent-red: #ef4444;
}

/* ===== Reusables ===== */
.pill {
    color: --ink-strong;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 999px;
    border: 1px solid var(--ink-strong);
    background: rgba(0,0,0,0.5);
    margin: 2px 4px;
    font-size: 13px;
}

.hero-bullets .pill {
    background: rgba(255,255,255,0.75);
}

.statement-card {
    border: 1px solid #eef0f4;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    background: #fff;
}

.kpis .kpi {
    border-radius: 16px;
    padding: 18px;
    background: var(--bg-soft);
    margin-bottom: 16px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.health-bar {
    height: 10px;
    width: 100%;
    background: var(--bg-muted);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}
.health-bar>span {
    display: block;
    height: 100%;
    width: 72%;
}
.health-ok {
    background: var(--accent-green);
}
.health-watch {
    background: var(--accent-amber);
}
.health-risk {
    background: var(--accent-red);
}

.risk-list li {
    margin-bottom: 8px;
}

.disclosure {
    background: #8180e0;
    color: var(--ink-inverse);
    padding: 30px;
    border-radius: 12px;
}

.foot-legal {
    font-size: 16px;
    color: #cfe3ff;
}

.foot-legal a {
    color: #cfe3ff;
    text-decoration: underline;
}

.logo-text {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: .5px;
    color: var(--ink-strong);
    text-transform: uppercase;
}

.header_1 .navigator_btn .common_btn {
    padding: 10px 18px;
}
.menu a {
    text-transform: capitalize;
}

/* Tiny UI bits */
.shield,.lock {
    display: inline-block;
    width: 12px;
    height: 14px;
    border-radius: 2px;
    margin-right: 6px;
}
.shield {
    background: #10b981;
}
.lock {
    background: var(--ink);
}
.tick,.xmark {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}
.tick {
    background: #16a34a;
}
.xmark {
    background: var(--accent-red);
}

/* ===== Plan cards ===== */
.plan-card {
    position: relative;
    overflow: hidden;
    /* keep badge inside rounded corner */
    border-radius: var(--radius-card);
    padding-top: 60px;
    /* Reserves space at the top to prevent overlap with absolute-positioned icon and badge */
}
.plan-card h1 {
    font-size: 44px;
    margin: 0;
    line-height: 1;
}

/* Grid constraints */
.plan-grid .singleService_4 {
    min-height: 400px;
}
@media (max-width: 991px) {
    .plan-grid .singleService_4 {
        min-height: auto;
    }
}

/* Icon (pinned to top-left corner) */
.plan-card i {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(12px, 12px);
    /* Symmetric inset to match the badge's nudge */
    font-size: 48px;
    /* Larger size */
    color: #333;
    z-index: 5;
}

/* ===== Corner multiplier badge (single canonical approach) ===== */
.multiplier-badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-12px, 12px);
    /* nudge from the true corner */
    display: inline-block;
    padding: 6px 10px;
    font-weight: 800;
    font-size: 24px;
    line-height: 1;
    letter-spacing: .3px;
    border-radius: 999px;
    color: var(--ink-inverse);
    background: #8180e0;
    /* Uniform purple for all badges */
    border: 2px solid rgba(255,255,255,0.7);
    box-shadow: var(--shadow-soft);
    z-index: 5;
}

/* ===== Plans section integration (optional scoping) ===== */
#plans .singleService_4,
#plans .plan-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--radius-card);
}

/* Optional overlay anchor if you prefer not to position the badge directly on the card
   <div class="badge-anchor"><span class="multiplier-badge ...">2×</span></div> */
#plans .singleService_4 .badge-anchor {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    /* won't block clicks */
    z-index: 50;
}

#plans .singleService_4 .badge-anchor .multiplier-badge {
    position: absolute !important;
    top: 10px;
    right: 10px;
    box-shadow: var(--shadow-softer);
}

/* ===== Small screens ===== */
@media (max-width: 575px) {
    .multiplier-badge {
        transform: translate(-10px, 10px);
        padding: 5px 8px;
        font-size: 11px;
    }
    .plan-card i {
        transform: translate(10px, 10px);
        font-size: 40px;
    }
}

.separator {
    width: 100%;
    height: 10px;
    padding: 5px;
    margin: 5px;
    text-align: center;
    background-color: #000;
    display: inline-block;
}

.plan-card h1,
.plan-card h4 {
    text-align: center;
}


/* 1) Trim the Hero's bottom padding (the section above Plans) */
.payloan_header_bg.header_bg_2 {
    padding-bottom: 1.5rem !important;
    /* was likely ~5–8rem */
}

/* 2) Trim the Plans section's top spacing (the section title area) */
section.commonSection#plans {
    margin-top: 0 !important;
    padding-top: 1.25rem !important;
    /* reduce the space above "Choose your..." */
}

/* 3) Optional: bring all sections to a sane baseline (desktop/tablet) */
section.commonSection {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* 4) Mobile overrides — themes often add extra padding on small screens */
@media (max-width: 767.98px) {
    .payloan_header_bg.header_bg_2 {
        padding-top: 2rem !important;
        padding-bottom: 1rem !important;
    }
    section.commonSection#plans {
        padding-top: 0.75rem !important;
    }
    section.commonSection {
        padding-top: 1.25rem !important;
        padding-bottom: 1.75rem !important;
    }
}

/* Safety: kill stray margins from elements that might push the gap */
#plans .sec_title,
#plans .sec_desc {
    margin-top: 0 !important;
}


.welcome_area {
    margin-top: 2em;
    background: rgba(141, 158, 255, .4);
    padding: 10px;
    /* Adds padding inside the div */
    border-radius: 10px;
    /* Adds rounded corners */
}

.hero_text {
    color: #111;
}

.act-button {
    text-align: center;
    color: #fff;
    display: inline-block;
    padding: 1em 2em;
    border-radius: 999px;
    border: 1px solid var(--ink-strong);
    background: #8180e0;
    margin: 2em 2em;
    font-size: 24px;
}

.banner-icon {
    text-align: left;
    color: #8180e0;
    font-size: 32px;
}

.bannerTitle {
    position: relative;
    z-index: 2;
    font-size: 30px;
    line-height: 54px;
    color: #222222;
    margin: 0 0 9px;
}



/* ===== Plans: contain absolute children & fill columns ===== */

/* 1) Make each card its own stacking context so badges/icons can't overlay neighbors */
#plans .plan-card {
  isolation: isolate;       /* creates a new stacking context */
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* 2) Keep pinned icon & badge above the card content but BELOW neighboring cards */
#plans .plan-card i,
#plans .plan-card .multiplier-badge {
  z-index: 1;               /* lower than neighboring cards' default stacking */
}

/* 3) Ensure the card fills the column (avoids weird wrap/overlap on some themes) */
#plans .singleService_4 {
  display: flex;            /* column becomes a flex container */
  height: 100%;
}
#plans .singleService_4 .plan-card {
  flex: 1 1 auto;           /* card stretches to the column height */
}

/* 4) Add safe vertical rhythm between rows on all viewports (no change to gutters) */
#plans .row > [class*="col-"] {
  margin-bottom: 24px;      /* spacing between card rows; no effect on desktop gutters */
}

/* 5) Keep icons the color you set (your original rule wins; this just guards overrides) */
#plans .plan-card i {
  color: #333;
}

/* Optional: if your theme collapses gutters on desktop, re-establish a tiny one (BS5 vars). 
   Remove if you already have healthy gutters. */
@media (min-width: 992px) {
  #plans .row {
    --bs-gutter-x: 1.5rem;
  }
}
/* ===== Readability fix: /how protection cards headings (e.g., 'Averaging Down') ===== */
.singleHistory h3.h4,
.singleHistory h3.h4 a {
  color: #222222;
  font-weight: 700;
}

/* Prevent top-right corner decoration from overlapping headings in /how cards */
.singleHistory h3.h4 {
  padding-right: 90px; /* leaves room for the 79px corner blob */
}

/* Better fix: keep heading above the decorative corner + constrain width */
.singleHistory h3.h4 {
  padding-right: 0;
  max-width: calc(100% - 90px);
  position: relative;
  z-index: 20;
}

/* Plans page (desktop): center View details label inside the button */
@media (min-width: 992px) {
  #plans .common_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
  }
}