:root{
  --ink:#0B0E14;
  --navy:#10192B;
  --paper:#EEF1F5;
  --steel:#8B93A1;
  --forest:#2F7A4D;
  --text-on-dark:#EDEFF3;
   --deep:#0b1220;
  --deep-2:#141d30;
  --gold:#dfbe85; /*#c9a15a; */
  --gold-2:#e6c98a;
  --gold-dark:#8A6D1B; /* darker gold for text/borders where --gold is too light for contrast */
  --white:#fff;
  --light:#f8fafc;
  /* Was "Inter" — never loaded via the Google Fonts <link> in
     layout.php, so body text was silently falling back to the
     browser's generic sans-serif. DM Sans is the font the hero
     section (index.php's .hero2) already uses for its body copy,
     and it IS loaded — so this both fixes the fallback bug and
     makes the hero's font pairing the project-wide default. */
  --body-font: "DM Sans", sans-serif;
  --black:#000;
  --surface:#fcfcfd;
  --gray-200: #e2e8f0;
  --radius-lg: 18px;
  --gray-100:#f8fafc;
--gray-600:#64748b;

    --offer-card-bg: rgb(36, 36, 36);

  
/*====================================
      TRANSITIONS
    ====================================*/

    --transition-fast: .2s ease;
    --transition: .3s ease;
    --transition-slow: .5s ease;

 /*====================================
      SHADOWS
    ====================================*/

    --shadow-sm:
        0 2px 8px rgba(15, 23, 42, .05);

    --shadow-md:
        0 8px 20px rgba(15, 23, 42, .08);

    --shadow-lg:
        0 20px 40px rgba(15, 23, 42, .10);

    --shadow-hover:
        0 12px 28px rgba(15, 23, 42, .12);
}
body{
  font-family:var(--body-font); /*'IBM Plex Sans',sans-serif; */
  color:var(--ink);
  background:var(--paper);
}

/* h4-h6 added so every heading level uses the same font as the hero's
   h1 — previously only h1-h3 were covered, so h4/h5/h6 fell back to
   --body-font (which itself was pointing at an unloaded font, see
   above). */
h1,h2,h3,h4,h5,h6,.display-font{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:var(--body-font);}

/* Base sizes so every <h2>/<h3> is the same size project-wide by
   default, regardless of which page or class puts it there. A more
   specific class (.hero-title, .hero2-subhead, .selection-card h3,
   etc.) still wins where a deliberately different size is wanted. */
h2{font-size:2.6rem;}
h3{font-size:1.75rem;}

.bg-white{
    background:var(--white)!important;
}

.bg-darkgrey{
background-color: rgb(36, 36, 36);
color: rgb(255, 255, 255);
}


.bg-light{
    background:var(--light)!important;
}




/* ---------- Nav ---------- */
/* ---------- Topbar (thin announcement strip above the navbar) ---------- */

.topbar{
    background:var(--deep);
    color:var(--paper);
    font-size:13px;
    padding:8px 0;
}

.topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:6px 20px;
}

.topbar-left{
    font-weight:600;
}

.topbar-right{
    color:var(--gold-2);
    font-weight:600;
}

@media (max-width:575.98px){
    .topbar-inner{
        justify-content:center;
        text-align:center;
    }
}

.navbar{background:rgba(17,19,22,0.94);
backdrop-filter:none;
border-bottom:1px solid var(--line-dark);
 /*var(--navy);*/}

/* .navbar is sticky-top (see layout.php), so any element jumped to via an
   anchor link (e.g. the "Discover"/"Offers"/"Fees" nav links, or a page
   loaded with a #hash in the URL) needs breathing room above it or the
   sticky navbar ends up overlapping/covering the section's heading right
   after the jump. scroll-margin-top reserves that space for every
   anchor-targetable section, site-wide, without affecting normal layout. */
section[id]{
    scroll-margin-top:90px;
}
/*.navbar-brand{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--text-on-dark)!important;letter-spacing:.02em;} Original code*/
.nav-link{display:flex;gap:28px;font-size:14.5px;color:rgba(246,241,230,0.75);} /*{color:#C7CCD6!important;font-size:.92rem;*/
/*.nav-link:hover{color:#fff!important;} */

/*****add on from otther site */

.nav-link a{text-decoration:none;transition:color .15s;}
.nav-link a:hover{color:var(--gold-2);}

.navbar-brand{display:flex;align-items:center;gap:10px;color:var(--paper);font-size:19px;font-weight:600;letter-spacing:0.2px;text-decoration:none;}

/* ---------- Hero ---------- */

.hero{
  background:
    radial-gradient(900px 500px at 8% 100%, rgba(223,190,133,0.10), transparent 60%),
    radial-gradient(700px 400px at 90% 0%, rgba(223,190,133,0.06), transparent 55%),
    #060606;
  color:var(--paper);
  padding:110px 0 90px;
  position:relative;
  overflow:hidden;
}

.hero .eyebrow{
  font-family:var(--body-font);
  font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:22px;display:flex;align-items:center;gap:10px;
}
.hero .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold-2);display:inline-block;}
.hero h1{
  font-size:clamp(34px,6vw,60px);line-height:1.06;font-weight:600;margin:0 auto 22px;max-width:820px;
}

/* Descriptive paragraph under a .hero h1, sitewide. Before this rule,
   pages were inconsistent: some used Bootstrap's .lead (20px), some
   used no class (16px default), one even had a .small (14px) sibling
   line — all in the same visual slot across ~20 near-identical page
   banners. This one rule normalizes all of them without having to
   touch every page individually (it out-specifies .lead/.small on
   font-size while leaving their other rules alone). */
.hero p{
  font-size:18px;line-height:1.7;font-weight:400;color:rgba(255,255,255,.75);
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-2);
  font-weight: 500;
}

.hero h2 em {
  font-style: italic;
  color: var(--gold-2);
  font-weight: 500;
}

/*==============================
OUTLINE GOLD BUTTON (secondary action, pairs with .btn-gold as primary)
==============================*/

.btn-outline-gold{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  /*background:transparent;color:var(--gold-dark);border:1.5px solid var(--gold);*/
  background:var(--gold-2);color:var(--black);border:1.5px solid var(--gold);
  padding:10px 18px;border-radius:100px;font-weight:700;font-size:13.5px;
  cursor:pointer;transition:.2s ease;flex:none;
  text-decoration:none;
  /* No baked-in vertical margin here — a reusable button class
     shouldn't dictate its own external spacing. It used to
     (margin-top/bottom:20px), which is exactly why "Apply Now" and
     "View card" looked misaligned/mismatched wherever this button sits
     next to a .btn-gold sibling with no such margin (wallet/best_card.php's
     ranked cards, wallet/best_at_brand.php, the "Clear Filter" bars,
     etc.) — removed Sep 2026. Callers that want spacing already add
     their own utility class (mt-3, ms-2, ...) or sit in a flex/gap
     container that handles it. */
}
.btn-outline-gold:hover{background:var(--gold);color:var(--deep);border-color:var(--gold);}

/*==============================
GOLD BUTTON
==============================*/

.btn-gold{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:var(--gold);
    border:1px solid var(--gold);
    color:var(--deep);

    font-weight:600;
    /* Pill shape, matching .btn-outline-gold above — these two are
       always meant to read as a matched primary/secondary pair (e.g.
       "View card" + "Apply Now" side by side), so they need the same
       radius and comparable padding. Used to be 12px (a rounded
       rectangle) while its outline sibling was a full 100px pill —
       fixed Sep 2026. */
    border-radius:100px;
    text-decoration:none;

    padding:12px 26px;

    transition:all .3s ease;
}

.btn-gold:hover,
.btn-gold:focus{
    background:var(--gold-2);
    border-color:var(--gold-2);
    color:var(--deep);

    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(223,190,133,.35);
}

/* Bootstrap's .btn-sm alone never actually shrank either of these two
   custom classes — .btn-gold/.btn-outline-gold's own padding always
   won the cascade (same specificity, declared later in the file), so
   every "small" gold button across the site (40+ places: ranked
   cards' Apply Now/View card pair, filter bars' Clear Filter, the
   navbar Apply Now, admin buttons, ...) silently rendered at full
   size instead. This compound selector has higher specificity than
   the bare classes above, so it finally wins. Sized down
   proportionally from the base padding/font-size above. */
.btn-sm.btn-gold,
.btn-sm.btn-outline-gold{
    padding:7px 14px;
    font-size:12.5px;
}

.btn-gold:active{
    transform:translateY(0);
}

/*==============================
white BUTTON
==============================*/

.btn-white{
    background:var(--white);
    border:1px solid var(--white);
    color:var(--deep);

    font-weight:600;
    border-radius:12px;

    padding:12px 26px;

    transition:all .3s ease;
}

.btn-white:hover,
.btn-white:focus{
    background:var(--white);
    border-color:var(--white);
    color:var(--deep);

    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(223,190,133,.35);
}

.btn-white:active{
    transform:translateY(0);
}

/*==============================
GEN Z HERO
==============================*/

.hero-search-section{
background:var(--light);
padding:80px 0;
}

.search-bar-section{
background:var(--light);
padding:70px 0;
}

.search-eyebrow{
font-size:14px;
font-weight:600;
letter-spacing:.04em;
text-transform:uppercase;
color:var(--steel);
margin-bottom:22px;
}

/* Badge */

.hero-badge{

display:inline-block;

padding:10px 18px;

background:rgba(255,255,255,.7);

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.5);

border-radius:50px;

font-weight:600;

font-size:14px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

/* Title */

.hero-title{

font-size:2.6rem; /* matches .section-title, was 42px (near-identical, now exact) */

font-weight:800;

line-height:1.1;

color:#161616;

}

