/* ═══════════════════════════════════════════════════════════════════
   AstroKamya™ — MOBILE RESPONSIVE FIXES v3
   Addresses 4 specific issues from user audit:
   1. Hero empty space on mobile
   2. Unified industry-standard menu
   3. AI Jyotishi panel alignment below features
   4. Lifetime Deal cutting off on right side
   Loads LAST — all overrides with !important where needed
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   FIX 1: HERO SECTION — Remove huge empty space
   The desktop min-height was bleeding into mobile.
   Planet canvas was hidden but space persisted.
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Kill the full-viewport min-height on tablet/mobile */
  #hero-v9 {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 24px !important;
    padding-bottom: 0 !important;
    display: block !important;
  }

  /* The hero-right was absolute-positioned but still reserving space via min-height */
  .h9-hero-right {
    position: absolute !important;
    top: 0 !important; right: 0 !important;
    left: 0 !important; bottom: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  /* Hero left: contains the text content */
  .h9-hero-left {
    position: relative !important;
    z-index: 2 !important;
    padding-bottom: 0 !important;
    max-width: 600px !important;
  }

  /* Mobile animation ring — show with enhanced visibility */
  .h9-mobile-anim {
    display: flex !important;
    top: 40% !important;
    left: 80% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.4 !important;
    mix-blend-mode: screen !important;
    width: 300px !important;
    height: 300px !important;
  }

  /* Ephemeris bar: contained */
  .h9-ephemeris-bar {
    position: relative !important;
    z-index: 6 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
}

@media (max-width: 640px) {
  #hero-v9 {
    padding-top: 20px !important;
    padding-bottom: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Enhanced mobile animation — positioned right side */
  .h9-mobile-anim {
    display: flex !important;
    top: 35% !important;
    left: 85% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.35 !important;
    width: 240px !important;
    height: 240px !important;
  }

  .h9-hero-left {
    gap: 12px !important;
  }

  .h9-cta-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .h9-btn-primary,
  .h9-btn-secondary {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
  }

  .h9-trust-row {
    gap: 8px !important;
    flex-wrap: wrap !important;
    font-size: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════
   FIX 1b: ENHANCED MOBILE PLANET ANIMATION
   Animated orbital rings with planet dots on right side
   Only visible on mobile + tablet (hidden on desktop)
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Enhance the existing orbit rings */
  .ma-ring-1 {
    width: 100% !important;
    height: 100% !important;
    border-color: rgba(255,217,107,0.12) !important;
    border-top-color: rgba(125,211,192,0.5) !important;
    animation: maSpin 18s linear infinite !important;
  }
  .ma-ring-2 {
    width: 70% !important;
    height: 70% !important;
    border-right-color: rgba(167,139,250,0.5) !important;
    animation: maSpinRev 12s linear infinite !important;
  }
  .ma-ring-3 {
    width: 44% !important;
    height: 44% !important;
    border-bottom-color: rgba(255,184,0,0.65) !important;
    animation: maSpin 8s linear infinite !important;
  }

  .ma-moon {
    width: 10px !important;
    height: 10px !important;
    box-shadow: 0 0 14px #FFB800, 0 0 28px rgba(255,184,0,0.4) !important;
  }

  .ma-center-star {
    font-size: 26px !important;
    filter: drop-shadow(0 0 8px rgba(242,204,120,0.6)) !important;
  }

  /* Planet dot on outer ring top */
  .ma-ring-1::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #7dd3c0, #40a090);
    box-shadow: 0 0 12px rgba(125,211,192,0.7), 0 0 24px rgba(125,211,192,0.3);
  }

  /* Planet dot on ring 2 */
  .ma-ring-2::after {
    content: '';
    position: absolute;
    bottom: -4px;
    right: 15%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #a78bfa, #7c3aed);
    box-shadow: 0 0 10px rgba(167,139,250,0.7);
  }

  /* Small gold dot on outer ring right */
  .ma-ring-1::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 42%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffd180, #f2a040);
    box-shadow: 0 0 8px rgba(255,184,0,0.7);
  }
}

/* ═══════════════════════════════════════════════════
   FIX 2: INDUSTRY STANDARD UNIFIED MENU
   Mobile: full-width bar (no pill), clean and standard.
   Tablet: wider pill, better spaced.
   ═══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .sleek-nav-wrapper {
    padding: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  /* Full-width flat nav bar */
  .sleek-nav {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    padding: 0 14px !important;
    background: rgba(8, 4, 20, 0.97) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: none !important;
    border-bottom: 1px solid rgba(124, 58, 237, 0.15) !important;
    box-shadow: 0 2px 24px rgba(0,0,0,0.5) !important;
    transition: none !important;
  }

  /* Brand: always show logo + name */
  .ak-brand span {
    display: block !important;
    font-size: 16px !important;
    letter-spacing: -0.01em !important;
  }

  /* CTA: compact pill */
  .btn-cta {
    display: flex !important;
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }
  .btn-cta .btn-spark { display: none !important; }

  /* Announce bar: compact single line */
  #ak-announce-bar {
    padding: 6px 16px !important;
    font-size: 11px !important;
    gap: 6px !important;
  }
  #ak-announce-bar .ab-text {
    display: inline !important;
    font-size: 11px !important;
  }
  #ak-announce-bar .ab-cta {
    display: none !important;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  /* Tablet: pill stays, more breathing room */
  .sleek-nav-wrapper {
    padding: 8px 14px 0 !important;
  }

  .sleek-nav {
    height: 52px !important;
    padding: 0 10px 0 18px !important;
  }

  .ak-brand span {
    display: block !important;
    font-size: 16px !important;
  }
}

