/* ==========================================================================
   CommerceHub — Reusable Component Styles
   Buttons, header/nav, dropdowns, cards, forms, modals, footer, badges.
   ========================================================================== */

/* ---------------------------- Buttons ---------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  padding:15px 30px; border-radius:var(--radius-full);
  transition:transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), background var(--dur-fast);
  white-space:nowrap; isolation:isolate; overflow:hidden;
}
.btn i{ font-size:.85em; }
.btn-primary{
  background:var(--gradient-primary); color:#fff;
  box-shadow:var(--shadow-red);
}
.btn-primary::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(135deg,var(--color-red-700),var(--color-red-500));
  opacity:0; transition:opacity var(--dur-fast);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 50px rgba(224,30,53,.4); }
.btn-primary:hover::before{ opacity:1; }
.btn-primary:active{ transform:translateY(-1px); }

.btn-dark{
  background:var(--gradient-dark); color:#fff; box-shadow:var(--shadow-lg);
}
.btn-dark:hover{ transform:translateY(-3px); box-shadow:0 20px 50px rgba(10,8,8,.35); }

.btn-outline{
  background:transparent; color:var(--gray-800);
  border:1.5px solid var(--gray-200);
}
.btn-outline:hover{ border-color:var(--color-red-500); color:var(--color-red-600); background:var(--color-red-100); transform:translateY(-2px); }

.btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(10px); }
.btn-ghost:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }

.btn-lg{ padding:19px 40px; font-size:1.05rem; }
.btn-sm{ padding:10px 20px; font-size:.85rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.6; pointer-events:none; }

.btn-loader{ display:none; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; }
.btn.is-loading .btn-loader{ display:inline-block; }
.btn.is-loading .btn-label{ opacity:.7; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------------------------- Header / Nav ---------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(20,15,15,.06);
  transition:background var(--dur-med), box-shadow var(--dur-med), height var(--dur-med);
}
.site-header.scrolled{ height:70px; box-shadow:var(--shadow-md); background:rgba(255,255,255,.92); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }

.brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:var(--gray-900); white-space:nowrap; flex-shrink:0; }
.brand span:last-child{ white-space:nowrap; }
.brand .logo-mark{
  width:40px; height:40px; border-radius:12px; background:var(--gradient-primary);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; box-shadow:var(--shadow-red);
  overflow:hidden;
}
.brand .brand-accent{ color:var(--color-red-500); }

.main-nav{ display:flex; align-items:center; gap:0; }
.main-nav > ul{ display:flex; align-items:center; gap:0; }
.nav-link{
  display:flex; align-items:center; gap:5px; padding:10px 12px; border-radius:var(--radius-full);
  font-weight:600; font-size:.88rem; color:var(--gray-700); transition:all var(--dur-fast);
  position:relative; white-space:nowrap;
}
.nav-link:hover, .nav-link.active{ color:var(--color-red-600); background:var(--color-red-100); }
.nav-link i.chev{ font-size:.65rem; transition:transform var(--dur-fast); }
.nav-item.has-dropdown:hover .nav-link i.chev{ transform:rotate(180deg); }

.header-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.header-actions .btn{ padding:11px 22px; font-size:.88rem; }
/* Three action buttons (Dropshipper Sign Up / Mentee Sign Up / Login) need to
   coexist in the header without overflowing on any desktop width down to
   1025px — tighten padding/font-size specifically for these compact
   variants so every label stays on one line and fully visible, and so the
   header never has to squeeze the logo or nav links (which previously
   caused "CommerceHub" and "Home" to wrap mid-word at almost every
   desktop width because the header had zero width buffer). */
.header-actions .btn.header-btn-compact{ padding:9px 14px; font-size:.75rem; white-space:nowrap; }

