/* mb-pt-09 — Mostbet Portugal — royal blue theme */

:root{
  --surface:#0f3d75;
  --primary:#154d8f;
  --primary-2:#1c5aa3;
  --accent:#ffcc33;
  --accent-ink:#1a2f4d;
  --text:#eef4ff;
  --muted:#b9cbe8;
  --line:rgba(255,255,255,.14);
  --radius:16px;
  --radius-sm:10px;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;
  --space-8:32px;--space-12:48px;--space-16:64px;

  --z-dropdown:100;--z-sticky:200;--z-toast:1100;

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.2;margin:0 0 var(--space-4)}
h1{font-size:clamp(1.9rem,4.2vw + 1rem,2.9rem)}
h2{font-size:clamp(1.5rem,2.6vw + 1rem,2.1rem)}
h3{font-size:1.2rem}
p{margin:0 0 var(--space-4);color:var(--text)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--space-4)}

.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--accent);color:var(--accent-ink);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);
  z-index:var(--z-toast);font-weight:700;
}
.skip-link:focus{left:var(--space-4);top:var(--space-4)}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:12px 22px;border-radius:999px;font-weight:700;text-decoration:none;
  border:2px solid transparent;cursor:pointer;font-size:1rem;min-height:44px;
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-lg{padding:14px 30px;font-size:1.05rem}
.btn-ghost{background:transparent;border-color:var(--accent);color:var(--accent)}

/* header */
.site-header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--primary);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);padding-block:var(--space-3);
}
.brand{display:inline-flex;align-items:center}
.brand-logo{height:32px;width:auto}

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-sm);
  background:transparent;border:1px solid var(--line);
  position:relative;cursor:pointer;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:11px;right:11px;height:2px;background:var(--text);
}
.nav-toggle span{top:21px}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}

.site-nav{
  display:none;
  align-items:center;
  gap:var(--space-6);
}
.site-nav a{
  text-decoration:none;color:var(--text);font-weight:600;font-size:.95rem;
  padding:var(--space-2) 0;
}
.site-nav a:hover{color:var(--accent)}
.nav-cta{padding:10px 20px !important;min-height:auto}

.site-nav.open{
  display:flex;flex-direction:column;align-items:stretch;
  position:absolute;left:0;right:0;top:100%;
  background:var(--primary);
  padding:var(--space-4);
  border-bottom:1px solid var(--line);
  gap:var(--space-3);
}
.site-nav.open a{padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.site-nav.open .nav-cta{border-bottom:none;text-align:center;margin-top:var(--space-2)}

@media (min-width:64em){
  .nav-toggle{display:none}
  .site-nav{display:flex;position:static;background:none;padding:0;border:0}
  .site-nav.open{position:static}
  .site-nav a{border-bottom:none}
}

/* hero */
.hero{
  padding-block:var(--space-12) var(--space-8);
  background:
    radial-gradient(1100px 460px at 85% -10%, rgba(255,204,51,.16), transparent 60%),
    linear-gradient(180deg, var(--primary) 0%, var(--surface) 70%);
}
.hero-inner{display:flex;flex-direction:column;gap:var(--space-8)}
.eyebrow{
  text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:700;
  color:var(--accent);margin:0 0 var(--space-3);
}
.hero-copy p{max-width:62ch}

.hero-stats{
  display:grid;gap:var(--space-3);
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
}
.stat-tile{
  background:var(--primary);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-4);
  display:flex;flex-direction:column;gap:4px;
}
.stat-num{font-size:1.6rem;font-weight:800;color:var(--accent)}
.stat-label{font-size:.85rem;color:var(--muted)}

@media (min-width:64em){
  .hero-inner{flex-direction:row;align-items:center;justify-content:space-between}
  .hero-copy{flex:1.3}
  .hero-stats{flex:.8;grid-template-columns:1fr}
}

/* sections */
.section{padding-block:var(--space-12)}
.section-alt{background:var(--primary)}
.section h2{max-width:52ch}
.section p{max-width:72ch}

/* tables */
.table-wrap{overflow-x:auto;margin-block:var(--space-4)}
table{
  width:100%;border-collapse:collapse;min-width:560px;
  background:rgba(255,255,255,.04);border-radius:var(--radius);overflow:hidden;
}
thead th{
  text-align:left;background:rgba(0,0,0,.18);
  padding:var(--space-3) var(--space-4);font-size:.85rem;
  color:var(--accent);text-transform:uppercase;letter-spacing:.04em;
}
tbody td{
  padding:var(--space-3) var(--space-4);border-top:1px solid var(--line);
}

