@charset "utf-8";
/* CSS Document */
.gdp-wrap { --gap:16px; --radius:14px; --shadow:0 6px 24px rgba(0,0,0,.08); --blur:10px; }
.gdp-hero { position:relative; height:52vh; min-height:260px; border-radius:var(--radius); overflow:hidden; margin-bottom:var(--gap); }
.gdp-hero-img { position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1.05) contrast(1.02); }
.gdp-hero-img { filter: none !important; }
.gdp-hero-img { height: 52vh; min-height: 380px; max-height: 640px; background-size: cover; background-position: center 35%;  border-radius: 18px; }
.gdp-blur { filter: blur(var(--blur)) brightness(0.9) !important; }
.gdp-guest .gdp-hero-img, .gdp-grid.gdp-blur .gdp-img img { filter: blur(var(--blur)) brightness(0.9); }
.gdp-member .gdp-hero-img { filter: none !important; }
.gdp-member .gdp-hero:before { opacity: 0 !important; }
.gdp-hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0)); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; }
.gdp-title { font-size:clamp(20px, 3.2vw, 34px); margin:0 0 8px; }
.gdp-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.gdp-badge { background:#ff1118; border:1px solid #fff3; padding:4px 8px; border-radius:999px; font-size:12px; }
.gdp-badge-warn { background:#ffcc00; color:#000; border-color:#e6b800; }

/* related-card thumbs: taller */
.gdp-rel-thumb {
  height: 200px;               /* mobile */
  background-size: cover;
  background-position: center 35%;
  border-radius: 14px 14px 0 0;
}

.gdp-quick { display:flex; gap:10px; flex-wrap:wrap; font-size:16px; opacity:.95; }
.gdp-cta { margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.gdp-btn { background:#111; color:#fff; border:0; padding:9px 13px; border-radius:10px; cursor:pointer; box-shadow:var(--shadow); }
.gdp-btn-ghost { background:#fff; color:#111; }

.gdp-section { background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:16px 5px 16px 5px; margin-bottom:16px; box-shadow:var(--shadow); }

/* WHY — subtle accent card */
.gdp-why { margin-top: 18px; }
.gdp-why h2 { margin: 0 0 10px; }

.gdp-why-body{
  position: relative;
  background:#fff;
  border:1px solid rgba(163,105,255,.22); /* tie to your purple */
  border-left-width:6px;
  border-left-color:#A369FF;
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 10px 22px rgba(0,0,0,.05);
  line-height:1.6;
}
.gdp-why-body p{ margin:0 0 10px; }
@media (min-width:768px){
  .gdp-why-body{ padding:20px 22px; }
}

.gdp-section > h2 { font-size:18px; margin:0 0 12px; }

.gdp-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.gdp-img { display:block; border-radius:12px; overflow:hidden; }
.gdp-img img { width:100%; height:160px; object-fit:cover; display:block; }

.gdp-notes { line-height:1.6; font-size:15px; }

.gdp-related .gdp-rel-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.gdp-rel-card { display:block; border:1px solid #D4D4D4; border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--shadow); text-decoration:none; color:inherit; }
.gdp-rel-thumb { padding-top:58%; background-size:cover; background-position:center; }
.gdp-rel-meta { padding:10px; }
.gdp-rel-title { font-weight:600; font-size:15px; }
.gdp-rel-sub { font-size:14px; opacity:.8; margin-top:4px; }

.gdp-pager { display:flex; justify-content:space-between; margin:20px 0; }

.gdp-note { font-size:13px; opacity:.8; }

/* Modal */
.gdp-modal[hidden]{ display:none !important; }
.gdp-modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:grid; place-items:center; z-index:9999; }
.gdp-modal-card { width:min(640px, 94vw); background:#fff; border-radius:16px; padding:18px; box-shadow:var(--shadow); }
.gdp-modal-card h3 { margin:0 0 10px; }
.gdp-modal-card label { display:block; font-size:14px; margin:10px 0; }
.gdp-modal-card input, .gdp-modal-card textarea { width:100%; border:1px solid #ddd; border-radius:10px; padding:10px; font-size:14px; }
.gdp-modal-close { float:right; background:transparent; border:0; font-size:22px; cursor:pointer; }

/* HERO CTA — smaller, tighter pills */
.gdp-hero .gdp-cta { display:flex; gap:8px; }
.gdp-hero .gdp-cta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.gdp-hero .gdp-btn{
  font-size:13px;
  line-height:1.2;
  padding:6px 12px;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* Generic pill */
.gdp-pill{
  display:inline-flex; align-items:center;
  font-weight:600; line-height:1.1;
  font-size:14px; padding:5px 10px 6px 10px;
  border-radius:9999px; border:1px solid transparent;
}

/* Red Flag pill look */
.gdp-pill-flag{
  background:#FEE2E2;          /* light red */
  border-color:#FCA5A5;
  color:#ef1c23;                /* deep red text */
}

/* scale a touch up on wider screens */
@media (min-width:768px){
  .gdp-pill{ font-size:14px; padding:6px 11px; }
}

/* Share button: lighten background so it's not dark */
.gdp-hero #gdp-copy{
  background:#F6B100;
  color:#111;
  border:1px solid rgba(0,0,0,.08);
}
.gdp-hero #gdp-copy:hover{
  background:#fff;
  box-shadow:0 3px 14px rgba(0,0,0,.12);
}

/* Keep ghost button subtle */
.gdp-hero .gdp-btn-ghost{
  background:rgba(255,255,255,.88);
  color:#111;
  border:1px solid rgba(0,0,0,.1);
}

/* Red Flag pill with icon */
.gdp-pill-flag{
  position:relative;
  padding-left: 9px; /* room for icon gap after ::before */
}
.gdp-pill-flag::before{
  content:"";
  display:inline-block;
  width:15px; height:15px;
  margin-right:4px;
  background-image: url('https://prettybum.com/wp-content/uploads/2025/09/Red_Flag2.png'); /* ← paste your flag file URL */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align:-2px;
}

.gdp-flag-icon{
  width:16px; height:16px;
  margin-right:8px;
  display:inline-block;
  vertical-align:-2px;
}
@media (min-width:768px){
  .gdp-flag-icon{ width:18px; height:18px; vertical-align:-3px; }
}

/* bump icon size slightly on tablet/desktop */
@media (min-width:768px){
  .gdp-pill-flag::before{ width:18px; height:18px; vertical-align:-3px; }
}

/* Responsive tweaks */
@media (min-width: 720px) {
  .gdp-grid { grid-template-columns:repeat(3,1fr); }
  .gdp-img img { height:200px; }
  .gdp-related .gdp-rel-grid { grid-template-columns:repeat(3,1fr); }
}
@media (min-width: 1024px) {
  .gdp-hero { height:90vh; }
  .gdp-grid { grid-template-columns:repeat(4,1fr); }
}
/* bigger on tablet */
@media (min-width: 768px) {
  .gdp-hero-img { height: 64vh; min-height: 620px; max-height: 760px; background-position: center 42%; }
}
/* bigger on desktop */
@media (min-width: 1024px) {
  .gdp-hero-img { height: 68vh; min-height: 760px; max-height: 880px; background-position: center 60%; }
}
@media (min-width: 768px) { .gdp-rel-thumb { height: 300px; } }
@media (min-width: 1024px){ .gdp-rel-thumb { height: 320px; } }

/* scale a touch on larger screens (still modest) */
@media (min-width:768px){
  .gdp-hero .gdp-btn{ font-size:14px; padding:6px 13px; !important}
}
@media (min-width:1024px){
  .gdp-hero .gdp-btn{ font-size:14px; padding:7px 15px; !important}
}

/* Report / Dispute button (purple base, white on hover) */
.gdp-hero #gdp-report-open{
  background:#A369FF;
  color:#fff;
  border:1px solid transparent;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gdp-hero #gdp-report-open:hover{
  background:rgba(255,255,255,.88);
  color:#111;
  border-color:rgba(0,0,0,.1);
  box-shadow:0 3px 14px rgba(0,0,0,.12);
}

/* keyboard focus */
.gdp-hero #gdp-report-open:focus-visible{
  outline:2px solid #A369FF;
  outline-offset:2px;
}

/* Guest view CTAs: make them match our signed-in pill style */
.gdp-guest .gdp-cta > .gdp-btn:not(.gdp-btn-ghost){
  /* "Sign in to view" */
  background:#F6B100;            /* Pretty Bum gold */
  color:#111;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.gdp-guest .gdp-cta > .gdp-btn:not(.gdp-btn-ghost):hover{
  background:#fff;                /* same hover language as Share */
  color:#111;
  border-color:rgba(0,0,0,.1);
  box-shadow:0 3px 14px rgba(0,0,0,.12);
}

.gdp-guest .gdp-cta > .gdp-btn-ghost{
  /* "Join now" */
  background:rgba(255,255,255,.92);
  color:#111;
  border:1px solid rgba(0,0,0,.1);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.gdp-guest .gdp-cta > .gdp-btn-ghost:hover{
  background:#fff;
  box-shadow:0 3px 14px rgba(0,0,0,.12);
}

/* "Why" heading with pot-of-gold icon */
.gdp-why h2{
  display:inline-flex;
  align-items:center;
  gap:10px;             /* space between icon and text */
}

/* icon */
.gdp-why h2::before{
  content:"";
  display:inline-block;
  width:20px;
  height:20px;
  background-image:url('https://prettybum.com/wp-content/uploads/2025/09/sm-biggolda.png'); /* ← your file URL */
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  vertical-align:-2px;  /* slight optical alignment */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.06));
}

@media (min-width:768px){
  .gdp-why h2::before{ width:22px; height:22px; vertical-align:-3px; }
}
@media (min-width:1024px){
  .gdp-why h2::before{ width:24px; height:24px; }
}

/* CTA row */
.gdp-hero .gdp-cta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* base pill sizing */
.gdp-hero .gdp-btn{ font-size:14px; padding:6px 12px; border-radius:10px; line-height:1.2; }
@media (min-width:768px){ .gdp-hero .gdp-btn{ font-size:15px; padding:7px 14px; }}

/* MEMBER: Share (gold), Report (purple) */
.gdp-hero.gdp-member #gdp-copy{
  background:#F6B100; color:#111; border:1px solid rgba(0,0,0,.06);
}
.gdp-hero.gdp-member #gdp-copy:hover{ background:#fff; }

.gdp-hero.gdp-member #gdp-report-open{
  background:#A369FF; color:#fff; border:1px solid transparent;
}
.gdp-hero.gdp-member #gdp-report-open:hover{
  background:rgba(255,255,255,.88); color:#111; border-color:rgba(0,0,0,.1);
}

