/* Global Loyalty Landing + Carousel Component Styles (migrated from /loyalty/assets/) */

:root {
  --loyalty-purple: #6D33A6;
  --loyalty-cyan: #7be0ff;
  --loyalty-dark: #0f0f10;
  --loyalty-panel: #1e1e1e;
  --loyalty-text: #f2f2f2;
  --loyalty-accent: #00e5a6;
}

/* Base layout overrides (copied essential parts only; extend as needed) */
.loyalty-landing .container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

/* Tier Carousel Component */
.tier-carousel-component { --gap:14px; --transition:280ms ease; --fade-percent:66%; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; box-sizing:border-box; padding:8px; background: transparent !important; }
.tier-carousel-component .carousel-btn { background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); color:#fff; width:44px; height:44px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; line-height:1; transition: background var(--transition), transform 180ms ease; }
.tier-carousel-component .carousel-btn:hover { background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.tier-carousel-component .carousel-viewport { overflow:hidden; flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; }
.tier-carousel-component .carousel-track { display:flex; align-items:center; gap:var(--gap); transition: transform 520ms cubic-bezier(.22,.9,.34,1); will-change: transform; padding:6px 0; }
.tier-carousel-component .slide { position:relative; flex:0 0 auto; width: clamp(200px, 40vw, 500px); aspect-ratio:1/1; border-radius:12px; overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,0.45); transition: opacity 240ms ease, transform 320ms ease; opacity:.36; }
.tier-carousel-component .slide.active { opacity: 1; }
.tier-carousel-component .carousel-viewport { position:relative; }
/* Carousel end-cap fades: fade slides into page bg (#262626) at edges */
.tier-carousel-component .carousel-viewport::before,
.tier-carousel-component .carousel-viewport::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(24px, 8vw, 160px);
  pointer-events: none;
  z-index: 3; /* above slides */
}
.tier-carousel-component .carousel-viewport::before { left: 0; background: linear-gradient(90deg, #262626 0%, rgba(38,38,38,0) 100%); }
.tier-carousel-component .carousel-viewport::after { right: 0; background: linear-gradient(270deg, #262626 0%, rgba(38,38,38,0) 100%); }
.tier-carousel-component .slide img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; -webkit-user-drag:none; pointer-events:none; }
/* Overlay */
.tier-carousel-component .overlay { position:absolute; left:50%; top:50%; width:85%; height:85%; transform:translate(-50%,-50%) scale(.98); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity 260ms ease, transform 260ms ease; border-radius:10px; background: rgba(8,8,10,0.72); border:1px solid rgba(109,51,166,0.9); box-shadow:0 8px 30px rgba(109,51,166,0.18), 0 0 36px rgba(123,224,255,0.08); backdrop-filter: blur(6px); }
.tier-carousel-component .overlay.visible { opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
.tier-carousel-component .overlay-inner { color:#fff; text-align:center; padding:1rem; width:92%; max-height:92%; overflow:auto; -webkit-overflow-scrolling:touch; }
.tier-carousel-component .overlay-inner h3 { margin:0 0 .55rem; font-size: var(--fs-lg); font-weight:400; letter-spacing:.5px; }
.tier-carousel-component .overlay-inner p { margin:0; font-size: var(--fs-sm); color:var(--loyalty-cyan); line-height:1.45; }
.tier-carousel-component .slide.active:hover { box-shadow:0 16px 48px rgba(109,51,166,0.2), 0 0 54px rgba(123,224,255,0.06); }
@media (max-width:900px){ .tier-carousel-component { padding:6px; gap:6px; } .tier-carousel-component .carousel-btn { width:40px; height:40px; font-size:18px; } }
@media (max-width:520px){ .tier-carousel-component { gap:6px; padding:6px; } .tier-carousel-component .carousel-btn { display:none; } }

/* FAQ Accordion (reuse existing logic styling) */
.faq-list { display:grid; gap:1rem; }
.loyalty-landing h2 { color:var(--loyalty-cyan); font-size: var(--fs-xl); letter-spacing:.8px; line-height:1.15; }

/* Define a reusable size for cyan H2s so related elements can scale consistently */
.loyalty-landing { --loyalty-h2-cyan-size: clamp(1.3rem, 2vw, 1.7rem); }

/* Make specific cyan H2 headings use the shared variable */
.loyalty-landing h2.h2-cyan {
  font-size: var(--loyalty-h2-cyan-size);
}

/* Full-bleed, semi-transparent title bar with 25% gradient fades on each side.
   Targets section headings inside the loyalty landing so the bar stretches
   to the full viewport width while the text remains centered in the page.
*/
.loyalty-landing .section-title {
  position: relative;
  z-index: 2; /* keep text above the decorative bar */
  display: block;
  text-align: center;
  padding: 0.55rem 0;
  margin: 0.8rem 0;
  color: var(--loyalty-cyan); /* ensure title text stays bright and readable */
}
.loyalty-landing .section-title::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  /* Reduce vertical coverage so decorative bar does not intrude
     into nearby interactive components (tabs/carousel). This avoids
     creating new stacking contexts or z-index conflicts with the
     site header/backdrop. (Option B - lowest-risk fix.) */
  height: 60%;
  top: 20%;
  pointer-events: none;
  z-index: -1; /* put the decorative bar behind the title text */
  /* center uses semi-transparent #0d0d0d; fade zones are 25% of full width */
  background: linear-gradient(90deg,
    rgba(13,13,13,0) 0%,
    rgba(13,13,13,0.75) 25%,
    rgba(13,13,13,0.75) 75%,
    rgba(13,13,13,0) 100%);
}

.faq-item { background: var(--loyalty-panel); border-radius:10px; overflow:hidden; transition: all .3s ease; }
.faq-q { width:100%; display:flex; align-items:flex-start; justify-content:space-between; padding:.9rem 1.5rem; background:transparent; border:none; color: var(--loyalty-text); font-weight:500; font-size: var(--fs-base); cursor:pointer; }
.faq-q:hover { background: rgba(255,255,255,0.03); }
.faq-toggle { font-size: var(--fs-lg); font-weight:300; line-height:1; transition: transform .3s ease; margin-left:1rem; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-a { padding:0 1.5rem 0; color: var(--loyalty-cyan); line-height:1.6; max-height:0; overflow:hidden; transition:max-height .34s ease, padding .24s ease; font-size: var(--fs-sm); }
.faq-item.open .faq-a { padding:0 1.5rem 1.2rem; }

/* Reveal animations placeholder */
.reveal { opacity:0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; }
.reveal.in-view { opacity:1; transform: translateY(0); }

/* Utility highlights used in tab content */
.pink { color: var(--pink); font-weight: 600; }
.cyan { color: var(--cyan); font-weight: 600; }

/* WHY JOIN - Tabbed interface styles */
.why-tabs { --tab-bubble-overlap: 18px; --tab-bubble-height: 72px; display:flex; flex-direction:column; gap:1rem; align-items:stretch; position:relative; }
.why-tabs .tab-bar { display:flex; gap:12px; align-items:center; overflow:auto; -webkit-overflow-scrolling:touch; padding:0 8px; justify-content:center; z-index:4; isolation: isolate; }
.why-tabs .tab-bar::-webkit-scrollbar{ display:none; }
.why-tabs .tab-btn { flex:0 0 auto; background:transparent; border:none; color:var(--pink) !important; padding:.2rem .2rem; font-weight:400; font-size: var(--fs-base); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; border-bottom:2px solid transparent; transition: color 220ms ease, border-color 240ms ease; position:relative; z-index:30; isolation: isolate; }
.why-tabs .tab-btn::before{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border-radius:6px; background: rgba(16,16,18,0.0); border:1px solid rgba(123,224,255,0.00); z-index:-1; pointer-events:none; opacity:0; transition: opacity 220ms ease, background 220ms ease, border-color 220ms ease; }
.why-tabs .tab-btn.active::before{ background: rgba(16,16,18,0.62); border-color: rgba(123,224,255,0.06); opacity:1; }
.why-tabs .tab-btn.active { color:var(--loyalty-cyan) !important; border-bottom-color: var(--loyalty-cyan); text-shadow: none; }
.why-tabs .tab-btn.active.cyan-accent,
.why-tabs .tab-btn.active-cyan { color:var(--loyalty-cyan) !important; border-bottom-color: var(--loyalty-cyan); }

.why-tabs .tab-panel { position:relative; width:100%; display:block; box-sizing:border-box; margin-top: calc(-1 * var(--tab-bubble-overlap)); }
.why-tabs .tab-panel .tab-content { position:absolute; left:0; right:0; top: calc(var(--tab-bubble-overlap)); opacity:0; transform: translateY(6px); transition: opacity 260ms ease, transform 260ms ease; display:none; pointer-events:none; gap:1.5rem; align-items:center; padding:1rem; background: rgba(16,16,18,0.6); border-radius:10px; border:1px solid rgba(123,224,255,0.04); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); color:var(--loyalty-text); }
.why-tabs .tab-panel .tab-content.active { opacity:1; transform: translateY(0); position:relative; top:0; display:flex; pointer-events:auto; }
.why-tabs .tab-content .tab-image { flex:0 0 30%; display:flex; align-items:center; justify-content:center; }
.why-tabs .tab-content .tab-image img { width:100%; height:auto; border-radius:8px; object-fit:cover; }
.why-tabs .tab-content .tab-text { flex:1; }

/* Ensure uniform content area height container */
.why-tabs .tab-panel { min-height: 140px; }

@media (max-width:720px){
  .why-tabs .tab-btn{ font-size: var(--fs-sm); padding:.55rem .8rem; }
  .why-tabs .tab-panel .tab-content { padding:.9rem; flex-direction:column; }
  .why-tabs .tab-content .tab-image { flex:0 0 auto; width:100%; max-width:280px; }
}

/* Fix for inline CTA links in tab text */
.why-tabs .tab-text li a {
  display: inline !important;
  float: none !important;
  color: var(--loyalty-cyan);
  text-decoration: underline;
}
.why-tabs .tab-text li a:hover {
  color: var(--pink);
}