/* ===================== TOKENS ===================== */
:root{
  --bg:#0A0E0D;
  --bg-soft:#0E1413;
  --surface:#131A18;
  --surface-2:#1A2220;
  --surface-border:rgba(255,255,255,0.07);
  --blue:#2D9CDB;
  --blue-deep:#1B6FA8;
  --green:#5BC85F;
  --green-deep:#3CB54A;
  --gold:#F2B705;
  --red:#E5484D;
  --text:#F3F6F5;
  --text-dim:#9AA8A4;
  --text-faint:#5E6C68;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 8px 30px rgba(0,0,0,0.35);
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  padding-bottom:84px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

::selection{background:var(--blue-deep);color:#fff;}

a{color:inherit;text-decoration:none;}

.container{max-width:1100px;margin:0 auto;padding:0 18px;}

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:8px;}

/* ===================== HEADER ===================== */
header{
  position:relative;
  padding:22px 0 30px;
  overflow:hidden;
  border-bottom:1px solid var(--surface-border);
  background:
    radial-gradient(ellipse 600px 300px at 20% -10%, rgba(45,156,219,0.18), transparent 60%),
    radial-gradient(ellipse 600px 300px at 90% 10%, rgba(91,200,95,0.14), transparent 60%),
    var(--bg);
}

#network-canvas{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  opacity:0.55;
  pointer-events:none;
}

.header-inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-logo{
  width:46px;
  height:46px;
  object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(45,156,219,0.35));
}

.brand-text{display:flex;flex-direction:column;line-height:1.1;}

.brand-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  letter-spacing:0.5px;
  background:linear-gradient(90deg,#fff 30%,var(--blue) 75%,var(--green) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand-tagline{
  font-size:10.5px;
  letter-spacing:1.6px;
  color:var(--text-dim);
  text-transform:uppercase;
  margin-top:2px;
}

.header-status{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-dim);
  background:rgba(255,255,255,0.04);
  border:1px solid var(--surface-border);
  padding:7px 12px;
  border-radius:30px;
}

.pulse-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 0 rgba(91,200,95,0.6);
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(91,200,95,0.55);}
  70%{box-shadow:0 0 0 8px rgba(91,200,95,0);}
  100%{box-shadow:0 0 0 0 rgba(91,200,95,0);}
}

.header-hero{
  position:relative;
  z-index:2;
  margin-top:26px;
  text-align:center;
}

.header-hero h1{
  font-family:var(--font-display);
  font-size:clamp(26px,6vw,38px);
  font-weight:700;
  letter-spacing:-0.5px;
  margin-bottom:8px;
}

.header-hero h1 span{
  background:linear-gradient(90deg,var(--blue),var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.header-hero p{
  color:var(--text-dim);
  font-size:14.5px;
  max-width:380px;
  margin:0 auto;
}

/* ===================== SECTION TITLES ===================== */
.section-title{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:28px 0 16px;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
}

.section-title .dot{
  width:7px;height:7px;border-radius:2px;
  background:linear-gradient(135deg,var(--blue),var(--green));
  display:inline-block;
  transform:rotate(45deg);
}

.section-sub{
  color:var(--text-dim);
  font-size:13px;
  margin-top:-10px;
  margin-bottom:18px;
}

/* ===================== AVAILABILITY LINE ===================== */
.availability-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:22px;
  opacity:0;
  animation:availability-fade-in 0.7s ease 0.5s forwards;
}

.availability-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--green);
  flex-shrink:0;
  box-shadow:0 0 0 0 rgba(91,200,95,0.6);
  animation:pulse 2s infinite 1.2s;
}

.availability-text{
  position:relative;
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.4px;
  color:var(--text-dim);
  overflow:hidden;
  white-space:nowrap;
}

.availability-text::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--bg);
  transform:translateX(0);
  animation:availability-reveal 0.9s cubic-bezier(.65,0,.35,1) 0.6s forwards;
}