/* GUEST: Sign in = gold, Join = white */
.gdp-hero.gdp-guest .gdp-cta .gdp-btn{
  background:#F6B100; color:#111; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.gdp-hero.gdp-guest .gdp-cta .gdp-btn:hover{
  background:#fff; color:#111; border-color:rgba(0,0,0,.1);
  box-shadow:0 3px 14px rgba(0,0,0,.12);
}
.gdp-hero.gdp-guest .gdp-cta .gdp-btn.gdp-btn-ghost{
  background:rgba(255,255,255,.92); color:#111; border:1px solid rgba(0,0,0,.1);
}
.gdp-hero.gdp-guest .gdp-cta .gdp-btn.gdp-btn-ghost:hover{ background:#fff; }

/* a11y focus */
.gdp-hero .gdp-btn:focus-visible{ outline:2px solid #A369FF; outline-offset:2px; }


/* scale up on larger screens if you like */
@media (min-width:768px){
  .pb-gd-count.pb-pill.pb-pill--dollars{
    padding-left: 52px;
    padding-right: 52px;
  }
  
/* ensure hero is a positioning context */
.gdp-hero { position: relative; }

/* back pill */
.gdp-hero{ position:relative; }
.gdp-hero-overlay{ position:relative; z-index:2; }   /* your hero content */
.gdp-back{
  position:absolute; top:12px; left:12px; z-index:50; /* above overlay */
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:9999px;
  background:rgba(0,0,0,.55); color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:saturate(1.2) blur(4px);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  transition:background .2s ease, box-shadow .2s ease;
}
.gdp-back:hover{ background:rgba(0,0,0,.75); box-shadow:0 4px 18px rgba(0,0,0,.2); }
.gdp-back svg{ width:18px; height:18px; }
@media (max-width:420px){
  .gdp-back{ top:8px; left:8px; padding:5px 10px; gap:6px; }
  .gdp-back svg{ width:16px; height:16px; }
}