/* ============================================================
   SwiftHost — Responsive Stylesheet
   responsive.css
   ============================================================ */

/* ============================================================
   BREAKPOINTS REFERENCE
   XL  Desktop  ≥ 1400px
   LG  Laptop   ≥ 1200px
   MD  Tablet   ≥ 768px
   SM  Mobile   < 768px
   XS  Small    < 576px
   ============================================================ */

/* ── 1. EXTRA LARGE — WIDE DESKTOP ≥1400px ── */
@media (min-width: 1400px) {
  .hero-title {
    font-size: 4.5rem;
  }

  .section-title {
    font-size: 2.8rem;
  }

  .container {
    max-width: 1340px;
  }
}

/* ── 2. LARGE — LAPTOP ≥1200px ── */
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-title {
    font-size: 3.8rem;
  }

  .mega-menu {
    min-width: 580px;
  }
}

/* ── 3. MEDIUM LARGE — 992px to 1199px ── */
@media (min-width: 992px) and (max-width: 1199px) {
  :root {
    --section-py: 80px;
  }

  .hero-title {
    font-size: 3.2rem;
  }

  .hero-section {
    padding: 120px 0 80px;
    min-height: auto;
  }

  .pricing-price {
    font-size: 2.8rem;
  }

  .mega-menu {
    min-width: 480px;
  }

  .navbar .dropdown-menu {
    font-size: 0.85rem;
  }
}

/* ── 4. TABLET — 768px to 991px ── */
@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --section-py: 70px;
  }

  /* Navbar */
  .navbar {
    padding: 12px 0;
  }

  .navbar-collapse {
    background: rgba(255,255,255,0.98);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-top: 12px;
    box-shadow: var(--shadow-lg);
  }

  .navbar-nav .nav-link {
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--color-border);
  }

  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }

  .btn-nav-login,
  .btn-nav-cta {
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-top: 8px;
  }

  /* Mega Menu */
  .mega-menu {
    min-width: 100%;
    position: static !important;
    transform: none !important;
  }

  /* Hero */
  .hero-section {
    padding: 110px 0 70px;
    min-height: auto;
    text-align: center;
  }

  .hero-title {
    font-size: 2.6rem;
  }

  .hero-subtitle {
    margin: 0 auto 32px;
  }

  .domain-search-box {
    max-width: 100%;
  }

  .domain-ext-tags {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-visual {
    margin-top: 50px;
  }

  /* Section */
  .section-title {
    font-size: 2rem;
  }

  /* Pricing */
  .pricing-card {
    padding: 28px 24px;
  }

  .pricing-card.featured {
    transform: none;
  }

  /* Stats */
  .stat-divider {
    display: none;
  }

  /* Footer */
  .footer-desc {
    max-width: 100%;
  }

  /* Auth */
  .auth-card {
    padding: 36px 30px;
  }
}

