/* =========================
   ABCBonus — /css/general.css
   Theme: Gold + Navy, modern, subtle glow
   ========================= */

/* ---------- CSS Variables ---------- */
:root{
  /* Brand palette */
  --bg:#071737;
  --bg-2:#0b2e73;
  --bg-3:#050c21;
  --gold-1:#f9d56e;
  --gold-2:#c9982a;
  --gold-3:#7a5a14;
  --text:#e8eefc;
  --muted:#a9b7d9;

  /* Surfaces */
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.12);

  /* Shadows / radii */
  --shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  --radius:18px;

  /* Layout */
  --wrap:1200px;
  --gutter:20px;

  /* Transitions */
  --t:200ms cubic-bezier(.2,.7,.2,1);

  /* Optional: set hero images here (uncomment + update filenames)
  --hero-desktop:url('/assets/<<YOUR_DESKTOP_HERO>>');
  --hero-mobile:url('/assets/<<YOUR_MOBILE_HERO>>');
  --gold-trails:url('/assets/<<YOUR_GOLD_TRAILS>>');
  */
}

/* ---------- Base & Typography ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 85% -10%, #123a93 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 10%, #0c265e 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-3) 100%);
  overflow-x:hidden;
}
::selection{background:rgba(249,213,110,.25)}
a{color:#cfe1ff; text-decoration:none; transition:color var(--t), opacity var(--t)}
a:hover{color:#fff}
img{max-width:100%; height:auto; display:block}

/* Containers */
.wrap{max-width:var(--wrap); margin:0 auto; padding:16px var(--gutter)}
.section{padding:56px 0}
.title{font-size:28px; margin:0 0 14px; font-weight:800}
.subtitle{margin:0 0 28px; color:var(--muted)}
.small{font-size:12px; opacity:.85; line-height:1.6}
.note{background:var(--glass-2); border:1px dashed var(--stroke); padding:12px 14px; border-radius:12px}
.gold-text{
  background:linear-gradient(180deg, var(--gold-1), var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 1px 0);white-space:nowrap}

/* ---------- Header / Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(10,20,45,.85), rgba(10,20,45,.55));
  border-bottom:1px solid var(--stroke);
}
.brand{display:flex; align-items:center; gap:12px; color:var(--text)}
.brand img{width:42px; height:42px; border-radius:50%; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.brand b{font-weight:800; letter-spacing:.2px; font-size:18px}

.menu{margin-left:auto}
.menu ul{list-style:none; display:flex; gap:20px; margin:0; padding:0}
.menu a{color:var(--muted); font-weight:600}
.menu a:hover,.menu a.is-active{color:var(--text)}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; font-weight:800; font-size:12px;
  background:var(--glass-2); border:1px solid var(--stroke); color:#dfe7ff;
}
.beta{
  background:linear-gradient(180deg, var(--gold-1), var(--gold-2));
  color:#0b2e73; border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow); margin-left:16px;
}

.menu-btn{
  display:none; margin-left:auto;
  background:transparent; border:1px solid var(--stroke); color:var(--text);
  padding:8px 10px; border-radius:10px; cursor:pointer; transition:background var(--t), border-color var(--t)
}
.menu-btn:hover{background:var(--glass-2); border-color:#2b3b6a}

/* ---------- Hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  /* Default hero uses gradients; you can add your image below */
  background:
    radial-gradient(800px 400px at 70% 0%, rgba(255,215,128,.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(7, 23, 55, 0.05) 0%, rgba(7, 23, 55, .85) 100%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-3) 100%);
}
.hero .inner{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; padding:84px 0 64px}
.hero-copy h1{
  font-size:clamp(36px, 4.6vw, 60px); line-height:1.06; margin:0 0 14px;
  background: linear-gradient(180deg, #ffffff, #b9c9ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 8px 20px rgba(0,0,0,.45); font-weight:800;
}
.hero-copy p{margin:0 0 24px; color:var(--muted); font-size:18px}
.disclosure{opacity:.9; font-size:13px}

.hero-card{
  background:rgba(255,255,255,.04); border:1px solid var(--stroke);
  border-radius:var(--radius); padding:18px; box-shadow: var(--shadow);
}
.hero-card header{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.hero-card header img{width:48px; height:48px; border-radius:50%}
.chip-badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  background:rgba(249,213,110,.12); color:var(--gold-1); border:1px solid rgba(249,213,110,.25); font-weight:700; font-size:12px;
}
.chip-note{display:inline-flex; padding:8px 10px; border-radius:10px; background:var(--glass-2); border:1px dashed var(--stroke); color:#cfe1ff; font-size:13px; margin-top:6px}
.points{display:grid; gap:10px; padding-left:0; list-style:none; color:#dfe7ff; font-size:15px}

.hero-trails{
  position:absolute; inset:auto 0 -20px 0; height:120px; pointer-events:none; opacity:.5;
  /* Optional: enable your gold trails asset */
  /* background: center/contain no-repeat var(--gold-trails); */
}

/* Hero variants */
.hero--soft{
  background:
    radial-gradient(800px 400px at 70% 0%, rgba(255,215,128,.07) 0%, transparent 60%),
    linear-gradient(180deg, rgba(7, 23, 55, 0.06) 0%, rgba(7, 23, 55, .9) 100%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-3) 100%);
}
.hero--rg{
  background:
    radial-gradient(700px 360px at 20% 0%, rgba(11,46,115,.35) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10, 30, 72, .5) 0%, rgba(10, 20, 45, .9) 100%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-3) 100%);
}

