/* HERO IMAGE OVERRIDE (same style as membership) */
.hero {
  background: none !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background-image: url("../images/bonuses.webp"); /* <-- your new hero image */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transform: translateZ(0) scale(1.08);
  will-change: opacity, transform;
}

.page-loaded .hero::before {
  animation: heroMovieIn 1600ms cubic-bezier(.22, 1, .25, 1) both;
}

@keyframes heroMovieIn {
  from { opacity: 0; transform: translateZ(0) scale(1.35); }
  to   { opacity: 1; transform: translateZ(0) scale(1.00); }
}

/* NEW “explain” section */
.bonus-explain{
  margin-top: 3.2rem;
  padding-top: 1.8rem;
}

.bonus-qrow{
  display: grid;
  grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
  gap: 8rem;
  align-items: start;
  padding: 2rem 4rem;
  border-top: 1px solid rgba(0,0,0,.08);
}

.bonus-q h3{
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}

.bonus-accent--sun{ color: #f4a91c; }
.bonus-accent--sea{ color: #189dd8; }

.bonus-underline{
  width: 90px;
  height: 3px;
  border-radius: 999px;
  background: #189dd8;
  margin-top: .55rem;
}

.bonus-a{
  color: #102133;
  font-size: 1rem;
  line-height: 1.7;
}

/* list reset + spacing for custom icon */
.bonus-list{
  margin: 0;
  padding-left: 0;        /* remove normal bullet indent */
  list-style: none;       /* kill default bullets */
}

.bonus-list li{
  position: relative;
  padding-left: 50px;     /* space for the logo */
  margin-bottom: .75rem;
}

/* favicon bullet */
.bonus-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .25rem;            /* tweak up/down */
  width: 40px;
  height: 40px;

  background-image: url("../images/favicon.ico");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  opacity: .95;
}

/* ===== Decline block (match reference design) ===== */
.bonus-decline{
  margin-top: 1.6rem;
  background: rgba(24,157,216,.0);
  border-radius: 28px;
  padding: 1.4rem 1.4rem 1.6rem;
  box-shadow: 0 16px 38px rgba(15,23,42,.10);
}

/* blue “header pill” */
.bonus-decline__title{
  display: block;
  background: #189dd8;
  color: #fff;
  font-weight: 800;
  text-align: center;

  padding: 1rem 1.2rem;
  border-radius: 999px;

  margin: 0 auto 1.1rem;
  max-width: 860px;

  box-shadow: 0 4px 10px rgba(24,157,216,.25);
}

/* white pills under it */
.bonus-decline__item{
  background: #fff;
  border-radius: 999px;
  padding: 1rem 1.2rem;
  margin: 0.9rem auto 0;
  max-width: 860px;
  text-align: center;

  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 10px rgba(15,23,42,.12);
}

/* ===========================
   EXPLORE SECTION (INTRO STYLE)
   =========================== */
.intro-brand__sun {
  color: #ffb400; /* warm yellow / orange */
}

.intro-brand__sea {
  color: #008dd5; /* sea blue */
}
.explore-section {
  max-width: 1180px;
  margin-inline: auto;
  padding-left: 1.25rem;
  padding-right: calc(1.25rem + var(--right-strip-width));
  padding-top: 2.75rem;
  padding-bottom: 3.5rem;
}
.explore-title {
  text-align: center;
  margin: 0 0 2.2rem;
  font-size: 2rem;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}

.explore-title .intro-brand,
.explore-title .intro-brand__sun,
.explore-title .intro-brand__sea {
  display: inline;
  white-space: nowrap;
}

.explore-grid{
  display: grid;
  grid-template-columns: repeat(3, 330px);
  gap: 2.2rem;                 /* spacing between cards */
  justify-content: center;      /* centers the 3 fixed columns */
  justify-items: stretch;
}


/* Base */
.explore-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #f7a623;
  border-radius: 26px;
  min-height: 460px;
  width: 100%;
  max-width: 330px;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;

  box-shadow:
    0 0 0 4px #f7a623,
    0 18px 40px rgba(0, 0, 0, 0.18);

  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform-origin: center;

  --hover-xform: translate3d(0,0,0) scale(1) rotateX(0) rotateY(0) rotateZ(0);

  /* IMPORTANT: keep reveal-y + hover-xform together, but use translate3d */
  transform: translate3d(0, var(--reveal-y, 0px), 0) var(--hover-xform);

  /* smoother */
  transition:
    transform 420ms cubic-bezier(.16,1,.3,1),
    box-shadow 420ms cubic-bezier(.16,1,.3,1);

  will-change: transform, box-shadow;
}