/* ── 5. MOBILE — < 768px ── */
@media (max-width: 767px) {
  :root {
    --section-py: 60px;
    --section-py-sm: 40px;
  }

  /* Base */
  body {
    font-size: 0.95rem;
  }

  /* Navbar */
  .navbar {
    padding: 10px 0;
  }

  .navbar-brand {
    font-size: 1.35rem;
  }

  .navbar-collapse {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-top: 12px;
    box-shadow: var(--shadow-lg);
    max-height: 75vh;
    overflow-y: auto;
  }

  .navbar-nav .nav-link {
    padding: 10px 12px !important;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-border);
  }

  .btn-nav-login,
  .btn-nav-cta {
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-top: 8px;
    padding: 10px;
  }

  /* Mega Menu */
  .mega-menu {
    min-width: 100%;
    max-width: 100%;
    position: static !important;
    transform: none !important;
    box-shadow: none;
    border: none;
    background: rgba(13,110,253,0.03);
    padding: 8px;
  }

  .mega-menu-col-title {
    display: none;
  }

  /* Hero */
  .hero-section {
    padding: 100px 0 60px;
    min-height: auto;
    text-align: center;
  }

  .hero-title {
    font-size: 2rem;
    letter-spacing: -0.5px;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    margin: 0 auto 28px;
  }

  .hero-badge {
    font-size: 0.75rem;
    padding: 6px 14px;
  }

  .domain-search-box {
    flex-direction: column;
    padding: 12px;
    border-radius: var(--radius-lg);
  }

  .domain-search-box input {
    width: 100%;
    padding: 10px 12px;
    text-align: center;
  }

  .domain-search-box .btn {
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-md);
  }

  .domain-ext-tags {
    justify-content: center;
  }

  .domain-ext-tag {
    font-size: 0.72rem;
  }

  .hero-stats {
    gap: 20px;
    justify-content: center;
  }

  .hero-stat .stat-number {
    font-size: 1.5rem;
  }

  .hero-visual {
    margin-top: 40px;
  }

  /* Sections */
  .section-header {
    margin-bottom: 40px;
  }

  .section-title {
    font-size: 1.7rem;
    letter-spacing: -0.5px;
  }

  .section-subtitle {
    font-size: 0.9rem;
  }

  /* Pricing Cards */
  .pricing-card {
    padding: 24px 20px;
  }

  .pricing-card.featured {
    transform: none;
    order: -1;
  }

  .pricing-price {
    font-size: 2.6rem;
  }

  /* Feature Cards */
  .feature-card {
    padding: 24px 20px;
  }

  .feature-icon-wrap {
    width: 58px;
    height: 58px;
  }

  /* Stats */
  .stats-section {
    padding: 50px 0;
  }

  .stat-item {
    padding: 12px;
  }

  .stat-divider {
    display: none;
  }

  /* CTA */
  .cta-section {
    padding: 60px 0;
    text-align: center;
  }

  /* Newsletter */
  .newsletter-form {
    flex-direction: column;
    max-width: 100%;
  }

  .newsletter-form .btn {
    width: 100%;
    justify-content: center;
  }

  /* Footer */
  .footer-desc {
    max-width: 100%;
  }

  .footer-bottom {
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: center;
  }

  /* Auth */
  .auth-card {
    padding: 28px 20px;
    border-radius: var(--radius-lg);
  }

  .auth-card-title {
    font-size: 1.45rem;
  }

  /* Breadcrumb */
  .breadcrumb-section {
    padding: 80px 0 40px;
  }

  .breadcrumb-section .breadcrumb-title {
    font-size: 1.8rem;
  }

  /* Blog */
  .blog-card-img {
    height: 180px;
  }

  /* Table */
  .table-responsive-custom {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Back to top */
  #back-to-top {
    bottom: 20px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  /* Top 10 card */
  .top-card {
    flex-direction: column;
  }

  .top-card-rank {
    width: 100%;
    height: 50px;
    font-size: 1.3rem;
  }

  /* Testimonial */
  .testimonial-card {
    padding: 24px 20px;
  }
}

/* ── 6. EXTRA SMALL — < 576px ── */
@media (max-width: 575px) {
  .hero-title {
    font-size: 1.75rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .btn-xl {
    padding: 14px 28px;
    font-size: 1rem;
  }

  .btn-lg {
    padding: 12px 24px;
    font-size: 0.95rem;
  }

  .pricing-card {
    padding: 20px 16px;
  }

  .hero-stats {
    gap: 14px;
  }

  .hero-stat .stat-number {
    font-size: 1.3rem;
  }

  .auth-card {
    padding: 24px 16px;
  }

  .cta-section .btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
  }
}

/* ── 7. PRINT STYLES ── */
@media print {
  #preloader,
  .navbar,
  #back-to-top,
  #scroll-progress,
  .newsletter-section,
  .cta-section {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .hero-section {
    background: #f5f5f5 !important;
    min-height: auto;
    padding: 40px 0;
  }

  .hero-title {
    color: #000 !important;
  }

  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
    color: #666;
  }
}

/* ── 8. DARK MODE (System Preference) ── */
@media (prefers-color-scheme: dark) {
  /* Only applied when user hasn't manually toggled */
  body.system-dark {
    --color-bg:      #0F1923;
    --color-surface: #1A2535;
    --color-text:    #E2E8F0;
    --color-text-muted: #94A3B8;
    --color-border:  rgba(255,255,255,0.08);
  }
}

/* ── 9. REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }

  .animate-float,
  .animate-float-sm,
  .animate-pulse-glow,
  .animate-rotate {
    animation: none !important;
  }
}