.nav-item{ position:relative; }
.mega-dropdown{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(10px);
  width:640px; max-width:88vw;
  background:rgba(255,255,255,.98); backdrop-filter:blur(20px);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); border:1px solid var(--gray-100);
  padding:22px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft), visibility var(--dur-fast);
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  z-index:50;
}
.nav-item.has-dropdown:hover .mega-dropdown,
.nav-item.has-dropdown:focus-within .mega-dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.dropdown-link{
  display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:var(--radius-md);
  transition:background var(--dur-fast); position:relative;
}
.dropdown-link:hover{ background:var(--white-200); }
.dropdown-link .dd-icon{
  width:40px; height:40px; flex:0 0 40px; border-radius:10px; background:var(--white-200);
  display:flex; align-items:center; justify-content:center; color:var(--color-red-600); font-size:1.05rem;
}
.dropdown-link.hot .dd-icon{ background:var(--gradient-primary); color:#fff; }
.dropdown-link .dd-title{ font-weight:700; font-size:.9rem; color:var(--gray-900); display:flex; align-items:center; gap:6px; }
.dropdown-link .dd-desc{ font-size:.78rem; color:var(--gray-400); margin-top:2px; }
.dd-badge{
  font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:var(--gradient-primary); color:#fff; padding:2px 8px; border-radius:var(--radius-full);
  animation:pulseBadge 2s infinite;
}
@keyframes pulseBadge{ 0%,100%{ box-shadow:0 0 0 0 rgba(224,30,53,.5);} 50%{ box-shadow:0 0 0 6px rgba(224,30,53,0);} }
.dropdown-link.hot{ grid-column:1/-1; background:linear-gradient(135deg,#fff5f6,#fde3e6); border:1px solid var(--color-red-100); }

/* ---------------------------------------------------------------------
   Mobile Hamburger — premium animated icon (hidden on desktop, shown via
   responsive.css once viewport drops to tablet/mobile breakpoints)
   --------------------------------------------------------------------- */
.hamburger{
  display:none; width:46px; height:46px; border-radius:14px; background:var(--white-200);
  flex-direction:column; align-items:center; justify-content:center; gap:5px; position:relative; z-index:1200;
  flex-shrink:0; transition:background var(--dur-fast);
}
.hamburger:hover{ background:var(--color-red-100); }
.hamburger span{ width:20px; height:2px; background:var(--gray-800); border-radius:2px; transition:all var(--dur-med) var(--ease-soft); }
.hamburger.active{ background:var(--gradient-primary); }
.hamburger.active span{ background:#fff; }
.hamburger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; transform:scaleX(0); }
.hamburger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   Mobile Navigation Drawer — slides in from the right, premium glass
   surface, staggered link entrance animation, one-handed friendly.
   --------------------------------------------------------------------- */
.mobile-nav-panel{
  position:fixed; top:0; right:0; height:100dvh; width:min(86vw,400px);
  background:var(--white-050); z-index:1100; padding:0;
  transform:translateX(100%); transition:transform var(--dur-med) var(--ease-premium);
  overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:var(--shadow-xl);
  display:flex; flex-direction:column;
}
.mobile-nav-panel.active{ transform:translateX(0); }

.mobile-nav-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 20px; border-bottom:1px solid var(--gray-100);
  position:sticky; top:0; background:var(--white-050); z-index:2;
}
.mobile-nav-close{
  width:40px; height:40px; border-radius:12px; background:var(--white-200);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--dur-fast);
}
.mobile-nav-close:hover{ background:var(--color-red-100); color:var(--color-red-600); }

.mobile-nav-body{ flex:1; padding:10px 20px 20px; }

.mobile-nav-overlay{
  position:fixed; inset:0; background:rgba(10,8,8,.55); backdrop-filter:blur(4px); z-index:1050;
  opacity:0; visibility:hidden; transition:opacity var(--dur-med), visibility var(--dur-med);
}
.mobile-nav-overlay.active{ opacity:1; visibility:visible; }

.mobile-nav-panel .m-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 6px; font-weight:700; font-size:1.02rem; color:var(--gray-800);
  border-bottom:1px solid var(--gray-100); transition:color var(--dur-fast), transform var(--dur-fast);
  opacity:0; transform:translateX(18px);
}
.mobile-nav-panel.active .m-link{ opacity:1; transform:translateX(0); transition:opacity .4s var(--ease-premium), transform .4s var(--ease-premium), color var(--dur-fast); }
.mobile-nav-panel .m-link:hover, .mobile-nav-panel .m-link.active{ color:var(--color-red-600); }
.mobile-nav-panel .m-link i.chev{ font-size:.75rem; color:var(--gray-300); transition:transform var(--dur-fast); }
.mobile-nav-panel .m-link.open i.chev{ transform:rotate(180deg); color:var(--color-red-500); }

