/* ==========================================================================
   StarBoost — discovery.css
   Dedicated stylesheet for discovery.php. This is a near-literal port of
   the project owner's Discovery mockup (2026-08-06) — same :root color
   values, same card structure, same filter-menu technique (sibling
   elements positioned absolutely off the filter bar, not nested), copied
   directly rather than approximated against the site's existing
   --blue/--gold tokens (an earlier pass substituted those and the
   mismatch — wrong blue shade, missing title, restructured menus — was
   the actual complaint). These :root values intentionally override
   base.css's --blue/--gold/etc for this page only (discovery.css loads
   after base.css) so the sidebar/topbar pick up the mockup's exact
   palette too, consistent with the rest of this page.
   ========================================================================== */

:root{
  --purple:#6C5CE7;
  --purple-light:#A29BFE;
  --blue:#4C7EF3;
  --blue-dark:#3D63D9;
  --gold:#F5A623;
  --gold-dark:#DC8F14;
  --green:#00B894;
  --green-dark:#04976F;
  --mint:#EAF7EF;
  --chip-blue-bg:#E8EEFE;
  --chip-blue-text:#4C6FEC;
  --peach-bg:#FDF1DC;
  --ink:#1D2333;
  --muted:#8A93AD;
  --line:#EFEFF5;
  --bg-soft:#F6F7FB;
  --error:#E5484D;
}

.discovery-shell{max-width:640px; margin:0 auto; position:relative; padding-bottom:calc(var(--nav-height, 78px) + 24px);}