@keyframes availability-fade-in{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes availability-reveal{
  from{transform:translateX(0);}
  to{transform:translateX(101%);}
}

/* ===================== EVENT BANNER ===================== */
.special-event{
  position:relative;
  background:linear-gradient(120deg, rgba(45,156,219,0.16), rgba(91,200,95,0.12));
  border:1px solid rgba(91,200,95,0.25);
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:22px;
  overflow:hidden;
}

.special-event::before{
  content:'';
  position:absolute;
  top:-40%;right:-10%;
  width:160px;height:160px;
  background:radial-gradient(circle, rgba(91,200,95,0.25), transparent 70%);
  pointer-events:none;
}

.special-event h3{
  font-family:var(--font-display);
  font-size:15.5px;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.special-event h3 i{color:var(--gold);}

.special-event p{
  color:var(--text-dim);
  font-size:13.5px;
  position:relative;
  z-index:1;
}

/* ===================== FILTERS ===================== */
.filter-buttons{
  display:flex;
  gap:8px;
  margin:18px 0 6px;
  flex-wrap:wrap;
}

.filter-btn{
  padding:8px 16px;
  border:1px solid var(--surface-border);
  border-radius:30px;
  background:var(--surface);
  color:var(--text-dim);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.25s ease;
}

.filter-btn:hover{
  border-color:rgba(45,156,219,0.4);
  color:var(--text);
}

.filter-btn.active{
  background:linear-gradient(120deg,var(--blue-deep),var(--blue));
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 14px rgba(45,156,219,0.35);
}

/* ===================== PACKAGES GRID ===================== */
.packages-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(265px,1fr));
  gap:16px;
  margin:18px 0;
}

.package-card{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  transition:transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
  opacity:0;
  transform:translateY(16px);
  animation:card-fallback-reveal 0.6s ease 1s forwards;
}

@keyframes card-fallback-reveal{
  to{opacity:1;transform:translateY(0);}
}

.package-card.in-view{
  opacity:1;
  transform:translateY(0);
}

.package-card:hover{
  transform:translateY(-6px);
  border-color:rgba(45,156,219,0.35);
  box-shadow:0 16px 36px rgba(0,0,0,0.4);
}

.package-header{
  padding:13px 16px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  letter-spacing:0.3px;
}

/* ===================== PACKAGE AD IMAGE ===================== */
.package-media{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--surface-2);
}

.package-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.5s ease;
}

.package-card:hover .package-media img{
  transform:scale(1.06);
}

.package-media::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,14,13,0) 45%, rgba(10,14,13,0.92) 100%);
}

.package-media .media-tag{
  position:absolute;
  bottom:10px;
  left:14px;
  z-index:2;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.5px;
  color:rgba(255,255,255,0.85);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:6px;
}

.package-media .media-tag::before{
  content:'';
  width:6px;height:6px;
  border-radius:50%;
  background:var(--green);
}

.package-media.skeleton-media{
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);
  background-size:200% 100%;
  animation:skeleton-load 1.4s infinite;
}

.package-header .op-icon{
  width:26px;height:26px;
  border-radius:7px;
  background:rgba(255,255,255,0.18);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
}