.mobile-submenu{ max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease-soft); background:var(--white-200); border-radius:var(--radius-md); }
.mobile-submenu.open{ max-height:900px; margin-bottom:6px; }
.mobile-submenu a{
  display:flex; align-items:center; gap:10px; padding:13px 14px 13px 18px; font-size:.88rem;
  color:var(--gray-600); font-weight:600; border-bottom:1px solid rgba(0,0,0,.04);
}
.mobile-submenu a:last-child{ border-bottom:none; }
.mobile-submenu a i{ width:18px; text-align:center; color:var(--color-red-500); flex-shrink:0; }
.mobile-submenu a .dd-badge{ margin-left:auto; }

.mobile-nav-legal{ display:flex; flex-direction:column; margin-top:8px; }
.mobile-nav-legal a{ padding:13px 6px; font-size:.85rem; font-weight:600; color:var(--gray-400); border-bottom:1px solid var(--gray-100); }

.mobile-nav-panel .m-actions{ display:flex; flex-direction:column; gap:12px; margin-top:22px; padding-bottom:10px; }

body.nav-open{ overflow:hidden; }

/* ---------------------------- Cards ---------------------------- */
.card{
  background:var(--white-000); border-radius:var(--radius-lg); border:1px solid var(--gray-100);
  box-shadow:var(--shadow-md); transition:transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med);
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-xl); }

.glass-card{
  background:var(--glass-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
}
.glass-card-dark{
  background:var(--glass-bg-dark); backdrop-filter:blur(16px);
  border:1px solid var(--glass-border-dark); border-radius:var(--radius-lg); color:#fff;
}

.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:var(--radius-full);
}
.badge-hot{ background:var(--gradient-primary); color:#fff; box-shadow:0 8px 20px rgba(224,30,53,.35); }
.badge-new{ background:var(--gray-900); color:#fff; }
.badge-soft{ background:var(--color-red-100); color:var(--color-red-600); }
.badge-outline{ border:1px solid var(--gray-200); color:var(--gray-500); }

/* Product / Course / Service Cards */
.product-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--white-000); border-radius:var(--radius-lg); border:1px solid var(--gray-100);
  box-shadow:var(--shadow-md); transition:all var(--dur-med) var(--ease-premium);
}
.product-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-xl); border-color:var(--color-red-100); }
.product-card.featured{ border:2px solid var(--color-red-500); box-shadow:var(--shadow-red); }
.pc-media{ position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius-lg) var(--radius-lg) 0 0; background:var(--gray-100); }
.pc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-premium); }
.product-card:hover .pc-media img{ transform:scale(1.08); }
.pc-badges{ position:absolute; top:14px; left:14px; display:flex; gap:8px; z-index:2; }
.pc-body{ padding:26px; display:flex; flex-direction:column; gap:14px; flex:1; }
.pc-meta{ display:flex; align-items:center; gap:10px; font-size:.78rem; color:var(--gray-400); font-weight:600; }
.pc-title{ font-size:1.2rem; font-weight:800; color:var(--gray-900); }
.pc-desc{ font-size:.9rem; color:var(--gray-500); }
.pc-features{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.pc-features span{ font-size:.72rem; font-weight:700; background:var(--white-200); color:var(--gray-600); padding:5px 10px; border-radius:var(--radius-full); }
.pc-footer{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px dashed var(--gray-200); }
.pc-price{ display:flex; flex-direction:column; }
.pc-price .old{ font-size:.8rem; color:var(--gray-300); text-decoration:line-through; }
.pc-price .now{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--color-red-600); }
.pc-price .now small{ font-size:.7rem; font-weight:600; color:var(--gray-400); }