.hero-title span{

background:var(--gold);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.title-gold span{
	background:var(--gold-2);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;
}



.hero-subtitle{

font-size:20px;
max-width:700px;
margin:auto;
margin-top:25px;
color:var(--steel);
line-height:1.7;
}

/* Search Box */
/*==============================
SEARCH BOX
==============================*/

.hero-search-box{
    display:flex;
    align-items:center;
    width:100%;
    height:64px;

    background:#fff;
    border-radius:32px;
    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.hero-search-box input{
    flex:1;
    height:100%;

    border:none;
    outline:none;

    padding:0 24px;

    font-size:16px;
    background:transparent;

    box-sizing:border-box;
}

.hero-search-box .btn-search{
    width:140px;
    height:100%;

    border:none;
    outline:none;

    padding:0;
    margin:0;

    background:var(--gold-2);
    color:#fff;

    font-size:18px;
    font-weight:700;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:0;

    box-sizing:border-box;

    flex-shrink:0;
}

.hero-search-box .btn-search:hover{
    background:var(--gold);
}

/*********MOBILE******************/

@media (max-width:768px){

.hero-search-box{
    height:56px;
    border-radius:28px;
}

.hero-search-box input{
    font-size:14px;
    padding:0 18px;
}

.hero-search-box .btn-search{
    width:100px;
    font-size:16px;
}

}

/* Tags */

.popular-tags{

margin-top:25px;

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:12px;

}

.popular-tags a{

padding:10px 18px;

background:var(--gold-2);;

border-radius:30px;

text-decoration:none;

font-weight:600;

display:inline-flex;
align-items:center;
gap:6px;

/*color:#444;*/

color:var(--black);

box-shadow:0 4px 12px rgba(0,0,0,.05);

transition:.2s;

}

.popular-tags a:hover{

/*background:#6c63ff;
color:white;
 */

background:var(--gold-2);
color:var(--deep);



transform:translateY(-2px);

}

/* Buttons */

.hero-actions{

margin-top:40px;

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.hero-btn{

padding:16px 28px;

border-radius:50px;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.hero-btn.primary{

background:var(--gold);

color:var(--deep);

box-shadow:0 8px 20px rgba(223,190,133,.35);

}

.hero-btn.secondary{

background:white;

color:#333;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.hero-btn:hover{

transform:translateY(-5px);

}

/* Stats */

.stat-card{
  display:block;
  background:#ffffff;
  border:1px solid var(--gray-200);
  border-radius:25px;
  padding:35px;
  box-shadow:0 15px 35px rgba(0,0,0,.06);
  transition:.35s;
  color:inherit;
}

.stat-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold-2);
}

.stat-icon{
  width:56px;
  height:56px;
  flex-shrink:0;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:#fff;
}

.icon-blue{ background:linear-gradient(135deg,#2563eb,#60a5fa); }
.icon-green{ background:linear-gradient(135deg,#1e8e5a,#34d399); }
.icon-gold{ background:linear-gradient(135deg,var(--gold),#f5d89d); color:var(--deep); }

.icon-pink {
  background: linear-gradient(135deg,#8e1e43,#e16b76);} 
  
 .icon-black { 
 background: linear-gradient(135deg,#111827,#374151);} 
 
 .icon-orange {
  background: linear-gradient( 135deg, #ffb347, #ff9900 );
}

.stat-card-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
}

.stat-card-sub{
  margin:14px 0 0;
  padding-top:14px;
  border-top:1px dashed #d8dee8;
  font-size:13.5px;
  color:var(--steel);
}

/* Mobile */

@media(max-width:768px){

.hero-title{

font-size:40px;

}

.hero-subtitle{

font-size:17px;

}

.hero-search-box .input-group{

border-radius:20px;

}

.btn-search{

width:100%;

margin-top:10px;

border-radius:15px;

}

}
/*==============================
HERO VISUAL
==============================*/

.hero-visual{

    position:relative;

    min-height:520px;

}

.floating-card{

    position:absolute;

    width:320px;

    padding:30px;

    border-radius:22px;

    color:#fff;

    box-shadow:var(--shadow-lg);

    transition:.35s;

}

.floating-card:hover{

    transform:translateY(-4px);

}

.card-blue{

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    top:20px;

    left:20px;

}

.card-dark{

    background:linear-gradient(135deg,#111827,#374151);

    top:160px;

    right:0;

}

.card-light{

    background:linear-gradient(135deg,#0ea5e9,#06b6d4);

    bottom:20px;

    left:80px;

}

.bank-name{

    font-size:14px;

    opacity:.8;

    margin-bottom:40px;

}

.card-name{

    font-size:24px;

    font-family:var(--body-font);

    font-weight:700;

    margin-bottom:40px;

}

.card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* Hero card mockup — a single dark credit-card graphic with two small
   floating info badges overlapping its corners, replacing the earlier
   3-overlapping-bank-cards mockup. Purely decorative/illustrative (no
   real card data), matching the "dark card + floating stat" look. */
.hero-card-mock{
    position:absolute;
    top:130px;
    left:70px;
    width:410px;
    height:200px;
    border-radius:22px;
    background:linear-gradient(135deg,#1c1c1c,#0a0a0a);
    border:1px solid rgba(223,190,133,.25);
    box-shadow:var(--shadow-lg);
    padding:26px;
    transform:rotate(-8deg);
}

.hero-card-chip{
    position:absolute;
    top:26px;
    right:26px;
    width:36px;
    height:26px;
    border-radius:6px;
    background:linear-gradient(135deg,var(--gold),var(--gold-2));
}

.hero-card-number{
    position:absolute;
    left:26px;
    bottom:66px;
    font-family:"Courier New",monospace;
    font-size:17px;
    letter-spacing:2px;
    color:rgba(255,255,255,.85);
}

.hero-card-mock-footer{
    position:absolute;
    left:26px;
    right:26px;
    bottom:24px;
    display:flex;
    justify-content:space-between;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.5);
}

.hero-float-badge{
    position:absolute;
    max-width:220px;
    background:#111214;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:16px 18px;
    box-shadow:var(--shadow-lg);
    z-index:2;
}

.hero-float-badge.badge-benefits{
    top:55px;
    left:0;
}

.hero-float-badge.badge-stat{
    bottom:55px;
    right:10px;
}

.hero-float-icon{
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(223,190,133,.15);
    border:1px solid var(--gold);
    color:var(--gold-2);
    font-size:16px;
    margin-bottom:10px;
}

.hero-float-title{
    font-weight:700;
    font-size:15px;
    color:#fff;
    margin-bottom:4px;
}

.hero-float-title.stat-value{
    font-size:21px;
}

.hero-float-sub{
    font-size:12px;
    line-height:1.4;
    color:rgba(255,255,255,.55);
}

/* The card mockup's 410px width (plus its -8deg tilt, which pushes the
   right edge out further still) is wider than a phone's column, so it
   gets clipped by .hero{overflow:hidden} without this — shrink the whole
   group down proportionally below the tablet breakpoint. */
@media(max-width:768px){
    .hero-visual{
        min-height:420px;
    }
    .hero-card-mock{
        width:260px;
        height:150px;
        left:15px;
        top:110px;
        padding:16px;
    }
    .hero-card-chip{
        width:26px;
        height:19px;
        top:16px;
        right:16px;
    }
    .hero-card-number{
        left:16px;
        bottom:44px;
        font-size:12px;
        letter-spacing:1px;
    }
    .hero-card-mock-footer{
        left:16px;
        right:16px;
        bottom:14px;
        font-size:9px;
    }
    .hero-float-badge{
        max-width:160px;
        padding:12px 14px;
    }
    .hero-float-badge.badge-benefits{
        top:30px;
        left:0;
    }
    .hero-float-badge.badge-stat{
        bottom:15px;
        right:0;
    }
    .hero-float-icon{
        width:28px;
        height:28px;
        font-size:13px;
        margin-bottom:8px;
    }
    .hero-float-title{
        font-size:13px;
    }
    .hero-float-title.stat-value{
        font-size:18px;
    }
    .hero-float-sub{
        font-size:11px;
    }
}


/********HEro Ends**************************************/

/*==============================
HERO 2.0 — template-derived hero, scoped under .hero2 (NOT .hero).
.hero is a shared page-header banner class used on ~29 other pages
site-wide (all_offers.php, bank_cards.php, card.php, wallet.php, ...),
so it must stay untouched. Every nested class below is prefixed
hero2- to avoid collisions with the older, now-unused hero mockup
classes above (.floating-card/.hero-card-mock/.hero-float-badge etc.)
and with anything else already defined sitewide.
==============================*/
.hero2{
    --h2-gold:#D4AF37;
    --h2-gold-light:#F5D76E;
    --h2-gold-dark:#9C7A20;
    --h2-gradient:linear-gradient(135deg,var(--h2-gold-dark),var(--h2-gold),var(--h2-gold-light));
    position:relative;
    overflow:hidden;
    min-height:760px;
    display:flex;
    align-items:center;
    padding:150px 0 90px;
    background:
        radial-gradient(900px 500px at 8% 100%, rgba(223,190,133,0.10), transparent 60%),
        radial-gradient(700px 400px at 90% 0%, rgba(223,190,133,0.06), transparent 55%),
        #060606;
    color:#fff;
    font-family:"DM Sans",var(--body-font);
}
.hero2-grid{
    position:absolute;
    inset:0;
    opacity:.12;
    background-image:linear-gradient(rgba(212,175,55,.08) 1px,transparent 1px),
                      linear-gradient(90deg,rgba(212,175,55,.08) 1px,transparent 1px);
    background-size:70px 70px;
    -webkit-mask-image:linear-gradient(to bottom,#000,transparent 90%);
    mask-image:linear-gradient(to bottom,#000,transparent 90%);
}
.hero2-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    opacity:.22;
}
.hero2-glow-one{ width:450px; height:450px; background:var(--h2-gold); top:-150px; left:-100px; }
.hero2-glow-two{ width:400px; height:400px; background:var(--h2-gold-light); right:-120px; top:150px; }

.hero2-content{ position:relative; z-index:2; }

.hero2-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:50px;
    background:rgba(212,175,55,.08);
    border:1px solid rgba(212,175,55,.25);
    color:#f0d77d;
    font-size:13px;
    margin-bottom:22px;
}
.hero2-eyebrow span{
    width:7px;
    height:7px;
    background:var(--h2-gold-light);
    border-radius:50%;
    box-shadow:0 0 10px var(--h2-gold);
}

.hero2 h1{
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(32px,4.2vw,52px);
    line-height:1.08;
    letter-spacing:-1.5px;
    font-weight:700;
    max-width:620px;
    color:#fff;
    margin-bottom:0;
}
.hero2 .gradient-text{
    color:var(--gold-2);
}
.hero2-subhead{
    font-family:"Space Grotesk",sans-serif;
    font-size:19px;
    font-weight:500;
    color:#d8d8d8;
    margin-top:18px;
}
.hero2-subhead em{ color:var(--h2-gold-light); font-style:normal; }
.hero2-description{
    max-width:560px;
    color:#a5a5a5;
    font-size:16px;
    line-height:1.7;
    margin-top:16px;
}
.hero2-buttons{
    display:flex;
    gap:14px;
    margin-top:32px;
    flex-wrap:wrap;
}
.hero2-buttons .btn-primary-custom{
    background:var(--gold-2);
    color:#050505;
    border:0;
    padding:14px 24px;
    border-radius:12px;
    font-weight:700;
    box-shadow:0 12px 35px rgba(212,175,55,.2);
    transition:.3s;
    display:inline-flex;
    align-items:center;
    text-decoration:none;
}
.hero2-buttons .btn-primary-custom:hover{
    background:var(--h2-gold-light);
    color:#050505;
    transform:translateY(-2px);
    box-shadow:0 18px 45px rgba(212,175,55,.35);
}
.hero2-buttons .btn-outline-custom{
    color:#fff;
    border:1px solid rgba(255,255,255,.15);
    padding:14px 24px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    text-decoration:none;
}
.hero2-buttons .btn-outline-custom:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
}

.hero2-stats h3{ color:#fff; font-family:"Space Grotesk",sans-serif; }
.hero2-stats small{ color:#a5a5a5; }

.hero2-visual{
    position:relative;
    height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.hero2-dashboard-card{
    width:400px;
    max-width:100%;
    padding:25px;
    border-radius:24px;
    background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
    border:1px solid rgba(212,175,55,.35);
    backdrop-filter:blur(25px);
    box-shadow:0 40px 100px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
    transform:rotate(4deg);
    position:relative;
    z-index:2;
}
.hero2-dashboard-top{ display:flex; justify-content:space-between; align-items:center; }
.hero2-mini-logo{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:18px; color:#fff; }
.hero2-card-chip{
    width:40px;
    height:30px;
    border-radius:7px;
    background:linear-gradient(135deg,#9c7a20,#f5d76e,#fff1a8);
}
.hero2-card-number{
    margin:60px 0 35px;
    font-family:"Courier New",monospace;
    letter-spacing:3px;
    color:#eee;
}
.hero2-card-bottom{
    display:flex;
    justify-content:space-between;
    color:#aaa;
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.hero2-floating-card{
    position:absolute;
    width:220px;
    padding:20px;
    border-radius:18px;
    background:rgba(15,15,15,.86);
    border:1px solid rgba(212,175,55,.18);
    backdrop-filter:blur(20px);
    box-shadow:0 25px 60px rgba(0,0,0,.45);
    z-index:3;
}
.hero2-floating-card-one{ left:0; top:70px; transform:rotate(-6deg); }
.hero2-floating-card-two{ right:0; bottom:60px; transform:rotate(-5deg); }
.hero2-floating-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(212,175,55,.10);
    color:#f5d76e;
    font-size:20px;
    margin-bottom:15px;
}
.hero2-floating-card h6{ margin:0; color:#fff; font-family:"Space Grotesk",sans-serif; }
.hero2-floating-card p{ margin:5px 0 0; color:#888; font-size:12px; }

@media(max-width:991px){
    .hero2{ padding:130px 0 70px; min-height:auto; }
    .hero2-visual{ margin-top:70px; height:460px; }
    .hero2 h1{ letter-spacing:-1px; }
}
@media(max-width:576px){
    .hero2{ padding:110px 0 60px; }
    .hero2 h1{ font-size:32px; }
    .hero2-description{ font-size:15px; }
    .hero2-buttons{ flex-direction:column; }
    .hero2-buttons a{ text-align:center; justify-content:center; }
    .hero2-visual{ height:380px; }
    .hero2-dashboard-card{ width:270px; padding:16px; }
    .hero2-card-number{ margin:38px 0 22px; font-size:13px; letter-spacing:2px; }
    .hero2-floating-card{ width:150px; padding:12px; }
    .hero2-floating-card-one{ left:0; top:10px; }
    .hero2-floating-card-two{ right:0; bottom:0; }
    .hero2-floating-icon{ width:32px; height:32px; font-size:15px; margin-bottom:8px; }
    .hero2-floating-card h6{ font-size:13px; }
    .hero2-floating-card p{ font-size:10px; }
}

/*********Section Starts********************/
.section-subtitle{
    display:inline-block;
    padding:12px 18px;
    border-radius:999px;
    background:var(--gold-2);
    color:var(--black);
    font-weight:700;
    margin-bottom:18px;
	font-size:13.5px;
}

.section-title{
    font-size:2.6rem;
    margin-bottom:15px;
}


/********************DIFFERENT CARD BOX CSS*********************/
/*Feat Card Start Here */
.feat-card{
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:var(--radius-lg);
    padding:30px;
    height:100%;
    transition:var(--transition);
    box-shadow:var(--shadow-sm);
}


.feat-card:hover{
    transform:translateY(-4px);
    border-color:var(--gold-2);
    box-shadow:var(--shadow-hover);
}

.feat-card .stat{
    width:65px;
    height:65px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:linear-gradient(135deg,#f8e8bf,#dfbe85);
    font-size:28px;
    margin-bottom:20px;
}

.feat-card h5{
    font-weight:700;
    margin-bottom:12px;
}

.feat-card p{
    color:#6b7280;
    line-height:1.7;
}

/*Feat Card End Here */

/*Offer Card Start Here */
.offer-card{
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:var(--radius-lg);
    padding:28px;
    height:100%;
    transition:var(--transition);
    box-shadow:var(--shadow-sm);
}
.offer-card p{
 color:var(--steel);
 line-height:1.7;
 margin-bottom:22px;
}

.offer-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
    border-color:#FF9900;
}




.offer-logo{

    width:70px;
    height:70px;

    border-radius:20px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:34px;

    color:#fff;

    box-shadow:0 10px 25px rgba(255,153,0,.35);
}

.offer-logo.amazon{

    background:linear-gradient(
        135deg,
        #ffb347,
        #ff9900
    );
}

.offer-badge{

    background:rgba(223,190,133,.14); /*#fff6de; */

   /* color:#ff8c00; */

    border:1.5px solid var(--gold);

    font-size:12px;

    font-weight:700;

    padding:8px 14px;

    border-radius:30px;

    letter-spacing:.3px;
}

.offer-card h5{

    font-size:13.5px;

    color:#6d7280;

    font-weight:600;

    margin-bottom:10px;
}

.offer-value {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: #111827;
  margin-bottom: 15px;
}

.section-description{
	
	 color:var(--steel);

    line-height:1.7;

    margin-bottom:22px;
	

  /*  color:#6b7280;

    font-size:15px;

    margin-bottom:18px; */
}

.offer-valid{
  color: #1b231e;
  font-weight: 700;
  background: var(--gold-2); /*#f9f9f9; */
  
  padding: 8px 14px;
  border-radius: 30px;
}

.offer-logo.apple{
    background:linear-gradient(135deg,#5f5f5f,#111111);
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.offer-logo.flipkart{
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    box-shadow:0 10px 25px rgba(37,99,235,.30);
}

.offer-logo.travel{
    background:linear-gradient(135deg,#06b6d4,#0ea5e9);
    box-shadow:0 10px 25px rgba(14,165,233,.30);
}

.offer-logo.makemytrip{
    background:linear-gradient(135deg,#ff5252,#e6262c);
    box-shadow:0 10px 25px rgba(230,38,44,.30);
}

.offer-logo.swiggy{
    background:linear-gradient(135deg,#ffa64d,#fc8019);
    box-shadow:0 10px 25px rgba(252,128,25,.30);
}

.offer-logo.zomato{
    background:linear-gradient(135deg,#f24d5c,#e23744);
    box-shadow:0 10px 25px rgba(226,55,68,.30);
}

.offer-logo.easemytrip{
    background:linear-gradient(135deg,#26c6c2,#00a19c);
    box-shadow:0 10px 25px rgba(0,161,156,.30);
}

/*==============================
CATEGORY CARD
==============================*/

.category-card {
    background:var(--white);
    border:1px solid var(--gray-200);
    
	border-radius:var(--radius-lg);
    transition:var(--transition);
    box-shadow:var(--shadow-sm);
	text-align:center;
    padding:35px 20px;
    height:100%;
}

.category-card:hover {
	transform:translateY(-4px);
	box-shadow:var(--shadow-hover);	
}

.category-icon{
    width:80px;
    height:80px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:30px;
    margin:0 auto 25px;

}

.category-card p{
 color:var(--steel);
    line-height:1.7;
    margin-bottom:22px;
}

/*******************************
SELECTION GRID
*********************/

.selection-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
    gap:24px;
}

.selection-card{
    background:var(--white);
    border:1px solid #eceff4;
    border-radius:20px;
    padding:24px;
    cursor:pointer;
    transition:.3s ease;
    box-shadow:0 10px 30px rgba(15,23,42,.06);
    display:flex;
    flex-direction:column;
    height:100%;
}

.selection-card:hover{
    transform:translateY(-6px);
    border-color:var(--gold-2);
    box-shadow:0 18px 45px rgba(15,23,42,.12);
}

.selection-card.is-selected{
    border-color:var(--gold-2);
    background:#fffaf0;
    box-shadow:0 10px 30px rgba(212,168,83,.25);
}

.selection-icon{
    width:46px;
    height:46px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    margin-bottom:18px;
}

.selection-icon svg{
    width:22px;
    height:22px;
}

/* Plain-icon treatment for the "Build your own comparison" card picker
   (compare_builder.js) — matches the Smart Tools / Browse-by-Benefits
   cards elsewhere on the homepage: no colored badge behind the glyph,
   just a large gold icon. Left as its own class rather than reusing
   .selection-icon since search_results.js still uses the colored-badge
   version of that class on its own page. */
.selection-icon-plain{
    font-size:34px;
    color:var(--gold-2);
    line-height:1;
}

.selection-badge{
    display:inline-block;
    width:max-content;
    padding:4px 10px;
    border-radius:30px;
    background:#fdf5e7;
    color:var(--gold);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:18px;
}

.selection-card h3{
    font-family:'Space Grotesk',sans-serif;
    font-size:18px;
    line-height:1.35;
    color:var(--ink);
    margin:0 0 14px;
    font-weight:700;
}

.selection-card p{
	color:var(--steel);
    line-height:1.7;
    margin-bottom:22px;
	
	
   
}

.selection-footer{
    margin-top:auto;
    padding-top:16px;
    border-top:1px dashed #d8dee8;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#8b93a1;
    font-size:15px;
}

.selection-footer input{
    width:18px;
    height:18px;
    accent-color:var(--gold-2);
}

/*==============================
FEATURES
==============================*/

.feature-card{

    text-align:center;

    padding:35px 25px;

    height:100%;

	background:var(--surface);

    border:1px solid var(--gray-200);

    border-radius:var(--radius-lg);

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

    cursor:pointer;

}

/* Each card is now a clickable link (see index.php) — cursor above and
   the existing hover lift below make that obvious. */
.feature-card:hover {
 transform:translateY(-4px);

    box-shadow:var(--shadow-hover);	
}

.feature-card i{

    font-size:52px;

    color:var(--gold-2);

    margin-bottom:25px;




}

.feature-card p{

    color:var(--steel);

    line-height:1.7;

}

/*==============================
 CREDIT CARD
==============================*/

.credit-card-item{
    background:var(--white);
    border:1px solid var(--gray-200);
    border-radius:22px;
    padding:32px;
    height:100%;
    position:relative;
    overflow:hidden;

    transition:.35s;

    box-shadow:0 12px 35px rgba(0,0,0,.06);
}

.credit-card-item:hover{
    transform:translateY(-4px);
    border-color:var(--gold);
    box-shadow:var(--shadow-hover);
}


.credit-card-item h4{

    font-size:24px;

    margin:22px 0 14px;

    font-weight:700;

    color:var(--ink);

    line-height:1.35;
}

.credit-card-item p{

    color:var(--steel);

    line-height:1.7;

    margin-bottom:22px;
}

/* Badges */

.category-badge{

    display:inline-block;

    padding:7px 16px;

    border-radius:50px;

    color:#fff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.04em;
}

.network-badge{

    padding:7px 14px;

    border-radius:50px;

    background:#f4f6f8;

    color:var(--ink);

    font-size:12px;

    font-weight:700;
}

/* Feature List */

.feature-list{

    list-style:none;

    padding:0;

    margin:25px 0;
}

.feature-list li{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 0;

    color:var(--steel);

    border-bottom:1px dashed rgba(0,0,0,.08);
}

.feature-list li:last-child{

    border:none;
}

/* Buttons */

.credit-card-item .btn{

    border-radius:12px;

    font-weight:600;

    padding:12px 18px;
}

.credit-card-item .btn-primary{

    background:var(--gold);

    border-color:var(--gold);

    color:var(--deep);
}

.credit-card-item .btn-primary:hover{

    background:var(--gold-2);

    border-color:var(--gold-2);
}

.credit-card-item .btn-outline-primary{

    border-color:var(--gold);

    color:var(--gold);
}

.credit-card-item .btn-outline-primary:hover{

    background:var(--gold);

    color:var(--deep);
}

.card-icon{

    width:64px;
    height:64px;

    border-radius:18px;

    background:linear-gradient(135deg,var(--gold),#f5d89d);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:30px;

    margin-bottom:22px;
}

/*==============================
CARD HEADER
==============================*/

.credit-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
}

.credit-card-left{
    display:flex;
    align-items:center;
    gap:14px;
}

.card-icon{
    width:52px;
    height:52px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:0; /* IMPORTANT */
    border-radius:14px;
    background:linear-gradient(135deg,var(--gold),#f4d79d);
    color:#fff;
    font-size:22px;
}

.category-badge{
    margin:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.network-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.category-badge.cashback{
    background:#1e8e5a;
}

.category-badge.travel{
    background:#2563eb;
}

.category-badge.fuel{
    background:#ffc107;
    color:#111;
}

.category-badge.shopping {
	 background:#a6c79d;
    color:#111;
}

.white-title{

font-size:42px;

font-weight:800;

line-height:1.1;

color:#fff;

}

.white-title span{

background:var(--white);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}


/*==============================
BANK TILE
==============================*/

/* Wraps onto additional rows as more banks are promoted, rather than
   squeezing every tile into one shrinking row (Bootstrap's equal-width
   `.col-lg` used to do exactly that once promoted_banks grew past 6). */
.bank-tiles-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
}

.bank-tile {
 background:var(--surface);

    border:1px solid var(--gray-200);

    border-radius:var(--radius-lg);

    /* transform/box-shadow ease in for the lift-on-hover effect, but
       color/background switch instantly — otherwise a quick hover
       shows the gold text fading in through duller in-between shades
       instead of reading as gold right away. */
    transition:transform var(--transition), box-shadow var(--transition);

    box-shadow:var(--shadow-sm);

	padding:35px 20px;

    text-align:center;

    font-weight:600;

    cursor:pointer;

    /* Fixed footprint so tiles never shrink to fit a growing row —
       excess tiles wrap onto a new line inside .bank-tiles-row instead. */
    flex:0 0 160px;
    width:160px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:110px;

    /* .bank-tile is now an <a> (was a plain <div>) so it can link to
       bank_cards.php — reset link styling here directly rather than
       leaning on Bootstrap's text-decoration-none/text-reset utility
       classes, so the tile never flashes as a blue underlined link
       while/if Bootstrap's CSS is still loading. */
    color:var(--ink);
    text-decoration:none;
}

.bank-tile:visited{
    color:var(--ink);
}

.bank-tile:hover,
.bank-tile:visited:hover,
.bank-tile:link:hover {
 transform:translateY(-4px);

    box-shadow:var(--shadow-hover);

	 background:var(--ink) !important;

    color:var(--gold-2) !important;
}


/*==============================
TOOLS
==============================*/

.tool-card{

	background:var(--surface);

    border:1px solid var(--gray-200);

    border-radius:var(--radius-lg);

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

    text-align:center;

    padding:35px 25px;

    height:100%;

    cursor:pointer;

}

/* Whole card is now a clickable link (see index.php) — same lift-on-hover
   affordance as .category-card elsewhere on the page. */
.tool-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
}

.tool-card i{

    font-size:46px;

    color:var(--primary);

    margin-bottom:20px;
	
	transform:translateY(-4px);

    box-shadow:var(--shadow-hover);	

}

.tool-card p{

    color:var(--steel);

    line-height:1.7;

    margin-bottom:22px;
}


/******************************
footer
*******************************/

.stats-band{
  background:var(--ink);
  color:var(--text-on-dark);
  padding:3.5rem 0;
}
.stats-band .num{font-family:'IBM Plex Mono',monospace;font-size:2.1rem;color:var(--gold-2);font-weight:500;}
.stats-band .label{color:#9AA1AF;font-size:.85rem;}

.cta{
  /*background:var(--navy); */
  background-color: rgb(36, 36, 36);
  color:var(--text-on-dark);
  padding:5rem 0;
  text-align:center;
}

footer{background:var(--ink);color:#8A909C;padding:2.5rem 0;font-size:.85rem;}
footer a{color:#C7CCD6;text-decoration:none;}
footer a:hover{color:#fff;}

/*==============================
SITE FOOTER — shared 4-column footer (includes/footer.php), used by
every page in place of the old one-line copyright + quick-nav footer.
Built on top of the base footer{}/footer a{} rules above, which still
apply here (dark background, muted link color, white on hover).
==============================*/
.site-footer{
    padding:4rem 0 2rem;
}

.site-footer-top{
    display:grid;
    grid-template-columns:minmax(240px,1.3fr) repeat(3,auto);
    gap:2.5rem 4.5rem;
}

.site-footer-brand{
    max-width:340px;
}

.site-footer-logo{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Space Grotesk',sans-serif;
    font-size:1.3rem;
    font-weight:700;
    color:var(--white) !important;
}

.site-footer-logo:hover{
    color:var(--white) !important;
}

.site-footer-dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--gold);
    margin-top:-14px;
}

.site-footer-tagline{
    margin:14px 0 0;
    line-height:1.7;
    color:#8A909C;
}

.site-footer-heading{
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--gold-2);
    margin-bottom:18px;
}

.site-footer-links{
    list-style:none;
    margin:0;
    padding:0;
}

.site-footer-links li{
    margin-bottom:12px;
}

.site-footer-links a{
    font-size:.9rem;
}

.site-footer-connect a{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.site-footer-bottom{
    margin-top:3rem;
    padding-top:1.5rem;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:.8rem;
    color:#6C7280;
}

@media (max-width:767px){
    .site-footer-top{
        grid-template-columns:1fr;
    }
}

/*==============================
WALLET PAGE — added for Add-Card form + wallet list
(new section, does not modify any existing rules above)
==============================*/

/* Signed-in-as strip (includes/wallet_account_bar.php), shown right
   under the navbar on every wallet/*.php page now that they require
   Google sign-in. */
.wallet-account-bar{
    background:var(--navy);
    color:#C7CCD6;
    font-size:.85rem;
    padding:.6rem 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.wallet-account-avatar{
    width:22px;
    height:22px;
    border-radius:50%;
    object-fit:cover;
}

.wallet-account-sep{
    color:#4B5566;
}

.wallet-account-signout{
    color:var(--gold-2);
    text-decoration:none;
    font-weight:600;
}

.wallet-account-signout:hover{
    color:#fff;
}

.wallet-form-card{
    background:var(--surface);
    border:1px solid var(--gray-200);
    border-radius:var(--radius-lg);
    padding:36px;
    box-shadow:var(--shadow-sm);
}

.wallet-form-card h4{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    color:var(--ink);
}

.wallet-form-card .form-label{
    font-size:13.5px;
    color:var(--steel);
    margin-bottom:8px;
}

.wallet-form-card .form-select,
.wallet-form-card .form-control{
    border:1px solid var(--gray-200);
    border-radius:12px;
    padding:12px 16px;
}

.wallet-form-card .form-select:focus,
.wallet-form-card .form-control:focus{
    border-color:var(--gold-2);
    box-shadow:0 0 0 .2rem rgba(223,190,133,.25);
}

/* Searchable "Select Card" component */

.searchable-select{
    position:relative;
}

.search-select-options{
    display:none;
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    max-height:260px;
    overflow-y:auto;
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:12px;
    box-shadow:var(--shadow-md);
    z-index:20;
}

.search-select-options.open{
    display:block;
}

.search-select-item{
    padding:11px 16px;
    font-size:14.5px;
    color:var(--ink);
    cursor:pointer;
}

.search-select-item:hover{
    background:#fdf5e7;
    color:var(--gold-dark);
}

.search-select-empty{
    padding:14px 16px;
    font-size:14px;
    color:var(--steel);
    text-align:center;
}

/* Global "Google-like" hero search dropdown (index.php #search) —
   grouped results (Cards / Banks / Benefits / Lounges) reuse the
   .search-select-* dropdown above; these add the group headers,
   the small sublabel line under each result, and keyboard highlight. */

#globalSearchResults{
    text-align:left;
    max-height:360px;
}

.global-search-group-label{
    padding:10px 16px 6px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--steel);
    background:#faf9f7;
}

.global-search-sublabel{
    font-size:12.5px;
    color:var(--steel);
    margin-top:2px;
}

.search-select-item.is-highlighted{
    background:#fdf5e7;
    color:var(--gold-dark);
}

/* Wallet form status message */

.wallet-form-msg{
    font-size:14px;
    font-weight:600;
    min-height:20px;
}

.wallet-form-msg.is-success{ color:#1e8e5a; }
.wallet-form-msg.is-error{ color:#dc2626; }

/* Wallet cards grid — reuses .selection-card, adds a remove button */

.wallet-card{
    position:relative;
    transition:.25s ease;
}

.wallet-card.is-removing{
    opacity:.35;
    pointer-events:none;
}

.wallet-remove-btn{
    border:none;
    background:transparent;
    color:#b91c1c;
    font-size:16px;
    padding:4px 6px;
    border-radius:8px;
    transition:.2s ease;
    cursor:pointer;
}

.wallet-remove-btn:hover{
    background:#fee2e2;
}

/* .selection-footer-actions / .wallet-save-btn-footer — the "save to
 * wallet" icon paired with the existing remove-from-comparison (trash)
 * button on compare_cards.php's "Currently Comparing" cards (see
 * compare_cards_public.js's selectionCardHTML/walletSaveButtonHTML).
 * Sits inline in the footer's normal flow rather than pinned absolute
 * like .wallet-save-btn-compact on the grid pages — these cards aren't
 * a stretched-link tile, so there's no overlay to pin above. Neutral by
 * default, red trash = destructive (remove from THIS comparison),
 * gold/forest = positive (save to wallet) — same color logic already
 * used elsewhere on the page. */
.selection-footer-actions{
    display:flex;
    align-items:center;
    gap:2px;
    flex-shrink:0;
}

.wallet-save-btn-footer{
    border:none;
    background:transparent;
    color:#8b93a1;
    font-size:16px;
    padding:4px 6px;
    border-radius:8px;
    transition:.2s ease;
    cursor:pointer;
}

.wallet-save-btn-footer:hover{
    background:#fdf5e7;
    color:var(--gold-dark);
}

.wallet-save-btn-footer.is-saved{
    color:var(--forest);
}

.wallet-save-btn-footer.is-saved:hover{
    background:#e9f5ee;
}

/* .offer-card-log-btn — "Log this saving" on offer tiles that link
 * straight to a real offer (card.php's offers preview, all_offers.php's
 * single-offer brand groups) — see assets/js/log_saving_modal.js. Sits
 * as a visible sibling BELOW the tile's stretched-link content, same
 * placement co_branded_cards.php's "Apply Now" button already uses on
 * an identical stretched-link tile, not an absolute overlay — this
 * grid's tiles vary in height with their offer text, so pinning it to a
 * fixed corner would drift across rows. */
.offer-card-log-btn{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin-top:12px;
    background:transparent;
    border:1.5px solid var(--gold);
    color:var(--gold-dark);
    font-weight:600;
    font-size:12.5px;
    padding:7px 12px;
    border-radius:8px;
    cursor:pointer;
    transition:var(--transition);
}

.offer-card-log-btn:hover{
    background:var(--gold);
    color:var(--deep);
}

.offer-card-log-btn.is-logged,
.offer-card-log-btn.is-logged:hover{
    background:var(--forest);
    border-color:var(--forest);
    color:#fff;
    cursor:default;
}

/* offer_brand.php's own offer-card-item tiles already put "View
 * Details" as a full-width .offer-card-btn at the bottom of the card
 * body — this wraps it alongside the log button as two equal-width
 * buttons in a row instead of two stacked full-width ones, so adding
 * the second action doesn't make every tile noticeably taller. */
.offer-card-actions{
    display:flex;
    gap:8px;
    margin-top:auto;
}

.offer-card-actions .offer-card-btn,
.offer-card-actions .offer-card-log-btn{
    flex:1 1 0;
    margin-top:0;
    width:auto;
}

.offer-logo-dynamic{
    width:70px;
    height:70px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:1px solid var(--gray-200);
    box-shadow:var(--shadow-sm);
    padding:0;
    flex-shrink:0;
}

.offer-logo-dynamic img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:8px;
    box-sizing:border-box;
}

.offer-logo-dynamic i{
    color:var(--gold-2);
    font-size:34px;
}

/* Gold badge icon style — used by the "Latest Credit Card Offers" tiles.
   Same size/shape as .offer-logo, but a soft gold-tinted, gold-bordered
   square with a gold icon instead of each brand's own colored gradient
   background (amazon/apple/flipkart/... below), matching the site's own
   gold accent (--gold/--gold-dark) rather than per-brand colors. */
.offer-logo.offer-logo-gold{
    background:rgba(223,190,133,.14);
    border:1.5px solid var(--gold);
    box-shadow:none;
    color:var(--gold-dark);
}

.offer-logo.offer-logo-gold i{
    color:var(--gold-dark);
}

/* Compact size for .offer-logo when it sits inline next to the brand name
   (instead of stacked above it) — shrinks the badge and its icon so the
   row reads as one compact header instead of a giant icon beside small
   text, which is what lets the card's overall height come down. */
.offer-logo.offer-logo-sm{
    width:52px;
    height:52px;
    border-radius:14px;
}

.offer-logo.offer-logo-sm i{
    font-size:24px;
}

.offer-card-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.offer-brand-name{
    font-size:15px;
    font-weight:700;
    line-height:1.3;
    color:var(--ink);
    margin:0;
}

.offer-card-name{
    margin-top:12px;
    padding-top:12px;
    border-top:1px dashed #d8dee8;
    font-size:12.5px;
    font-weight:600;
    color:var(--steel);
}

/* Extra breathing room between the "Valid on: ..." line and the
   "Valid till ..." pill right under it — scoped to offer_description.php's
   related-offers cards only (assets/js/offer_description_public.js), via
   this extra class rather than the shared .offer-valid rule used all
   over the rest of the site, so nothing else shifts. */
.offer-valid.offer-valid-related{
    display:inline-block;
    margin-top:10px;
}

/* Scoped to offer_description.php's "More <Brand> Offers" related-offers
   grid (#relatedOffersGrid, built by assets/js/offer_description_public.js)
   only — breathing room between the brand name and the offer text right
   below it, plus a smaller category badge and "Valid till" pill so they
   read as secondary details rather than competing with the shorter card
   content here. .offer-brand-name/.offer-badge/.offer-valid are shared
   classes used across many other pages, so this is scoped by the grid's
   own id rather than edited directly — nothing outside this section changes. */
#relatedOffersGrid .offer-brand-name{
    margin-bottom:8px;
}

#relatedOffersGrid .offer-badge{
    font-size:10px;
    padding:5px 10px;
}

#relatedOffersGrid .offer-valid{
    font-size:11px;
    padding:5px 10px;
}

/* Same treatment, scoped to all_offers.php's main offers grid
   (#publicOffersGrid, built by assets/js/all_offers.js) — breathing room
   between the brand name and the offer text below it, plus a smaller
   category badge and "Valid till" pill. Scoped by the grid's own id for
   the same reason as #relatedOffersGrid above: .offer-brand-name/
   .offer-badge/.offer-valid are shared across many other pages. */
#publicOffersGrid .offer-brand-name{
    margin-bottom:8px;
}

#publicOffersGrid .offer-badge{
    font-size:10px;
    padding:5px 10px;
}

#publicOffersGrid .offer-valid{
    font-size:11px;
    padding:5px 10px;
}

/* Same treatment, scoped to card.php's "Offers On The <Card>" preview
   grid (#offersPreviewGrid, built by assets/js/card_page.js) — breathing
   room between the brand name and the offer text below it, plus a
   smaller category badge and "Valid till" pill. Scoped by the grid's own
   id for the same reason as the two grids above. */
#offersPreviewGrid .offer-brand-name{
    margin-bottom:8px;
}

#offersPreviewGrid .offer-badge{
    font-size:10px;
    padding:5px 10px;
}

#offersPreviewGrid .offer-valid{
    font-size:11px;
    padding:5px 10px;
}

/* Scoped to benefit_item_detail.php's detail card
   (#benefitDetailContainer, built by assets/js/benefit_item_detail.js) —
   a smaller "{card} — {bank}" badge, and a smaller "Open Original
   Source" button. .offer-detail-card-badge and .btn-outline-gold are
   both shared across many other pages, so scoped by the container's own
   id rather than edited directly — nothing outside this page changes. */
#benefitDetailContainer .offer-detail-card-badge{
    font-size:15px;
    padding:3px 8px;
}

#benefitDetailContainer .btn-outline-gold{
    font-size:11px;
    padding:6px 14px;
}

.wallet-card{
    cursor:pointer;
}

.wallet-card-hint{
    color:var(--steel);
}

.wallet-card.is-active{
    border-color:var(--gold);
    box-shadow:0 0 0 2px var(--gold), 0 18px 45px rgba(15,23,42,.12);
}

.wallet-card.is-active .wallet-card-hint{
    color:var(--gold-dark);
    font-weight:700;
}

.offer-filter-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    margin-top:18px;
}

.offer-filter-bar span{
    font-weight:600;
    color:var(--ink);
    font-size:14.5px;
}

.offer-card{
    position:relative;
}

.offer-count-badge{
    position:absolute;
    top:16px;
    right:16px;
    background:var(--gold);
    color:var(--deep);
    font-size:11px;
    font-weight:700;
    padding:4px 10px;
    border-radius:30px;
    letter-spacing:.02em;
}

.offer-detail-card{
    background:var(--surface);
    border:1px solid var(--gray-200);
    border-radius:var(--radius-lg);
    padding:32px;
    box-shadow:var(--shadow-sm);
    margin-bottom:24px;
    position:relative;
}

.offer-detail-index{
    font-size:12px;
    font-weight:700;
    color:var(--gold-dark);
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:14px;
}

.offer-detail-top-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.offer-detail-header{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:0;
}

.offer-detail-header .offer-logo-dynamic{
    width:64px;
    height:64px;
}

.offer-detail-brand-name{
    font-family:'Space Grotesk',sans-serif;
    font-size:24px;
    font-weight:700;
    margin:0 0 4px;
    color:var(--ink);
}

.offer-visit-btn{
    white-space:nowrap;
    flex-shrink:0;
}

.offer-copy-row{
    margin-bottom:20px;
}

.offer-detail-highlight{
    font-weight:600;
    color:var(--gold-dark);
    margin:0;
}

.offer-detail-body{
    font-size:15px;
    line-height:1.7;
    color:var(--steel);
    margin-bottom:18px;
}

.offer-detail-meta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    padding-top:16px;
    border-top:1px dashed #d8dee8;
}

.offer-detail-tag{
    background:var(--gray-200);
    color:var(--ink);
    font-size:12.5px;
    font-weight:600;
    padding:6px 14px;
    border-radius:30px;
}

.offer-fact-chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:22px;
}

.offer-fact-chip{
    background:#fdf5e7;
    color:var(--gold-dark);
    font-size:13px;
    font-weight:700;
    padding:8px 16px;
    border-radius:30px;
    display:inline-flex;
    align-items:center;
}

.offer-cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:24px;
}

.copy-code-btn{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:.02em;
}

.offer-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:18px;
}

.offer-tab{
    border:1px solid var(--gray-200);
    background:#fff;
    color:var(--steel);
    font-weight:700;
    font-size:13.5px;
    padding:9px 18px;
    border-radius:30px;
    cursor:pointer;
    transition:.2s ease;
}

.offer-tab:hover{
    border-color:var(--gold-2);
    color:var(--gold-dark);
}

.offer-tab.active{
    background:var(--gold);
    border-color:var(--gold);
    color:var(--deep);
}

.offer-detail-card-badge{
    display:inline-flex;
    align-items:center;
    background:#fdf5e7;
    color:var(--gold-dark);
    font-size:12.5px;
    font-weight:700;
    padding:6px 14px;
    border-radius:30px;
    margin-bottom:18px;
}

.offer-detail-body p{
    margin:0 0 12px;
}

.offer-detail-body p:last-child{
    margin-bottom:0;
}

.offer-detail-body ul,
.offer-detail-body ol{
    margin:0 0 12px;
    padding-left:20px;
}

.offer-detail-body li{
    margin-bottom:6px;
}

.offer-detail-body a{
    color:var(--gold-dark);
    font-weight:600;
}

.offer-coupon-chip{
    display:inline-flex;
    align-items:center;
    background:#fdf5e7;
    color:var(--gold-dark);
    font-size:13px;
    font-weight:700;
    font-family:inherit;
    padding:8px 16px;
    border:1px dashed var(--gold-2);
    border-radius:30px;
    cursor:pointer;
    transition:.2s ease;
}

.offer-coupon-chip:hover{
    background:#f7ead0;
}

.offer-tnc-toggle{
    margin-top:8px;
    margin-bottom:18px;
}

.offer-tnc-toggle-btn{
    background:none;
    border:none;
    padding:0;
    font-size:13.5px;
    font-weight:700;
    color:var(--gold-dark);
    cursor:pointer;
}

.offer-tnc-toggle-btn:hover{
    text-decoration:underline;
}

.offer-tnc-body{
    margin-top:14px;
    padding-top:14px;
    border-top:1px dashed #d8dee8;
    font-size:14px;
}

.offer-tnc-source-link{
    text-decoration:none;
}

.offer-tnc-source-link:hover{
    background:var(--gray-200);
}

/* Card Benefits page */

.benefits-header-row{
    display:flex;
    align-items:center;
    gap:24px;
    margin-bottom:36px;
    flex-wrap:wrap;
}

.benefits-card-art{
    width:120px;
    height:76px;
    border-radius:12px;
    object-fit:cover;
    box-shadow:var(--shadow-sm);
}

.benefits-card-art-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#1a1a1a,#3a3a3a 55%,#111);
    color:rgba(255,255,255,.55);
    font-size:28px;
}

.benefits-header-name{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    color:var(--ink);
    margin:0 0 10px;
}

.benefits-header-badges{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.benefit-accordion-item{
    border:1px solid var(--gray-200);
    border-radius:14px !important;
    overflow:hidden;
    margin-bottom:14px;
}

.benefit-accordion-item .accordion-button{
    font-weight:700;
    color:var(--ink);
    background:var(--surface);
}

.benefit-accordion-item .accordion-button:not(.collapsed){
    background:#fdf5e7;
    color:var(--gold-dark);
    box-shadow:none;
}

.benefit-accordion-item .accordion-button:focus{
    box-shadow:none;
    border-color:var(--gray-200);
}

.benefit-subgroup{
    margin-bottom:26px;
}

.benefit-subgroup:last-child{
    margin-bottom:0;
}

.benefit-subgroup-title{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--steel);
    margin-bottom:14px;
}

.benefit-item-card{
    background:var(--surface);
    border:1px solid var(--gray-200);
    border-radius:12px;
    padding:18px 20px;
    margin-bottom:12px;
}

.benefit-item-card:last-child{
    margin-bottom:0;
}

.benefit-item-title-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:10px;
}

.benefit-item-title{
    font-weight:700;
    color:var(--ink);
    font-size:15px;
}

.benefit-item-brand{
    font-size:13px;
    color:var(--steel);
    margin-top:2px;
}

.benefit-fact-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
}

.benefit-fact-chip{
    background:#f4f6f9;
    color:var(--ink);
    font-size:12.5px;
    font-weight:600;
    padding:6px 12px;
    border-radius:30px;
}

.benefit-category-chip{
    background:#fdf5e7;
    color:var(--gold-dark);
    flex-shrink:0;
}

.benefit-item-note{
    font-size:13.5px;
    color:var(--steel);
    margin:0;
    line-height:1.6;
}

.wallet-benefits-link{
    display:inline-flex;
    align-items:center;
    font-size:12.5px;
    font-weight:700;
    color:var(--gold-dark);
    text-decoration:none;
    margin-top:-4px;
    margin-bottom:12px;
}

.wallet-benefits-link:hover{
    text-decoration:underline;
    color:var(--gold-dark);
}

.benefit-group-rows{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.benefit-group-row{
    padding-top:12px;
    border-top:1px dashed #d8dee8;
    cursor:pointer;
    transition:.15s ease;
}

.benefit-group-row:hover .benefit-group-row-head{
    color:var(--gold-dark);
}

.benefit-group-row:first-child{
    padding-top:0;
    border-top:none;
}

.benefit-group-row-head{
    font-weight:700;
    font-size:14px;
    color:var(--ink);
    margin-bottom:4px;
}

.benefit-group-row-teaser{
    font-size:13px;
    color:var(--steel);
    line-height:1.5;
}

/* Compare Cards page */

.comparison-table{
    border-collapse:separate;
    border-spacing:0;
    min-width:720px;
}

.comparison-table th,
.comparison-table td{
    border:1px solid var(--gray-200);
    vertical-align:top;
    padding:16px;
}

.comparison-row-label-header{
    background:var(--surface);
    min-width:180px;
}

.comparison-row-label{
    background:var(--surface);
    font-weight:700;
    color:var(--ink);
    font-size:14px;
    white-space:nowrap;
}

.comparison-card-header{
    text-align:center;
    background:var(--surface);
    min-width:220px;
}

.comparison-card-art{
    width:100px;
    height:64px;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:10px;
    box-shadow:var(--shadow-sm);
}

.comparison-card-art-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#1a1a1a,#3a3a3a 55%,#111);
    color:rgba(255,255,255,.55);
    font-size:22px;
}

.comparison-card-name{
    font-weight:700;
    color:var(--ink);
    font-size:14.5px;
}

.comparison-card-sub{
    font-size:12.5px;
    color:var(--steel);
    margin-top:2px;
}

.comparison-cell{
    text-align:center;
}

.comparison-cell-empty{
    color:var(--gray-200);
    font-size:18px;
    text-align:center;
}

.comparison-cell-link{
    display:flex;
    flex-direction:column;
    gap:6px;
    text-decoration:none;
    color:inherit;
}

.comparison-cell-count{
    font-weight:700;
    color:var(--gold-dark);
    font-size:13.5px;
}

.comparison-cell-teaser{
    font-size:12.5px;
    color:var(--steel);
    line-height:1.4;
}

.comparison-cell-link:hover .comparison-cell-count{
    text-decoration:underline;
}

/* Empty wallet state */

.wallet-empty-state{
    text-align:center;
    padding:60px 20px;
    color:var(--steel);
}

.wallet-empty-state i{
    font-size:46px;
    color:var(--gold-2);
    margin-bottom:16px;
    display:block;
}

.wallet-empty-state h5{
    color:var(--ink);
    font-weight:700;
    margin-bottom:8px;
}

/*==============================
ALL OFFERS V2 (experiment) — unified search + category pills
==============================*/

.unified-search-wrap{
    position:relative;
}

.unified-search-wrap i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:var(--steel);
    font-size:16px;
    pointer-events:none;
}

.unified-search-input{
    width:100%;
    padding:14px 18px 14px 46px;
    border:1px solid var(--gray-200);
    border-radius:14px;
    font-size:15px;
    background:#fff;
    transition:var(--transition);
}

.unified-search-input:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(223,190,133,.25);
}

.category-pill-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-top:16px;
    position:relative;
}

.category-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 16px;
    border-radius:30px;
    border:1px solid var(--gray-200);
    background:#fff;
    color:var(--ink);
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    white-space:nowrap;
}

.category-pill:hover{
    border-color:var(--gold);
}

.category-pill.active{
    background:var(--deep);
    border-color:var(--deep);
    color:#fff;
}

.category-pill i{
    font-size:14px;
}

.category-pill-more-wrap{
    position:relative;
}

.category-pill-more-menu{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-hover);
    padding:8px;
    min-width:200px;
    max-height:280px;
    overflow-y:auto;
    z-index:20;
}

.category-pill-more-menu.open{
    display:block;
}

.category-pill-more-item{
    padding:9px 12px;
    border-radius:10px;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    transition:var(--transition);
}

.category-pill-more-item:hover,
.category-pill-more-item.active{
    background:var(--surface);
    color:var(--gold-dark);
}

.popular-strip-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}

.popular-strip-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:17px;
    font-weight:700;
    color:var(--ink);
}

.popular-strip-title i{
    color:#ff7a1a;
}

.popular-strip-viewall{
    font-size:13.5px;
    font-weight:600;
    color:var(--gold-dark);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.popular-strip-viewall:hover{
    text-decoration:underline;
}

.popular-strip-scroll{
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding-bottom:10px;
    scroll-snap-type:x proximity;
}

.popular-strip-scroll::-webkit-scrollbar{
    height:6px;
}

.popular-strip-scroll::-webkit-scrollbar-thumb{
    background:var(--gray-200);
    border-radius:10px;
}

.popular-strip-item{
    flex:0 0 260px;
    scroll-snap-align:start;
}

/*==============================
BRAND OFFERS MODAL (grouped offers)
==============================*/

.offer-more-badge{
    background:var(--deep);
    color:#fff;
    font-size:11.5px;
    font-weight:700;
    padding:6px 12px;
    border-radius:30px;
    letter-spacing:.02em;
    white-space:nowrap;
}

.brand-offer-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:16px 0;
    border-bottom:1px solid var(--gray-200);
    text-decoration:none;
    color:inherit;
}

.brand-offer-row:last-child{
    border-bottom:none;
}

.brand-offer-row:hover .brand-offer-highlight{
    color:var(--gold-dark);
}

.brand-offer-main{
    flex:1;
    min-width:0;
}

.brand-offer-highlight{
    font-size:16px;
    font-weight:700;
    color:var(--ink);
    margin-bottom:4px;
    transition:var(--transition);
}

.brand-offer-meta{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    font-size:12.5px;
    color:var(--steel);
}

/*==============================
LOUNGE FINDER (index.php #lounge-finder)
==============================*/

.lounge-filter-label{
    font-size:13px;
    font-weight:600;
    color:var(--steel);
}

.lounge-search-status{
    font-size:14px;
    font-weight:600;
    color:var(--steel);
    margin-bottom:18px;
}

.lounge-results-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    gap:20px;
}

.lounge-result-card{
    background:var(--white);
    border:1px solid var(--gray-200);
    border-radius:var(--radius-lg);
    padding:22px;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

.lounge-result-card:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-2px);
}