.package-header.orange{background:linear-gradient(120deg,#FF6600,#FF8A00);}
.package-header.camtel{background:linear-gradient(120deg,var(--blue-deep),var(--blue));}
.package-header.mtn{background:linear-gradient(120deg,#FFCC00,#FFD93D);color:#1a1a1a;}
.package-header.special{background:linear-gradient(120deg,var(--green-deep),var(--green));}

.package-body{padding:18px;}

.package-name{
  font-family:var(--font-display);
  font-size:16.5px;
  font-weight:600;
  margin-bottom:12px;
}

.package-details{
  list-style:none;
  margin:14px 0;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.package-details li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13px;
  color:var(--text-dim);
  line-height:1.4;
}

.package-details li i{
  color:var(--blue);
  margin-top:2px;
  width:14px;
}

.package-price{
  font-family:var(--font-mono);
  font-size:21px;
  font-weight:700;
  text-align:center;
  margin:14px 0;
  color:var(--text);
}

.package-price .old-price{
  text-decoration:line-through;
  color:var(--text-faint);
  font-size:14px;
  font-weight:500;
  margin-left:6px;
}

.special-price{color:var(--green);}

.btn{
  display:block;
  width:100%;
  padding:13px;
  border:none;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  transition:all 0.25s ease;
  position:relative;
  overflow:hidden;
}

.btn-primary{
  background:linear-gradient(120deg,var(--blue-deep),var(--blue));
  color:#fff;
}

.btn-primary:hover{
  box-shadow:0 8px 20px rgba(45,156,219,0.4);
  transform:translateY(-2px);
}

.btn-primary:disabled{
  background:var(--surface-2);
  color:var(--text-faint);
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.btn-success{
  background:linear-gradient(120deg,var(--green-deep),var(--green));
  color:#06120a;
}

.btn-success:hover{
  box-shadow:0 8px 20px rgba(91,200,95,0.4);
  transform:translateY(-2px);
}

.btn-ghost{
  background:var(--surface-2);
  color:var(--text);
  border:1px solid var(--surface-border);
}

.btn-ghost:hover{border-color:rgba(255,255,255,0.2);}

/* ripple */
.ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.45);
  transform:scale(0);
  animation:ripple-anim 0.6s ease-out;
  pointer-events:none;
}

@keyframes ripple-anim{
  to{transform:scale(3.5);opacity:0;}
}

/* ===================== BADGES & RIBBON ===================== */
.package-badge{
  position:absolute;
  top:12px;left:-6px;
  padding:5px 12px 5px 16px;
  color:#fff;
  font-weight:700;
  font-size:10.5px;
  letter-spacing:0.4px;
  border-radius:0 30px 30px 0;
  z-index:2;
  text-transform:uppercase;
}

.badge-new{background:var(--blue);}
.badge-popular{background:var(--gold);color:#1a1300;}
.badge-cheap{background:var(--green);color:#06190d;}

.ribbon{
  position:absolute;
  top:14px;right:-30px;
  padding:5px 36px;
  background:var(--red);
  color:#fff;
  font-weight:800;
  font-size:11px;
  transform:rotate(35deg);
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
  z-index:2;
}

.package-card.special-offer{border:1px solid rgba(91,200,95,0.4);}

/* ===================== BOTTOM NAV ===================== */
.bottom-nav{
  position:fixed;
  bottom:0;left:0;right:0;
  background:rgba(14,20,19,0.85);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  display:flex;
  justify-content:space-around;
  border-top:1px solid var(--surface-border);
  z-index:1000;
  padding-bottom:env(safe-area-inset-bottom);
}

.nav-item{
  padding:12px 8px 10px;
  text-align:center;
  flex:1;
  cursor:pointer;
  color:var(--text-faint);
  transition:color 0.25s ease;
  position:relative;
}

.nav-item i{
  font-size:18px;
  display:block;
  margin-bottom:4px;
  transition:transform 0.25s ease;
}

.nav-item span{font-size:10.5px;font-weight:600;}

.nav-item.active{color:var(--blue);}
.nav-item.active i{transform:translateY(-2px);}

.nav-item.active::before{
  content:'';
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:28px;height:2.5px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--green));
}

/* ===================== PAGES ===================== */
.page{display:none;padding:18px 0;animation:fadeIn 0.45s ease;}
.page.active{display:block;}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

/* ===================== FORMS / VERIFICATION ===================== */
.verification-page,.summary-page{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  padding:26px 22px;
  margin:10px auto;
  max-width:480px;
  box-shadow:var(--shadow);
}

.verification-page h2,.summary-page h2{
  font-family:var(--font-display);
  font-size:19px;
  margin-bottom:8px;
}

.verification-page > p{color:var(--text-dim);font-size:13.5px;margin-bottom:20px;}

.form-group{margin-bottom:18px;}

.form-group label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
  font-size:13.5px;
  color:var(--text-dim);
}

.phone-input-wrap{
  display:flex;
  align-items:center;
  background:var(--surface-2);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  transition:border-color 0.25s ease;
}

.phone-input-wrap:focus-within{border-color:var(--blue);}

.phone-prefix{
  padding:13px 12px;
  font-family:var(--font-mono);
  color:var(--text-dim);
  border-right:1px solid var(--surface-border);
  font-size:14px;
}

.form-group input{
  width:100%;
  padding:13px 14px;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:16px;
  font-family:var(--font-mono);
  outline:none;
}

.operator-preview{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  font-size:12.5px;
  color:var(--text-dim);
  min-height:18px;
}

.operator-preview .op-dot{
  width:8px;height:8px;border-radius:50%;
  display:none;
}

.error-message{
  color:var(--red);
  margin-top:8px;
  font-size:13px;
  display:none;
}

@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}

.shake{animation:shake 0.4s ease;}

.success-message{
  background:rgba(91,200,95,0.12);
  border:1px solid rgba(91,200,95,0.3);
  color:var(--green);
  padding:14px;
  border-radius:var(--radius-sm);
  margin:18px 0;
  display:none;
  font-size:13.5px;
}

.summary-item{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--surface-border);
  font-size:14px;
}

.summary-item span:first-child{color:var(--text-dim);}
.summary-item span:last-child{font-weight:600;font-family:var(--font-mono);}

