/* ===========================================================
   Lion Brand x Divali — Child-Friendly Theme (Bootstrap 4)
   Uses palette: #E32000, #FFC905, #FFF001, #F7D2A1, #FFFFFF
   Background image + 8 floating section images via CSS only.
   =========================================================== */
:root{
  --lion-red:   #E32000;
  --lion-gold:  #FFC905;
  --lion-sun:   #FFF001;
  --lion-rose:  #F7D2A1;
  --lion-white: #FFFFFF;

  --ink: #1d1d1f;
  --ink-soft: #333;
  --bg-glow: linear-gradient(180deg, rgba(255,240,1,.20), rgba(247,210,161,.25));
  --card-shadow: 0 8px 24px rgba(0,0,0,.08);
  --float-top-drop:  -60px;  /* pushes top-corner images DOWN by this many px */
  --float-btm-drop:  120px;  /* pushes bottom-corner images UP by this many px */
}

/* -----------------------------------------------------------
   Page background (handled by CSS only)
   Swap the URL if your path differs.
   ----------------------------------------------------------- */
html, body{ height:100% }
body{
  background-image: url("https://sea.pennacool.com/pennacool/images/divali_bg.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Optional: for parallax effect */
  min-height: 100vh; /* Ensures the body always takes at least 100% of the viewport height */
  margin: 0; 
}

/* Friendly typography rhythm */
h1, h2, h3{ letter-spacing:.2px; }
h1, #step-title{ font-weight:800; }
p, li{ line-height:1.6; }

/* -----------------------------------------------------------
   Wizard shell
   ----------------------------------------------------------- */
#wizard{
  background:#fff;
  border: 4px solid var(--lion-rose) !important;
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  overflow: visible; /* allow floating images to sit outside */
}

/* Section headers (the jQuery Steps <h2> labels) */
#wizard h2{
  background: linear-gradient(90deg, var(--lion-gold), var(--lion-sun));
  color:#202020;
  padding:.5rem 1rem;
  border-radius: 12px;
  margin: 0 0 .75rem 0;
  display:inline-block;
  font-weight:800;
}

/* Each content section card */
#wizard section{
  position: relative; /* anchor for floating images */
  background:#fff;
  border: 2px dashed rgba(227,32,0,.25);
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Step title bar at top */
#step-title{
  background: linear-gradient(180deg, var(--lion-sun), var(--lion-gold));
  color:#202020 !important;
  border: 3px solid var(--lion-rose);
  border-radius: 16px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* -----------------------------------------------------------
   Progress bar — bold & playful
   ----------------------------------------------------------- */
.progress{
  height: 20px;
  background: rgba(247,210,161,.45);
  border-radius: 999px;
  overflow: hidden;
  border:2px solid var(--lion-rose);
}
.progress-bar{
  background: linear-gradient(90deg, var(--lion-red), var(--lion-gold));
  position:relative;
}
.progress-bar::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    45deg, rgba(255,255,255,.25) 0 12px, transparent 12px 24px);
  mix-blend-mode: soft-light;
}

/* -----------------------------------------------------------
   Buttons
   ----------------------------------------------------------- */
.btn-warning{
  background: var(--lion-gold);
  border-color: #eab200;
  color:#1c1c1c;
  font-weight:800;
}
.btn-warning:hover{
  background: var(--lion-sun);
  border-color:#e3ca00;
}

/* -----------------------------------------------------------
   Scorecard table
   ----------------------------------------------------------- */
.scorecard{
  width:100%;
  background:#fff;
  border:3px solid var(--lion-rose);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: var(--card-shadow);
}
.scorecard thead th{
  background: var(--lion-red);
  color:#fff;
  font-weight:800;
  border:0;
}
.scorecard tbody tr:nth-child(odd){ background: rgba(255,201,5,.10) }
.scorecard tbody tr:nth-child(even){ background: rgba(255,240,1,.10) }
.scorecard th, .scorecard td{
  padding:.85rem;
  vertical-align:top;
}
.scorecard tfoot td{
  background: var(--lion-rose);
  font-weight:800;
}

/* ===========================================================
   8 FLOATING IMAGES — one left & one right for each section
   (All CSS; no HTML changes. Replace URLs with your assets.)
   =========================================================== */

/* Base pseudo-elements for the floating images */

/* Ensure sections can host the corner art */
#wizard { overflow: visible; }
#wizard section { position: relative; }

/* Bigger base size */
#wizard section::before,
#wizard section::after{
  content:"";
  position:absolute;
  width: clamp(96px, 14vw, 160px);
  height: clamp(96px, 14vw, 160px);
  background: center / contain no-repeat;
  pointer-events:none;
  z-index: 2;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.20));
  will-change: transform;
}