.lounge-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.lounge-card-top h5{
    font-size:17px;
    font-weight:700;
    color:var(--ink);
    margin:0;
}

.lounge-card-airport,
.lounge-card-location{
    font-size:14px;
    color:var(--navy);
    margin-bottom:4px;
}

.lounge-card-airport i,
.lounge-card-location i{
    color:var(--gold-dark);
    width:16px;
    text-align:center;
}

.lounge-country-code{
    font-size:11px;
    font-weight:700;
    color:var(--steel);
    border:1px solid var(--gray-200);
    border-radius:4px;
    padding:0 4px;
}

.lounge-badge-row{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:12px 0 8px;
}

.lounge-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:20px;
    white-space:nowrap;
}

.lounge-badge.domestic{
    background:rgba(37,99,235,.1);
    color:#2563eb;
}

.lounge-badge.international{
    background:rgba(124,58,237,.1);
    color:#7c3aed;
}

.lounge-badge.side{
    background:var(--gray-100);
    color:var(--gray-600);
}

.lounge-badge.code{
    background:var(--gray-100);
    color:var(--navy);
    text-transform:none;
}

.lounge-badge.active{
    background:rgba(30,142,90,.1);
    color:#1e8e5a;
}

.lounge-badge.inactive{
    background:rgba(220,38,38,.1);
    color:#dc2626;
}

