/* 123win bet - theme styles (class prefix: uid7-) */
/* Mobile-first; root font 62.5% for rem units */

:root{
  --uid7-primary: #9932CC;
  --uid7-bg: #2C3E50;
  --uid7-text: #F8F9FA;
  --uid7-accent: #C71585;
  --uid7-warm: #FF6347;
  --uid7-soft: #CD5C5C;
  --uid7-dark: #1d2b3a;
  --uid7-card: #34495e;
  --uid7-gold: #FFD27A;
  --uid7-radius: 14px;
  --uid7-shadow: 0 6px 18px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
html,body{ margin:0; padding:0; }
body{
  font-family: "Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
  background: var(--uid7-bg);
  color: var(--uid7-text);
  font-size: 1.5rem;
  line-height: 1.55;
  max-width: 430px;
  margin: 0 auto;
  overflow-x: hidden;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--uid7-gold); text-decoration: none; }
h1,h2,h3,h4{ line-height: 1.3; margin: 0 0 .6em; font-weight: 700; }
h1{ font-size: 2.1rem; }
h2{ font-size: 1.8rem; color: var(--uid7-text); }
h3{ font-size: 1.55rem; color: var(--uid7-gold); }
p{ margin: 0 0 1em; }

.uid7-container{ width: 100%; padding: 0 12px; }
.uid7-section{ padding: 18px 0; }
.uid7-section--alt{ background: var(--uid7-dark); }
.uid7-wrapper{ max-width: 430px; margin: 0 auto; }