/* ===== HEADER (mockup's db-header, now real data) ===== */
.db-header{
  background:linear-gradient(135deg, var(--purple), #5847D0); color:#fff; padding:22px 20px 26px;
  border-radius:0 0 26px 26px; margin:0 -28px 16px; position:relative; overflow:hidden;
}
.db-header::before{content:''; position:absolute; width:220px; height:220px; border-radius:50%; background:var(--gold); opacity:.2; filter:blur(55px); top:-90px; right:-70px;}
.db-header .top-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:0px; position:relative; z-index:2;}
.db-header h1{font-size:1.3rem; font-weight:800; margin:0; color:#fff;}
.db-header .sub{font-size:.82rem; color:rgba(255,255,255,.8); margin:2px 0 0;}
.search-btn{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.15); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; transition:.2s;
}
.search-btn:hover{background:rgba(255,255,255,.28);}
.disc-search-box{
  align-items:center; gap:10px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  border-radius:14px; padding:10px 14px; margin-bottom:4px; position:relative; z-index:2;
}
.disc-search-box i{color:rgba(255,255,255,.75);}
.disc-search-box input{flex:1; background:none; border:none; color:#fff; font-family:'Poppins',sans-serif; font-size:.86rem; outline:none;}
.disc-search-box input::placeholder{color:rgba(255,255,255,.6);}

/* ===== DAILY PROGRESS CARD — its own prominent, notification-style card
   right below the hero (not inside it), showing real supports-done and
   real reward-collected progress against the real admin-configured daily
   cap/max. Left accent bar + icon badge give it the "notification" weight
   the info-hero/social-banner cards already establish on this page,
   without literally reusing either component. ===== */
.daily-progress-card{
  background:#fff; border:1.5px solid var(--line); border-left:4px solid var(--purple); border-radius:16px;
  padding:16px 18px; margin:0 0 16px; box-shadow:0 4px 16px rgba(108,92,231,.08);
}
.dpc-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.dpc-icon{
  width:38px; height:38px; flex-shrink:0; border-radius:11px; background:var(--chip-blue-bg, #E8EEFE); color:var(--purple);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.dpc-head h6{font-size:.9rem; font-weight:800; color:var(--ink); margin:0;}
.dpc-head p{font-size:.76rem; color:var(--muted); margin:0;}

.dpc-metric{margin-bottom:12px;}
.dpc-metric:last-child{margin-bottom:0;}
.dpc-metric-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.dpc-label{font-size:.78rem; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:6px;}
.dpc-label i{color:var(--purple); font-size:.76rem;}
.dpc-value{font-size:.85rem; font-weight:800; color:var(--ink);}
.dpc-of{font-weight:600; color:var(--muted); font-size:.78rem;}

.dpc-bar{height:8px; background:var(--bg-soft, #F6F7FB); border-radius:999px; overflow:hidden;}
.dpc-bar span{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--purple), var(--purple-light)); transition:width .3s ease;}
.dpc-bar.gold span{background:linear-gradient(90deg, var(--gold), #FFCB6B);}

@media(min-width:1160px){
  /* Above the dashboard's own max content width, the -28px bleed trick
     (matching .dash-content's real padding) has nothing left to bleed
     into — clamp back to a normal rounded card so it doesn't overflow. */
  .db-header{margin:0 0 16px; border-radius:26px;}
}
@media(max-width:991px){
  .db-header{margin:0 -0.7rem 16px;}
}

/* ===== TOP INFO CARD — kept exactly as it was, per explicit instruction ===== */
.info-hero{
  background:linear-gradient(135deg, var(--blue), var(--blue-dark)); border-radius:20px; padding:22px;
  color:#fff; margin:0 0 16px; position:relative; overflow:hidden;
}
.info-hero::before{content:''; position:absolute; width:200px; height:200px; border-radius:50%; background:var(--gold); opacity:.18; filter:blur(50px); top:-80px; right:-60px;}
.info-hero-badge{
  display:inline-flex; align-items:center; gap:6px; background:var(--gold); color:#fff; font-weight:700; font-size:.76rem;
  padding:6px 14px; border-radius:999px; margin-bottom:12px; position:relative; z-index:2;
}
.info-hero p{color:rgba(255,255,255,.85); font-size:.86rem; line-height:1.55; margin-bottom:14px; position:relative; z-index:2; max-width:520px;}
.info-hero-learn{
  display:inline-flex; align-items:center; gap:6px; color:#fff; font-weight:700; font-size:.82rem;
  border-bottom:1.5px solid rgba(255,255,255,.5); padding-bottom:2px; position:relative; z-index:2; text-decoration:none;
}
.info-hero-learn:hover{color:#fff; border-color:#fff;}

.finds-today-card{
  display:flex; align-items:center; gap:14px; background:#FDF1DC!important; border-radius:16px; padding:16px 18px;
  margin:0 0 16px; box-shadow:0 2px 10px rgba(29,35,51,.05);
}
.finds-today-card .fc-icon{
  width:44px; height:44px; flex-shrink:0; border-radius:12px; background:var(--peach-bg); color:var(--gold-dark);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.finds-today-card p{margin:0; font-size:.86rem; line-height:1.5; color:var(--ink);}
.finds-today-card p strong{color:var(--ink); font-weight:700;}

/* ===== SOCIAL BANNER — kept exactly as it was, per explicit instruction ===== */
.social-banner{
  border-radius:16px; padding:16px 18px; margin-bottom:20px; display:flex; align-items:center; gap:14px;
  position:relative; border:1.5px solid; flex-wrap:wrap;
}
.social-banner .sb-icon{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.15rem; flex-shrink:0;}
.social-banner h6{font-size:.88rem; margin-bottom:2px; font-weight:700; color:var(--ink);}
.social-banner p{font-size:.78rem; color:var(--muted); margin:0;}
.social-banner .sb-btn{background:#fff; border-radius:10px; padding:9px 16px; font-weight:700; font-size:.8rem; white-space:nowrap; flex-shrink:0; text-decoration:none;}
.social-banner .sb-verify{
  background:transparent; border:1.5px solid rgba(0,0,0,.15); border-radius:10px; padding:8px 14px; font-weight:700; font-size:.78rem;
  color:var(--ink); white-space:nowrap; flex-shrink:0;
}
.banner-telegram{background:#EAF7FE; border-color:#C9EBFB;}
.banner-telegram .sb-icon{background:#229ED9;}
.banner-telegram .sb-btn{color:#229ED9;}
.banner-facebook{background:#EAF0FE; border-color:#C9D9FB;}
.banner-facebook .sb-icon{background:#1877F2;}
.banner-facebook .sb-btn{color:#1877F2;}
.banner-twitter{background:#F1F1F2; border-color:#D8D8DA;}
.banner-twitter .sb-icon{background:#111;}
.banner-twitter .sb-btn{color:#111;}

/* ===== SEARCH BAR TRIGGER — a static pill (not a live input) that opens
   the full-page Search & Filter popup. ===== */
.disc-search-trigger{
  width:100%; display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--line);
  border-radius:16px; padding:13px 16px; box-shadow:0 6px 16px rgba(29,35,51,.06); cursor:pointer; margin:2px 0 14px;
  font-family:'Poppins',sans-serif;
}
.disc-search-trigger > i:first-child{color:var(--muted); font-size:.9rem;}
.disc-search-trigger span{flex:1; text-align:left; font-size:.86rem; font-weight:600; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sst-filter-icon{color:var(--purple); font-size:.85rem;}

/* ===== SEARCH & FILTER MODAL — full-page popup (Bootstrap modal,
   modal-fullscreen), staged selections applied only on "Search". ===== */
.search-modal-content{border:none; border-radius:0; height:100%; display:flex; flex-direction:column;}
.search-modal-header{
  display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line);
}
.search-modal-header h5{font-size:1rem; font-weight:800; color:var(--ink); margin:0; display:flex; align-items:center; gap:8px;}
.search-modal-header h5 i{color:var(--purple);}
.sm-close{
  width:34px; height:34px; border-radius:50%; border:none; background:var(--bg-soft); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.sm-close:hover{background:var(--line); color:var(--ink);}

.search-modal-scroll{flex:1; overflow-y:auto; padding:20px;}
.sm-field{margin-bottom:26px;}
.sm-field:last-child{margin-bottom:0;}
.sm-field > label{display:block; font-size:.8rem; font-weight:700; color:var(--ink); margin-bottom:10px;}

.sm-search-input-wrap{
  display:flex; align-items:center; gap:10px; background:var(--bg-soft); border:1.5px solid var(--line);
  border-radius:14px; padding:13px 16px;
}
.sm-search-input-wrap i{color:var(--muted); font-size:.85rem;}
.sm-search-input-wrap input{flex:1; border:none; background:none; outline:none; font-family:'Poppins',sans-serif; font-size:.88rem; color:var(--ink);}

/* Plain dropdowns for Category/Sort — much simpler than a wall of pill
   buttons, and matches the same <select>-filter pattern already used
   elsewhere in the app (points-history.php, team-transaction.php, etc). */
.sm-select{
  width:100%; appearance:none; -webkit-appearance:none; background:var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238A93AD' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;
  border:1.5px solid var(--line); border-radius:14px; padding:13px 40px 13px 16px; font-family:'Poppins',sans-serif;
  font-size:.88rem; font-weight:600; color:var(--ink); cursor:pointer;
}
.sm-select:focus{outline:none; border-color:var(--purple);}

.search-modal-footer{padding:16px 20px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);}
.sm-search-btn{
  width:100%; background:linear-gradient(135deg, var(--purple), #5847D0); color:#fff; border:none; border-radius:14px;
  padding:14px; font-weight:800; font-size:.92rem; font-family:'Poppins',sans-serif; display:flex; align-items:center;
  justify-content:center; gap:8px; box-shadow:0 8px 20px rgba(108,92,231,.3);
}

/* ===== SECTION LABEL ===== */
.feed-section-label{display:flex; align-items:center; justify-content:space-between; padding:18px 2px 10px;}
.feed-section-label h6{font-size:.8rem; font-weight:700; margin:0; color:var(--ink); display:flex; align-items:center; gap:6px;}
.feed-section-label a{font-size:.74rem; color:var(--blue); font-weight:600; text-decoration:none;}
.feed-section-label a:hover{color:var(--blue-dark);}

/* ===== DISCOVERY CARD ===== */
.feed-list{display:flex; flex-direction:column; gap:18px;}
.disc-card{background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 10px 26px rgba(29,35,51,.07);}

.card-top{padding:16px 7px 0;}
/* Featured tag sits on its own row above the breadcrumb/category tags —
   a real block, not just first-in-line within the same inline-flex row. */
.card-top-featured-row{display:block;}
.card-top-tags{display:flex; flex-wrap:wrap; align-items:center; gap:0;}
.feed-category-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:700;
  color:var(--blue); background:var(--chip-blue-bg); padding:4px 11px; border-radius:999px;
  margin-bottom:8px; text-transform:uppercase; letter-spacing:.03em;
}
.feed-category-tag i{font-size:.62rem;}
.feed-category-tag.gray{color:var(--muted); background:#F0F1F6; margin-left:6px;}
.feed-category-tag.gold{color:var(--gold-dark); background:var(--peach-bg); margin-left:6px;}

.card-creator{display:flex; align-items:center; gap:10px; padding:12px 7px 0;}
.avatar{
  width:40px; height:40px; border-radius:50%; 
  /*background-color:var(--purple);*/ 
  background-size:cover; background-position:center; display:block; flex-shrink:0;
}
.creator-meta{flex:1; min-width:0;}
.creator-name-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.creator-name-row span, .creator-name-row a.creator-link{font-size:.92rem; font-weight:700; color:var(--ink); text-decoration:none;}
.creator-name-row a.creator-link:hover{color:var(--purple); text-decoration:underline;}
.creator-name-row .fa-circle-check{color:var(--gold); font-size:.85rem;}
.creator-meta .date{font-size:.72rem; color:var(--muted);}
.name-status-badge{
  font-size:.62rem; font-weight:700; padding:3px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:4px;
}
.name-status-badge.rising{background:#FFE9E4; color:#E4572E;}
.admin-post-badge{
  font-size:.62rem !important; font-weight:700 !important; padding:3px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:4px;
  background:linear-gradient(135deg, var(--gold), #E4972E); color:#fff !important;
}
.admin-post-badge i{font-size:.62rem;}

.star-banner{
  margin:12px 7px 0; background:var(--peach-bg); border-radius:12px; padding:11px 14px;
  display:flex; align-items:center; justify-content:space-between; text-decoration:none;
}
.star-banner .left{display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; color:var(--ink);}
.star-banner .badge-star{
  width:22px; height:22px; border-radius:50%; background:var(--gold); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.65rem; flex-shrink:0;
}
.star-banner .view-profile-link{color:var(--gold-dark); font-size:.78rem; font-weight:700;}

.card-title{padding:14px 10px 0; font-size:1.08rem; font-weight:700; color:var(--ink);}

/* Descriptions come from the Trumbowyg rich-text editor and can contain
   <p>/<ul>/<strong>/<br> etc. Styled as a quote per the mockup — but
   deliberately never clamped/truncated (a past explicit fix removed
   truncation here because it was hiding real ad content from viewers). */
.card-quote{
  margin:8px 10px 0; padding-left:12px; border-left:3px solid #EAF1FE;
  font-size:.86rem; color:#65708A; line-height:1.5; font-family:'Poppins',sans-serif;
  padding-top: 8px;
}
.card-quote p{margin:0 0 .5rem;}
.card-quote p:last-child{margin-bottom:0;}
.card-quote ul, .card-quote ol{margin:.2rem 0 .4rem; padding-left:1.1rem;}
.card-quote strong, .card-quote b{font-weight:700; color:var(--ink); font-style:normal;}
.card-quote a{color:var(--blue); text-decoration:underline;}
/* No default table/th/td styling here, deliberately — tables can only be
   added via Trumbowyg's raw "View HTML" mode, and any real content always
   comes with its own full inline styling (width/colors/borders/padding).
   A prior attempt at sensible defaults here (border/padding/header
   background) kept fighting that inline styling in ways that are easy to
   introduce and easy to miss (e.g. a cell's own background always paints
   over its row's background regardless of !important, and a color rule
   targeting <th> directly beats one only inherited from its <tr>) — so
   per explicit direction, tables are left completely unstyled by this
   stylesheet; adjust via inline styles per-table if needed. */

.card-media{
  margin-top:14px; position:relative; min-height:190px; overflow:hidden; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:var(--mint);
}
/*.card-media img{width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0;}*/
.card-media img{width:100%; height:100%; object-fit:cover; display:block; inset:0;}
.media-illustration{font-size:3rem; color:#B9DCC5; position:relative; z-index:1;}
.media-tint-community{background:#EFF6FF;}
.media-tint-community .media-illustration{color:#9DC0F5;}
.media-tint-profile{background:#FFF4EA;}
.media-tint-profile .media-illustration{color:#F3C98A;}

.media-badge-tl{
  position:absolute; top:12px; left:14px; padding:5px 12px; border-radius:999px; z-index:2;
  font-size:.66rem; font-weight:700; display:flex; align-items:center; gap:5px; background:rgba(29,35,51,.55); color:#fff;
}
.pts-badge{
  position:absolute; top:12px; right:14px; background:linear-gradient(135deg, var(--gold), var(--gold-dark));
  color:#fff; font-weight:700; font-size:.78rem; padding:7px 14px; border-radius:999px; display:flex; align-items:center; gap:6px; z-index:2;
}
.feed-watched-overlay{
  position:absolute; inset:0; background:rgba(29,35,51,.55); display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.82rem; flex-direction:column; gap:6px; z-index:3;
}

/* "X Scouts found this" — real found_by_count, with up to 3 real overlapping
   scout avatars (most-recent claimants), not decorative placeholders. */
.found-strip{display:flex; align-items:center; gap:8px; padding:14px 7px 0; font-size:.78rem; color:var(--muted); margin-top: 25px;}
.found-strip .avatars{display:flex;}
.found-strip .avatars span{width:22px; height:22px; border-radius:50%; background-color:var(--purple-light); background-size:cover; background-position:center; border:2px solid #fff; margin-left:-8px; display:inline-block;}
.found-strip .avatars span:first-child{margin-left:0;}
.found-strip strong{color:var(--ink);}

.card-footer{
  display:flex; align-items:center; justify-content:space-between; padding:16px 18px 18px;
  border-top:1px solid var(--line); margin-top:14px;
}
.footer-icons{display:flex; gap:16px;}
.footer-icons span{font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:6px;}
.footer-icons i.liked{color:var(--error);}

.cta-btn{
  background:linear-gradient(135deg, var(--blue), var(--blue-dark)); color:#fff; border:none; text-decoration:none;
  font-weight:700; font-size:.86rem; padding:8px 20px; border-radius:12px; display:flex; align-items:center; gap:8px;
}
.cta-btn:hover{color:#fff; opacity:.92;}
.cta-btn.cta-community{background:linear-gradient(135deg, var(--green), var(--green-dark));}
.cta-btn.cta-profile{background:linear-gradient(135deg, var(--gold), var(--gold-dark));}
.cta-btn.watched{background:#E7FBF5; color:var(--green);}
.cta-btn.watched:hover{opacity:.85;}
.cta-btn.guest-login{background:var(--ink);}

/* ---- Fixed promote FAB (existing component, unchanged) ---- */
/* Back to top — floating, hidden until the user has actually scrolled down
   (left side, so it never collides with the promote FAB on the right). */
.back-to-top-btn{
  position: fixed; left: 16px; bottom: calc(var(--nav-height, 78px) + 14px); z-index: 1050;
  width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--line);
  color: var(--purple); display: flex; align-items: center; justify-content: center; font-size: .95rem;
  box-shadow: 0 8px 20px rgba(29,35,51,.12); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: .2s ease;
}
.back-to-top-btn.visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top-btn:hover{ background: var(--chip-blue-bg); }

.promote-fixed-container { position: fixed; right: 16px; bottom: calc(var(--nav-height, 78px) + 14px); z-index: 1055; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.ad-promote-button { width: 58px; height: 58px; border-radius: 50%; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(245, 166, 35, 0.45); transition: transform 0.2s ease; border: none; }
.ad-promote-button:hover { background:var(--gold-dark); transform: translateY(-2px) scale(1.03); color: #fff; }
.promote-label { font-size: 0.7rem; color: var(--ink); font-weight: 700; }

/* ---- "Get Featured" modal (#adModal) ---- */
.gf-modal{ border-radius:26px; border:none; overflow:hidden; box-shadow:0 30px 70px rgba(20,20,50,.28); }

/* Dark glass circle with a real Font Awesome X icon, NOT Bootstrap's
   .btn-close/.btn-close-white — those render the X as a background-image
   and use a CSS `filter: invert(1) grayscale(100%) brightness(200%)` to
   turn it white. That filter applies to the WHOLE element, not just the
   icon — so it was also inverting our dark circle into a near-white one,
   which is exactly the "white circle, no X" bug being fixed here. Building
   the icon as real markup sidesteps that filter entirely. */
.gf-close{
  position:absolute; top:14px; right:14px; z-index:4; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:none; padding:0;
  background-color:rgba(15,15,35,.32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; font-size:.85rem; box-shadow:0 2px 8px rgba(0,0,0,.15); transition:.15s;
}
.gf-close:hover{ background-color:rgba(15,15,35,.5); transform:scale(1.06); }

.gf-hero{
  position:relative; overflow:hidden; text-align:center; padding:38px 24px 30px;
  background:linear-gradient(150deg, #7B6BF0 0%, var(--purple) 45%, var(--blue) 100%); color:#fff;
}
.gf-hero::before{
  content:''; position:absolute; width:220px; height:220px; border-radius:50%;
  background:var(--gold); opacity:.28; filter:blur(50px); top:-90px; right:-60px;
}
.gf-hero::after{
  content:''; position:absolute; width:160px; height:160px; border-radius:50%;
  background:#fff; opacity:.08; filter:blur(40px); bottom:-70px; left:-40px;
}
.gf-hero-icon{
  width:60px; height:60px; margin:0 auto 14px; border-radius:50%;
  background:rgba(255,255,255,.14); backdrop-filter:blur(4px);
  border:1.5px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:var(--gold); position:relative; z-index:2; box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.gf-title{ font-size:1.45rem; font-weight:800; margin:0 0 6px; position:relative; z-index:2; letter-spacing:-.2px; }
.gf-subtitle{ font-size:.86rem; margin:0; opacity:.92; position:relative; z-index:2; }

.gf-body{ padding:24px 22px 24px; }

.gf-features{ display:flex; flex-direction:column; gap:10px; margin-bottom:35px; }
.gf-feature{
  display:flex; align-items:center; gap:13px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:13px 14px; transition:.15s;
}
.gf-feature:hover{ border-color:var(--purple-light); box-shadow:0 6px 16px rgba(108,92,231,.1); transform:translateY(-1px); }
.gf-feature-icon{
  width:40px; height:40px; flex-shrink:0; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.gf-feature:nth-child(1) .gf-feature-icon{ background:var(--blue-soft, #EAF1FE); color:var(--blue); }
.gf-feature:nth-child(2) .gf-feature-icon{ background:#F0EDFC; color:var(--purple); }
.gf-feature:nth-child(3) .gf-feature-icon{ background:#FFF3DE; color:var(--gold-dark); }
.gf-feature-text{ display:flex; flex-direction:column; line-height:1.35; }
.gf-feature-text strong{ font-size:.87rem; color:var(--ink); font-weight:700; }
.gf-feature-text span{ font-size:.76rem; color:var(--muted); }

.gf-badge{
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:#FFF6E4; color:var(--gold-dark);
  border-radius:999px; padding:9px 14px; font-size:.78rem; font-weight:700; margin-bottom:18px;
}

.gf-cta{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  background:linear-gradient(120deg, var(--gold), #E8940D); color:#000 !important;
  border:none; border-radius:15px; padding:15px; font-weight:600; font-size:.94rem; transition:.18s;
  box-shadow:0 12px 26px rgba(245,166,35,.38);
}
.gf-cta:hover{ background:linear-gradient(120deg, #E8940D, var(--gold-dark)); transform:translateY(-2px); box-shadow:0 16px 32px rgba(245,166,35,.46); }

/* ---- Empty / error state ---- */
/* Empty state now uses the shared .dash-empty-state component (base.css) —
   same solid-card look as the Team pages/points-history.php, instead of
   this page's own dashed-border style. */

/* ---- Skeleton loading ---- */
.skeleton-card { padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; margin-bottom: 1rem; }
.skeleton-loading { position: relative; overflow: hidden; }
.skeleton-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(76,126,243,0.08), transparent); animation: sb-shimmer 1.5s infinite; }
@keyframes sb-shimmer { 100% { transform: translateX(100%); } }
.skeleton-element { margin-bottom: 0.75rem; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--line); margin-right: 0.75rem; }
.skeleton-name { width: 120px; height: 14px; background: var(--line); border-radius: 4px; }
.skeleton-time { width: 80px; height: 11px; background: var(--line); border-radius: 4px; margin-top: 6px; }
.skeleton-text { height: 14px; background: var(--line); border-radius: 4px; margin-bottom: 8px; }
.skeleton-text.short { width: 80%; }
.skeleton-text.medium { width: 60%; }
.skeleton-media { height: 260px; background: var(--line); border-radius: 12px; }
.skeleton-button { width: 80px; height: 30px; background: var(--line); border-radius: 999px; }
.skeleton-action { width: 40px; height: 30px; background: var(--line); border-radius: 999px; margin-left: 8px; }

@media (min-width: 768px) {
  .info-hero{padding:30px;}
  .db-header{padding:26px 26px 30px;}
  .social-banner{padding:18px 22px;}
}
@media (max-width: 576px) {
  .ad-promote-button { width: 52px; height: 52px; }
  .info-hero { padding: 1.25rem 1.1rem; }
  .db-header { padding: 1.1rem 1rem 1.3rem; }
  .cat-menu, .sort-menu{width:180px;}
}