/* Drawer: premium polish */
.ak-nav-drawer {
  width: min(300px, 85vw) !important;
  box-shadow: -8px 0 32px rgba(0,0,0,0.6) !important;
}

.ak-drawer-link.active {
  background: rgba(255,184,0,0.06) !important;
  border-left: 3px solid #FFB800 !important;
  padding-left: 13px !important;
  color: #FACC15 !important;
  font-weight: 600 !important;
}

.ak-drawer-link.active svg {
  opacity: 1 !important;
  stroke: #FACC15 !important;
}

.ak-drawer-cta {
  border-radius: 12px !important;
  font-size: 14px !important;
  padding: 13px !important;
}

/* ═══════════════════════════════════════════════════
   FIX 3: AI JYOTISHI PANEL — Alignment correction
   Below feature section — chart too tall, chat box
   pushed down awkwardly. Fix proportions.
   ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #demo {
    padding: 48px 0 !important;
    overflow: hidden !important;
  }

  .demo-header-row {
    margin-bottom: 20px !important;
  }

  /* Chart: constrained, centered */
  .demo-chart-wrap {
    max-width: 340px !important;
    margin: 0 auto 8px !important;
  }

  /* Demo split: single column */
  .demo-split {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    align-items: start !important;
  }

  /* Left (chart): centered, smaller */
  .demo-left {
    display: flex !important;
    justify-content: center !important;
  }

  /* Right (chat): full width */
  .demo-right {
    width: 100% !important;
  }

  .chat-box {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px !important;
  }

  /* Chip row: horizontal scroll */
  .chip-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .chip-row::-webkit-scrollbar { display: none !important; }
}

@media (max-width: 640px) {
  #demo {
    padding: 32px 0 !important;
  }

  .demo-chart-wrap {
    max-width: 260px !important;
    margin: 0 auto 6px !important;
  }

  .demo-header-text h2 {
    font-size: clamp(24px, 7vw, 36px) !important;
  }

  .chat-box {
    border-radius: 14px !important;
  }
}

/* ═══════════════════════════════════════════════════
   FIX 4: LIFETIME DEAL — Fix right-side cutoff
   Proper overflow containment, timer sizing, and
   layout constraints for all mobile viewports.
   ═══════════════════════════════════════════════════ */

/* Section-level overflow guard */
#pricing {
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Card-level overflow guard */
.lifetime-wrap {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.lifetime-card {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  /* Content grid → single column, padded */
  .lt-content {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 28px 20px 24px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Price block */
  .lt-price-block {
    padding: 24px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Timer: constrained, no overflow */
  .lt-timer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }

  .lt-time-unit {
    min-width: 44px !important;
    max-width: 64px !important;
    flex: 1 1 auto !important;
    padding: 8px 4px 6px !important;
    box-sizing: border-box !important;
  }

  .lt-time-unit span {
    font-size: 20px !important;
  }

  .lt-time-unit small {
    font-size: 7px !important;
    letter-spacing: 0.05em !important;
  }

  .lt-time-sep {
    font-size: 18px !important;
    flex-shrink: 0 !important;
    padding: 0 1px !important;
  }

  .lt-countdown-label {
    font-size: 10px !important;
    text-align: center !important;
  }

  /* Original price row */
  .lt-original-price {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }

  /* CTA button: full width, no overflow */
  .lt-cta {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    display: block !important;
    text-align: center !important;
  }

  /* Trust badges */
  .lt-trust-badges {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .lt-trust-badges span {
    font-size: 9px !important;
  }

  /* Social proof */
  .lt-social-proof {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-top: 14px !important;
  }

  .lt-proof-text {
    font-size: 12px !important;
    text-align: center !important;
  }

  /* Features grid: 2-col */
  .lt-features-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Comparison bar: vertical stack */
  .lt-comparison {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
    align-items: center !important;
  }

  .lt-comp-item {
    width: 100% !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }

  .lt-comp-divider {
    width: 50% !important;
    height: 1px !important;
    margin: 0 auto !important;
  }

  /* Ribbon */
  .lt-ribbon {
    padding: 8px 12px !important;
    font-size: 11px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 640px) {
  .lt-content {
    padding: 22px 14px 18px !important;
  }

  .lt-price-block {
    padding: 18px 12px !important;
  }

  .lt-title {
    font-size: clamp(20px, 6vw, 30px) !important;
    line-height: 1.2 !important;
  }

  .lt-amount {
    font-size: clamp(44px, 14vw, 64px) !important;
    letter-spacing: -0.03em !important;
  }

  /* Single column features on small mobile */
  .lt-features-grid {
    grid-template-columns: 1fr !important;
  }

  /* Smaller timer */
  .lt-time-unit {
    min-width: 38px !important;
    padding: 6px 3px !important;
  }
  .lt-time-unit span {
    font-size: 18px !important;
  }
  .lt-time-sep {
    font-size: 15px !important;
  }

  /* Badge row wrap */
  .lt-badge-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Emotion row */
  .lt-emotion-row {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .lt-emotion {
    padding: 10px 12px !important;
    flex: 1 1 calc(30% - 8px) !important;
    min-width: 76px !important;
  }
}

/* ═══════════════════════════════════════════════════
   GLOBAL OVERFLOW SAFETY NET
   Prevents any section from causing horizontal scroll
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  body {
    overflow-x: hidden !important;
  }

  section {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .wrap {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}