/* =========================================
SPINWIZARD OFFER CARDS
Standalone card styling (replaces Thrive CSS)
========================================= */

/* Card container */
.free-spin-offer {
position:relative;
background:#fff;
border-radius:18px;
padding:18px;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
border:10px solid #e6e6e6;
display:grid;
grid-template-columns:92px 1fr;
gap:14px;
transition:transform .15s ease, box-shadow .15s ease;
}

.free-spin-offer:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

/* Logo area */

.free-spin-offer img{
max-width:80px;
height:auto;
}

.offer-logo img{
max-width:800px;
margin:100px 0 4px;
height:auto;
}

/* Headline */

.free-spin-offer h3{
font-size:20px;
font-weight:700;
margin:0 0 4px;
color:#1f2937;
}

/* Sub headline */

.free-spin-offer .offer-subheadline{
font-size:14px;
color:#6b7280;
margin-bottom:6px;
}

/* Casino name */

.free-spin-offer .offer-casino{
font-size:13px;
color:#9ca3af;
margin-bottom:8px;
}

/* Terms text */

.free-spin-offer .offer-terms{
font-size:12px;
line-height:1.4;
color:#6b7280;
margin-top:10px;
padding-top:10px;
border-top:1px dashed #ddd;
}

/* =========================================
CTA BUTTON
========================================= */

.free-spin-offer .offer-cta{
display:inline-block;
background:#fff;
color:#fff;
padding:10px 18px;
border-radius:1px;
font-weight:700;
text-decoration:none;
font-size:14px;
}

.free-spin-offer .offer-cta:hover{
background:#16a34a;
}

/* =========================================
CTA BUTTON
========================================= */

.free-spin-offer .offer-button{
display:inline-block;
background:#fff;
color:#16a34a;
padding:10px 18px;
border-radius:1px;
font-weight:700;
text-decoration:none;
font-size:14px;
}

.free-spin-offer .offer-button:hover{
background:#16a34a;
}

/* =========================================
HIDE OFFER BUTTON
========================================= */

.free-spin-offer .hide-offer-btn{
display:block;
margin-top:12px;
text-align:center;
border:2px solid #3b82f6;
color:#3b82f6;
padding:10px;
border-radius:10px;
font-weight:600;
text-decoration:none;
font-size:14px;
}

/* =========================================
BADGES
========================================= */

.offer-badge{
position:absolute;
top:10px;
font-size:11px;
padding:4px 10px;
border-radius:999px;
font-weight:700;
color:#fff;
}

/* left badge */

.offer-badge--secondary{
left:10px;
}

/* right badge */

.offer-badge--primary{
right:10px;
}

/* colors */

.offer-badge--new{
background:#22c55e;
}

.offer-badge--cash{
background:#f59e0b;
}

.offer-badge--popular{
background:#fb923c;
}

.offer-badge--no-deposit{
background:#7c3aed;
}

/* =========================================
MOBILE
========================================= */

@media (max-width:768px){

.free-spin-offer{
grid-template-columns:1fr;
text-align:center;
}

.free-spin-offer img{
margin:0 auto 10px;
}

.offer-badge--secondary{
left:10px;
}

.offer-badge--primary{
right:10px;
}

}
/* ======================================================
   1) SPINWIZARD OFFERS (SCOPED)
   Everything in here only applies inside .spinwizard-offers
   ====================================================== */

/* Wrapper (this is the class your shortcode outputs) */
.spinwizard-offers{
  position:relative;
  padding:1rem 1rem 3rem;   /* top spacing reduced, bottom keeps breathing room */
  background:transparent;   /* don’t fight the page background */
  box-sizing:border-box;
}

/* Soft vignette overlay */
.spinwizard-offers::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center, rgba(15,23,42,.05), transparent 55%);
  opacity:.7;
  mix-blend-mode:soft-light;
}