.lounge-badge.prebook{
    background:rgba(202,138,4,.12);
    color:#ca8a04;
}

.lounge-network-line{
    font-size:13px;
    font-weight:600;
    color:var(--gold-dark);
    margin-bottom:10px;
}

.lounge-network-line i{
    width:16px;
    text-align:center;
}

.lounge-meta{
    border-top:1px dashed var(--gray-200);
    padding-top:10px;
}

.lounge-meta-row{
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:13px;
    color:var(--navy);
    margin-bottom:6px;
    line-height:1.5;
}

.lounge-meta-row i{
    color:var(--steel);
    width:16px;
    text-align:center;
    margin-top:2px;
}

.lounge-meta-label{
    font-weight:600;
    color:var(--steel);
    flex-shrink:0;
}

.lounge-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:14px;
    padding-top:10px;
    border-top:1px solid var(--gray-200);
    font-size:11.5px;
    color:var(--steel);
}

.lounge-card-footer span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:60%;
}

.lounge-verified{
    color:#1e8e5a;
    font-weight:600;
    flex-shrink:0;
}

.brand-offer-arrow{
    color:var(--steel);
    font-size:16px;
    flex-shrink:0;
    margin-top:4px;
}

/*==============================
OFFER BRAND PAGE (/offers/{brand-slug}/, offer_brand.php + offer_brand.js)
Redesigned Sep 2026: the offer list was a click-to-expand accordion
(reusing .brand-offer-* — the "+N more" modal's row styling, still used
by all_offers.js/search_results.js for that separate feature, untouched
here) — now it's this icon card grid instead, styled after the existing
.lounge-results-grid/.lounge-result-card pattern for visual consistency
with the rest of the site. Full offer detail now opens in
#offerDetailModal (see offer_brand.php) using .offer-detail-card /
.offer-fact-chip / etc. (offer_description.php's detail styling) inside
.offer-detail-card-inline below, same as the old inline panel did.
==============================*/