/* Feature / Icon list */
.icon-feature{ display:flex; gap:16px; align-items:flex-start; }
.icon-feature .if-icon{
  flex:0 0 52px; width:52px; height:52px; border-radius:16px; background:var(--gradient-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; box-shadow:var(--shadow-red);
}
.icon-feature .if-title{ font-weight:800; margin-bottom:4px; }
.icon-feature .if-text{ font-size:.9rem; color:var(--gray-500); }

/* Stat blocks */
.stat-block{ text-align:center; }
.stat-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4vw,3rem); color:var(--gray-900); }
.stat-label{ font-size:.85rem; color:var(--gray-400); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }

/* Testimonial cards */
.testi-card{ padding:28px; display:flex; flex-direction:column; gap:16px; }
.testi-stars{ color:#f5a623; font-size:.9rem; letter-spacing:2px; }
.testi-quote{ color:var(--gray-600); font-size:.95rem; }
.testi-user{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.testi-user img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.testi-user .name{ font-weight:800; font-size:.9rem; color:var(--gray-900); }
.testi-user .role{ font-size:.78rem; color:var(--gray-400); }

/* Pricing cards */
.price-card{ padding:38px 30px; text-align:center; position:relative; }
.price-card .pc-tag{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); }
.price-card .amount{ font-family:var(--font-display); font-weight:800; font-size:2.6rem; color:var(--gray-900); margin:14px 0 4px; }
.price-card .amount span{ font-size:1rem; color:var(--gray-400); font-weight:600; }
.price-card ul{ text-align:left; margin:26px 0; display:flex; flex-direction:column; gap:12px; }
.price-card ul li{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--gray-600); }
.price-card ul li i{ color:var(--color-red-500); margin-top:3px; }