/* Optional hero images via CSS only (desktop/mobile)
   Uncomment + set URLs if you want images baked into CSS:
.hero{
  background:
    radial-gradient(800px 400px at 70% 0%, rgba(255,215,128,.12) 0%, transparent 60%),
    var(--hero-desktop) center/cover no-repeat,
    linear-gradient(180deg, rgba(7, 23, 55, 0.05) 0%, rgba(7, 23, 55, .85) 100%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-3) 100%);
}
@media (max-width:900px){
  .hero{
    background:
      radial-gradient(800px 400px at 70% 0%, rgba(255,215,128,.12) 0%, transparent 60%),
      var(--hero-mobile) center/cover no-repeat,
      linear-gradient(180deg, rgba(7, 23, 55, 0.05) 0%, rgba(7, 23, 55, .85) 100%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-3) 100%);
  }
}
*/

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:14px 18px; border-radius:14px; font-weight:800;
  border:1px solid var(--stroke); color:var(--text);
  background:var(--glass); box-shadow: var(--shadow);
  transition:transform var(--t), filter var(--t), background var(--t), border-color var(--t)
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.08); border-color:#32406b}
.btn:active{transform:translateY(0)}
.btn.primary{
  color:#0b2e73;
  background:linear-gradient(180deg, var(--gold-1), var(--gold-2));
  border:1px solid rgba(0,0,0,.06);
}
.btn.disabled,[aria-disabled="true"]{
  opacity:.6; pointer-events:none; filter:grayscale(30%);
}

/* ---------- Grids & Cards ---------- */
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.grid--steps .card{min-height:140px}
.grid--cards .card{min-height:180px}
@media (max-width:980px){ .grid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .grid{grid-template-columns:1fr} }

.card{
  background:rgba(255,255,255,.05); border:1px solid var(--stroke);
  border-radius:var(--radius); box-shadow: var(--shadow);
  padding:18px; display:flex; flex-direction:column; gap:14px;
}
.card h3{margin:0; font-size:20px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  background:rgba(249,213,110,.12); color:var(--gold-1); border:1px solid rgba(249,213,110,.25); font-weight:700; font-size:12px;
}
.rating{letter-spacing:1px; color:var(--gold-1); text-shadow:0 0 10px rgba(249,213,110,.25)}