/* ---------- Header ---------- */
.uid7-header{
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(135deg, #9932CC 0%, #C71585 100%);
  color: var(--uid7-text);
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; min-height: 52px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.uid7-brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.5rem; color:#fff; }
.uid7-brand .uid7-logo{
  width: 28px; height: 28px; border-radius: 8px;
  background: radial-gradient(circle at 30% 30%, #FFD27A, #C71585);
  display:inline-flex; align-items:center; justify-content:center;
  color:#2C3E50; font-weight:900; font-size:1.2rem;
}
.uid7-header-actions{ display:flex; align-items:center; gap:6px; }
.uid7-menu-btn{
  background: rgba(255,255,255,.14); border: 0; color:#fff;
  width: 36px; height: 36px; border-radius: 8px; font-size: 1.6rem;
  cursor: pointer;
}
.uid7-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:0; border-radius: 20px; padding: 8px 14px; font-size: 1.3rem;
  font-weight:700; cursor:pointer; text-decoration:none; min-height: 36px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.uid7-btn:active{ transform: scale(.96); }
.uid7-btn--login{ background:#fff; color: var(--uid7-primary); }
.uid7-btn--register{ background: var(--uid7-warm); color:#fff; box-shadow: var(--uid7-shadow); }

/* ---------- Mobile menu ---------- */
.uid7-mobile-menu{
  display:none; flex-direction:column; gap: 2px;
  position: relative; z-index: 9999;
  background: var(--uid7-dark); padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.uid7-mobile-menu.uid7-menu-open{ display:flex; }
.uid7-mobile-menu a{
  color: var(--uid7-text); padding: 9px 8px; border-radius: 8px;
  font-size: 1.35rem; border-bottom: 1px solid rgba(255,255,255,.05);
}
.uid7-mobile-menu a:active{ background: rgba(153,50,204,.25); }

/* ---------- Hero / Carousel ---------- */
.uid7-hero{ position:relative; overflow:hidden; }
.uid7-slides{ position:relative; }
.uid7-slide{
  display:none; position:relative; border-radius: 0 0 18px 18px; overflow:hidden;
}
.uid7-slide.uid7-slide-active{ display:block; }
.uid7-slide img{ width:100%; min-height: 200px; object-fit: cover; }
.uid7-slide-cap{
  position:absolute; left:12px; right:12px; bottom:12px;
  background: linear-gradient(0deg, rgba(44,62,80,.85), rgba(44,62,80,0));
  padding: 12px 10px 6px; color:#fff; border-radius: 10px;
}
.uid7-slide-cap strong{ color: var(--uid7-gold); display:block; font-size:1.5rem; }
.uid7-slide-cap .uid7-cta{
  display:inline-block; margin-top:6px; background: var(--uid7-warm);
  color:#fff; padding:6px 12px; border-radius:16px; font-weight:700; font-size:1.2rem;
}
.uid7-dots{ display:flex; justify-content:center; gap:6px; padding:6px 0; }
.uid7-dot{
  width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.35);
  border:0; padding:0; cursor:pointer;
}
.uid7-dot.uid7-dot-active{ background: var(--uid7-gold); }

/* ---------- Title blocks ---------- */
.uid7-titlebar{
  display:flex; align-items:center; justify-content:space-between;
  margin: 6px 0 10px;
}
.uid7-titlebar h2{ margin:0; font-size:1.6rem; }
.uid7-titlebar .uid7-tag{
  background: var(--uid7-accent); color:#fff; font-size:1.05rem;
  padding: 2px 8px; border-radius: 10px; font-weight:700;
}

/* ---------- Game grid ---------- */
.uid7-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.uid7-card{
  background: var(--uid7-card); border-radius: var(--uid7-radius);
  overflow:hidden; position:relative; box-shadow: var(--uid7-shadow);
  text-align:center;
}
.uid7-card a{ display:block; color: var(--uid7-text); }
.uid7-card .uid7-thumb{
  width:100%; aspect-ratio: 1/1; object-fit: cover; background: #233242;
}
.uid7-card .uid7-name{
  font-size: 1.15rem; padding: 5px 4px 7px; line-height:1.25; min-height: 36px;
  color:#fff;
}
.uid7-card .uid7-hot{
  position:absolute; top:4px; left:4px; background: var(--uid7-warm);
  color:#fff; font-size: 1rem; padding: 1px 6px; border-radius: 8px; font-weight:700;
}
.uid7-card:active{ transform: scale(.97); }

/* ---------- Content cards / features ---------- */
.uid7-panel{
  background: var(--uid7-card); border-radius: var(--uid7-radius);
  padding: 12px; margin: 8px 0; box-shadow: var(--uid7-shadow);
}
.uid7-panel h3{ margin-top:0; }
.uid7-list{ margin:0; padding-left: 18px; }
.uid7-list li{ margin-bottom: 6px; }
.uid7-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.uid7-chip{
  background: rgba(153,50,204,.18); color: var(--uid7-gold);
  padding: 4px 10px; border-radius: 12px; font-size: 1.15rem;
}

/* ---------- Promo CTA strip ---------- */
.uid7-cta-strip{
  background: linear-gradient(135deg, #C71585, #FF6347);
  border-radius: var(--uid7-radius); padding: 14px; text-align:center;
  margin: 12px 0; color:#fff; box-shadow: var(--uid7-shadow);
}
.uid7-cta-strip h3{ color:#fff; margin:0 0 6px; }
.uid7-cta-strip .uid7-btn{ background:#fff; color: var(--uid7-accent); margin-top:8px; }

/* ---------- Testimonials ---------- */
.uid7-quote{
  background: var(--uid7-card); border-left: 4px solid var(--uid7-gold);
  padding: 10px 12px; border-radius: 10px; margin: 8px 0;
}
.uid7-quote small{ color: var(--uid7-gold); }

/* ---------- Payment / winners ---------- */
.uid7-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.uid7-pill{
  background:#fff; color: var(--uid7-primary); border-radius: 10px;
  padding: 6px 10px; font-weight:700; font-size:1.15rem;
}
.uid7-winners{
  display:grid; grid-template-columns: repeat(2,1fr); gap:6px;
}
.uid7-winner{
  background: var(--uid7-dark); padding:8px; border-radius:10px; text-align:center;
  font-size: 1.2rem;
}
.uid7-winner b{ color: var(--uid7-gold); display:block; }

/* ---------- Footer ---------- */
.uid7-footer{
  background: var(--uid7-dark); padding: 16px 12px 90px;
  color: #cdd6e0; font-size: 1.25rem;
}
.uid7-footer h4{ color:#fff; margin: 10px 0 6px; font-size:1.35rem; }
.uid7-footer-links{ display:flex; flex-direction:column; gap:4px; }
.uid7-footer-links a{ color:#cdd6e0; }
.uid7-footer-links a:hover{ color: var(--uid7-gold); }
.uid7-footer-promos{
  display:grid; grid-template-columns: repeat(2,1fr); gap:8px; margin: 8px 0 12px;
}
.uid7-footer-promos .uid7-btn{ width:100%; }
.uid7-copy{ margin-top:10px; color:#8aa0b4; font-size:1.1rem; text-align:center; }

/* ---------- Bottom navigation ---------- */
.uid7-bottomnav{
  position: fixed; left:0; right:0; bottom:0; z-index:1000;
  max-width: 430px; margin: 0 auto;
  background: linear-gradient(180deg, #2C3E50, #1d2b3a);
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex; justify-content: space-around; align-items: stretch;
  height: 60px;
  box-shadow: 0 -4px 14px rgba(0,0,0,.35);
}
.uid7-bottomnav-btn{
  flex:1; min-width: 60px; min-height: 60px;
  background: transparent; border:0; color:#cdd6e0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; font-size: 1rem; cursor:pointer; position:relative;
  transition: color .15s ease, transform .15s ease;
}
.uid7-bottomnav-btn .material-icons,
.uid7-bottomnav-btn i{ font-size: 22px; }
.uid7-bottomnav-btn:active{ transform: scale(.92); color: var(--uid7-gold); }
.uid7-bottomnav-active{ color: var(--uid7-gold) !important; }
.uid7-bottomnav-active::before{
  content:""; position:absolute; top:0; left:25%; right:25%; height:3px;
  background: var(--uid7-gold); border-radius: 0 0 6px 6px;
}
.uid7-bottomnav-btn.is-promo{
  color:#fff;
  background: linear-gradient(180deg, rgba(199,21,133,.35), transparent);
}

/* ---------- Desktop ---------- */
@media (min-width: 769px){
  .uid7-bottomnav{ display:none; }
  .uid7-footer{ padding-bottom: 24px; }
}

/* ---------- Mobile bottom clearance for sticky nav ---------- */
@media (max-width: 768px){
  main, .uid7-main{ padding-bottom: 80px; }
}

/* ---------- Small screen tweaks ---------- */
@media (max-width: 360px){
  .uid7-grid{ grid-template-columns: repeat(2, 1fr); }
  h1{ font-size: 1.9rem; }
}