.offer-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:20px;
}

/* Renamed from .offer-card to .offer-card-item (Sep 2026) — this is
   offer_brand.php's horizontal icon+body layout, a different component
   that happened to reuse the site's original, much more widely used
   vertical .offer-card class (used on bank_cards.php, card.php, cards.php,
   co_branded_cards.php, fee_category.php, card_benefits_browse.php,
   index.php, and templated by 12+ assets/js/*.js files). Because this
   rule came later in the cascade and added display:flex/flex-direction:row
   (which the original card never had), it was silently turning every one
   of those vertical cards' stacked children — icon row, title, bank name,
   description, badge — into a horizontal row, spilling sideways out of
   the card box into neighboring grid columns. That's the "broken CSS on
   index.php" bug reported Sep 2026; index.php was just the page most
   visibly affected, not the only one. See offer_brand.php's matching
   class-name update alongside this rename. */
.offer-card-item{
    background:var(--white);
    border:1px solid var(--gray-200);
    border-radius:var(--radius-lg);
    padding:22px;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:16px;
    height:100%;
}

.offer-card-item:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-3px);
    border-color:var(--gold-2);
}

.offer-card-icon{
    width:48px;
    height:48px;
    border-radius:12px;
    background:linear-gradient(135deg, var(--gold), var(--gold-2));
    color:var(--deep);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
}

.offer-card-body{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
}

.offer-card-highlight{
    font-size:16px;
    font-weight:700;
    color:var(--ink);
    margin-bottom:8px;
    line-height:1.35;
    flex-grow:1;
}

.offer-card-meta{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:12.5px;
    color:var(--steel);
    margin-bottom:16px;
}

.offer-card-meta span{
    display:flex;
    align-items:center;
    gap:6px;
}

.offer-card-meta i{
    color:var(--gold-dark);
    width:14px;
    text-align:center;
    flex-shrink:0;
}

.offer-card-category-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:20px;
    background:rgba(223,190,133,.18);
    color:var(--gold-dark);
    align-self:flex-start;
    margin-bottom:14px;
}

.offer-card-btn{
    margin-top:auto;
    background:transparent;
    border:1.5px solid var(--gold);
    color:var(--gold-dark);
    font-weight:600;
    font-size:13.5px;
    padding:9px 16px;
    border-radius:8px;
    width:100%;
    text-align:center;
    cursor:pointer;
    transition:var(--transition);
}

.offer-card-btn:hover{
    background:var(--gold);
    color:var(--deep);
}

.offer-detail-card-inline{
    background:var(--gray-100);
    border:1px solid var(--gray-200);
    border-radius:var(--radius-lg);
    padding:20px 24px;
    box-shadow:none;
    margin-bottom:0;
}

/*==============================
BEST CARD FOR YOU — ranked card grid (reuses .selection-card / gold theme)
==============================*/

.ranked-card{
    cursor:default;
}

.ranked-card-art{
    width:64px;
    height:64px;
    border-radius:12px;
    object-fit:cover;
    box-shadow:var(--shadow-sm);
    flex-shrink:0;
}

.ranked-card-art-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#1a1a1a,#3a3a3a 55%,#111);
    color:rgba(255,255,255,.55);
    font-size:22px;
}

.ranked-card-name{
    font-family:'Space Grotesk',sans-serif;
    font-size:16px;
    font-weight:700;
    color:var(--ink);
    line-height:1.3;
}

.rank-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.03em;
    color:var(--steel);
    background:var(--surface);
    border:1px solid var(--gray-200);
    padding:3px 10px;
    border-radius:999px;
    margin-bottom:6px;
}

.rank-pill-top{
    color:#8A6D1B;
    background:linear-gradient(135deg,#fff6de,#fdf0cf);
    border-color:var(--gold-2);
}

.ranked-card-stats{
    background:var(--surface);
    border-radius:14px;
    padding:12px 6px;
}

.ranked-stat-label{
    font-size:11px;
    color:var(--steel);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.03em;
    margin-bottom:2px;
}

.ranked-stat-value{
    font-size:15px;
    font-weight:800;
    font-family:'Space Grotesk',sans-serif;
}

.ranked-card .breakdown-toggle-btn{
    text-decoration:none;
    font-weight:600;
    color:var(--gold-dark);
}

.ranked-card .breakdown-toggle-btn:hover{
    color:var(--gold);
}

/* "How is this calculated?" breakdown panel — cards render 3-per-row now
   (~350-380px wide), so this needs to be noticeably more compact than a
   normal Bootstrap table or the Spend/Value columns get clipped. */

.breakdown-panel-content{
    font-size:12.5px;
}

.breakdown-table{
    font-size:12.5px;
}

.breakdown-table th,
.breakdown-table td{
    padding:.35rem .4rem;
}

.breakdown-table thead th{
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--steel);
    font-weight:700;
    border-bottom-width:1px;
}

.breakdown-rate-sub{
    font-size:10.5px;
    color:var(--steel);
    font-weight:500;
    margin-top:1px;
}

/* ---- AI Card Finder chat (wallet/ai_card_finder.php) ---- */
.ai-chat-messages{
    display:flex;
    flex-direction:column;
    gap:14px;
    max-height:520px;
    overflow-y:auto;
    padding:4px 4px 8px;
}
.ai-chat-bubble{
    max-width:88%;
    padding:14px 18px;
    border-radius:16px;
    font-size:14.5px;
    line-height:1.55;
}
.ai-chat-bubble p:last-child{margin-bottom:0;}
.ai-chat-bubble-bot{
    align-self:flex-start;
    background:var(--surface);
    border:1px solid var(--gray-200);
    border-bottom-left-radius:4px;
}
.ai-chat-bubble-user{
    align-self:flex-end;
    background:linear-gradient(135deg,var(--gold),var(--gold-2));
    color:var(--deep);
    font-weight:500;
    border-bottom-right-radius:4px;
}
.ai-chat-card-tile{
    background:var(--white);
    border-color:var(--gray-200) !important;
}
.ai-chat-card-tile a{color:var(--gold-dark);text-decoration:none;font-weight:600;}
.ai-chat-card-tile a:hover{text-decoration:underline;}
.ai-chat-inputbar input{
    border-radius:12px;
    padding:12px 16px;
}
/* =========================================================
   CREDPERK — NAVBAR + HERO REDESIGN (index.php only)
   Source: user-provided credperk_home_premium_v2.html (a redesign
   built on top of the single-file static export generated earlier
   this session). Only the navbar/topbar and hero (.hero2) rules from
   that file are pulled in here — everything else in that file (search
   box, stats band, feature/offer/tool cards, footer, etc.) restyled
   the rest of the page too, but wasn't asked for here, so none of it
   is included.

   Scoped under body.home-premium (added ONLY to index.php's <body>
   tag) rather than applied bare, because .navbar/.topbar/.nav-link
   are the SAME classes includes/navbar_general.php renders on every
   other "general" page (cards.php, all_offers.php, brand_explorer.php,
   ...) — an unscoped .navbar rule here would restyle the navbar
   sitewide, not just on the homepage. .hero2 is already unique to
   index.php today, but it's prefixed too for consistency and so this
   whole block reads as one deliberate, removable unit.

   To roll this navbar look out sitewide later: drop the
   ".home-premium " prefix from the .topbar/.navbar/.nav-link/
   .navbar-brand/.navbar-toggler rules below (leave the .hero2 rules
   prefixed, since only index.php has a hero to apply them to) and
   this same block just becomes the site's real navbar CSS.
   ========================================================= */

.home-premium{
  --cp-ink:#111827;
  --cp-navy:#0b1220;
  --cp-navy-2:#111a2d;
  --cp-gold:#c9a24d;
  --cp-gold-2:#f0d28a;
  --cp-gold-soft:#fbf4e3;
  --cp-paper:#ffffff;
  --cp-muted:#667085;
  --cp-line:#e8eaf0;
  --cp-soft:#f6f7fa;
  --cp-shadow:0 14px 40px rgba(15,23,42,.08);
  --cp-shadow-lg:0 28px 70px rgba(15,23,42,.14);
}