@media (max-width:40em){
  table,thead,tbody,tr,td{display:block}
  thead{display:none}
  table{min-width:0}
  tr{margin-bottom:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
  td{
    display:flex;justify-content:space-between;gap:var(--space-3);
    padding:var(--space-3) var(--space-4);border-top:1px solid var(--line);
    text-align:right;
  }
  td:first-child{border-top:0}
  td::before{
    content:attr(data-label);font-weight:700;color:var(--muted);text-align:left;
  }
}

/* promo */
.promo-layout{display:flex;flex-direction:column;gap:var(--space-6)}
.promo-card{
  background:var(--surface);
  border:1px dashed var(--accent);
  border-radius:var(--radius);
  padding:var(--space-6);
  max-width:420px;
}
.promo-card-label{margin:0 0 var(--space-3);font-weight:700;color:var(--muted)}
.promo-code-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.promo-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.3rem;font-weight:700;letter-spacing:.06em;
  background:rgba(255,204,51,.14);color:var(--accent);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);
}
.promo-card-note{margin:var(--space-3) 0 0;font-size:.85rem;color:var(--muted)}

@media (min-width:64em){
  .promo-layout{flex-direction:row;align-items:flex-start;gap:var(--space-8)}
  .promo-layout p{flex:1.3}
  .promo-card{flex:1}
}

/* games */
.games-spotlight{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-6)}
.games-grid{
  display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
}
.game-card{
  background:var(--primary);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);
}
.game-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.game-media img{width:100%;height:100%;object-fit:cover}
.game-play{
  position:absolute;inset:auto 0 0 0;
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-3);
  background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  color:var(--accent);font-weight:700;font-size:.9rem;
  opacity:0;transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;
}
.game-card:hover .game-play,.game-card:focus-within .game-play{opacity:1;transform:translateY(0)}
.game-info{padding:var(--space-3) var(--space-4)}
.game-info h3{margin:0 0 4px;font-size:1rem}
.game-info p{margin:0;font-size:.85rem;color:var(--muted)}

.game-card--featured{border-color:var(--accent)}
.game-card--featured .game-media{aspect-ratio:16/9}

@media (min-width:48em){
  .games-spotlight{flex-direction:row;align-items:stretch}
  .game-card--featured{flex:1.1}
  .games-grid{flex:1;grid-template-columns:repeat(2,1fr)}
}

/* payments */
.pay-logos{
  display:grid;gap:var(--space-3);
  grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));
  margin-bottom:var(--space-6);
}
.pay-logo{
  background:#fff;border-radius:var(--radius-sm);
  padding:var(--space-3);display:flex;align-items:center;justify-content:center;
  min-height:64px;
}
.pay-logo img{max-height:32px;width:auto;object-fit:contain}

/* bonus */
.bonus-timeline{
  display:grid;gap:var(--space-4);margin-bottom:var(--space-6);
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
}
.timeline-card{
  background:var(--primary);border-radius:var(--radius);
  padding:var(--space-6);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;
}
.timeline-when{color:var(--muted);font-size:.85rem;font-weight:600}
.timeline-pct{font-size:2rem;font-weight:800;color:var(--accent)}
.timeline-card p{margin:0;color:var(--text)}

.wager-compare{
  display:flex;flex-direction:column;gap:var(--space-3);
  margin-bottom:var(--space-6);
  background:var(--primary);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-6);
}
.wager-bar-row{display:grid;grid-template-columns:120px 1fr 44px;gap:var(--space-3);align-items:center}
.wager-label{font-size:.9rem;color:var(--muted)}
.wager-bar-track{height:12px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.wager-bar-fill{height:100%;border-radius:999px;background:var(--accent)}
.wager-bar-fill--sport{width:8%}
.wager-bar-fill--casino{width:100%}
.wager-value{font-weight:700;color:var(--accent);text-align:right}

/* faq */
.faq-list{display:flex;flex-direction:column;gap:var(--space-3)}
.faq-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--space-4) var(--space-4);
}
.faq-item summary{
  cursor:pointer;font-weight:700;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.3rem;color:var(--accent);flex-shrink:0}
.faq-item[open] summary::after{content:"−"}
.faq-item p{margin:var(--space-3) 0 0;color:var(--muted)}

/* footer */
.site-footer{
  background:var(--primary);border-top:1px solid var(--line);
  padding-block:var(--space-8);margin-top:var(--space-8);
}
.footer-top{
  display:flex;flex-direction:column;gap:var(--space-4);
  padding-bottom:var(--space-4);border-bottom:1px solid var(--line);margin-bottom:var(--space-4);
}
.footer-nav{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.footer-nav a{text-decoration:none;font-size:.9rem;color:var(--muted)}
.footer-nav a:hover{color:var(--accent)}
.footer-legal-nav{margin-bottom:var(--space-4);font-size:.85rem}
.footer-18{font-size:.85rem;color:var(--muted);max-width:70ch}
.footer-copy{font-size:.8rem;color:var(--muted);margin:0}

@media (min-width:48em){
  .footer-top{flex-direction:row;align-items:center;justify-content:space-between}
}

/* back to top */
.back-to-top{
  position:fixed;right:var(--space-4);bottom:var(--space-4);
  width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);border:none;
  font-size:1.2rem;cursor:pointer;display:none;align-items:center;justify-content:center;
  z-index:var(--z-sticky);box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.back-to-top.visible{display:flex}