/* keep reveal compatible */
.explore-card.reveal {
  transform: translate3d(0, var(--reveal-y, 0px), 0) var(--hover-xform) !important;
}


/* keep internals unchanged */
.explore-card__media {
  flex: 0 0 auto;
  height: 380px;
  margin: 0.6rem 0.6rem 0.2rem;
  border-radius: 24px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.explore-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.7rem 1.2rem 1.45rem;
}

.explore-card__title {
  position: relative;
  margin: 0;
  font-size: 1.08rem;
  font-weight: 600;
  padding-bottom: 0.55rem;
}

.explore-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.6rem;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
}

/* hover tilt */
.explore-card:hover {
  --hover-xform:
    translateY(-14px)
    scale(1.045)
    rotateX(6deg)
    rotateY(-6deg)
    rotateZ(-0.35deg);

  box-shadow:
    0 0 0 4px #f7a623,
    0 34px 100px rgba(0,0,0,0.28);
}

.explore-card:active {
  --hover-xform: translateY(-9px) scale(1.045) rotateX(6deg) rotateY(-6deg) rotateZ(-0.3deg);

  box-shadow:
    0 0 0 4px #f7a623,
    0 30px 80px rgba(0,0,0,0.24);
}

/* Media backgrounds */
.explore-card__media--accommodation { background-image: url("../images/accommodation.webp"); }
.explore-card__media--activities    { background-image: url("../images/activities.webp"); }
.explore-card__media--events        { background-image: url("../images/featuredE.webp"); }

/* ========================
   SCROLL REVEAL – BONUSES (same system)
   ======================== */

html.reveal-boot .reveal{
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0;
  transform: translate3d(0,28px,0) scale(0.985);
  animation: none;
  will-change: opacity, transform;
}

html.reveal-boot .reveal.is-visible{
  visibility: visible !important;
  pointer-events: auto !important;
}

/* --- intro row --- */
html.reveal-boot .membership-intro-row.reveal.is-visible{
  animation: introReveal 1200ms cubic-bezier(.18,1,.25,1) both;
}
@keyframes introReveal{
  0%{ opacity:0; transform:translate3d(0,28px,0) scale(.985); }
  60%{ opacity:1; transform:translate3d(0,-4px,0) scale(1.01); }
  100%{ opacity:1; transform:translate3d(0,0,0) scale(1); }
}

/* --- blue card --- */
html.reveal-boot .membership-cost-card.reveal.is-visible{
  animation: blueBlockReveal 1250ms cubic-bezier(.18,1,.25,1) both;
}
@keyframes blueBlockReveal{
  0%{ opacity:0; transform:translate3d(-70px,20px,0) scale(.98); }
  60%{ opacity:1; transform:translate3d(6px,-4px,0) scale(1.01); }
  100%{ opacity:1; transform:translate3d(0,0,0) scale(1); }
}

/* --- membership cards --- */
html.reveal-boot .membership-card.reveal.is-visible{
  animation: cardReveal 1100ms cubic-bezier(.18,1,.25,1) both;
}
@keyframes cardReveal{
  0%{ opacity:0; transform:translate3d(0,34px,0) scale(.985); }
  60%{ opacity:1; transform:translate3d(0,-5px,0) scale(1.01); }
  100%{ opacity:1; transform:translate3d(0,0,0) scale(1); }
}