/* Top announcement bar */
.home-premium .topbar{
  background:linear-gradient(90deg,#080d18,#111a2d 55%,#080d18)!important;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:7px 0!important;
  font-size:12px!important;
}
.home-premium .topbar-inner{min-height:26px}
.home-premium .topbar-left{letter-spacing:.02em}
.home-premium .topbar-right{
  color:#f3d994!important;
  letter-spacing:.03em;
}

/* Navbar */
.home-premium .navbar{
  background:rgba(8,13,24,.94)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
  min-height:74px;
  padding:13px 0!important;
  box-shadow:0 8px 30px rgba(0,0,0,.10);
}
.home-premium .navbar .container{gap:28px}
.home-premium .navbar-brand{
  font-family:'Space Grotesk',sans-serif!important;
  font-size:26px!important;
  font-weight:700!important;
  letter-spacing:-.055em;
  color:#fff!important;
  position:relative;
  padding-right:18px;
}
.home-premium .navbar-brand:after{
  content:"";
  position:absolute;
  width:6px;height:6px;
  border-radius:50%;
  right:4px;bottom:8px;
  background:var(--cp-gold-2);
  box-shadow:0 0 14px rgba(240,210,138,.75);
}
.home-premium .navbar .nav-link{
  color:rgba(255,255,255,.72)!important;
  font-size:13px!important;
  font-weight:600!important;
  padding:9px 4px!important;
  transition:color .2s ease,transform .2s ease;
}
.home-premium .navbar .nav-link:hover{
  color:#fff!important;
  transform:translateY(-1px);
}
.home-premium .navbar .nav-link:after{
  content:"";
  display:block;
  height:2px;
  width:0;
  margin-top:5px;
  border-radius:4px;
  background:var(--cp-gold);
  transition:width .2s ease;
}
.home-premium .navbar .nav-link:hover:after{width:18px}
.home-premium .navbar-toggler{
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:10px!important;
  padding:8px 10px!important;
}

/* Hero (base layer) */
.home-premium .hero2{
  min-height:650px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 25%,rgba(201,162,77,.14),transparent 27%),
    radial-gradient(circle at 10% 90%,rgba(59,130,246,.10),transparent 30%),
    linear-gradient(135deg,#070c16 0%,#0d1525 58%,#111a2d 100%)!important;
  padding:76px 0 82px!important;
}
.home-premium .hero2-grid{
  opacity:.24!important;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px)!important;
  background-size:56px 56px!important;
  mask-image:linear-gradient(to bottom,black 10%,transparent 92%);
}
.home-premium .hero2:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,210,138,.55),transparent);
}
.home-premium .hero2-content{position:relative;z-index:2}
.home-premium .hero2-eyebrow{
  display:inline-flex!important;
  align-items:center;
  gap:10px;
  padding:8px 13px!important;
  border:1px solid rgba(240,210,138,.25)!important;
  border-radius:999px!important;
  background:rgba(240,210,138,.07)!important;
  color:#ead39b!important;
  font-size:11px!important;
  font-weight:700!important;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.home-premium .hero2-eyebrow span{
  width:7px!important;height:7px!important;
  background:#f0d28a!important;
  box-shadow:0 0 14px #f0d28a!important;
}
.home-premium .hero2 h1{
  max-width:720px;
  margin:22px 0 18px!important;
  color:#fff!important;
  font-size:clamp(42px,5.2vw,72px)!important;
  line-height:1.02!important;
  letter-spacing:-.065em!important;
  font-weight:700!important;
}
.home-premium .gradient-text{
  background:linear-gradient(120deg,#fff 5%,#f0d28a 50%,#c9a24d 95%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.home-premium .hero2-subhead{
  color:#e5e7eb!important;
  font-size:20px!important;
  line-height:1.45!important;
  max-width:620px;
  font-weight:500!important;
}
.home-premium .hero2-subhead em{color:#f0d28a!important;font-style:normal}
.home-premium .hero2-description{
  color:#aeb7c8!important;
  font-size:15px!important;
  line-height:1.75!important;
  max-width:650px;
}
.home-premium .hero2-buttons{display:flex!important;gap:12px;flex-wrap:wrap;margin-top:27px!important}
.home-premium .btn-primary-custom,.home-premium .btn-outline-custom{
  min-height:48px!important;
  border-radius:12px!important;
  padding:13px 20px!important;
  font-weight:700!important;
  font-size:14px!important;
}
.home-premium .btn-primary-custom{
  color:#17120a!important;
  background:linear-gradient(135deg,#f2d58f,#c9a24d)!important;
  box-shadow:0 12px 30px rgba(201,162,77,.20)!important;
  border:1px solid rgba(255,255,255,.15)!important;
}
.home-premium .btn-primary-custom:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(201,162,77,.30)!important;
}
.home-premium .btn-outline-custom{
  color:#fff!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.18)!important;
}
.home-premium .btn-outline-custom:hover{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(240,210,138,.55)!important;
  transform:translateY(-2px);
}
.home-premium .hero2-stats{
  max-width:610px;
  border-top:1px solid rgba(255,255,255,.11);
  padding-top:20px!important;
}
.home-premium .hero2-stats h3{
  color:#fff!important;
  font-size:22px!important;
  margin-bottom:3px!important;
}
.home-premium .hero2-stats div div{
  color:#8994a8!important;
  font-size:11px!important;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* Hero visual — luxury product mockup */
.home-premium .hero2-visual{
  min-height:470px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.home-premium .hero2-dashboard-card{
  width:min(420px,90%)!important;
  min-height:265px!important;
  padding:28px!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 80% 15%,rgba(255,255,255,.15),transparent 28%),
    linear-gradient(135deg,#17243a,#0b1220 72%)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 35px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12)!important;
  transform:rotate(-4deg);
  position:relative;
  z-index:2;
}
.home-premium .hero2-dashboard-card:before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:18px;
  border:1px solid rgba(240,210,138,.10);
  pointer-events:none;
}
.home-premium .hero2-mini-logo{
  color:#fff!important;
  font-size:15px!important;
  font-weight:700!important;
}
.home-premium .hero2-card-chip{
  width:42px!important;height:30px!important;
  border-radius:7px!important;
  background:linear-gradient(135deg,#f1d58f,#a77c2b)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6)!important;
}
.home-premium .hero2-card-number{
  color:#fff!important;
  font-family:'IBM Plex Mono',monospace!important;
  font-size:18px!important;
  letter-spacing:.11em!important;
  margin:55px 0 28px!important;
}
.home-premium .hero2-card-bottom{color:#bfc7d5!important}
.home-premium .hero2-floating-card{
  background:rgba(255,255,255,.97)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:0 22px 55px rgba(0,0,0,.24)!important;
  border-radius:18px!important;
  padding:15px 17px!important;
  backdrop-filter:blur(12px);
  z-index:3;
}
.home-premium .hero2-floating-card-one{
  left:-5px!important;
  top:40px!important;
}
.home-premium .hero2-floating-card-two{
  right:-4px!important;
  bottom:45px!important;
}
.home-premium .hero2-floating-icon{
  width:36px!important;height:36px!important;
  border-radius:11px!important;
  background:var(--cp-gold-soft)!important;
  color:#8b6b28!important;
  display:grid!important;
  place-items:center!important;
}
.home-premium .hero2-floating-card p{
  color:#344054!important;
  font-size:12px!important;
  line-height:1.45!important;
  margin:8px 0 0!important;
}

/* Subtle entrance animation (hero only) */
@media (prefers-reduced-motion:no-preference){
  .home-premium .hero2-content{animation:cpFadeUp .7s ease both}
  .home-premium .hero2-visual{animation:cpFloatIn .85s .08s ease both}
}
@keyframes cpFadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
@keyframes cpFloatIn{
  from{opacity:0;transform:translateY(18px) scale(.98)}
  to{opacity:1;transform:none}
}
@keyframes cpShine{0%,55%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}

/* Responsive — navbar/topbar/hero2 lines only (the source file's same
   breakpoints also restyled the search box and bank-tiles grid at
   these widths; those lines are intentionally left out here). */
@media (max-width:1199.98px){
  .home-premium .navbar .nav-link{font-size:12px!important}
}
@media (max-width:991.98px){
  .home-premium .hero2{padding:60px 0 65px!important}
  .home-premium .hero2-visual{margin-top:12px}
  .home-premium .hero2-floating-card-one{left:4%!important}
  .home-premium .hero2-floating-card-two{right:4%!important}
}
@media (max-width:767.98px){
  .home-premium .topbar-right{display:none}
  .home-premium .navbar{min-height:68px}
  .home-premium .hero2{padding:48px 0 54px!important}
  .home-premium .hero2-subhead{font-size:18px!important}
  .home-premium .hero2-description{font-size:14px!important}
  .home-premium .hero2-buttons>*{width:100%;text-align:center}
  .home-premium .hero2-stats{margin-top:35px!important}
  .home-premium .hero2-visual{min-height:390px!important;margin-top:20px}
  .home-premium .hero2-dashboard-card{width:88%!important;min-height:235px!important;padding:22px!important}
  .home-premium .hero2-card-number{font-size:14px!important;margin:42px 0 22px!important}
  .home-premium .hero2-floating-card{max-width:175px!important}
  .home-premium .hero2-floating-card-one{top:12px!important;left:0!important}
  .home-premium .hero2-floating-card-two{bottom:20px!important;right:0!important}
}
@media (max-width:420px){
  .home-premium .hero2-visual{min-height:350px!important}
  .home-premium .hero2-floating-card{transform:scale(.88)}
}

/* =========================================================
   Hero refinement pass (source file's "PREMIUM V2" layer, layered on
   top of the base hero rules above — same as it was in the source).
   ========================================================= */
.home-premium .hero2{min-height:690px!important;padding:82px 0 78px!important;position:relative!important}
.home-premium .hero2:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 48%,rgba(240,210,138,.08),transparent 25%),radial-gradient(circle at 92% 78%,rgba(77,119,190,.10),transparent 25%);pointer-events:none}
.home-premium .hero2 .container{position:relative;z-index:2}
.home-premium .hero2-content{max-width:690px!important}
.home-premium .hero2-eyebrow{box-shadow:0 8px 30px rgba(0,0,0,.12)!important}
.home-premium .hero2 h1{font-size:clamp(48px,5vw,70px)!important;max-width:680px!important;letter-spacing:-.07em!important;text-wrap:balance}
.home-premium .hero2-subhead{max-width:640px!important;font-size:20px!important}
.home-premium .hero2-description{max-width:630px!important;color:#b9c1cf!important}
.home-premium .hero2-buttons{margin-top:30px!important}
.home-premium .hero2-buttons a{min-width:188px;justify-content:center}
.home-premium .hero2-stats{margin-top:38px!important;padding-top:22px!important;max-width:630px!important}
.home-premium .hero2-stats .col-4{border-right:1px solid rgba(255,255,255,.10)}
.home-premium .hero2-stats .col-4:last-child{border-right:0}
.home-premium .hero2-stats h3{font-size:26px!important;line-height:1!important;color:#f3d891!important}
.home-premium .hero2-stats small{font-size:10px!important;letter-spacing:.12em!important}

.home-premium .hero2-visual{height:560px!important;perspective:1200px}
.home-premium .hero2-dashboard-card{width:420px!important;min-height:270px!important;padding:29px!important;transform:rotate(7deg) rotateY(-10deg)!important;background:linear-gradient(145deg,#243653 0%,#101927 54%,#090e18 100%)!important;border:1px solid rgba(240,210,138,.38)!important;box-shadow:0 42px 90px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.03) inset!important}
.home-premium .hero2-dashboard-card:after{content:"";position:absolute;inset:-1px;border-radius:24px;background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.16) 46%,transparent 58%);transform:translateX(-120%);animation:cpShine 5s ease-in-out infinite;pointer-events:none}
.home-premium .hero2-card-chip{background:linear-gradient(135deg,#f8df9f,#b78a35)!important}
.home-premium .hero2-card-number{font-size:19px!important;color:#f6f7f9!important;text-shadow:0 2px 8px rgba(0,0,0,.25)}
.home-premium .hero2-card-bottom{color:#aeb8c8!important}
.home-premium .hero2-floating-card{width:205px!important;background:rgba(10,16,27,.91)!important;border:1px solid rgba(240,210,138,.20)!important;box-shadow:0 24px 55px rgba(0,0,0,.40)!important}
.home-premium .hero2-floating-card-one{left:-18px!important;top:52px!important;transform:rotate(-7deg)!important}
.home-premium .hero2-floating-card-two{right:-18px!important;bottom:48px!important;transform:rotate(5deg)!important}
.home-premium .hero2-floating-icon{background:linear-gradient(145deg,rgba(240,210,138,.17),rgba(240,210,138,.05))!important;color:#f0d28a!important}
.home-premium .hero2-floating-card h6{font-size:14px!important}
.home-premium .hero2-floating-card p{color:#9da8b9!important}

.home-premium .hero2-visual:before{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(240,210,138,.10);border-radius:50%;box-shadow:0 0 90px rgba(201,162,77,.06) inset;transform:rotate(-18deg)}
.home-premium .hero2-visual:after{content:"";position:absolute;width:380px;height:380px;border:1px dashed rgba(255,255,255,.08);border-radius:50%;transform:rotate(25deg)}

@media(max-width:991.98px){
 .home-premium .hero2{padding:65px 0 70px!important}
 .home-premium .hero2-visual{height:500px!important;margin-top:12px!important}
 .home-premium .hero2 h1{font-size:clamp(43px,7vw,60px)!important}
}
@media(max-width:767.98px){
 .home-premium .hero2{padding:52px 0 58px!important}
 .home-premium .hero2 h1{font-size:40px!important}
 .home-premium .hero2-visual{height:420px!important;margin-top:12px!important}
 .home-premium .hero2-dashboard-card{width:310px!important;min-height:235px!important;padding:22px!important}
 .home-premium .hero2-floating-card{width:155px!important;padding:13px!important}
 .home-premium .hero2-floating-card-one{left:0!important;top:28px!important}
 .home-premium .hero2-floating-card-two{right:0!important;bottom:25px!important}
 .home-premium .hero2-visual:before{width:360px;height:360px}
 .home-premium .hero2-visual:after{width:290px;height:290px}
 .home-premium .hero2-stats h3{font-size:22px!important}
}
@media(max-width:420px){
 .home-premium .hero2 h1{font-size:36px!important}
 .home-premium .hero2-dashboard-card{width:285px!important}
 .home-premium .hero2-floating-card{width:140px!important}
 .home-premium .hero2-floating-card h6{font-size:12px!important}
 .home-premium .hero2-floating-card p{font-size:9px!important}
}

/* =========================================================
   AI CARD FINDER — PREMIUM REDESIGN (wallet/ai_card_finder.php only)
   Scoped entirely under body.ai-finder-page so none of this touches
   the ~29 other pages that share .hero/.hero-badge/.selection-card/
   .ai-chat-.../.rank-pill (same scoping pattern as .home-premium above,
   which does the same thing for index.php's hero). No JS files were
   changed for this — every element below already existed with the
   same id/class ai_card_finder.js and reward_ranking_engine.js expect;
   this only layers richer visual styling and a couple of purely
   decorative/optional bits (quick-prompt chips) on top.
   ========================================================= */

/* ---- Hero ---- */
.ai-finder-page .ai-finder-hero{
  padding:96px 0 84px;
  background:
    radial-gradient(1100px 560px at 12% -10%, rgba(223,190,133,.14), transparent 60%),
    radial-gradient(900px 500px at 92% 8%, rgba(223,190,133,.09), transparent 55%),
    radial-gradient(700px 420px at 50% 115%, rgba(223,190,133,.07), transparent 60%),
    #060606;
}
.ai-finder-hero-grid{
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(700px 420px at 50% 30%, #000 0%, transparent 75%);
  mask-image:radial-gradient(700px 420px at 50% 30%, #000 0%, transparent 75%);
  pointer-events:none;
}
.ai-finder-hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  opacity:.55;
}
.ai-finder-hero-glow-1{
  width:340px;height:340px;
  left:-90px;top:-60px;
  background:radial-gradient(circle,rgba(223,190,133,.35),transparent 70%);
  animation:cpOrbFloat 9s ease-in-out infinite;
}
.ai-finder-hero-glow-2{
  width:260px;height:260px;
  right:-70px;bottom:-80px;
  background:radial-gradient(circle,rgba(223,190,133,.28),transparent 70%);
  animation:cpOrbFloat 11s ease-in-out infinite reverse;
}
.ai-finder-page .ai-finder-hero .hero-badge{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(223,190,133,.35);
  color:var(--gold-2);
  box-shadow:0 0 0 1px rgba(223,190,133,.06) inset, 0 12px 30px rgba(0,0,0,.35);
  position:relative;
}
.ai-finder-page .ai-finder-hero .hero-badge .ai-finder-badge-dot{
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--gold-2);
  margin-right:7px;
  box-shadow:0 0 0 3px rgba(223,190,133,.18);
  animation:cpPulseGlow 2.2s ease-in-out infinite;
}
.ai-finder-title{
  font-size:clamp(30px,4.6vw,46px);
  line-height:1.12;
  font-weight:600;
  max-width:780px;
  margin:26px auto 0;
}
.ai-finder-title-accent{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.ai-finder-subtitle{
  font-size:17px;
  line-height:1.75;
  color:rgba(255,255,255,.7);
  max-width:600px;
  margin:16px auto 0;
}
.ai-finder-subtitle a{
  color:var(--gold-2);
  text-decoration:none;
  border-bottom:1px solid rgba(230,201,138,.45);
  padding-bottom:1px;
  transition:border-color var(--transition-fast);
}
.ai-finder-subtitle a:hover{border-color:var(--gold-2);}
.ai-finder-hero-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 16px;
  margin-top:30px;
  font-size:13px;
  color:rgba(255,255,255,.55);
  letter-spacing:.01em;
}
.ai-finder-hero-meta span i{color:var(--gold-2);margin-right:5px;}
.ai-finder-dot{color:rgba(255,255,255,.25);}

/* ---- Chat section background ---- */
.ai-finder-section{
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(223,190,133,.05), transparent 60%),
    var(--white);
}

/* ---- Panel (chat card) ---- */
.ai-finder-page .ai-finder-panel.selection-card{
  cursor:default;
  padding:0;
  overflow:hidden;
  border:1px solid #eef0f5;
  border-radius:24px;
  box-shadow:0 24px 60px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.04);
}
.ai-finder-page .ai-finder-panel.selection-card:hover{
  transform:none;
  border-color:#eef0f5;
  box-shadow:0 24px 60px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.04);
}
.ai-finder-panel-topbar{
  height:4px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2),var(--gold));
  background-size:200% 100%;
  animation:cpTopbarShift 6s linear infinite;
}
.ai-finder-panel-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:22px 26px;
  border-bottom:1px solid #f1f3f7;
  background:linear-gradient(180deg,#fcfbf8,#ffffff);
}
.ai-finder-avatar{
  width:44px;height:44px;
  flex:0 0 auto;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:var(--deep);
  font-size:18px;
  box-shadow:0 8px 20px rgba(223,190,133,.45);
}
.ai-finder-panel-title{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:15.5px;
  color:var(--ink);
}
.ai-finder-panel-status{
  font-size:12.5px;
  color:var(--steel);
  margin-top:2px;
  display:flex;
  align-items:center;
  gap:6px;
}
.ai-finder-status-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#2F7A4D;
  box-shadow:0 0 0 3px rgba(47,122,77,.18);
  display:inline-block;
}
.ai-finder-panel-body{
  padding:22px 26px 26px;
}

/* ---- Chat messages ---- */
.ai-finder-page .ai-chat-messages{
  max-height:480px;
  padding:6px 4px 10px;
}
.ai-finder-page .ai-chat-messages::-webkit-scrollbar{width:6px;}
.ai-finder-page .ai-chat-messages::-webkit-scrollbar-track{background:transparent;}
.ai-finder-page .ai-chat-messages::-webkit-scrollbar-thumb{background:#e7e2d6;border-radius:6px;}

.ai-finder-page .ai-chat-bubble{
  animation:cpBubbleIn .35s ease both;
  box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.ai-finder-page .ai-chat-bubble-bot{
  background:linear-gradient(180deg,#fcfbf9,#f7f8fa);
  border:1px solid #eef0f5;
  position:relative;
  padding-left:22px;
}
.ai-finder-page .ai-chat-bubble-bot::before{
  content:"\f589"; /* bi-stars */
  font-family:"bootstrap-icons"!important;
  position:absolute;
  left:-13px;top:-8px;
  width:24px;height:24px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:var(--deep);
  font-size:11px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(223,190,133,.5);
}
.ai-finder-page .ai-chat-bubble-user{
  box-shadow:0 8px 20px rgba(223,190,133,.35);
}

/* ---- Result card tiles inside bot bubbles ---- */
.ai-finder-page .ai-chat-card-tile{
  border-radius:14px!important;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast);
}
.ai-finder-page .ai-chat-card-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.ai-finder-page .rank-pill-top{
  box-shadow:0 2px 8px rgba(223,190,133,.35);
}

/* ---- Quick-prompt chips ---- */
.ai-finder-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.ai-finder-chip{
  border:1px solid #e7e2d6;
  background:#fdfcfa;
  color:var(--ink);
  font-size:13px;
  font-weight:500;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:all var(--transition-fast);
}
.ai-finder-chip:hover{
  border-color:var(--gold-2);
  background:#fffaf0;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(223,190,133,.25);
}
.ai-finder-chips.is-hidden{display:none;}

/* ---- Input bar ---- */
.ai-finder-page .ai-finder-inputbar input{
  border-radius:999px;
  padding:14px 20px;
  border:1px solid #e6e8ee;
  font-size:14.5px;
  transition:box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.ai-finder-page .ai-finder-inputbar input:focus{
  border-color:var(--gold-2);
  box-shadow:0 0 0 4px rgba(223,190,133,.18);
  outline:none;
}
.ai-finder-send{
  width:52px;height:52px;
  min-width:52px;
  border-radius:50%!important;
  display:flex;align-items:center;justify-content:center;
  padding:0!important;
  font-size:17px;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast);
}
.ai-finder-send:hover{
  transform:scale(1.06);
  box-shadow:0 10px 24px rgba(223,190,133,.45);
}

/* ---- Disclaimer note ---- */
.ai-finder-disclaimer{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:var(--steel);
  background:#fafafa;
  border:1px solid #f1f1f1;
  border-radius:12px;
  padding:10px 14px;
}
.ai-finder-disclaimer i{color:var(--gold-dark);margin-top:2px;}

/* ---- Keyframes ---- */
@keyframes cpOrbFloat{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(14px,-18px);}
}
@keyframes cpPulseGlow{
  0%,100%{box-shadow:0 0 0 3px rgba(223,190,133,.18);}
  50%{box-shadow:0 0 0 6px rgba(223,190,133,.06);}
}
@keyframes cpTopbarShift{
  0%{background-position:0% 0;}
  100%{background-position:200% 0;}
}
@keyframes cpBubbleIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

@media(max-width:767.98px){
  .ai-finder-page .ai-finder-hero{padding:70px 0 60px;}
  .ai-finder-title{font-size:28px;margin-top:20px;}
  .ai-finder-hero-meta{gap:8px 12px;font-size:12px;}
  .ai-finder-panel-header{padding:18px 18px;}
  .ai-finder-panel-body{padding:18px 18px 20px;}
}

/* =========================================================
   CREDPERK — SHARED PREMIUM DESIGN SYSTEM (opt-in, unscoped)
   New, uniquely-named classes only — none of these override or
   collide with any existing class (.hero, .hero-badge,
   .selection-card, etc. are all left completely untouched), so a
   page opts in simply by adding these classes to its markup
   alongside whatever it already has. Built out from the redesign
   done for wallet/ai_card_finder.php; kept here as a shared,
   reusable layer so every later page redesign reuses the same
   visual language instead of re-inventing it, and only needs
   page-specific tweaks (copy, icons, minor sizing) on top.
   Reuses the cpOrbFloat / cpPulseGlow / cpTopbarShift / cpBubbleIn
   keyframes already defined above for the AI Card Finder page.
   ========================================================= */

/* ---- Premium hero overlay (add alongside the existing .hero class) ---- */
.cp-hero-premium{position:relative;overflow:hidden;}
.cp-hero-grid{
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(700px 420px at 50% 30%, #000 0%, transparent 75%);
  mask-image:radial-gradient(700px 420px at 50% 30%, #000 0%, transparent 75%);
  pointer-events:none;
}
.cp-hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  opacity:.55;
}
.cp-hero-glow-1{
  width:340px;height:340px;
  left:-90px;top:-60px;
  background:radial-gradient(circle,rgba(223,190,133,.35),transparent 70%);
  animation:cpOrbFloat 9s ease-in-out infinite;
}
.cp-hero-glow-2{
  width:260px;height:260px;
  right:-70px;bottom:-80px;
  background:radial-gradient(circle,rgba(223,190,133,.28),transparent 70%);
  animation:cpOrbFloat 11s ease-in-out infinite reverse;
}

/* ---- Premium glass badge (dark-hero friendly, pulsing dot) ---- */
.cp-badge-premium{
  display:inline-flex;
  align-items:center;
  padding:10px 18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(223,190,133,.35);
  color:var(--gold-2);
  border-radius:50px;
  font-weight:600;
  font-size:13.5px;
  box-shadow:0 0 0 1px rgba(223,190,133,.06) inset, 0 12px 30px rgba(0,0,0,.35);
}
.cp-badge-dot{
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--gold-2);
  margin-right:8px;
  box-shadow:0 0 0 3px rgba(223,190,133,.18);
  animation:cpPulseGlow 2.2s ease-in-out infinite;
}

/* ---- Gradient text accent for headings ---- */
.cp-title-accent{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ---- Trust-signal / feature meta row (used under hero subtitles) ---- */
.cp-hero-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 16px;
  margin-top:26px;
  font-size:13px;
  color:rgba(255,255,255,.55);
  letter-spacing:.01em;
}
.cp-hero-meta span i{color:var(--gold-2);margin-right:5px;}
.cp-hero-meta-dot{color:rgba(255,255,255,.25);}

/* ---- Premium panel (add alongside .selection-card, or standalone) ---- */
.cp-panel-premium{
  border-radius:24px!important;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.04)!important;
}
.cp-panel-topbar{
  height:4px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2),var(--gold));
  background-size:200% 100%;
  animation:cpTopbarShift 6s linear infinite;
}
.cp-panel-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:22px 26px;
  border-bottom:1px solid #f1f3f7;
  background:linear-gradient(180deg,#fcfbf8,#ffffff);
}
.cp-avatar{
  width:44px;height:44px;
  flex:0 0 auto;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:var(--deep);
  font-size:18px;
  box-shadow:0 8px 20px rgba(223,190,133,.45);
}
.cp-panel-title{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:15.5px;
  color:var(--ink);
}
.cp-panel-status{
  font-size:12.5px;
  color:var(--steel);
  margin-top:2px;
  display:flex;
  align-items:center;
  gap:6px;
}
.cp-status-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#2F7A4D;
  box-shadow:0 0 0 3px rgba(47,122,77,.18);
  display:inline-block;
}

/* ---- Reusable pill chip (quick-prompt / filter style) ---- */
.cp-chip{
  border:1px solid #e7e2d6;
  background:#fdfcfa;
  color:var(--ink);
  font-size:13px;
  font-weight:500;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:all var(--transition-fast);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.cp-chip:hover{
  border-color:var(--gold-2);
  background:#fffaf0;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(223,190,133,.25);
}

/* ---- Premium stat tile (numbers band under a hero) ---- */
.cp-stat-tile{
  text-align:center;
  padding:18px 10px;
}
.cp-stat-tile .cp-stat-value{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(24px,3vw,34px);
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.cp-stat-tile .cp-stat-label{
  font-size:12.5px;
  color:rgba(255,255,255,.6);
  margin-top:4px;
  letter-spacing:.02em;
}

/* ---- Premium input (pill, gold focus ring) ---- */
.cp-input-premium{
  border-radius:999px!important;
  padding:14px 20px!important;
  border:1px solid #e6e8ee!important;
  font-size:14.5px;
  transition:box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.cp-input-premium:focus{
  border-color:var(--gold-2)!important;
  box-shadow:0 0 0 4px rgba(223,190,133,.18)!important;
  outline:none;
}
.cp-btn-round{
  width:52px;height:52px;
  min-width:52px;
  border-radius:50%!important;
  display:flex;align-items:center;justify-content:center;
  padding:0!important;
  font-size:17px;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast);
}
.cp-btn-round:hover{
  transform:scale(1.06);
  box-shadow:0 10px 24px rgba(223,190,133,.45);
}

/* ---- Fade-up entrance (apply to cards/sections that should feel alive) ---- */
.cp-fade-in{animation:cpBubbleIn .5s ease both;}

@media(max-width:767.98px){
  .cp-hero-meta{gap:8px 12px;font-size:12px;}
  .cp-panel-header{padding:18px 18px;}
}

/* =========================================================
   CREDPERK — SITE-WIDE PREMIUM POLISH (unscoped, applies everywhere)
   Refines the shared card, badge, button and search-box classes that
   are already reused across the site (feature-card, offer-card,
   bank-tile, hero-search-box, section-subtitle, btn-outline-gold,
   stats-band) so every page using them picks up a more premium
   finish without any markup or page-specific changes. Every rule
   below is appended after that class's original block, so — per
   normal CSS cascade — it only refines the properties redeclared
   here and leaves the rest of the original rule untouched.
   ========================================================= */

/* ---- Feature / offer cards: layered shadow + reveal top accent ---- */
.feature-card,
.offer-card{
  position:relative;
  border-radius:var(--radius-lg);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .35s ease;
}
.feature-card::before,
.offer-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:linear-gradient(90deg,var(--gold),var(--gold-2),var(--gold));
  background-size:200% 100%;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
  pointer-events:none;
}
.feature-card:hover::before,
.offer-card:hover::before{
  transform:scaleX(1);
}
.feature-card:hover,
.offer-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 50px rgba(15,23,42,.12), 0 4px 14px rgba(15,23,42,.06);
}

/* Bare Bootstrap-icon glyph promoted into a soft gold gradient tile,
   matching the avatar treatment established on the AI Card Finder
   page — keeps the existing icon color/spacing (set earlier in this
   file), just gives it a home instead of floating on its own. */
.feature-card i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:76px;
  height:76px;
  border-radius:20px;
  background:linear-gradient(135deg,#faf3e3,#f3e2bb);
  box-shadow:0 10px 22px rgba(223,190,133,.3);
  font-size:32px;
}

/* ---- Badges / pills: crisper letter-spacing, breathing room for an icon ---- */
.hero-badge,
.section-subtitle{
  letter-spacing:.02em;
}
.section-subtitle i{
  margin-right:4px;
}

/* ---- Buttons: subtler resting shadow, richer hover lift ---- */
.btn-outline-gold{
  box-shadow:0 6px 16px rgba(223,190,133,.18);
  transition:.25s cubic-bezier(.22,1,.36,1);
}
.btn-outline-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(223,190,133,.35);
}

/* ---- Search box: gold focus ring so keyboard/typing feels premium too ---- */
.hero-search-box{
  transition:box-shadow .25s ease;
}
.hero-search-box:focus-within{
  box-shadow:0 0 0 4px rgba(223,190,133,.25), 0 14px 34px rgba(0,0,0,.1);
}

/* ---- Stats band: soft glow behind the numbers + column dividers ---- */
.stats-band{
  position:relative;
  overflow:hidden;
}
.stats-band::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(500px 220px at 50% 0%, rgba(223,190,133,.12), transparent 70%);
  pointer-events:none;
}
.stats-band .num{
  position:relative;
}
@media(min-width:768px){
  .stats-band .col-md-3{
    border-left:1px solid rgba(255,255,255,.08);
  }
  .stats-band .col-md-3:first-child{
    border-left:none;
  }
}

/* ---- Bank tiles: slightly richer resting shadow to match the cards above ---- */
.bank-tile{
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}

/* =========================================================
   CREDPERK — BASE .hero PREMIUM POLISH (unscoped, applies everywhere)
   The plain, dark .hero header (as opposed to the homepage-only
   .hero2) is the shared page-banner used across every secondary
   page on the site (wallet tools, card/bank browsing, benefit and
   offer pages, and more) — it already had a tasteful dark gradient
   background, so this only enriches that existing background with
   extra depth and a very faint dot texture. No markup changes
   anywhere are needed: every page that already renders
   <header class="hero"> picks this up automatically. Kept purely
   as background-layer changes (never a positioned pseudo-element)
   so there is no risk of an overlay painting above the hero's own
   text — backgrounds always paint behind an element's content.
   ========================================================= */
.hero{
  background:
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(900px 500px at 8% 100%, rgba(223,190,133,.16), transparent 60%),
    radial-gradient(760px 420px at 92% 0%, rgba(223,190,133,.10), transparent 55%),
    radial-gradient(650px 320px at 50% 105%, rgba(223,190,133,.07), transparent 70%),
    #060606;
  background-size:26px 26px, auto, auto, auto;
}

/* Glass badge reads a touch richer on the enriched dark background above. */
.hero-badge{
  box-shadow:0 10px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(223,190,133,.08) inset;
}

/* Native range-slider thumbs/tracks default to browser blue; every
   spend-slider on the site (Best Card, Rewards Calculator, Trip Mode,
   ...) should use the brand gold instead. One rule, applies globally. */
input[type="range"]{
  accent-color:var(--gold-2);
}

/* .form-range (Bootstrap's custom-styled range slider, used by every
   spend slider on Best Card / Rewards Calculator / Trip Mode / etc.)
   hardcodes Bootstrap blue on its thumb via pseudo-elements — the
   plain accent-color rule above has no effect on it, since Bootstrap
   fully custom-paints the thumb rather than using native OS styling.
   Overriding those same pseudo-elements with the brand gold instead. */
.form-range::-webkit-slider-thumb{
  background-color:var(--gold-2);
}
.form-range::-webkit-slider-thumb:active{
  background-color:var(--gold);
}
.form-range:focus::-webkit-slider-thumb{
  box-shadow:0 0 0 1px #fff, 0 0 0 .25rem rgba(223,190,133,.3);
}
.form-range::-moz-range-thumb{
  background-color:var(--gold-2);
}
.form-range::-moz-range-thumb:active{
  background-color:var(--gold);
}
.form-range:focus::-moz-range-thumb{
  box-shadow:0 0 0 1px #fff, 0 0 0 .25rem rgba(223,190,133,.3);
}

/* =========================================================
   CREDPERK — SITE-WIDE FORM INPUT POLISH (unscoped)
   Generalizes the gold-focus-ring treatment already used inside
   .wallet-form-card (see that block above) to every plain
   .form-control / .form-select on the site — apply.php's lead form,
   every filter bar (cards.php, bank_cards.php, ...), and any other
   page using bare Bootstrap inputs. A page with its own more specific
   selector (like .wallet-form-card .form-control) still wins by CSS
   specificity, so this only fills in pages that had no override.
   ========================================================= */
.form-select,
.form-control{
  border:1px solid var(--gray-200);
  border-radius:12px;
  padding:12px 16px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-select:focus,
.form-control:focus{
  border-color:var(--gold-2);
  box-shadow:0 0 0 .2rem rgba(223,190,133,.25);
}

/* =========================================================
   CREDPERK — AIR MILES TRANSFER CALCULATOR REDESIGN
   (wallet/airmiles_calculator.php only, via body.airmiles-page)
   Pattern: the page's own hero gradient becomes the FULL page
   background (not just a top banner), with the whole tool living
   in one large floating white panel — plus a custom icon-dropdown
   selector for "Transfer from / Transfer to" modelled on the
   points.casa transfer calculator the user referenced. Everything
   below is scoped under .airmiles-page so it touches nothing else
   on the site.
   ========================================================= */

body.airmiles-page{
  background:
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(900px 500px at 8% 0%, rgba(223,190,133,.16), transparent 60%),
    radial-gradient(760px 420px at 92% 10%, rgba(223,190,133,.10), transparent 55%),
    radial-gradient(700px 500px at 50% 100%, rgba(223,190,133,.08), transparent 65%),
    #060606;
  background-size:26px 26px, auto, auto, auto;
  background-attachment:fixed;
}

/* Slim title strap instead of the site's usual full-height .hero —
   the colored background already carries the page, this only needs
   to introduce it before the floating panel takes over. Styled to
   match wallet/ai_card_finder.php's hero (same badge, title, subtitle
   and trust-meta-row treatment) so the two premium tool pages read as
   one family — see .ai-finder-* for the original of each rule below. */
.airmiles-strap{
  padding:76px 0 132px;
  text-align:center;
  position:relative;
}
.airmiles-page .airmiles-strap .hero-badge{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(223,190,133,.35);
  color:var(--gold-2);
  box-shadow:0 0 0 1px rgba(223,190,133,.06) inset, 0 12px 30px rgba(0,0,0,.35);
  position:relative;
}
.airmiles-badge-dot{
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--gold-2);
  margin-right:7px;
  box-shadow:0 0 0 3px rgba(223,190,133,.18);
  animation:cpPulseGlow 2.2s ease-in-out infinite;
}
.airmiles-strap h1{
  font-size:clamp(30px,4.6vw,46px);
  line-height:1.12;
  font-weight:600;
  color:#fff;
  max-width:780px;
  margin:26px auto 0;
}
.airmiles-strap-title-accent{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.airmiles-strap p{
  font-size:17px;
  line-height:1.75;
  color:rgba(255,255,255,.7);
  max-width:600px;
  margin:16px auto 0;
}
.airmiles-strap p a{
  color:var(--gold-2);
  text-decoration:none;
  border-bottom:1px solid rgba(230,201,138,.45);
  padding-bottom:1px;
  transition:border-color var(--transition-fast);
}
.airmiles-strap p a:hover{ border-color:var(--gold-2); }
.airmiles-hero-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 16px;
  margin-top:30px;
  font-size:13px;
  color:rgba(255,255,255,.55);
  letter-spacing:.01em;
}
.airmiles-hero-meta span i{ color:var(--gold-2); margin-right:5px; }
.airmiles-hero-dot{ color:rgba(255,255,255,.25); }
@media(max-width:767.98px){
  .airmiles-strap{ padding:56px 0 110px; }
  .airmiles-strap h1{ font-size:28px; margin-top:20px; }
  .airmiles-hero-meta{ gap:8px 12px; font-size:12px; }
}

/* The floating panel — pulled up under the strap so the colored
   background shows above, beside and below it, then the page's own
   dark footer picks up seamlessly since both are dark. */
.airmiles-panel-wrap{
  max-width:1100px;
  margin:-84px auto 60px;
  padding:0 20px;
  position:relative;
  z-index:1;
}
.airmiles-panel{
  background:#fff;
  border-radius:28px;
  box-shadow:0 40px 90px rgba(0,0,0,.35), 0 4px 18px rgba(0,0,0,.12);
  padding:36px clamp(20px,4vw,48px) 44px;
}

/* ---- Tabs, restyled to sit inside the new panel ---- */
.airmiles-panel .airmiles-tabs{
  justify-content:center;
}
.airmiles-panel .airmiles-tab{
  border-radius:999px;
}
.airmiles-panel .airmiles-tab.active{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:var(--deep);
  border-color:var(--gold);
}

/* ---- Transfer From / Transfer To / Points row ---- */
.airmiles-transfer-row{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:18px;
  align-items:end;
  margin-bottom:22px;
}
@media(max-width:900px){
  .airmiles-transfer-row{ grid-template-columns:1fr; }
}
/* Grid items default to min-width:auto, which floors their width at
   their content's min-content size — for .airmiles-field-group that
   min-content includes the fixed-width clear button plus the select's
   own (unshrunk) intrinsic width, which is wider than a narrow mobile
   column. Without this, the clear button and points input overflow
   past the panel's edge on small screens even though the grid track
   itself is correctly sized. */
.airmiles-field-group,
.airmiles-points-field{
  min-width:0;
}
.airmiles-field-row{
  min-width:0;
}
.airmiles-field-label{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:8px;
  display:block;
}
.airmiles-field-row{
  display:flex;
  gap:8px;
}

/* Pill-style select trigger, doubling as a type-to-filter input —
   same interaction model as .search-select-input elsewhere on the
   site, just restyled with a leading icon avatar + chevron. */
.airmiles-select{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1.5px solid var(--gray-200);
  border-radius:16px;
  padding:9px 14px;
  transition:border-color .2s ease, box-shadow .2s ease;
  min-width:0;
}
.airmiles-select:focus-within{
  border-color:var(--gold-2);
  box-shadow:0 0 0 4px rgba(223,190,133,.18);
}
.airmiles-select-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}
.airmiles-select-icon.is-card{ background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:var(--deep); }
.airmiles-select-icon.is-airline{ background:linear-gradient(135deg,#dbeafe,#bfdbfe); color:#1d4ed8; }
.airmiles-select-icon.is-hotel{ background:linear-gradient(135deg,#fce7f3,#fbcfe8); color:#a21caf; }
.airmiles-select-icon.is-generic{ background:linear-gradient(135deg,#e2e8f0,#cbd5e1); color:#475569; }
.airmiles-select input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  background:transparent;
  padding:4px 0;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.airmiles-select input::placeholder{
  color:var(--steel);
  font-weight:500;
}
.airmiles-select-chevron{
  flex:0 0 auto;
  color:var(--steel);
  font-size:13px;
  transition:transform .2s ease;
}
.airmiles-select.is-open .airmiles-select-chevron{
  transform:rotate(180deg);
}

.airmiles-clear-btn{
  flex:0 0 auto;
  width:48px;
  border:1.5px solid var(--gray-200);
  border-radius:14px;
  background:#fff;
  color:var(--steel);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s ease;
}
.airmiles-clear-btn:hover{
  border-color:#e6a2a2;
  color:#c0392b;
  background:#fef5f5;
}

.airmiles-select-panel{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  max-height:320px;
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:16px;
  box-shadow:var(--shadow-md);
  z-index:30;
}
.airmiles-select-panel.open{
  display:block;
}
.airmiles-select-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  font-size:14px;
  color:var(--ink);
  cursor:pointer;
}
.airmiles-select-item:hover,
.airmiles-select-item.is-highlighted{
  background:#fdf5e7;
}
.airmiles-select-item .airmiles-select-icon{
  width:28px;
  height:28px;
  font-size:13px;
  border-radius:8px;
}
.airmiles-select-item-sub{
  font-size:12px;
  color:var(--steel);
  margin-top:1px;
}

/* Points field, matching the pill treatment */
.airmiles-points-field{
  position:relative;
}
.airmiles-points-field input{
  width:100%;
  min-width:150px;
  border:1.5px solid var(--gray-200);
  border-radius:16px;
  padding:13px 16px;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.airmiles-points-field input:focus{
  outline:none;
  border-color:var(--gold-2);
  box-shadow:0 0 0 4px rgba(223,190,133,.18);
}

/* ---- Results list ("N Transfer Options"), points.casa-style rows ---- */
.airmiles-results-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin:30px 0 12px;
}
.airmiles-results-head h4{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:18px;
  color:var(--ink);
  margin:0;
}
.airmiles-results-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.airmiles-filter-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--gray-200);
  background:#fff;
  color:var(--steel);
  font-size:12.5px;
  font-weight:700;
  padding:7px 13px;
  border-radius:999px;
  cursor:pointer;
  transition:.2s ease;
}
.airmiles-filter-pill:hover{
  border-color:var(--gold-2);
}
.airmiles-filter-pill.active{
  background:rgba(223,190,133,.14);
  border-color:var(--gold);
  color:var(--gold-dark);
}

.airmiles-results-list{
  border:1px solid var(--gray-200);
  border-radius:18px;
  overflow:hidden;
}
.airmiles-option-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-bottom:1px solid #f1f3f7;
  cursor:pointer;
  transition:background .15s ease;
}
.airmiles-option-row:last-child{
  border-bottom:none;
}
.airmiles-option-row:hover{
  background:#fdfbf6;
}
.airmiles-option-row.is-active{
  background:#fffaf0;
}
.airmiles-option-row .airmiles-select-icon{
  width:42px;
  height:42px;
  font-size:18px;
  border-radius:12px;
}
.airmiles-option-main{
  flex:1;
  min-width:0;
}
.airmiles-option-name{
  font-weight:700;
  color:var(--ink);
  font-size:15px;
}
.airmiles-option-meta{
  font-size:12.5px;
  color:var(--steel);
  margin-top:2px;
}
.airmiles-option-value{
  text-align:right;
  flex:0 0 auto;
}
.airmiles-option-value .miles{
  font-weight:700;
  color:var(--ink);
  font-size:15px;
}
.airmiles-option-value .worth{
  font-size:12px;
  color:var(--steel);
  margin-top:2px;
}

/* Everything below the panel (value-per-mile slider, spend/compare
   tabs) still uses .selection-card — keep it visually at home inside
   the white panel rather than looking like a separate light-grey
   section, since the panel itself is now the whole page's content
   surface. */
.airmiles-panel .selection-card{
  box-shadow:none;
  border:1px solid var(--gray-200);
}

/* =========================================================
   CREDPERK — SITEWIDE HERO UPGRADE (every page using base .hero,
   except index.php's own .hero2 and the already-bespoke
   .ai-finder-hero / .airmiles-strap heroes, which keep their own
   more-specific overrides below this block and therefore win on
   specificity).
   Brings every secondary-page hero's badge to the same dark,
   gold-outlined, pulsing-dot treatment as wallet/ai_card_finder.php,
   with zero markup changes required: the existing <i class="bi ...">
   icon inside .hero-badge is hidden and a ::before pulsing dot is
   drawn in its place. Two new *optional* generic classes —
   .hero-title-accent (gradient-clip span for part of an <h1>) and
   .hero-trust-row/.hero-trust-dot (a 3-item meta row under the
   subtitle) — are added for pages that choose to use them; pages
   that don't add the markup simply don't render that part, so this
   whole block is safe to merge before any per-page markup edits.
   ========================================================= */

/* ---- Badge: dark glass + gold outline + pulsing dot instead of icon ---- */
.hero .hero-badge{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(223,190,133,.35);
  color:var(--gold-2);
  box-shadow:0 0 0 1px rgba(223,190,133,.06) inset, 0 12px 30px rgba(0,0,0,.35);
  position:relative;
}
.hero .hero-badge i{
  display:none;
}
.hero .hero-badge::before{
  content:'';
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--gold-2);
  margin-right:7px;
  vertical-align:middle;
  box-shadow:0 0 0 3px rgba(223,190,133,.18);
  animation:cpPulseGlow 2.2s ease-in-out infinite;
}

/* ---- Title accent: same gold gradient-clip treatment as the AI Card Finder hero ---- */
.hero-title-accent{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ---- Trust row: 3-item meta line under the subtitle ---- */
.hero-trust-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 16px;
  margin-top:26px;
  font-size:13px;
  color:rgba(255,255,255,.55);
  letter-spacing:.01em;
}
.hero-trust-row i{
  color:var(--gold-2);
  margin-right:5px;
}
.hero-trust-dot{
  color:rgba(255,255,255,.25);
}

/* ---------------------------------------------------------------------
 * .badge-pill — used by card_fees.php, card_benefits_browse.php,
 * wallet/trip_optimizer.php and fee_category.php already, but this
 * class was never actually defined anywhere in this stylesheet, so
 * every one of those badges has been rendering as bare, unstyled text.
 * Styled to match .offer-badge's existing gold-pill look so it reads
 * as an intentional part of the same design language.
 * --------------------------------------------------------------------- */
.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(223,190,133,.14);
  border:1.5px solid var(--gold);
  color:var(--gold-dark);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  padding:6px 12px;
  border-radius:30px;
  line-height:1.2;
}

