/* ==========================================================
   Online Sweeps — Brand Pages (Front)
   Matches the provided "Brand Page - Final Mockup" styling.
   Scoped to body.os-brand-page so it won't affect the rest of the site.
   ========================================================== */

body.os-brand-page {
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background-color: #312e81;
  background-image: radial-gradient(circle at 50% 0%, #4c1d95 0%, #312e81 80%);
  background-attachment: fixed;
  color: #fff;
  overflow-x: hidden;
}

body.os-brand-page a { text-decoration: none; }

/* Typography helper */
.font-fredoka { font-family: 'Fredoka One', cursive; letter-spacing: 0.02em; }

/* Full-bleed wrapper to escape theme content max-width when needed */
.osb2-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 3D card style */
.os-card {
  background: #fff;
  border-radius: 32px;
  box-shadow: 0 12px 0 #1e1b4b, 0 20px 40px rgba(0,0,0,.25);
  color: #312e81;
  position: relative;
  z-index: 10;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.offer-card-side { background: #fff; }

.offer-card-main {
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
  color: #fff;
  box-shadow: 0 15px 0 #4c1d95, 0 0 40px rgba(236, 72, 153, 0.6);
  border: 4px solid rgba(255,255,255,0.3);
  z-index: 20;
}

/* 3D button */
.os-btn {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  box-shadow: 0 6px 0 #15803d, 0 10px 20px rgba(22,163,74,.4);
  border-radius: 18px;
  color: #fff;
  font-family: 'Fredoka One', cursive;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.2);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.os-btn:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.1); }
.os-btn:active { transform: translateY(4px) scale(0.98); box-shadow: 0 0 0 #15803d; }

/* Animations */
@keyframes osb2-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-marquee { animation: osb2-marquee 30s linear infinite; }

@keyframes osb2-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.animate-float { animation: osb2-float 4s ease-in-out infinite; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* FAQ accordion */
.faq-answer { transition: max-height 0.3s ease-out, padding 0.3s ease; max-height: 0; overflow: hidden; }
.faq-answer.open { max-height: 800px; }

/* Make common theme areas transparent on brand pages (safe, best-effort) */
body.os-brand-page .site,
body.os-brand-page #page,
body.os-brand-page #content,
body.os-brand-page .site-content {
  background: transparent !important;
}


/* Keep third-party popup headings dark on brand pages */
body.os-brand-page .pum-container h1,
body.os-brand-page .pum-container h2,
body.os-brand-page .pum-container h3,
body.os-brand-page .pum-content h1,
body.os-brand-page .pum-content h2,
body.os-brand-page .pum-content h3 { color: #111 !important; }


/* ===== FAQ long-content fix ===== */
.osb2-faq-item {
  overflow: visible;
}
.osb2-faq-answer-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  will-change: max-height;
}
.osb2-faq-answer {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.65;
}
.osb2-faq,
.osb2-faq-list,
.osb2-section-faq {
  overflow: visible !important;
}


/* popup heading fix on brand pages */
body.os-brand-page .pum-title,
body.os-brand-page .pum-content .pum-title,
body.os-brand-page .pum-content .pum-title-pop,
body.os-brand-page .popmake-title,
body.os-brand-page .popmake-content h1,
body.os-brand-page .popmake-content h2,
body.os-brand-page .popmake-content h3,
body.os-brand-page .pum-content h1,
body.os-brand-page .pum-content h2,
body.os-brand-page .pum-content h3 { color:#111 !important; }


/* global popup title visibility fix */
.pum-title,
.popmake-title,
.pum-content h1,
.pum-content h2,
.pum-content h3,
.popmake-content h1,
.popmake-content h2,
.popmake-content h3 { color:#111 !important; }