/* ===== 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;
  }
}

/* ============================
   Contact page layout + form polish
   Scope: /contact (template uses .contact-form-section)
   ============================ */
.contact-form-section {
  padding: 72px 0;
}

.contact-form-section .section-title {
  display: inline-block;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink-strong);
  margin-bottom: 10px;
}

.contact-form-section .section-summary {
  color: var(--ink);
  margin-bottom: 22px;
}

/* Make the two columns breathe, and stack cleanly on mobile */
.contact-form-section .row {
  row-gap: 28px;
}

/* Form card */
.contact-form {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(17,24,39,0.06);
}

.contact-form * {
  box-sizing: border-box;
}

.contact-form .form-element {
  margin-bottom: 14px;
}

.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,0.18);
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  line-height: 22px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(17,24,39,0.55);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(129,128,224,0.8);
  box-shadow: 0 0 0 4px rgba(129,128,224,0.18);
}

/* Submit button: match site style, center label */
.contact-form input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .01em;
  color: #fff;
  background: #8180e0;
  box-shadow: 0 8px 18px rgba(129,128,224,0.22);
}

.contact-form input[type=submit]:hover {
  background: #6f6ee0;
}

/* Right column: give the contact info a proper card; map is currently empty */
.contact-form-section .map-wrapper {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(17,24,39,0.06);
}

.contact-form-section #map {
  min-height: 220px;
  background: linear-gradient(135deg, rgba(129,128,224,0.12), rgba(37,99,235,0.08));
}

.contact-form-section .contact-infos {
  padding: 18px 18px 6px;
}

.contact-form-section .single-contact-info {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.contact-form-section .single-contact-info:first-child {
  border-top: none;
}

.contact-form-section .single-contact-info .icon-wrapper {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(129,128,224,0.14);
  color: #4b4ad6;
  flex: 0 0 auto;
}

.contact-form-section .single-contact-info p {
  margin: 0;
  color: rgba(17,24,39,0.78);
  font-size: 16px;
  line-height: 22px;
}

/* Tighten on small screens */
@media (max-width: 575px) {
  .contact-form-section { padding: 44px 0; }
  .contact-form { padding: 16px; }
  .contact-form-section .contact-infos { padding: 14px 14px 4px; }
}


/* Investments page: improve contrast (text overlaps the purple blob on desktop) */
/* Scoped to the investments layout: a .pagebanner followed by .commonSection.servicePage */
.pagebanner + .commonSection.servicePage .legal-content p {
  color: #111827;
}