/* Reference-style inner pages: left title on navy, flat content */
.events-page .events-header h1,.terms-page-header h1,.faq-page-header h1,.checkin-subheader h1,.about-hero-copy h1{font-size:30px!important;font-weight:700!important;text-align:left!important;text-transform:none!important;color:#fff!important;margin:0 0 14px!important;letter-spacing:0!important}
.events-page .events-header p,.terms-page-header p,.faq-page-header p,.checkin-subheader p,.about-hero-copy p{display:none!important}
.events-header,.terms-page-header,.faq-page-header,.checkin-subheader{text-align:left!important;padding:0!important;background:none!important;border:none!important}
/* Events: one full-width banner per row */
.events-list{display:flex!important;flex-direction:column!important;gap:16px!important;grid-template-columns:none!important;padding:0!important;list-style:none}
.events-list li{width:100%}
.event-card{background:none!important;border:none!important;box-shadow:none!important;display:block!important;border-radius:0!important}
.event-card-body{display:none!important}
.event-card-thumb{border-radius:6px!important;overflow:hidden;aspect-ratio:auto!important;height:auto!important}
.event-card-thumb img{width:100%!important;height:auto!important;display:block;object-fit:contain!important}
/* Terms: plain text blocks */
.terms-container-box,.faq-container-box{background:none!important;border:none!important;box-shadow:none!important;padding:0!important}
.terms-card-item{background:none!important;border:none!important;box-shadow:none!important;padding:0 0 14px!important;margin:0!important}
.terms-card-item h3{font-size:15px!important;font-weight:700!important;color:#fff!important;margin:0 0 4px!important}
.terms-card-item p{font-size:14px!important;color:#fff!important;line-height:1.6}
/* FAQ: flat rows with dividers */
.faq-card-item{background:none!important;border:none!important;border-bottom:1px solid rgba(255,255,255,.2)!important;border-radius:0!important;box-shadow:none!important}
.faq-card-question{color:#fff!important;font-size:15px!important}
.faq-card-answer{color:#e2e8f0!important}
/* About: flat text */
.about-hero{background:none!important;padding:78px 0 0!important;min-height:0!important}
.about-hero::before,.about-hero::after{display:none!important}
.about-block{background:none!important;border:none!important;padding:16px 0!important}
.about-block h2{font-size:18px!important;font-weight:700!important;color:#fff!important;text-align:left!important}
.about-block p{color:#fff!important;font-size:14px!important;line-height:1.7}
/* VIP: white tier cards */
.vip-page-intro{display:none!important}
.vip-tier-card{background:#fff!important;border:none!important;border-radius:12px!important;box-shadow:none!important}
.vip-tier-card,.vip-tier-card *{color:#1a1a1a}
.vip-tier-title{color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important}
.vip-current-badge{background:none!important;border:1px solid #e0463c!important;color:#e0463c!important;-webkit-text-fill-color:#e0463c!important;border-radius:20px}
.faq-page-wrapper .faq-container-box .faq-card-item{background:transparent!important;border:none!important;border-bottom:1px solid rgba(255,255,255,.2)!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
.faq-page-wrapper .faq-card-question{background:transparent!important;padding:14px 0!important}
.faq-page-wrapper .faq-card-answer{padding:0 0 14px!important;background:transparent!important}
.terms-page-wrapper .terms-card-item{background:transparent!important;border:none!important}
.checkin-page-wrapper .info-box{background:rgba(26,40,63,.55)!important;border:none!important;border-radius:14px!important}
.checkin-page-wrapper .info-box-header{display:none!important}
.terms-page-wrapper .terms-card-item h3{text-transform:none!important;letter-spacing:0!important}
.terms-page-wrapper .terms-card-item{padding:0 0 16px!important}
.checkin-page-wrapper .checkin-subheader{padding:78px 16px 0!important;max-width:780px;margin:0 auto}
.checkin-page-wrapper .checkin-container{max-width:780px;margin:0 auto}
.payment-request-container .vip-tier-list .vip-tier-card{background:#fff!important;border:none!important;border-radius:12px!important}
.payment-request-container .vip-tier-card .vip-tier-title,.payment-request-container .vip-tier-card .vip-tier-subtitle,.payment-request-container .vip-tier-card .vip-tier-benefits li,.payment-request-container .vip-tier-card .vip-tier-benefits strong{color:#222!important;-webkit-text-fill-color:#222!important}

/* ========================================================
   ANIMATIONS: drawer + page transitions
   ======================================================== */
@keyframes refSlideIn{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes refPop{0%{opacity:0;transform:scale(.4)}65%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes refFill{from{width:0}to{width:100%}}
@keyframes refLogoSpin{from{opacity:0;transform:scale(.5) rotate(-90deg)}to{opacity:1;transform:none}}
@keyframes refPageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes refGlow{0%,100%{box-shadow:0 0 0 0 rgba(242,169,0,.45)}50%{box-shadow:0 0 0 8px rgba(242,169,0,0)}}

.ref-drawer.active .ref-anim{animation:refSlideIn .45s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i,0) * 45ms + 120ms)}
.ref-drawer.active .ref-drawer-logo i,.ref-drawer.active .ref-drawer-logo .rgc-drawer-logo-img{animation:refLogoSpin .7s cubic-bezier(.16,1,.3,1) backwards .1s}
.ref-drawer.active .ref-grid a.ref-anim .ref-bubble{animation:refPop .55s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--i,0) * 45ms + 200ms)}
.ref-drawer.active .ref-bar i{animation:refFill 1s cubic-bezier(.16,1,.3,1) backwards .5s}
.ref-drawer.active .ref-user-avatar{animation:refGlow 2s ease-out 1s 2}
.ref-bubble,.ref-list a,.ref-grid a{transition:transform .2s ease,background .2s ease}
.ref-grid a:hover .ref-bubble{transform:translateY(-4px) scale(1.08);background:#22334F}
.ref-grid a:active .ref-bubble{transform:scale(.92)}
.ref-list a:hover{background:rgba(255,255,255,.05);transform:translateX(6px)}
.ref-list a:active{transform:translateX(2px)}
.side-navbar-overlay{transition:opacity .35s ease,visibility .35s ease}

/* Page enter / leave */
body>div:not(#preloader):not(.side-navbar-overlay):not(.kefu_btn_container),body>main,body>.page{animation:refPageIn .5s cubic-bezier(.16,1,.3,1) backwards}
body.page-leaving>div:not(#preloader):not(.side-navbar-overlay),body.page-leaving>main,body.page-leaving>.page{opacity:0;transform:translateX(-24px);transition:opacity .22s ease,transform .22s ease}
body.page-leaving .side-navbar-drawer{transform:translateX(-100%)!important}
@media (prefers-reduced-motion:reduce){
  .ref-drawer.active .ref-anim,.ref-drawer.active *,body>*{animation:none!important;transition:none!important}
}

/* Scroll/enter reveal for page content blocks */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--rv-d,0ms);will-change:opacity,transform}
.rv.rv-in{opacity:1;transform:none}
@keyframes refPageIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none!important}}

/* Colour 3D icons in drawer */
.ref-bubble img{width:46px;height:46px;object-fit:contain}
.ref-li-img{width:34px;height:34px;object-fit:contain;flex-shrink:0}

/* Check-in: highlight the row that can be claimed now */
@keyframes ciGlow{0%,100%{box-shadow:0 0 0 0 rgba(242,169,0,.55),0 0 14px rgba(242,169,0,.25);border-color:rgba(242,169,0,.6)}50%{box-shadow:0 0 0 7px rgba(242,169,0,0),0 0 26px rgba(242,169,0,.55);border-color:#F2A900}}
@keyframes ciShine{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(260%) skewX(-20deg)}}
@keyframes ciBtn{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes ciNum{0%,100%{box-shadow:0 0 0 0 rgba(242,169,0,.7)}50%{box-shadow:0 0 0 9px rgba(242,169,0,0)}}
.check-in-content:has(.btn-check-in-action){position:relative;overflow:hidden;border:1px solid #F2A900!important;background:linear-gradient(90deg,rgba(242,169,0,.14),rgba(242,169,0,.04))!important;animation:ciGlow 1.8s ease-in-out infinite}
.check-in-content:has(.btn-check-in-action)::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:ciShine 2.6s ease-in-out infinite;pointer-events:none}
.check-in-content:has(.btn-check-in-action) .check-in-number{animation:ciNum 1.8s ease-out infinite}
.check-in-content:has(.btn-check-in-action) .check-in-details h3{color:#F2A900!important}
.btn-check-in-action{animation:ciBtn 1.3s ease-in-out infinite;box-shadow:0 0 16px rgba(242,169,0,.6)}
.btn-check-in-action:hover{animation-play-state:paused;transform:scale(1.1)}
@media (prefers-reduced-motion:reduce){.check-in-content:has(.btn-check-in-action),.check-in-content:has(.btn-check-in-action)::after,.btn-check-in-action,.check-in-number{animation:none!important}}

/* ========================================================
   CHECK-IN: premium redesign
   ======================================================== */
.checkin-page-wrapper{position:relative}
.checkin-page-wrapper::before{content:"";position:absolute;inset:0 0 auto 0;height:360px;background:radial-gradient(60% 100% at 50% 0%,rgba(242,169,0,.18),transparent 70%);pointer-events:none}
.checkin-page-wrapper .checkin-subheader{position:relative;padding:84px 20px 0!important}
.checkin-page-wrapper .checkin-subheader h1{font-size:28px!important;letter-spacing:.2px!important}
.checkin-container{padding:0 16px}
.ci-hero{position:relative;display:flex;align-items:center;gap:22px;padding:24px 22px;margin:8px 0 18px;border-radius:22px;background:linear-gradient(135deg,#1d2c46 0%,#0e1d3a 60%,#2a2250 130%);border:1px solid rgba(242,169,0,.35);box-shadow:0 18px 40px -14px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden}
.ci-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(242,169,0,.28),transparent 70%)}
.ci-ring{position:relative;width:112px;height:112px;flex-shrink:0}
.ci-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ci-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ci-ring-bg{stroke:rgba(255,255,255,.1)}
.ci-ring-fg{stroke:url(#ciGrad);transition:stroke-dashoffset 1.3s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 6px rgba(242,169,0,.6))}
.ci-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ci-ring-text b{font-size:34px;font-weight:800;line-height:1;background:linear-gradient(180deg,#FFE9A8,#F2A900);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ci-ring-text small{font-size:10.5px;color:#94A3B8;margin-top:3px;letter-spacing:.4px}
.ci-hero-copy{position:relative;z-index:1;min-width:0}
.ci-eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#F2A900;margin-bottom:6px}
.ci-hero-copy h2{font-size:20px!important;font-weight:800!important;margin:0 0 4px!important;color:#fff!important}
.ci-hero-copy p{font-size:12.5px;color:#a9b6cc!important;margin:0 0 12px;line-height:1.5}
.ci-pips{display:flex;gap:7px}
.ci-pips i{width:26px;height:6px;border-radius:6px;background:rgba(255,255,255,.12);transition:background .4s ease,box-shadow .4s ease}
.ci-pips i.on{background:linear-gradient(90deg,#FFD76A,#F2A900);box-shadow:0 0 10px rgba(242,169,0,.7)}

.checkin-page-wrapper .info-box{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}
.checkin-page-wrapper .info-box-content{padding:0!important;background:none!important}
.check-in-list{position:relative;display:flex;flex-direction:column;gap:12px}
.check-in-list::before{content:"";position:absolute;left:36px;top:30px;bottom:30px;width:2px;background:linear-gradient(180deg,#F2A900,rgba(255,255,255,.12) 60%);opacity:.55}
.check-in-content{position:relative;z-index:1;background:linear-gradient(135deg,rgba(29,44,70,.95),rgba(14,29,58,.95))!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:16px!important;padding:14px 16px!important;box-shadow:0 8px 20px -10px rgba(0,0,0,.7);transition:transform .25s ease,border-color .25s ease}
.check-in-content:hover{transform:translateY(-2px);border-color:rgba(242,169,0,.4)!important}
.check-in-number{width:42px!important;height:42px!important;border-radius:50%!important;background:linear-gradient(145deg,#2a3c5c,#16253f)!important;color:#94A3B8!important;border:2px solid rgba(255,255,255,.12)!important;font-weight:800;box-shadow:0 0 0 4px #001029}
.check-in-number.approved,.check-in-content.item-approved .check-in-number{background:linear-gradient(145deg,#FFD76A,#F2A900)!important;color:#1a1200!important;border-color:transparent!important;box-shadow:0 0 0 4px #001029,0 0 16px rgba(242,169,0,.55)}
.check-in-content.item-approved{opacity:.92;border-color:rgba(242,169,0,.25)!important}
.check-in-details h3{font-size:15px!important;font-weight:700!important;color:#fff!important}
.check-in-details p{font-size:12px!important;color:#8a9bb5!important;margin:2px 0 0!important}
.check-in-action-disabled{display:inline-flex;align-items:center;gap:6px;color:#6f7f99!important;font-size:10.5px!important;letter-spacing:.5px}
.check-in-action-disabled::before{content:"\f023";font-family:FontAwesome;font-size:12px;color:#6f7f99}
.btn-check-in-action{background:linear-gradient(135deg,#FFD76A,#F2A900)!important;color:#1a1200!important;border:none!important;border-radius:999px!important;padding:10px 20px!important;font-weight:800!important;letter-spacing:.6px;text-transform:uppercase;font-size:12px!important}
.checkin-page-wrapper .info-footer-hint{background:rgba(242,169,0,.08)!important;border:1px dashed rgba(242,169,0,.4)!important;color:#e8d9a8!important;border-radius:14px!important;margin-top:18px}
@media (max-width:420px){.ci-hero{flex-direction:column;text-align:center}.ci-pips{justify-content:center}.check-in-list::before{left:37px}}
.checkin-page-wrapper .checkin-subheader{margin-bottom:14px!important;padding-top:70px!important}
.checkin-page-wrapper .checkin-subheader h1{margin:0!important;line-height:1.2!important}

/* ========================================================
   VIP: glassmorphism cards + spinning 3D badges
   ======================================================== */
@keyframes vipSpin3d{0%{transform:perspective(500px) rotateY(0deg)}100%{transform:perspective(500px) rotateY(360deg)}}
@keyframes vipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.payment-request-container{position:relative;isolation:isolate}
.payment-request-container::before,.payment-request-container::after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none}
.payment-request-container::before{width:260px;height:260px;left:-60px;top:20%;background:rgba(242,169,0,.35)}
.payment-request-container::after{width:300px;height:300px;right:-80px;bottom:10%;background:rgba(98,80,255,.35)}
.payment-request-container .vip-tier-list .vip-tier-card{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05))!important;
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.22)!important;border-radius:20px!important;
  box-shadow:0 12px 32px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.06)!important;
  transition:transform .3s ease,border-color .3s ease}
.payment-request-container .vip-tier-list .vip-tier-card::before{content:"";position:absolute;top:-60%;left:-30%;width:70%;height:220%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);transform:rotate(12deg);pointer-events:none}
.payment-request-container .vip-tier-list .vip-tier-card:hover{transform:translateY(-3px);border-color:rgba(242,169,0,.55)!important}
.payment-request-container .vip-tier-card.is-current{border-color:rgba(242,169,0,.7)!important;box-shadow:0 12px 32px -10px rgba(0,0,0,.6),0 0 24px rgba(242,169,0,.25),inset 0 1px 0 rgba(255,255,255,.35)!important}
.payment-request-container .vip-tier-card .vip-tier-title{color:#fff!important;-webkit-text-fill-color:#fff!important}
.payment-request-container .vip-tier-card .vip-tier-subtitle{color:#F2A900!important;-webkit-text-fill-color:#F2A900!important}
.payment-request-container .vip-tier-card .vip-tier-benefits li{color:#dbe4f3!important;-webkit-text-fill-color:#dbe4f3!important}
.payment-request-container .vip-tier-card .vip-tier-benefits strong{color:#fff!important;-webkit-text-fill-color:#fff!important}
.payment-request-container .vip-current-badge{background:rgba(242,169,0,.15)!important;border:1px solid #F2A900!important;color:#FFD76A!important;-webkit-text-fill-color:#FFD76A!important}
.vip-badge{perspective:600px}
.vip-badge img{display:block;transform-style:preserve-3d;backface-visibility:visible;animation:vipSpin3d 4.5s linear infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(242,169,0,.35))}
.vip-tier-card:nth-child(2n) .vip-badge img{animation-duration:5.5s}
.vip-tier-card:nth-child(3n) .vip-badge img{animation-duration:6.5s}
@media (prefers-reduced-motion:reduce){.vip-badge img{animation:none!important}}

/* Bright default avatar in top bar */
.ref-avatar-default{background:linear-gradient(145deg,#FFE9A8,#F2A900)!important;color:#1a1200!important;font-size:18px;box-shadow:0 0 0 2px rgba(255,255,255,.25),0 0 16px rgba(242,169,0,.65);transition:transform .2s ease,box-shadow .2s ease}
.ref-avatar-default:hover{transform:scale(1.08);box-shadow:0 0 0 2px rgba(255,255,255,.5),0 0 22px rgba(242,169,0,.9)}
.ref-avatar:not(.ref-avatar-default){box-shadow:0 0 0 2px #F2A900,0 0 14px rgba(242,169,0,.45)}

/* Drawer avatar: bright, animated */
@keyframes avRing{to{transform:rotate(360deg)}}
.ref-user-avatar{position:relative;overflow:visible!important;border:none!important}
.ref-user-avatar::before{content:"";position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 55%,#FFD76A 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:avRing 3s linear infinite}
.ref-user-avatar img{border-radius:50%;border:2px solid #F2A900;box-shadow:0 0 16px rgba(242,169,0,.5)}
.ref-user-avatar.is-default{display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#FFE9A8,#F2A900);color:#1a1200;font-size:30px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 0 22px rgba(242,169,0,.7)}
.ref-user-avatar.is-default i{filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
@media (prefers-reduced-motion:reduce){.ref-user-avatar::before{animation:none}}

/* VIP SVG badge */
.vip-badge .vip-svg{width:64px;height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(242,169,0,.35))}
.vip-badge .vip-svg{animation:vipSpin3d 5s linear infinite;transform-style:preserve-3d}
.vip-tier-card:nth-child(2n) .vip-svg{animation-duration:6s}
.vip-tier-card:nth-child(3n) .vip-svg{animation-duration:7s}
@media (prefers-reduced-motion:reduce){.vip-badge .vip-svg{animation:none!important}}

/* Unified icon language: every icon sits in a glass bubble with a soft gold glow */
.ref-li-img{width:40px!important;height:40px!important;padding:6px;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.2);box-shadow:0 0 14px rgba(242,169,0,.18),inset 0 1px 0 rgba(255,255,255,.25)}
.ref-list a:hover .ref-li-img{box-shadow:0 0 18px rgba(242,169,0,.5);transform:scale(1.08);transition:all .2s ease}
.kpi-icon,.pulse-icon-wrapper,.empty-orb{border-radius:50%!important}
.ref-bubble{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05))!important;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 18px rgba(242,169,0,.2),inset 0 1px 0 rgba(255,255,255,.25)}