/* FAQ Accordion */
.faq-item{ border-bottom:1px solid var(--gray-100); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; padding:22px 4px; cursor:pointer; font-weight:700; font-size:1rem; color:var(--gray-900); gap:20px; }
.faq-q .plus{ flex:0 0 32px; height:32px; width:32px; border-radius:50%; background:var(--white-200); display:flex; align-items:center; justify-content:center; transition:all var(--dur-fast); }
.faq-item.open .faq-q .plus{ background:var(--gradient-primary); color:#fff; transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease-soft); }
.faq-item.open .faq-a{ max-height:400px; }
.faq-a p{ padding:0 4px 22px; font-size:.92rem; }

/* Forms */
.form-group{ margin-bottom:22px; }
.form-label{ display:block; font-weight:700; font-size:.86rem; margin-bottom:9px; color:var(--gray-800); letter-spacing:.01em; }
.form-control{
  width:100%; padding:15px 18px; background:#fff; border:1.5px solid var(--gray-200); border-radius:var(--radius-md);
  font-size:.96rem; font-weight:500; color:var(--gray-900); transition:all var(--dur-fast);
  box-shadow:0 1px 2px rgba(16,13,13,.03);
}
.form-control:hover{ border-color:var(--gray-300); }
.form-control:focus{ background:#fff; border-color:var(--color-red-500); box-shadow:0 0 0 4px var(--color-red-100); }
.form-control::placeholder{ color:var(--gray-400); font-weight:400; }
textarea.form-control{ resize:vertical; min-height:110px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.file-drop{
  border:2px dashed var(--gray-200); border-radius:var(--radius-md); padding:30px; text-align:center; cursor:pointer;
  transition:all var(--dur-fast); background:var(--white-200);
}
.file-drop:hover, .file-drop.dragover{ border-color:var(--color-red-500); background:var(--color-red-100); }
.file-drop i{ font-size:1.8rem; color:var(--color-red-500); margin-bottom:10px; }
.file-preview{ margin-top:14px; display:none; }
.file-preview img{ max-height:180px; border-radius:var(--radius-md); margin:0 auto; box-shadow:var(--shadow-md); }
.form-error{ color:var(--color-red-600); font-size:.8rem; margin-top:6px; display:none; font-weight:600; }
.form-hint{ color:var(--gray-400); font-size:.78rem; margin-top:6px; }

/* Signup pages split layout (mentee + dropshipper) — elevated card design */
.signup-shell{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:0;
  border-radius:28px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(16,13,13,.28), 0 0 0 1px rgba(16,13,13,.04);
  background:#fff;
}
.drop-signup-hero{
  position:relative; background:var(--gradient-luxe); overflow:hidden;
  padding:58px 52px; color:#fff; display:flex; flex-direction:column; justify-content:center;
}
/* Subtle radial glow + noise-free texture so the hero doesn't look like a flat block */
.drop-signup-hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 400px at 15% -10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(500px 380px at 110% 110%, rgba(224,30,53,.35), transparent 60%);
}
.drop-signup-hero > *{ position:relative; z-index:1; }
.drop-signup-hero h2{ color:#fff; font-size:clamp(1.7rem,2.6vw,2.35rem); line-height:1.18; margin-top:22px; letter-spacing:-.015em; }
.drop-signup-hero > p{ color:rgba(255,255,255,.82); margin-top:16px; font-size:1rem; line-height:1.65; max-width:44ch; }
.signup-benefits{ margin-top:34px; display:flex; flex-direction:column; gap:16px; padding:0; }
.signup-benefits li{
  display:flex; align-items:flex-start; gap:14px; font-size:.96rem; font-weight:500;
  color:rgba(255,255,255,.95); line-height:1.4;
}
.signup-benefits li .sb-icon{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); color:#fff; font-size:.72rem; margin-top:1px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.drop-signup-form-card{
  padding:56px 52px; box-shadow:none; border:none; border-radius:0; background:#fff;
  display:flex; flex-direction:column; justify-content:center;
}
.drop-signup-form-card h3{ font-size:clamp(1.4rem,2vw,1.7rem); color:var(--gray-900); }
.signup-subtext{ color:var(--gray-500); font-size:.94rem; margin-top:8px; line-height:1.6; }
.signup-subtext a{ color:#1a0dab; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.signup-subtext + .signup-subtext{ margin-top:2px; }
.drop-signup-form-card form{ margin-top:30px; }
.drop-signup-form-card .btn-lg{ margin-top:6px; }
@media (max-width:1024px){
  .signup-shell{ grid-template-columns:1fr; border-radius:24px; }
  .drop-signup-hero{ padding:44px 36px; }
  .drop-signup-form-card{ padding:44px 36px; border-top:none; }
}
@media (max-width:640px){
  .signup-shell{ border-radius:20px; }
  .drop-signup-hero, .drop-signup-form-card{ padding:32px 22px; }
  .drop-signup-form-card form{ margin-top:26px; }
}

/* Featured "Become A Dropshipper" banner on the Our Services listing page */
.dropship-banner{
  display:flex; align-items:center; gap:32px; padding:36px; margin-bottom:40px;
  background:var(--gradient-luxe); border:none; text-decoration:none; overflow:hidden; position:relative;
}
.dropship-banner .db-copy{ position:relative; z-index:2; flex:1; }
.dropship-banner .db-cta{ position:relative; z-index:2; flex:0 0 auto; }
@media (max-width:768px){
  .dropship-banner{ flex-direction:column; align-items:flex-start; padding:28px 24px; gap:20px; }
  .dropship-banner .db-cta{ width:100%; }
  .dropship-banner .db-cta .btn{ width:100%; }
}

/* Numbered process / how-it-works steps (used on the Become A Dropshipper page) */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.process-step{
  position:relative; background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius-lg);
  padding:32px 26px; box-shadow:var(--shadow-sm); transition:all var(--dur-med) var(--ease-premium);
}
.process-step:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.process-step .ps-num{
  width:44px; height:44px; border-radius:14px; background:var(--gradient-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800;
  font-size:1.1rem; box-shadow:var(--shadow-red); margin-bottom:18px;
}
.process-step h4{ font-size:1.05rem; margin-bottom:8px; }
.process-step p{ font-size:.9rem; color:var(--gray-500); line-height:1.6; }

/* Payment type selection cards (Daraz / Local) used in the shared order flow */
.payment-type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.payment-type-card{
  position:relative; display:block; border:2px solid var(--gray-200); border-radius:var(--radius-md);
  padding:18px; cursor:pointer; transition:all var(--dur-fast); background:var(--white-050);
}
.payment-type-card input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
.payment-type-card:hover{ border-color:var(--color-red-300); }
.payment-type-card.selected{ border-color:var(--color-red-500); background:var(--color-red-100); box-shadow:0 0 0 3px rgba(224,30,53,.08); }
.payment-type-card .ptc-head{ font-weight:800; font-size:.98rem; display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.payment-type-card .ptc-head i{ color:var(--color-red-500); }
.payment-type-card .ptc-desc{ font-size:.78rem; color:var(--gray-500); line-height:1.5; }
.payment-type-card .ptc-badge{ margin-top:10px; display:inline-flex; }
@media (max-width:520px){ .payment-type-grid{ grid-template-columns:1fr; } }

/* Modal / Popups */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,8,8,.6); backdrop-filter:blur(6px); z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity var(--dur-med), visibility var(--dur-med);
}
.modal-overlay.active{ opacity:1; visibility:visible; }
.modal-box{
  background:#fff; border-radius:var(--radius-xl); padding:44px; max-width:480px; width:100%; text-align:center;
  box-shadow:var(--shadow-xl); transform:scale(.9) translateY(20px); transition:transform var(--dur-med) var(--ease-premium);
  position:relative;
}
.modal-overlay.active .modal-box{ transform:scale(1) translateY(0); }
.modal-close{ position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; background:var(--white-200); display:flex; align-items:center; justify-content:center; }
.modal-icon{
  width:80px; height:80px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; color:#fff; background:var(--gradient-primary); box-shadow:var(--shadow-red);
}
.modal-icon.success{ background:linear-gradient(135deg,#1a9c5c,#28c176); box-shadow:0 16px 40px rgba(40,193,118,.3); }

/* Footer */
.site-footer{ background:var(--gradient-dark); color:var(--gray-300); position:relative; overflow:hidden; }
.footer-top{ padding:80px 0 50px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
@media(max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand p{ color:var(--gray-400); margin:16px 0 20px; font-size:.9rem; max-width:320px; }
.footer-heading{ color:#fff; font-family:var(--font-display); font-weight:700; margin-bottom:20px; font-size:1rem; }
.footer-links li{ margin-bottom:12px; }
.footer-links a{ color:var(--gray-400); font-size:.9rem; transition:color var(--dur-fast); }
.footer-links a:hover{ color:var(--color-red-400); padding-left:4px; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; transition:all var(--dur-fast); }
.footer-social a:hover{ background:var(--gradient-primary); transform:translateY(-3px); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:24px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.83rem; color:var(--gray-500); }
.footer-bottom a{ color:var(--gray-400); }
.footer-bottom a:hover{ color:var(--color-red-400); }

/* Floating decorative shapes */
.blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; z-index:0; pointer-events:none; }
.blob-red{ background:var(--color-red-400); }
.blob-silver{ background:var(--gray-200); }

/* Trust badge strip */
.trust-strip{ display:flex; align-items:center; justify-content:center; gap:50px; flex-wrap:wrap; opacity:.75; filter:grayscale(30%); }
.trust-strip img{ height:28px; object-fit:contain; }

/* Back to top */
.back-to-top{
  position:fixed; bottom:28px; right:28px; width:52px; height:52px; border-radius:50%; background:var(--gradient-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-red); z-index:900;
  opacity:0; visibility:hidden; transform:translateY(20px); transition:all var(--dur-med) var(--ease-soft);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* Toast notifications */
.toast-wrap{ position:fixed; top:100px; right:24px; z-index:3000; display:flex; flex-direction:column; gap:12px; }
.toast{
  min-width:280px; max-width:340px; background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-xl);
  padding:16px 18px; display:flex; align-items:flex-start; gap:12px; border-left:4px solid var(--color-red-500);
  transform:translateX(120%); transition:transform var(--dur-med) var(--ease-premium); font-size:.88rem;
}
.toast.show{ transform:translateX(0); }
.toast.success{ border-left-color:#28c176; }
.toast i{ font-size:1.1rem; color:var(--color-red-500); margin-top:2px; }
.toast.success i{ color:#28c176; }

/* Preloader */
.preloader{ position:fixed; inset:0; background:var(--white-050); z-index:9999; display:flex; align-items:center; justify-content:center; transition:opacity .5s, visibility .5s; }
.preloader.hide{ opacity:0; visibility:hidden; }
.preloader-mark{
  width:72px; height:72px; border-radius:20px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); animation:pulseLogo 1.2s ease-in-out infinite;
}
.preloader-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes pulseLogo{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }

/* Page hero (inner pages) */
.page-hero{ padding:calc(var(--header-h) + 70px) 0 80px; background:var(--gradient-dark); color:#fff; position:relative; overflow:hidden; }
.page-hero h1{ color:#fff; }
.page-hero p{ color:var(--gray-300); }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--gray-400); margin-bottom:18px; }
.breadcrumb a{ color:var(--gray-300); }
.breadcrumb a:hover{ color:var(--color-red-400); }

/* Utility: pill tab nav */
.tab-nav{ display:flex; gap:8px; flex-wrap:wrap; }
.tab-btn{ padding:10px 20px; border-radius:var(--radius-full); font-weight:700; font-size:.88rem; background:var(--white-200); color:var(--gray-600); transition:all var(--dur-fast); }
.tab-btn.active{ background:var(--gradient-primary); color:#fff; box-shadow:var(--shadow-red); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* Curriculum accordion */
.curr-module{ border:1px solid var(--gray-100); border-radius:var(--radius-md); margin-bottom:12px; overflow:hidden; }
.curr-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; cursor:pointer; background:var(--white-200); font-weight:700; }
.curr-body{ max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease-soft); }
.curr-module.open .curr-body{ max-height:600px; }
.curr-body ul{ padding:6px 22px 18px; display:flex; flex-direction:column; gap:10px; }
.curr-body li{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--gray-500); }
.curr-body li i{ color:var(--color-red-500); font-size:.8rem; }

/* Video embed wrapper */
.video-wrap{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; box-shadow:var(--shadow-xl); background:#000; }
.video-wrap iframe, .video-wrap video{ width:100%; height:100%; border:0; }
.video-play-btn{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,8,8,.35); cursor:pointer;
}
.video-play-btn .vp-circle{ width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,.95); display:flex; align-items:center; justify-content:center; color:var(--color-red-600); font-size:1.6rem; box-shadow:var(--shadow-xl); animation:vpPulse 2s infinite; }
@keyframes vpPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.5);} 70%{ box-shadow:0 0 0 22px rgba(255,255,255,0);} }