/* =========================================================
   PRODE Public – Betting Agency Theme
   File: static/css/public_betting.css
========================================================= */

:root{
  --bg: #070A12;
  --bg2:#0B1020;
  --stroke: rgba(255,255,255,.09);

  --text:#E6E9F2;
  --muted:#A9B1C7;

  --brand:#4F8BFF;
  --brand2:#2F6BFF;
}

/* Base (si usás class="prode-public" en alguna página) */
.prode-public{
  min-height:100vh;
  color: var(--text);
  background:
    radial-gradient(1100px 600px at 15% -10%, rgba(79,139,255,.18), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(56,189,248,.14), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

/* Navbar (oscura premium) */
.prode-public .navbar{
  background: rgba(7,10,18,.70) !important;
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
}

.prode-public .navbar .nav-link{
  color: rgba(230,233,242,.82) !important;
}

.prode-public .navbar .nav-link:hover{
  color: #fff !important;
}

/* =========================================================
   HERO (CTA)
========================================================= */

.hero-betting{
  position: relative;
  min-height: 520px;
  padding: 64px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 48px;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  pointer-events: none;
}

.hero-container{
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
}

.hero-content{
  max-width: 680px;
}

.hero-badge{
  display:inline-block;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(79,139,255,.14);
  border: 1px solid rgba(79,139,255,.35);
  color: #BFD4FF;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .10em;
  margin-bottom: 1rem;
}

.hero-title{
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  font-weight: 900;
  line-height: 1.05;
  margin: 0 0 1rem 0;
}

.hero-subtitle{
  margin: 0 0 2rem 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.hero-actions{
  display:flex;
  gap: .8rem;
  flex-wrap: wrap;
}

.btn-hero{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .7rem 1.6rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: .95rem;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .06s, box-shadow .15s, background .15s;
}

.btn-hero:active{ transform: translateY(1px); }

.btn-hero.primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  border-color: rgba(79,139,255,.35);
  box-shadow: 0 14px 32px rgba(79,139,255,.30);
}

.btn-hero.primary:hover{
  box-shadow: 0 18px 44px rgba(79,139,255,.40);
}

.btn-hero.outline{
  background: transparent;
  color: var(--text);
}

.btn-hero.outline:hover{
  background: rgba(255,255,255,.08);
}

.hero-meta{
  margin-top: 1.6rem;
  color: rgba(169,177,199,.78);
  font-size: .85rem;
  letter-spacing: .03em;
}

/* Responsive */
@media (max-width: 768px){
  .hero-betting{
    min-height: auto;
    padding: 48px 0;
    margin-top: 36px;
  }

  .hero-actions{ flex-direction: column; }
  .btn-hero{ width: 100%; }
}

/* =========================================================
   ESCUDOS HOME (cards + tamaño fijo + placa uniforme)
========================================================= */

.club-logos{
  position: relative;
  z-index: 2;
}

.club-logos .logo-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 10px;
  border-radius: 16px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);

  text-decoration: none !important;
  color: rgba(230,233,242,.88) !important;

  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.club-logos .logo-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: #fff !important;
}

/* Escudo: tamaño fijo + “placa” oscura para neutralizar fondos blancos */
.club-logos .logo-card img{
  width: 74px !important;
  height: 74px !important;
  max-width: 74px !important;
  max-height: 74px !important;

  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;

  background: rgba(0,0,0,0.35);
  border-radius: 14px;
  padding: 8px;

  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45));
}

/* Nombre */
.club-logos .logo-name{
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  text-align: center;
  line-height: 1.1;
  font-size: .92rem;
}
.no-copy {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
/* =========================
   CONTADOR MUNDIAL – DESTACADO
   ========================= */
.wc-countdown-box{
  border: 1px solid rgba(27,76,255,.55);
  border-radius: 18px;
  background: rgba(13, 27, 42, 0.95) !important;
  padding: 28px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.wc-title, .wc-subtitle, .wc-timer { color: #fff !important; }


.wc-countdown-inner{
  text-align: center;
}

.wc-title{
  color: #ffffff;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: .4px;
}

.wc-subtitle{
  color: rgba(255,255,255,.9);
  font-size: 1.05rem;
  margin-top: 6px;
}

.wc-timer{
  margin-top: 18px;
  color: #ffffff;
  font-weight: 900;
  font-size: 3rem;
  letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 576px){
  .wc-timer{ font-size: 2.2rem; }
  .wc-title{ font-size: 1.35rem; }
}

.featured-match img{
  max-width: 650px;
  width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.featured-match img:hover{
  transform: scale(1.01);
  box-shadow: 0 10px 25px rgba(0,0,0,.4);
}