/* --- bonus q rows --- */
html.reveal-boot .bonus-qrow.reveal.is-visible{
  animation: blockReveal 1150ms cubic-bezier(.18,1,.25,1) both;
}
@keyframes blockReveal{
  0%{ opacity:0; transform:translate3d(0,26px,0); }
  100%{ opacity:1; transform:translate3d(0,0,0); }
}

/* --- explore heading --- */
html.reveal-boot .explore-title.reveal.is-visible{
  animation: blockReveal 1150ms cubic-bezier(.18,1,.25,1) both;
}

html.reveal-boot .explore-card.reveal.is-visible{
  animation: exploreFadeIn 700ms cubic-bezier(.18,1,.25,1) both;
}

@keyframes exploreFadeIn{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

/* =========================================================
   MOBILE PORTRAIT — BONUSES (FULL PAGE)
   ========================================================= */
@media (max-width: 430px) and (orientation: portrait) {

  /* ---------------------------------
     1) Global safety + hide scrollbar visuals
     --------------------------------- */
  html, body{
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  body{ scrollbar-width: none !important; } /* Firefox */
  body::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* =========================================================
     2) HERO (bonuses page) — MOBILE LAYOUT + IMAGE
     ========================================================= */

  /* home.html hero container */
  .hero{
    position: relative !important;
    overflow: hidden !important;
    background: #000 !important;
    min-height: 52svh !important; /* slightly shorter so content starts sooner */
  }

  /* bonuses page doesn’t need the home hero copy on mobile */
  .hero-copy{
    display: none !important;
  }

  /* swap hero image for bonuses on mobile */
  .hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:5 !important;

    /* ✅ use a mobile bonuses hero if you have one */
    background-image: url("../images/bonuses.webp") !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;

    /* move crop around here */
    background-position: 50% 18% !important;


    opacity: 1 !important;

    transform: translate3d(0,0,0) scale(1.0);
    will-change: transform !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-origin: center center;
  }

  body.page-loaded .home-hero::before{
    animation: heroMobileZoomOnly 1400ms cubic-bezier(.22,1,.25,1) both !important;
  }

  @keyframes heroMobileZoomOnly{
    from { transform: translate3d(0,0,0) scale(1.7); }
    to   { transform: translate3d(0,0,0) scale(1.00); }
  }


  /* =========================================================
     3) Page spacing — REMOVE BIG GAP ABOVE FIRST CONTENT
     ========================================================= */
  .membership-section.bonus-page{
    padding: calc(env(safe-area-inset-top) + 1.25rem) 0.85rem 2.6rem !important;
    max-width: 100% !important;
  }

  /* =========================================================
     4) Intro row -> stack
     ========================================================= */
  .membership-intro-row{
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
    align-items: start !important;
    margin-top: 0 !important;
    margin-bottom: 1.15rem !important;
  }

  .membership-intro-title{
    font-size: clamp(1.20rem, 5.4vw, 1.50rem) !important;
    line-height: 1.18 !important;
    color: #0f172a !important;
  }

  .membership-intro-underline{
    width: 72px !important;
    height: 3px !important;
    margin-top: 0.45rem !important;
  }

  .membership-intro-copy{
    width: 100% !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }

  /* =========================================================
     5) Panel -> single column
     ========================================================= */
  .membership-panel{
    flex-direction: column !important;
    gap: 1.05rem !important;
    margin-top: 0 !important;
  }

  /* =========================================================
     6) Blue block -> normal width (kill desktop bleed trick)
     ========================================================= */
  .membership-cost-card{
    flex: 0 0 auto !important;
    width: 100% !important;

    left: 0 !important;
    padding: 1.1rem 1.05rem !important;

    border-radius: 1.15rem !important;
    box-shadow: 0 0.85rem 2.1rem rgba(0,0,0,.15) !important;

    align-items: flex-start !important;
    gap: 0.6rem !important;
  }

  .membership-cost-card__title{
    max-width: 100% !important;
    font-size: 1.05rem !important;
    line-height: 1.22 !important;
    margin: 0 !important;
  }

  .membership-cost-card__copy{
    max-width: 100% !important;
    font-size: 0.92rem !important;
    line-height: 1.52 !important;
  }

  .membership-right{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* =========================================================
     7) Grid rows -> single column + tighter gaps
     ========================================================= */
  .membership-grid{
    gap: 1.15rem !important;
  }

  .membership-row{
    grid-template-columns: 1fr !important;
    gap: 1.05rem !important;
    margin-left: 0 !important;
  }

  /* =========================================================
    TAP HINT (MOBILE ONLY) — floating "Tap" (INFINITE + ORANGE)
    ========================================================= */

  .membership-card{
    position: relative !important;
  }

  .membership-card::before{
    content: "Tap";
    position: absolute;
    top: 2.5rem;
    left: 1rem;
    z-index: 50;

    padding: 0.34rem 0.60rem;
    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.95);
    background: rgba(244, 169, 28, 0.95);

    opacity: 0;

    /* 👇 subtle tilt */
    transform:
      translate3d(0, -8px, 0)
      rotate(-40deg)
      scale(0.96);

    transform-origin: left center;
    pointer-events: none;

    animation: tapHintFloat 2800ms cubic-bezier(.16,1,.3,1) 900ms infinite;
  }

  /* hide when flipped */
  .membership-card.is-flipped::before{
    animation: none !important;
    opacity: 0 !important;
    transform:
      translate3d(0, -8px, 0)
      rotate(-40deg)
      scale(0.96) !important;
  }

  /* appear / float / disappear / rest */
  @keyframes tapHintFloat{
    0%{
      opacity: 0;
      transform:
        translate3d(0, -12px, 0)
        rotate(-40deg)
        scale(0.94);
    }
    18%{
      opacity: 1;
      transform:
        translate3d(0, 0, 0)
        rotate(-40deg)
        scale(1);
    }
    55%{
      opacity: 1;
      transform:
        translate3d(0, -4px, 0)
        rotate(-40deg)
        scale(1);
    }
    78%{
      opacity: 0;
      transform:
        translate3d(0, -12px, 0)
        rotate(-40deg)
        scale(0.98);
    }
    100%{
      opacity: 0;
      transform:
        translate3d(0, -12px, 0)
        rotate(-40deg)
        scale(0.98);
    }
  }

  /* =========================================================
   8) Cards -> mobile sizing (smaller block, bigger content)
   ========================================================= */
  .membership-card__inner{
    height: 305px !important;          /* ✅ smaller block */
    border-radius: 1.05rem !important;
  }

  /* tighter face padding so content can be larger */
  .membership-card__face{
    padding: 0.95rem 0.95rem !important;   /* ✅ less padding */
    border-radius: 1.05rem !important;
  }

  /* FRONT: reduce dead space between icon + text */
  .membership-card__face--front{
    padding: 1.05rem 1.0rem !important;
    justify-content: space-between !important;
  }

  /* icon slightly bigger (content feels bigger) */
  .membership-card__icon img{
    width: 182px !important;           /* ✅ bigger than 170 */
  }

  /* title + tagline slightly bigger */
  .membership-card__title{
    font-size: 1.18rem !important;     /* ✅ bigger text */
    margin: 0 0 0.45rem !important;
  }

  .membership-card__title::after{
    width: 86px !important;
    bottom: -6px !important;
  }

  .membership-card__tagline{
    font-size: 0.93rem !important;     /* ✅ slightly bigger */
    line-height: 1.34 !important;
    margin-top: 0.65rem !important;
  }

  /* BACK: tighten layout so numbers feel larger */
  .membership-card__back-content{
    padding: 1.05rem 1.05rem !important;  /* ✅ less padding */
    gap: 1.1rem !important;
  }

  .membership-card__rows{
    gap: 0.72rem !important;           /* ✅ tighter */
    max-width: 320px !important;
  }

  .membership-card__label{
    font-size: 0.74rem !important;     /* ✅ slightly bigger */
    letter-spacing: 0.11em !important;
  }

  .membership-card__value{
    font-size: 1.02rem !important;     /* ✅ bigger */
  }

  .membership-card__price{
    font-size: 3rem !important;     /* ✅ bigger */
  }

  .membership-card__discount{
    font-size: 1.25rem !important;     /* ✅ bigger */
  }

  /* CTA slightly tighter so it doesn’t feel chunky */
  .membership-card__cta{
    width: 100% !important;
    max-width: 17rem !important;
    padding: 0.55rem 0 !important;
    font-size: 0.92rem !important;
  }

  /* =========================================================
     8.5) Flip behavior — disable hover, use .is-flipped
     ========================================================= */
  .membership-card:hover .membership-card__inner{
    transform: none !important;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.22) !important;
  }

  .membership-card.is-flipped .membership-card__inner{
    transform: rotateY(180deg) translateY(-2px) !important;
  }

  .membership-card{
    -webkit-tap-highlight-color: transparent !important;
  }

  /* =========================================================
     9) BONUS EXPLAIN — stack nicely + tighten spacing
     ========================================================= */
  .bonus-explain{
    margin-top: 1.8rem !important;
    padding-top: 0.6rem !important;
  }

  .bonus-qrow{
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
    padding: 1.25rem 0 !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
  }

  .bonus-q h3{
    font-size: 1.25rem !important;
    line-height: 1.18 !important;
  }

  .bonus-underline{
    width: 72px !important;
    margin-top: 0.45rem !important;
  }

  .bonus-a{
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }

  .bonus-list li{
    padding-left: 44px !important;
    margin-bottom: 0.7rem !important;
  }

  .bonus-list li::before{
    width: 34px !important;
    height: 34px !important;
    top: 0.18rem !important;
  }

  .bonus-decline{
    margin-top: 1.15rem !important;
    border-radius: 1.25rem !important;
    padding: 1.05rem 1.0rem 1.1rem !important;
  }

  .bonus-decline__title{
    padding: 0.85rem 0.95rem !important;
    border-radius: 999px !important;
    margin: 0 auto 0.9rem !important;
    max-width: 100% !important;
    font-size: 0.95rem !important;
  }

  .bonus-decline__item{
    padding: 0.85rem 0.95rem !important;
    margin: 0.7rem auto 0 !important;
    max-width: 100% !important;
    font-size: 0.95rem !important;
  }

  /* =========================================================
     10) EXPLORE SECTION — responsive grid + smaller cards
     ========================================================= */
  .explore-section{
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important; /* kill right strip width push on mobile */
    padding-top: 1.2rem !important;
    padding-bottom: 2.6rem !important;
    max-width: 100% !important;
  }

  .explore-title{
    font-size: 1.35rem !important;
    margin: 0 0 1.2rem !important;
    white-space: normal !important; /* allow wrap on mobile */
  }

  .explore-grid{
    grid-template-columns: 1fr !important;
    gap: 2.0rem !important;
    justify-content: stretch !important;
  }

  .explore-card{
    max-width: 100% !important;
    min-height: 360px !important; /* smaller */
    border-radius: 1.25rem !important;

    /* disable hover tilt on touch */
    --hover-xform: translate3d(0,0,0) scale(1) rotateX(0) rotateY(0) rotateZ(0) !important;
  }

  .explore-card__media{
    height: 255px !important;
    margin: 0.6rem !important;
    border-radius: 1.1rem !important;
  }

  .explore-card__body{
    padding: 0.6rem 1.0rem 1.05rem !important;
  }

  .explore-card__title{
    font-size: 1.02rem !important;
  }

  /* kill hover/active lift on mobile */
  .explore-card:hover,
  .explore-card:active{
    transform: translate3d(0, var(--reveal-y, 0px), 0) var(--hover-xform) !important;
    box-shadow:
      0 0 0 4px #f7a623,
      0 18px 40px rgba(0, 0, 0, 0.18) !important;
  }
}