/* ---------------------------------------------------------------------
 * fee_category.php card-art tiles — a dark navy "card face" mockup
 * (chip, masked digits, network + name/bank overlay) above the usual
 * name/bank/stat body, replacing the old plain icon header. Deliberately
 * scoped to its own .fee-card-* classes rather than touching .offer-card
 * (used across many other pages) so this redesign can't affect anything
 * outside fee_category.php.
 * --------------------------------------------------------------------- */
.fee-card-item{
  display:block;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  overflow:hidden;
  height:100%;
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}
.fee-card-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
  border-color:var(--gold);
}

.fee-card-visual{
  position:relative;
  margin:16px 16px 0;
  padding:16px 18px;
  height:148px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--deep-2), var(--navy) 55%, var(--deep));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.fee-card-visual::after{
  content:"";
  position:absolute;
  top:-45%;
  right:-15%;
  width:70%;
  height:180%;
  background:radial-gradient(circle, rgba(255,255,255,.07), transparent 60%);
  pointer-events:none;
}

/* Per-network colour variants — used on index.php's "Cards People Are
 * Exploring" tiles (see popular_card_network_class()) so each card's
 * face is tinted toward that card's own real network colour instead of
 * every tile sharing the same navy. Kept close to each network's real
 * brand hue but dark enough throughout that the white chip/digits/name
 * stay just as legible as on the default navy. Declared after the base
 * .fee-card-visual rule above so they win on shared properties without
 * needing !important. Any network not listed here (or no network on
 * file) simply keeps the default navy gradient.
 *
 * Each rule also matches .fee-card-item-tinted (the whole-tile variant
 * just below) carrying the same network class, so the exact same five
 * gradients colour either just the card-art strip (fee_category.php)
 * or the entire tile (index.php's Popular Cards) — one set of colours,
 * two places it can be applied, instead of defining the gradients twice. */