/* ---------- Featured (Unavailable Overlay) ---------- */
.featured{position:relative}
.featured .grid{transition:filter var(--t), opacity var(--t)}
.featured.is-unavailable .grid{
  filter: blur(2px) brightness(.6);
  pointer-events:none; user-select:none;
}
.unavailable-banner{
  position:relative;
  margin:18px 0 0 0;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:14px;
  background:linear-gradient(180deg, rgba(10,20,45,.85), rgba(10,20,45,.65));
  border:1px dashed var(--stroke);
  color:#dfe7ff; font-weight:700;
}
.unavailable-banner strong{
  color:#0b2e73; background:linear-gradient(180deg, var(--gold-1), var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Lists / Content helpers ---------- */
.bullets{padding-left:18px}
.bullets li{margin:8px 0}
.linklist{list-style:none; padding:0; margin:10px 0}
.linklist li{margin:6px 0}
.linklist a{display:inline-flex; align-items:center; gap:8px}

.faq{background:var(--glass-2); border:1px solid var(--stroke); border-radius:12px; padding:10px 12px; margin:10px 0}
.faq > summary{cursor:pointer; font-weight:800}
.faq > p{margin:10px 0 0 0; color:#dfe7ff}

/* Table-like component (Privacy cookies) */
.table-like{display:grid; gap:0; border:1px solid var(--stroke); border-radius:12px; overflow:hidden}
.table-like .row{display:grid; grid-template-columns:1fr 2fr 1.5fr 1fr; gap:0; padding:12px 14px; border-top:1px solid var(--stroke)}
.table-like .row.head{background:rgba(255,255,255,.06); font-weight:800; border-top:none}
@media (max-width:800px){
  .table-like .row{grid-template-columns:1fr; border-top:1px solid var(--stroke)}
}

/* ---------- Dividers ---------- */
.divider{height:96px; margin:0; opacity:.7}
.divider--gold{
  background:
    radial-gradient(400px 60px at 30% 50%, rgba(249,213,110,.35), transparent 60%),
    radial-gradient(400px 60px at 70% 50%, rgba(249,213,110,.35), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  /* Optional: use your golden streak asset
  background:
    center/contain no-repeat var(--gold-trails),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  */
}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(10,20,45,.6), rgba(5,12,33,.9));
}
.foot{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:28px var(--gutter)}
.foot-links a{color:var(--muted); margin-right:16px}
.foot-links a:hover{color:var(--text)}
.legal{opacity:.85; font-size:12px; line-height:1.6}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .menu{display:none}
  .menu.open{
    display:block; position:absolute; left:0; right:0; top:64px;
    background:rgba(9,18,42,.96); border-bottom:1px solid var(--stroke)
  }
  .menu ul{flex-direction:column; padding:14px var(--gutter)}
  .menu-btn{display:inline-flex}
  .beta{display:none}
  .hero .inner{grid-template-columns:1fr; padding:64px 0 44px}
  .foot{grid-template-columns:1fr}
}

/* ---------- Page-specific hints ---------- */
.page-contact .hero--soft .hero-copy p,
.page-privacy .hero--soft .hero-copy p,
.page-terms .hero--soft .hero-copy p,
.page-about .hero--soft .hero-copy p{max-width:70ch}

.page-rg .section--highlight{
  background:
    linear-gradient(135deg, rgba(11,46,115,.25), rgba(10,20,45,.45)),
    linear-gradient(180deg, transparent, rgba(255,255,255,.02));
  border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke);
}

/* ---------- Nice touches ---------- */
.btn, .card, .hero-card{will-change:transform, filter}
.card:hover{transform:translateY(-2px)}
.card:active{transform:translateY(-0px)}
.menu a, .foot-links a{position:relative}
.menu a:is(:hover,:focus-visible)::after,
.foot-links a:is(:hover,:focus-visible)::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:linear-gradient(90deg, var(--gold-1), var(--gold-2));
  border-radius:2px; opacity:.9; transform:scaleX(1); transition:transform var(--t)
}

/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* Header layout: brand left, nav/menu right */
.nav .wrap{
  display:flex;
  align-items:center;
  gap:16px;
}
.menu{ margin-left:auto; }     /* desktop: linki na prawo */
.menu-btn{ margin-left:auto; } /* mobile: przycisk "Menu" na prawo */


/* Hide beta pill in the topbar */
.beta{ display:none !important; }