/* ODD sections: before = top-left, after = bottom-right */
#wizard section::before{
  top: calc(-64px + var(--float-top-drop, 0px));
  left: -64px;
  background-image: var(--left-img, none);
  animation: bobTL 7s ease-in-out infinite;
}
#wizard section::after{
  bottom: calc(-80px - var(--float-btm-drop, 0px));
  right: -64px;
  background-image: var(--right-img, none);
  animation: bobBR 6.5s ease-in-out infinite;
}

/* EVEN sections: before = top-right, after = bottom-left */
#wizard section:nth-of-type(even)::before{
  top: calc(-64px + var(--float-top-drop, 0px));
  left: auto; right: -64px;
  animation: bobTR 7s ease-in-out infinite;
}
#wizard section:nth-of-type(even)::after{
  bottom: calc(-88px - var(--float-btm-drop));
  right: auto; left: -64px;
  animation: bobBL 6.5s ease-in-out infinite;
}


/* Corner bob animations (gentle + a little tilt) */
@keyframes bobTL{
  0%,100%{ transform: translate(-4px,-4px) rotate(-6deg) }
  50%    { transform: translate(6px,6px)   rotate(-1deg) }
}
@keyframes bobTR{
  0%,100%{ transform: translate(4px,-4px) rotate(6deg) }
  50%    { transform: translate(-6px,6px) rotate(1deg) }
}
@keyframes bobBR{
  0%,100%{ transform: translate(4px,4px) rotate(6deg) }
  50%    { transform: translate(-6px,-6px) rotate(1deg) }
}
@keyframes bobBL{
  0%,100%{ transform: translate(-4px,4px) rotate(-6deg) }
  50%    { transform: translate(6px,-6px) rotate(-1deg) }
}

/* Map your eight images (update the URLs below) */
#wizard section:nth-of-type(1){
  --left-img:  url("https://sea.pennacool.com/pennacool/images/lion_1.png");
  --right-img: url("https://sea.pennacool.com/pennacool/images/lion_5.png");
}
#wizard section:nth-of-type(2){
  --left-img:  url("https://sea.pennacool.com/pennacool/images/lion_2.png");
  --right-img: url("https://sea.pennacool.com/pennacool/images/lion_6.png");
}
#wizard section:nth-of-type(3){
  --left-img:  url("https://sea.pennacool.com/pennacool/images/lion_3.png");
  --right-img: url("https://sea.pennacool.com/pennacool/images/lion_7.png");
}
#wizard section:nth-of-type(4){
  --left-img:  url("https://sea.pennacool.com/pennacool/images/lion_4.png");
  --right-img: url("https://sea.pennacool.com/pennacool/images/lion_8.png");
}

#wizard section:nth-of-type(5){
  --left-img:  url("https://sea.pennacool.com/pennacool/images/lion_6.png");
  --right-img: url("https://sea.pennacool.com/pennacool/images/lion_8.png");
}

.wizard > .steps {
  display: none !important;
}

#wizard h2 {
  display: none;
}
.wizard > .actions {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  background-color: #fff;
}

.wizard > .actions > ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.wizard > .actions > ul > li {
  margin: 0;
}

.wizard > .actions a {
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 0.25rem;
  text-decoration: none;
  color: #fff;
}

.wizard > .actions a[href="#previous"] {
  background-color: var(--lion-red);
}

.wizard > .actions a[href="#next"],
.wizard > .actions a[href="#finish"] {
  background-color: var(--lion-gold);
  color: var(--ink);
}

/* ===========================================================
   Poster video hero (sits ABOVE the wizard)
   Complements existing Lion Brand palette + styles
   =========================================================== */

#Poster.slide{
  position: relative;
  width: 100%;
  height: clamp(220px, 34vw, 540px);   /* responsive height */
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  will-change: transform; /* plays nicely with any parallax script */
}

/* Make the video fill the frame neatly */
#Poster.slide > video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  filter: saturate(1.05) contrast(1.05) brightness(.97);
}

/* Subtle top-to-bottom darkening for text legibility if you ever overlay text */
#Poster.slide::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.22));
  pointer-events:none;
  z-index: 1;
}

/* Playful color strip divider at the bottom (matches progress bar vibe) */
#Poster.slide::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height: 12px;
  background: linear-gradient(90deg, var(--lion-gold, #FFC905), var(--lion-red, #E32000));
  z-index: 2;
}

/* Motion accessibility: fall back to the static image background */
@media (prefers-reduced-motion: reduce){
  #Poster.slide > video{ display: none; }
}

/* Optional: small screens—trim height a bit more */
@media (max-width: 576px){
  #Poster.slide{ height: clamp(200px, 42vw, 340px); }
}

.card {
    display: none;
}

#region-main {
  background-color: transparent !important;
}

footer#page-footer {
    display: none;
}

h3 {
  display: none;
}