.fee-card-visual-mastercard,
.fee-card-item-tinted.fee-card-visual-mastercard{
  background:linear-gradient(135deg, #1c1c1c, #3d3d3d 55%, #050505);
}
.fee-card-visual-visa,
.fee-card-item-tinted.fee-card-visual-visa{
  background:linear-gradient(135deg, #0d1957, #1b3fa0 55%, #060e33);
}
.fee-card-visual-amex,
.fee-card-item-tinted.fee-card-visual-amex{
  background:linear-gradient(135deg, #0a3a5c, #1f7fb8 55%, #062338);
}
.fee-card-visual-rupay,
.fee-card-item-tinted.fee-card-visual-rupay{
  background:linear-gradient(135deg, #0f3d24, #1f7a4a 55%, #0a2617);
}
.fee-card-visual-diners,
.fee-card-item-tinted.fee-card-visual-diners{
  background:linear-gradient(135deg, #232f3a, #45607a 55%, #161f27);
}

/* .fee-card-item-tinted — the "whole box is one colour" variant used on
 * index.php's Popular Cards tiles. Base .fee-card-item is white with a
 * dark card-art strip up top (fee_category.php's look, left as-is);
 * this modifier instead colours the entire tile — art strip and the
 * name/description area below it both — in the same gradient, so
 * there's no visible seam between a "dark header" and a "white body".
 * Declared after .fee-card-item so it wins the background override
 * without !important. */
.fee-card-item-tinted{
  background:linear-gradient(135deg, var(--deep-2), var(--navy) 55%, var(--deep));
}
.fee-card-item-tinted .fee-card-visual{
  background:transparent;
  margin:0;
  padding:18px 18px 14px;
  border-radius:0;
  height:auto;
}
.fee-card-item-tinted .fee-card-visual::after{
  border-radius:0;
}
.fee-card-item-tinted .fee-card-body{
  padding:0 18px 18px;
}
.fee-card-description{
  font-size:13.5px;
  color:var(--steel);
  margin:0;
}
.fee-card-item-tinted .fee-card-description{
  color:rgba(255,255,255,.75);
}
.fee-card-item-tinted .fee-card-visual-name{
  font-size:14.5px;
}
.fee-card-visual-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  position:relative;
  z-index:1;
}
.fee-card-chip{
  width:30px;
  height:22px;
  border-radius:5px;
  background:linear-gradient(135deg, var(--gold-2), var(--gold) 60%, var(--gold-dark));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  flex-shrink:0;
}
.fee-card-network{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(255,255,255,.85);
  white-space:nowrap;
}
.fee-card-digits{
  font-family:'IBM Plex Mono', monospace;
  font-size:15px;
  font-weight:500;
  letter-spacing:.18em;
  color:rgba(255,255,255,.45);
  position:relative;
  z-index:1;
}
.fee-card-visual-bottom{
  position:relative;
  z-index:1;
  min-width:0;
}
.fee-card-visual-name{
  font-family:'Space Grotesk',sans-serif;
  font-size:13.5px;
  font-weight:700;
  color:#fff;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fee-card-visual-bank{
  font-size:11.5px;
  color:rgba(255,255,255,.55);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fee-card-body{
  padding:16px 18px 18px;
}
.fee-card-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 2px;
  line-height:1.3;
}
.fee-card-bank{
  font-size:12.5px;
  color:var(--steel);
  margin-bottom:10px;
}
.fee-card-zero-badge{
  background:rgba(47,122,77,.10);
  border-color:rgba(47,122,77,.35);
  color:var(--forest);
}
.fee-card-divider{
  border-top:1px dashed var(--gray-200);
  margin:12px 0;
}
.fee-card-stats-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.fee-card-stat-end{
  text-align:right;
}
.fee-card-stat-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:4px;
}
.fee-card-stat-value{
  font-family:'Space Grotesk',sans-serif;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* .wallet-save-btn — the one-click Add/Remove-from-wallet button on
 * card.php (see assets/js/wallet_save_button.js). It's a real <button>
 * wearing the page's existing link-styled button classes
 * (.btn.btn-outline-gold in the hero, .hero-btn.secondary in the
 * closing CTA), so this just resets the few properties a <button>
 * doesn't inherit the way an <a> does, then layers on a distinct
 * "already saved" look shared by both placements. */
.wallet-save-btn{
  font-family:inherit;
  cursor:pointer;
}
.wallet-save-btn.is-busy{
  opacity:.7;
  cursor:default;
}
.btn.btn-outline-gold.wallet-save-btn.is-saved{
  background:var(--forest);
  border-color:var(--forest);
  color:#fff;
}
.hero-btn.secondary.wallet-save-btn.is-saved{
  background:var(--forest);
  color:#fff;
  box-shadow:0 10px 25px rgba(47,122,77,.3);
}

/* .wallet-save-btn-compact — the icon-only variant on card GRID tiles
 * (cards.php, bank_cards.php, co_branded_cards.php). Pinned to the
 * tile's top-right corner exactly like those same tiles already pin
 * their "Apply Now" button above the stretched-link card click area —
 * position:relative + z-index:2, no JS needed to stop the tile's own
 * click-through. */
.wallet-save-btn-compact{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:34px;
  height:34px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  border:1.5px solid var(--gray-200);
  color:var(--steel);
  font-size:15px;
  line-height:1;
  transition:.2s;
}
.wallet-save-btn-compact:hover{
  border-color:var(--gold);
  color:var(--gold-dark);
}
.wallet-save-btn-compact.is-saved{
  background:var(--forest);
  border-color:var(--forest);
  color:#fff;
}
.wallet-save-btn-compact.is-saved:hover{
  color:#fff;
}

/* .wallet-nav-badge — small count pill next to "Wallet intelligence" in
 * both navbars (navbar_general.php, navbar_wallet.php), reflecting
 * wallet_item_count() from config.php at page-load. Kept live in sync by
 * assets/js/wallet_save_button.js on the pages that use it (card.php,
 * cards.php, bank_cards.php, co_branded_cards.php) — see
 * updateWalletNavBadge() there. .d-none (Bootstrap) hides it at 0. */
.wallet-nav-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  margin-left:6px;
  border-radius:9px;
  background:var(--gold);
  color:var(--ink);
  font-size:11px;
  font-weight:700;
  line-height:18px;
  font-variant-numeric:tabular-nums;
  vertical-align:2px;
}

/* =========================================================
   WALLET DASHBOARD — "Best Wallet Card" winner tiles (Sep 2026)
   wallet/dashboard.php's "Best Wallet Card By Category" / "By Brand"
   panels (assets/js/dashboard_best_card.js's winnerTileHTML()). Reuses
   the site's existing gold-accent/pill language (.selection-badge's own
   pill shape/colors, .selection-card's hover-lift) rather than
   inventing a new visual style, so these tiles read as part of the same
   design system as every other card-like element on the page instead of
   a bolted-on component.
   ========================================================= */
.wallet-winner-tile{
  position:relative;
  height:100%;
  background:linear-gradient(165deg,#ffffff 0%,#fdfaf4 100%);
  border:1px solid var(--gray-200);
  border-radius:16px;
  padding:20px 18px 18px;
  overflow:hidden;
  transition:.25s ease;
}
.wallet-winner-tile::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,var(--gold-2),#f6e6c2);
}
.wallet-winner-tile:hover{
  transform:translateY(-4px);
  border-color:var(--gold-2);
  box-shadow:0 16px 34px rgba(15,23,42,.10);
}
.wallet-winner-icon{
  position:absolute;
  top:16px; right:16px;
  width:30px; height:30px;
  border-radius:50%;
  background:#fdf5e7;
  color:var(--gold-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}
.wallet-winner-label{
  display:inline-block;
  max-width:calc(100% - 40px); /* leaves room for .wallet-winner-icon */
  padding:4px 10px;
  border-radius:30px;
  background:#fdf5e7;
  color:var(--gold-dark);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.wallet-winner-card{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:15px;
  line-height:1.35;
  color:var(--ink);
  margin-bottom:10px;
  /* Clamp to 2 lines so a long card name never breaks the tile's height
     rhythm across a row of otherwise-shorter names. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.wallet-winner-value{
  display:flex;
  align-items:baseline;
  gap:6px;
}
.wallet-winner-value strong{
  font-family:'Space Grotesk',sans-serif;
  font-size:17px;
  font-weight:800;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.wallet-winner-value span{
  font-size:11.5px;
  color:var(--steel);
}
.wallet-winner-value .wallet-winner-bonus{
  display:inline-block;
  margin-left:2px;
  padding:1px 7px;
  border-radius:20px;
  background:#eef7f0;
  color:var(--forest);
  font-size:10px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}