.summary-total{
  display:flex;
  justify-content:space-between;
  font-weight:700;
  font-size:18px;
  color:var(--text);
  margin:20px 0;
  font-family:var(--font-mono);
}

.summary-total span:last-child{
  background:linear-gradient(90deg,var(--blue),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ===================== VERIFICATION CIRCULAR LOADER (notification fixe) ===================== */
.verify-loader-overlay{
  position:fixed;
  inset:0;
  background:rgba(5,8,7,0.6);
  backdrop-filter:blur(3px);
  z-index:2800;
  display:none;
  align-items:center;
  justify-content:center;
  animation:modal-fade-in 0.25s ease;
}

.verify-loader-overlay.active{display:flex;}

.verify-loader-card{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:22px;
  padding:30px 26px 24px;
  width:260px;
  text-align:center;
  position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
  animation:verify-card-pop 0.35s cubic-bezier(.34,1.4,.64,1);
}

@keyframes verify-card-pop{
  from{opacity:0;transform:scale(0.85);}
  to{opacity:1;transform:scale(1);}
}

.verify-loader-close{
  position:absolute;
  top:12px;right:12px;
  width:28px;height:28px;
  border-radius:50%;
  background:var(--surface-2);
  border:none;
  color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:12px;
  transition:background 0.2s ease, color 0.2s ease;
}

.verify-loader-close:hover{background:rgba(229,72,77,0.18);color:var(--red);}

.verify-circle-wrap{
  position:relative;
  width:140px;
  height:140px;
  margin:6px auto 18px;
}

.verify-circle-wrap svg{
  width:100%;height:100%;
  transform:rotate(-90deg);
}

.verify-circle-bg{
  fill:none;
  stroke:var(--surface-2);
  stroke-width:8;
}

.verify-circle-progress{
  fill:none;
  stroke:url(#verify-gradient);
  stroke-width:8;
  stroke-linecap:round;
  transition:stroke-dashoffset 0.35s ease;
}

.verify-circle-percent{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:26px;
  font-weight:700;
  color:var(--text);
}

.verify-loader-title{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  margin-bottom:6px;
}

.verify-loader-sub{
  font-size:12.5px;
  color:var(--text-dim);
  line-height:1.5;
}

.verification-status{
  text-align:center;
  padding:14px;
  border-radius:var(--radius-sm);
  margin:18px 0;
  display:none;
  font-size:13.5px;
}

.verification-success{background:rgba(91,200,95,0.12);border:1px solid rgba(91,200,95,0.3);color:var(--green);}
.verification-error{background:rgba(229,72,77,0.1);border:1px solid rgba(229,72,77,0.3);color:var(--red);}

/* ===================== EVENT BUTTONS ===================== */
.event-buttons{
  display:flex;
  gap:14px;
  margin:20px 0;
  flex-wrap:wrap;
}

.event-btn{
  flex:1;
  min-width:150px;
  padding:18px 16px;
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:#fff;
}

.event-btn i{font-size:22px;}

.event-btn.wednesday{background:linear-gradient(140deg,var(--green-deep),#1f7a30);}
.event-btn.friday{background:linear-gradient(140deg,#1a1a1a,#3a3a3a);}

.event-btn:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,0.4);}

.event-message{
  text-align:center;
  padding:16px;
  border-radius:var(--radius-sm);
  margin:20px 0;
  display:none;
  font-size:13.5px;
}

.event-error{background:rgba(229,72,77,0.1);border:1px solid rgba(229,72,77,0.3);color:var(--red);}

.countdown-timer{
  background:var(--surface);
  border:1px solid var(--surface-border);
  padding:18px;
  border-radius:var(--radius);
  text-align:center;
  margin:20px 0;
  display:none;
}

.countdown-timer h3{margin-bottom:12px;font-size:14px;font-family:var(--font-display);color:var(--text-dim);}

.countdown-numbers{display:flex;justify-content:center;gap:10px;}

.countdown-unit{
  background:var(--surface-2);
  padding:10px 14px;
  border-radius:8px;
  min-width:58px;
  border:1px solid var(--surface-border);
}

.countdown-value{font-size:21px;font-weight:700;font-family:var(--font-mono);color:var(--blue);}
.countdown-label{font-size:10px;color:var(--text-faint);margin-top:2px;text-transform:uppercase;}

/* ===================== ACTIVITY ===================== */
.activity-item{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  padding:15px 16px;
  margin-bottom:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:border-color 0.25s ease, transform 0.25s ease;
}

.activity-item:hover{border-color:rgba(45,156,219,0.3);}

.activity-item.clickable{cursor:pointer;}
.activity-item.clickable:hover{transform:translateX(3px);}

.activity-item .a-left i{margin-right:10px;color:var(--blue);}

.operator-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:20px;
  color:#fff;
  font-size:10.5px;
  font-weight:700;
}

.badge-orange{background:#FF6600;}
.badge-camtel{background:var(--blue-deep);}
.badge-mtn{background:#FFCC00;color:#1a1a1a;}
.badge-special{background:var(--green-deep);}

/* ===================== MORE PAGE / SOCIAL ===================== */
.social-button{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 16px;
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  margin-bottom:12px;
  cursor:pointer;
  transition:all 0.25s ease;
}

.social-button:hover{
  transform:translateX(4px);
  border-color:rgba(45,156,219,0.3);
}

.social-icon{
  width:38px;height:38px;
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;
  flex-shrink:0;
}

.telegram-icon{background:#0088cc;}
.whatsapp-icon{background:#25D366;}
.share-icon{background:linear-gradient(120deg,var(--blue),var(--green));}

.social-text{flex:1;font-weight:600;font-size:14px;}
.social-arrow{color:var(--text-faint);}

/* ===================== BRAND FOOTER (page d'accueil) ===================== */
.brand-footer{
  margin-top:32px;
  padding-top:26px;
  border-top:1px solid var(--surface-border);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.brand-footer-logo{
  width:48px;
  height:48px;
  object-fit:contain;
  opacity:0.9;
}

.brand-footer-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.5px;
  background:linear-gradient(90deg,#fff 30%,var(--blue) 75%,var(--green) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand-footer-copyright{
  font-size:11px;
  color:var(--text-faint);
  margin-top:2px;
}

.partners-section{margin-top:32px;padding-top:22px;border-top:1px solid var(--surface-border);}

.partners-title{text-align:center;margin-bottom:18px;font-family:var(--font-display);font-size:16px;color:var(--text-dim);}

.partners-grid{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.partner-card{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-sm);
  padding:14px 10px;
  text-align:center;
  transition:all 0.25s ease;
  width:108px;
}

.partner-card:hover{transform:translateY(-4px);border-color:rgba(45,156,219,0.3);}

.partner-logo{
  width:48px;height:48px;
  margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--surface-border);
}

.partner-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.partner-name{font-weight:700;font-size:10.5px;color:var(--text-dim);letter-spacing:0.3px;}

/* ===================== OPERATOR SELECTOR (page d'accueil) ===================== */
.operator-select-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:8px;
}

.operator-select-card{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  padding:18px 10px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:all 0.25s ease;
  font-family:var(--font-body);
}

.operator-select-card:hover{
  transform:translateY(-4px);
  border-color:rgba(45,156,219,0.4);
  box-shadow:0 10px 26px rgba(0,0,0,0.35);
}

.operator-select-card:active{transform:translateY(-1px) scale(0.98);}

.operator-select-logo{
  width:56px;height:56px;
  border-radius:16px;
  background:var(--surface-2);
  border:1px solid var(--surface-border);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

.operator-select-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.operator-select-name{
  font-size:12.5px;
  font-weight:700;
  color:var(--text);
  text-align:center;
  line-height:1.3;
}

.operator-active-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:0;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.change-operator-btn{
  background:linear-gradient(120deg,var(--blue-deep),var(--blue));
  border:none;
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  padding:9px 16px;
  border-radius:20px;
  cursor:pointer;
  transition:all 0.25s ease;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(45,156,219,0.35);
}

.change-operator-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(45,156,219,0.45);
}

.change-operator-btn:active{transform:translateY(0) scale(0.97);}

.change-operator-btn-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:14px;
  font-size:14px;
  border-radius:var(--radius-sm);
  margin-top:18px;
}

@media (max-width:380px){
  .operator-select-grid{gap:8px;}
  .operator-select-card{padding:14px 6px 12px;}
  .operator-select-logo{width:46px;height:46px;}
  .operator-select-name{font-size:11px;}
}

/* static text pages */
.text-page{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  padding:24px 22px;
}

.text-page h2{font-family:var(--font-display);font-size:19px;margin-bottom:14px;}
.text-page p,.text-page li{color:var(--text-dim);font-size:13.5px;line-height:1.7;margin-bottom:10px;}
.text-page ol,.text-page ul{padding-left:20px;margin:10px 0;}
.text-page strong{color:var(--text);}

/* toast */
#toast-container{
  position:fixed;
  top:18px;left:50%;
  transform:translateX(-50%);
  z-index:2000;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  width:100%;
  pointer-events:none;
}

.toast{
  background:var(--surface-2);
  border:1px solid var(--surface-border);
  color:var(--text);
  padding:12px 18px;
  border-radius:30px;
  font-size:13px;
  font-weight:600;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  gap:8px;
  animation:toastIn 0.35s ease, toastOut 0.35s ease 2.4s forwards;
}

.toast i{color:var(--green);}

@keyframes toastIn{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:translateY(0);}}
@keyframes toastOut{from{opacity:1;}to{opacity:0;transform:translateY(-12px);}}

/* skeleton loader */
.skeleton{
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);
  background-size:200% 100%;
  animation:skeleton-load 1.4s infinite;
  border-radius:var(--radius);
  height:220px;
}

@keyframes skeleton-load{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* focus visibility */
button:focus-visible, input:focus-visible, .nav-item:focus-visible, .filter-btn:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}

/* ===================== FLOATING TELEGRAM BUTTON ===================== */
.telegram-float{
  position:fixed;
  bottom:96px;
  right:18px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(140deg,#2FA9E8,#0088cc);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:26px;
  box-shadow:0 8px 22px rgba(0,136,204,0.45);
  z-index:1500;
  cursor:pointer;
  border:none;
  transition:transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
  animation:wa-bounce-in 0.6s cubic-bezier(.34,1.56,.64,1) 1.2s backwards, wa-pulse-ring 2.6s infinite 2s;
}

.telegram-float:hover{
  transform:scale(1.1) rotate(-6deg);
  box-shadow:0 12px 30px rgba(0,136,204,0.6);
}

.telegram-float:active{transform:scale(0.94);}

@keyframes wa-bounce-in{
  0%{opacity:0;transform:translateY(40px) scale(0.5);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes wa-pulse-ring{
  0%{box-shadow:0 8px 22px rgba(0,136,204,0.45), 0 0 0 0 rgba(0,136,204,0.55);}
  70%{box-shadow:0 8px 22px rgba(0,136,204,0.45), 0 0 0 16px rgba(0,136,204,0);}
  100%{box-shadow:0 8px 22px rgba(0,136,204,0.45), 0 0 0 0 rgba(0,136,204,0);}
}

.telegram-float .wa-tooltip{
  position:absolute;
  right:66px;
  top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--surface-2);
  border:1px solid var(--surface-border);
  color:var(--text);
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  padding:8px 12px;
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease;
  box-shadow:var(--shadow);
}

.telegram-float:hover .wa-tooltip{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

/* ===================== MODERN PAGE TRANSITIONS ===================== */
.page.page-enter{
  animation:page-enter 0.5s cubic-bezier(.22,.9,.32,1);
}

.page.page-enter-right{
  animation:page-enter-right 0.45s cubic-bezier(.22,.9,.32,1);
}

.page.page-enter-left{
  animation:page-enter-left 0.45s cubic-bezier(.22,.9,.32,1);
}

@keyframes page-enter{
  from{opacity:0;transform:translateY(14px) scale(0.99);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes page-enter-right{
  from{opacity:0;transform:translateX(28px);}
  to{opacity:1;transform:translateX(0);}
}

@keyframes page-enter-left{
  from{opacity:0;transform:translateX(-28px);}
  to{opacity:1;transform:translateX(0);}
}

/* nav item icon micro-interaction */
.nav-item.nav-bump i{
  animation:nav-bump 0.4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes nav-bump{
  0%{transform:scale(1) translateY(0);}
  40%{transform:scale(1.3) translateY(-4px);}
  100%{transform:scale(1) translateY(-2px);}
}

.filter-btn:active{transform:scale(0.94);}

.filter-btn.filter-flash{
  animation:filter-flash 0.5s ease;
}

@keyframes filter-flash{
  0%{box-shadow:0 0 0 0 rgba(45,156,219,0.5);}
  100%{box-shadow:0 0 0 10px rgba(45,156,219,0);}
}

@media (max-width:480px){
  .packages-grid{grid-template-columns:1fr;}
  .event-buttons{flex-direction:column;}
  .telegram-float{bottom:92px;right:14px;width:52px;height:52px;font-size:24px;}
  .telegram-float .wa-tooltip{display:none;}
}

/* ===================== WALLET CARD (onglet Plus) ===================== */
.wallet-card{
  position:relative;
  border-radius:20px;
  padding:24px 20px 22px;
  margin-bottom:24px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 500px 250px at 15% -20%, rgba(45,156,219,0.28), transparent 60%),
    radial-gradient(ellipse 500px 250px at 100% 120%, rgba(91,200,95,0.22), transparent 60%),
    linear-gradient(150deg, #102423, #0c1816 60%, #0a1413);
  border:1px solid rgba(91,200,95,0.18);
  box-shadow:0 14px 34px rgba(0,0,0,0.4);
}

.wallet-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.wallet-id{
  display:flex;
  align-items:center;
  gap:10px;
}

.wallet-avatar{
  width:42px;height:42px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--green));
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
  color:#06120a;
  font-weight:800;
  flex-shrink:0;
}

.wallet-id-text{display:flex;flex-direction:column;}
.wallet-id-text .label{font-size:11px;color:var(--text-dim);letter-spacing:0.3px;}
.wallet-id-text .value{font-size:13.5px;font-weight:700;font-family:var(--font-mono);}

.wallet-chip{
  width:38px;height:28px;
  border-radius:6px;
  background:linear-gradient(135deg,rgba(242,183,5,0.85),rgba(242,183,5,0.5));
  position:relative;
  overflow:hidden;
}

.wallet-chip::before{
  content:'';
  position:absolute;
  top:50%;left:10%;right:10%;
  height:1.5px;
  background:rgba(0,0,0,0.3);
  box-shadow:0 5px 0 rgba(0,0,0,0.25), 0 -5px 0 rgba(0,0,0,0.25);
}

.wallet-balance-label{
  font-size:12px;
  color:var(--text-dim);
  letter-spacing:0.4px;
  margin-bottom:4px;
  display:flex;
  align-items:center;
  gap:6px;
}

.wallet-balance{
  font-family:var(--font-mono);
  font-size:32px;
  font-weight:700;
  letter-spacing:0.5px;
  background:linear-gradient(90deg,#fff, var(--green) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:18px;
  display:flex;
  align-items:baseline;
  gap:6px;
}

.wallet-balance .currency{font-size:15px;color:var(--text-dim);background:none;-webkit-text-fill-color:var(--text-dim);}

.wallet-actions{
  display:flex;
  gap:10px;
}

.wallet-actions .btn{
  flex:1;
  padding:11px;
  font-size:13.5px;
}

.btn-wallet-topup{
  background:linear-gradient(120deg,var(--green-deep),var(--green));
  color:#06190d;
}

.btn-wallet-topup:hover{box-shadow:0 8px 20px rgba(91,200,95,0.4);transform:translateY(-2px);}

.btn-wallet-history{
  background:rgba(255,255,255,0.08);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.12);
}

.btn-wallet-history:hover{background:rgba(255,255,255,0.14);}

/* ===================== MODAL OVERLAY ===================== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(5,8,7,0.72);
  backdrop-filter:blur(4px);
  z-index:3000;
  display:none;
  align-items:flex-end;
  justify-content:center;
  animation:modal-fade-in 0.25s ease;
}

.modal-overlay.active{display:flex;}

@keyframes modal-fade-in{from{opacity:0;}to{opacity:1;}}

.modal-sheet{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-top-left-radius:22px;
  border-top-right-radius:22px;
  width:100%;
  max-width:480px;
  max-height:88vh;
  overflow-y:auto;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  animation:modal-slide-up 0.35s cubic-bezier(.22,.9,.32,1);
}

@keyframes modal-slide-up{
  from{transform:translateY(100%);}
  to{transform:translateY(0);}
}

.modal-handle{
  width:40px;height:4px;
  background:var(--surface-2);
  border-radius:4px;
  margin:0 auto 18px;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.modal-header h3{font-family:var(--font-display);font-size:17px;}

.modal-close{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--surface-2);
  border:none;
  color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:14px;
  transition:background 0.2s ease;
}

.modal-close:hover{background:var(--surface-border);color:var(--text);}

.amount-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:16px;
}

.amount-chip{
  padding:14px 8px;
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  border:1px solid var(--surface-border);
  text-align:center;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:all 0.2s ease;
}

.amount-chip:hover{border-color:rgba(45,156,219,0.4);}

.amount-chip.selected{
  background:linear-gradient(120deg,var(--blue-deep),var(--blue));
  border-color:transparent;
  color:#fff;
  box-shadow:0 6px 16px rgba(45,156,219,0.35);
}

.custom-amount-wrap{
  display:flex;
  align-items:center;
  background:var(--surface-2);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  margin-bottom:18px;
  transition:border-color 0.25s ease;
}

.custom-amount-wrap:focus-within{border-color:var(--blue);}

.custom-amount-wrap span{
  padding:13px 12px;
  font-family:var(--font-mono);
  color:var(--text-dim);
  border-right:1px solid var(--surface-border);
  font-size:13px;
}

.custom-amount-wrap input{
  flex:1;
  padding:13px 14px;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:15px;
  font-family:var(--font-mono);
  outline:none;
}

.topup-step{display:none;}
.topup-step.active{display:block;}

.topup-confirm-box{
  background:rgba(45,156,219,0.08);
  border:1px solid rgba(45,156,219,0.25);
  border-radius:var(--radius-sm);
  padding:16px;
  margin-bottom:18px;
  font-size:13.5px;
  color:var(--text-dim);
  line-height:1.6;
}

.topup-confirm-box strong{color:var(--text);}

/* ===================== WALLET HISTORY LIST ===================== */
.wallet-tx{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid var(--surface-border);
}

.wallet-tx:last-child{border-bottom:none;}

.wallet-tx-icon{
  width:38px;height:38px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  flex-shrink:0;
}

.wallet-tx-icon.tx-in{background:rgba(91,200,95,0.15);color:var(--green);}
.wallet-tx-icon.tx-out{background:rgba(229,72,77,0.12);color:var(--red);}

.wallet-tx-info{flex:1;}
.wallet-tx-info .tx-title{font-size:13.5px;font-weight:600;}
.wallet-tx-info .tx-date{font-size:11.5px;color:var(--text-faint);margin-top:2px;}

.wallet-tx-amount{font-family:var(--font-mono);font-weight:700;font-size:14px;}
.wallet-tx-amount.tx-in{color:var(--green);}
.wallet-tx-amount.tx-out{color:var(--text);}

/* ===================== PAYMENT METHOD CHOICE ===================== */
.payment-method{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 16px;
  background:var(--surface-2);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  margin-bottom:12px;
  cursor:pointer;
  transition:all 0.25s ease;
}

.payment-method:hover{border-color:rgba(45,156,219,0.35);}
.payment-method.disabled{opacity:0.45;cursor:not-allowed;}
.payment-method.disabled:hover{border-color:var(--surface-border);}

.payment-method-icon{
  width:40px;height:40px;
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
  color:#fff;
  flex-shrink:0;
}

.payment-method-text{flex:1;}
.payment-method-text .pm-title{font-weight:700;font-size:14px;}
.payment-method-text .pm-sub{font-size:12px;color:var(--text-dim);margin-top:2px;}

/* ===================== ACTIVATION PENDING POPUP ===================== */
.activation-popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(5,8,7,0.72);
  backdrop-filter:blur(4px);
  z-index:2900;
  display:none;
  align-items:center;
  justify-content:center;
  animation:modal-fade-in 0.25s ease;
}

.activation-popup-overlay.show{display:flex;}

.activation-popup-card{
  background:linear-gradient(150deg, #102423, #0c1816 60%, #0a1413);
  border:1px solid rgba(91,200,95,0.3);
  border-radius:22px;
  padding:32px 26px 26px;
  width:300px;
  text-align:center;
  position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
  animation:verify-card-pop 0.4s cubic-bezier(.34,1.4,.64,1);
}

.activation-popup-close{
  position:absolute;
  top:14px;right:14px;
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:none;
  color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:12px;
  transition:background 0.2s ease;
}

.activation-popup-close:hover{background:rgba(255,255,255,0.16);color:var(--text);}

.activation-spinner{
  width:56px;height:56px;
  border-radius:50%;
  border:4px solid rgba(91,200,95,0.2);
  border-top-color:var(--green);
  animation:spin 0.8s linear infinite;
  margin:4px auto 18px;
}

@keyframes spin{to{transform:rotate(360deg);}}

.activation-popup-card.success .activation-spinner{
  border:none;
  background:var(--green);
  display:flex;align-items:center;justify-content:center;
  animation:none;
}

.activation-popup-card.success .activation-spinner::after{
  content:"\2713";
  color:#06190d;
  font-size:24px;
  font-weight:900;
}

.activation-popup-title{
  font-family:var(--font-display);
  font-size:16.5px;
  font-weight:700;
  color:#fff;
  margin-bottom:8px;
}

.activation-popup-sub{
  font-size:13px;
  color:var(--text-dim);
  line-height:1.6;
}