/* GRID */
.spinwizard-offers .free-spins-list{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:1.5rem !important;
  align-items:stretch !important;

  max-width:1200px;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
}

/* 2 columns on medium */
@media (max-width:1024px){
  .spinwizard-offers .free-spins-list{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
}

/* 1 column on mobile */
@media (max-width:640px){
  .spinwizard-offers .free-spins-list{
    grid-template-columns:1fr !important;
  }
}

/* CARD */
.spinwizard-offers article.free-spin-offer{
  position:relative;
  overflow:hidden;

  background:var(--sw-card-bg) !important;
  border:1px solid rgba(148,163,184,.35) !important;
  border-top:4px solid rgba(148,163,184,.60) !important;
  border-radius:var(--sw-radius-card) !important;
  box-shadow:var(--sw-card-shadow) !important;

  padding:2rem 1.8rem 1.8rem !important;
  margin:0 !important;

  display:flex !important;
  flex-direction:column;
  align-items:center;
  text-align:center;
  height:100%;

  font-family:var(--sw-font-sans) !important;
  color:var(--sw-text-main);
  box-sizing:border-box;

  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Glow layer */
.spinwizard-offers article.free-spin-offer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at top, rgba(56,189,248,.16), transparent 55%);
  opacity:0;
  transition:opacity .18s ease;
}

.spinwizard-offers article.free-spin-offer:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 22px 50px rgba(15,23,42,.18) !important;
  border-color:rgba(129,140,248,.60) !important;
}
.spinwizard-offers article.free-spin-offer:hover::before{ opacity:1; }

