/**
 * ============================================================================
 * RESPONSIVE.CSS - Financier Buzz PROFESSIONAL BANKING DESIGN SYSTEM
 * Comprehensive Mobile, Tablet & Desktop Responsiveness
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   0. GLOBAL OVERFLOW & BASE FIXES
   -------------------------------------------------------------------------- */
html, body {
  max-width: 100vw;
  overflow-x: hidden !important;
  position: relative;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   1. Large Desktops & Ultrawide (>= 1400px)
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* --------------------------------------------------------------------------
   2. Medium Desktops & Tablets Landscape (<= 1199px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .hero-section h1,
  .hero-title, 
  .ll-hero-title, 
  .ap-hero-title {
    font-size: 2.5rem !important;
    line-height: 1.25 !important;
  }

  .nav-link-item {
    padding: 0.45rem 0.55rem !important;
    font-size: 0.85rem;
  }

  .floating-apply-dock {
    right: 65px;
  }
}

/* --------------------------------------------------------------------------
   3. Tablets & Small Laptops (<= 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* Header & Navigation */
  .master-header .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .brand-name {
    font-size: 1.25rem;
  }

  .brand-tagline {
    font-size: 0.65rem;
  }

  /* Hero Section */
  .hero-section {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }

  .hero-section h1,
  .hero-title, 
  .ll-hero-title, 
  .ap-hero-title {
    font-size: 2.15rem !important;
    line-height: 1.25 !important;
  }

  .section-title, 
  .ll-section-title {
    font-size: 1.85rem !important;
  }

  .ll-hero-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ap-stat-box {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .ap-stat-box:last-child {
    border-bottom: none;
  }

  .cp-map-frame-wrap {
    height: 340px;
  }

  .ll-cta-banner {
    padding: 2.5rem 1.5rem;
    text-align: center;
  }

  .ll-cta-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .lead-form-card {
    margin-top: 1.5rem;
  }

  /* Floating Widgets */
  .floating-apply-dock {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   4. Mobile Phones Landscape & Portrait (<= 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Top Bar */
  .top-announcement-bar {
    font-size: 0.72rem;
    padding: 0.4rem 0.5rem;
  }

  .top-announcement-bar .container {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 0.35rem;
  }

  /* Master Header */
  .master-header {
    padding: 0.4rem 0;
  }

  .master-header .navbar {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .brand-symbol {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
  }

  .brand-name {
    font-size: 1.1rem;
    letter-spacing: -0.3px;
  }

  .brand-tagline {
    font-size: 0.6rem;
    letter-spacing: 0.5px;
  }

  .btn-nav-action {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }

  /* Hero Section */
  .hero-section {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
    text-align: left;
  }

  .hero-section h1,
  .hero-title, 
  .ll-hero-title, 
  .ap-hero-title, 
  .cp-hero-title {
    font-size: 1.85rem !important;
    line-height: 1.22 !important;
    margin-bottom: 0.85rem !important;
  }

  .hero-section p,
  .hero-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.25rem !important;
  }

  .badge-gold,
  .hero-section .inline-flex {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.75rem !important;
  }

  /* Section Headings */
  .section-title, 
  .ll-section-title,
  h2.text-3xl {
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
  }

  /* Premium Loan Cards on Mobile */
  .premium-loan-card {
    padding: 1.4rem 1.15rem;
    border-radius: var(--radius-lg);
  }

  .loan-card-title {
    font-size: 1.2rem;
  }

  .loan-card-desc {
    font-size: 0.82rem;
    margin-bottom: 0.9rem;
  }

  .loan-metrics-grid {
    gap: 0.35rem;
    padding: 0.5rem;
    margin-bottom: 0.9rem;
  }

  .metric-label {
    font-size: 0.58rem;
  }

  .metric-value {
    font-size: 0.74rem;
  }

  .loan-benefits-list li {
    font-size: 0.76rem;
    margin-bottom: 0.3rem;
  }

  .loan-eligibility-box {
    padding: 0.5rem 0.65rem;
    font-size: 0.7rem;
    margin-bottom: 1rem;
  }

  .loan-card-footer {
    padding-top: 0.75rem;
    gap: 0.4rem;
  }

  .btn-outline-navy-sm {
    font-size: 0.75rem;
    padding: 0.45rem 0.75rem;
  }

  .btn-gold-sm {
    font-size: 0.75rem;
    padding: 0.5rem 0.85rem;
  }

  /* Sticky Floating Action Buttons */
  .sticky-whatsapp-btn {
    bottom: 20px;
    left: 18px;
    width: 50px;
    height: 50px;
    font-size: 1.6rem;
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.45);
    z-index: 1050;
  }

  .sticky-call-btn {
    bottom: 80px;
    left: 18px;
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
    box-shadow: 0 6px 16px rgba(10, 37, 64, 0.4);
    z-index: 1050;
  }

  .scroll-to-top-btn {
    bottom: 20px;
    right: 18px;
    width: 44px;
    height: 44px;
    font-size: 1rem;
    z-index: 1050;
  }

  .floating-apply-dock {
    display: none !important;
  }

  /* Lead Form Card */
  .lead-form-card {
    padding: 1.5rem 1.15rem !important;
    border-radius: var(--radius-lg) !important;
  }

  .lead-form-title {
    font-size: 1.25rem !important;
  }

  /* KPI & Partner Grids */
  .partner-logo-card {
    padding: 0.65rem 0.85rem;
    font-size: 0.8rem;
  }

  /* Statistics Grid on Mobile */
  .stat-card {
    padding: 1.15rem 0.65rem !important;
  }

  .stat-counter {
    font-size: 1.55rem !important;
    margin-bottom: 0.35rem !important;
  }

  /* Footer */
  .footer-heading {
    margin-top: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   5. Small Screens (<= 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero-section h1,
  .hero-title, 
  .ll-hero-title, 
  .ap-hero-title {
    font-size: 1.6rem !important;
  }

  .lead-form-card, 
  .ap-mission-card, 
  .cp-channel-card {
    padding: 1.25rem 1rem !important;
  }

  .btn-gold, 
  .btn-navy {
    width: 100%;
  }

  .loan-rate-pill {
    font-size: 0.72rem;
    padding: 0.25rem 0.55rem;
  }

  .loan-speed-pill {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
  }
}