/* Subtle coloured top bar per type */
.spinwizard-offers article.free-spin-offer.offer--nodeposit{ border-top-color:#8b5cf6 !important; }
.spinwizard-offers article.free-spin-offer.offer--cash{     border-top-color:#facc15 !important; }
.spinwizard-offers article.free-spin-offer.offer--freebet{  border-top-color:#38bdf8 !important; }
.spinwizard-offers article.free-spin-offer.offer--popular{  border-top-color:#f97316 !important; }
.spinwizard-offers article.free-spin-offer.offer--new{      border-top-color:#22c55e !important; }

/* Header layout */
.spinwizard-offers .offer-header{
  width:100%;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  row-gap:.75rem;
}

/* Logo */
.spinwizard-offers .offer-logo{ margin-bottom:.7rem; }
.spinwizard-offers .offer-logo img{
  max-height:58px !important;
  width:auto !important;
  margin:0 auto !important;
  border-radius:5px !important;
  display:block;
}

/* Text */
.spinwizard-offers .offer-main{ margin-bottom:0.2rem !important; }

.spinwizard-offers .offer-headline{
  margin:0 0 .25rem !important;
  font-size:1.4rem !important;
  font-weight:800 !important;
  color:var(--sw-heading) !important;
  text-transform:uppercase !important;
  letter-spacing:.03em !important;
  text-align:center !important;
}

.spinwizard-offers .offer-subheadline{
  margin:0 0 .2rem !important;
  font-size:.96rem !important;
  font-weight:700 !important;
  color:#4b5563 !important;
}

.spinwizard-offers .offer-tagline{
  margin:0 !important;
  font-size:.82rem !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
  color:#9ca3af !important;
}

/* CTA */
.spinwizard-offers .offer-cta{ margin-top:auto !important; }

.spinwizard-offers .offer-button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:.45rem;

  padding:.8rem 1.9rem !important;
  border-radius:999px !important;
  border:0 !important;

  background:linear-gradient(135deg, #22c55e, #16a34a) !important;
  color:#fff !important;
  font-weight:700 !important;
  font-size:.9rem !important;
  letter-spacing:.04em;
  text-transform:uppercase !important;

  box-shadow:0 12px 30px rgba(22,163,74,.45) !important;
  text-decoration:none !important;

  transition:transform .12s ease, filter .12s ease;
}
.spinwizard-offers .offer-button:hover{
  background:linear-gradient(135deg, #16a34a, #15803d) !important;
  transform:translateY(-1px);
}
.spinwizard-offers .offer-button:focus{ text-decoration:none !important; }

/* Smallprint */
.spinwizard-offers .offer-smallprint,
.spinwizard-offers .offer-smallprint p{
  margin-top:0.5rem !important;
  font-size:.7rem !important;
  font-weight:400 !important;
  color:var(--sw-text-muted) !important;
  text-align:center !important;

  max-height:2.0em !important;
  overflow-y:auto !important;

  -ms-overflow-style:none;
  scrollbar-width:none;
}
.spinwizard-offers .offer-smallprint::-webkit-scrollbar{ display:none !important; }

/* Badge */
.spinwizard-offers .offer-badge{
  position:absolute;
  top:14px;
  left:14px;

  padding:4px 11px;
  border-radius:999px;

  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;

  z-index:10;

  max-width:98px;
  white-space:normal;
  line-height:1.2;
  text-align:center;
  word-break:break-word;

  box-shadow:0 8px 20px rgba(15,23,42,.25);
}
/* Badge colour variants (match your PHP classes: offer-badge--{type}) */
.spinwizard-offers .offer-badge--nodeposit{ background:linear-gradient(135deg, #7c3aed, #a855f7); }
.spinwizard-offers .offer-badge--cash{     background:linear-gradient(135deg, #f59e0b, #facc15); color:#111827; }
.spinwizard-offers .offer-badge--freebet{  background:linear-gradient(135deg, #0ea5e9, #38bdf8); }
.spinwizard-offers .offer-badge--popular{  background:linear-gradient(135deg, #f97316, #fb923c); }
.spinwizard-offers .offer-badge--new{      background:linear-gradient(135deg, #22c55e, #4ade80); }

/* FILTER BAR (width matches grid) */
.spinwizard-offers .spinwizard-filter{
  display:flex;
  flex-wrap:wrap;                 /* keep one line */
  justify-content:center;
  gap:.15rem;

  max-width:1200px;
  width:100%;
  margin:.5rem auto 2rem;           /* spacing under filter */
  padding:.35rem;

  border-radius:5px;
  background:rgba(255,255,255,.90);
  box-shadow:0 10px 30px rgba(15,23,42,.12);

  overflow-x:auto;                  /* scroll instead of wrapping */
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
}
.spinwizard-offers .spinwizard-filter .sw-filter-btn{ flex:0 0 auto; white-space:nowrap; }

/* Filter buttons */
.spinwizard-offers .sw-filter-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;

  border-radius:999px;
  border:0;
  padding:.55rem 1.45rem;

  font-size:.85rem;
  font-weight:600;
  font-family:var(--sw-font-sans);
  background:transparent;
  color:#475569;
  cursor:pointer;

  transition:background .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.spinwizard-offers .sw-filter-btn .sw-filter-icon{ font-size:1rem; line-height:1; }
.spinwizard-offers .sw-filter-btn:hover{
  background:rgba(148,163,184,.12);
  transform:translateY(-1px);
}
.spinwizard-offers .sw-filter-btn.is-active{
  background:linear-gradient(135deg, #2563eb, #7c3aed);
  color:#fff;
  box-shadow:0 10px 26px rgba(37,99,235,.55);
}
.spinwizard-offers .sw-filter-btn.is-active .sw-filter-icon{
  filter:drop-shadow(0 0 4px rgba(15,23,42,.5));
}

/* Reorder animation */
.spinwizard-offers .free-spins-list{
  transition:opacity .15s ease, transform .15s ease;
}
.spinwizard-offers.sw-animating .free-spins-list{
  opacity:0;
  transform:translateY(4px);
}
.spinwizard-offers.sw-animating .free-spin-offer{
  transition:transform .18s ease, opacity .18s ease;
  transform:scale(.99);
  opacity:.9;
}