/* ==========================================================================
   Bharat Loan — Responsive Styles (Mobile First)
   ========================================================================== */

/* Header — desktop layout
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .site-header__inner {
    flex-wrap: nowrap;
    gap: 1.5rem;
  }

  .site-header__collapse {
    display: flex !important;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    width: auto;
  }

  .site-header__menu {
    margin: 0 auto;
  }

  .site-header__menu .nav-link {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
  }
}

/* Small devices (landscape phones, 576px and up)
   -------------------------------------------------------------------------- */
@media (min-width: 576px) {
  .hero-split__left,
  .hero-split__right {
    padding: 3rem 2rem;
  }

  .hero-perks__text {
    font-size: 0.75rem;
  }

  .trust__badge {
    padding: 1.5rem 1rem;
  }

  .trust__label {
    font-size: 0.875rem;
  }
}

/* Medium devices (tablets, 768px and up)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero-split__left,
  .hero-split__right {
    padding: 3.5rem 2.5rem;
  }

  .hero-split__left-inner {
    text-align: left;
  }

  .hero-split__desc {
    margin-left: 0;
    margin-right: 0;
  }

  .hero-split__play-badge img {
    margin: 0;
  }

  .hero__input {
    height: 60px;
    font-size: 1.0625rem;
  }

  .hero__cta {
    height: 60px;
    font-size: 1.0625rem;
  }

  .hero-perks__text {
    font-size: 0.8125rem;
  }

  .trust {
    padding: 2rem 0 4rem;
  }

  .trust__badge {
    flex-direction: row;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
  }

  .features {
    padding: 5rem 0;
  }

  .features__header {
    margin-bottom: 3.5rem;
  }

  .steps {
    padding: 5rem 0;
  }

  .steps__header {
    margin-bottom: 3.5rem;
  }

  .cta-banner {
    padding: 3rem 0 5rem;
  }

  .cta-banner__inner {
    padding: 3rem 2.5rem;
  }
}

/* Large devices (desktops, 992px and up)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .hero-split__row {
    min-height: calc(100vh - var(--bl-header-height));
  }

  .hero-split__left {
    padding: 3rem 3.5rem;
  }

  .hero-split__right {
    padding: 3rem 3.5rem;
  }

  .hero-split__left-inner {
    margin: 0;
    max-width: 100%;
  }

  .hero-split__right-inner {
    margin: 0;
    max-width: 440px;
  }

  .features__grid {
    margin-top: 0.5rem;
  }

  .feature-card {
    padding: 2.25rem 2rem;
  }

  .step-card {
    padding: 2.5rem 2rem;
  }

  .site-footer {
    padding: 4rem 0 2.5rem;
  }

  .site-footer__copy {
    text-align: left;
  }
}

/* Extra large devices (1200px and up)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .hero-split__title {
    font-size: 2.75rem;
  }

  .container {
    max-width: 1140px;
  }

  .hero-split__right-inner {
    max-width: 480px;
  }

  .site-header__menu .nav-link {
    padding: 0.5rem 1.125rem;
    font-size: 0.9375rem;
  }
}

/* Mobile — form first, fills first screen
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .site-header {
    --bl-header-height: 64px;
  }

  .site-header__logo {
    height: 38px;
  }

  .site-header__collapse {
    margin-top: 0.5rem;
    padding: 1rem;
    background: var(--bl-header-nav-bg);
    border: 1px solid var(--bl-header-border);
    border-radius: var(--bl-radius);
  }

  .site-header__collapse .site-header__menu {
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
  }

  .site-header__collapse .nav-link {
    padding: 0.75rem 1rem;
    border-radius: var(--bl-radius-sm);
  }

  .hero-split__row {
    min-height: auto;
  }

  /* Form section — natural height, no forced viewport gap below perks */
  .hero-split__right {
    min-height: auto;
    display: flex;
    align-items: flex-start;
    padding: 1.25rem 1.25rem 1.25rem;
    padding-top: max(1.25rem, env(safe-area-inset-top));
  }

  .hero-split__right-inner {
    width: 100%;
    max-width: 100%;
    padding-bottom: 5.25rem;
  }

  .hero-split__form-title {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
  }

  .hero__input {
    height: 58px;
    font-size: 1.0625rem;
  }

  .hero__cta {
    height: 58px;
    font-size: 1.0625rem;
  }

  /* App section directly below form + perks */
  .hero-split__left {
    padding: 1.5rem 1.25rem 2.5rem;
  }

  /* Compact horizontal perks on mobile */
  .hero-perks {
    flex-direction: row;
    gap: 0.5rem;
    margin-top: 1.25rem;
    margin-bottom: 0;
  }

  .hero-perks::before {
    display: none;
  }

  .hero-perks__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem 0.375rem;
    margin: 0;
    min-height: 100px;
  }

  .hero-perks__icon {
    width: 36px;
    height: 36px;
    margin-bottom: 0.375rem;
  }

  .hero-perks__text {
    font-size: 0.625rem;
    line-height: 1.35;
    text-align: center;
  }

  .features,
  .steps {
    padding: 3rem 0;
  }

  .cta-banner__btn {
    width: 100%;
  }
}

/* Small mobile
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .site-header__tools {
    gap: 0.375rem;
  }

  .btn-header-cta--sm {
    padding: 0.4375rem 0.75rem;
    font-size: 0.75rem;
  }

  .hero-split__form-title {
    margin-bottom: 1rem;
  }

  .hero__consent {
    font-size: 0.6875rem;
  }

  .hero-perks__text {
    font-size: 0.5625rem;
  }

  .otp-input {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .otp-inputs {
    gap: 0.5rem;
  }
}

/* Landscape mobile — keep form visible
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) and (orientation: landscape) {
  .hero-split__right {
    min-height: auto;
    padding: 1rem 1.25rem;
  }

  .hero-split__left {
    padding: 1.5rem 1.25rem;
  }

  .hero-split__phones-img {
    max-height: 160px;
    width: auto;
    margin: 0 auto;
  }

  .hero-perks {
    display: none;
  }
}

/* High contrast mode
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  .glass-card,
  .hero-perks__card {
    border-width: 2px;
  }

  .hero__input {
    border-width: 2px;
  }

  .site-header__menu,
  .site-header__actions {
    border-width: 2px;
  }

  .hero__consent,
  .feature-card__text,
  .step-card__text {
    color: var(--bl-text);
  }
}

/* Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .theme-toggle,
  .btn-ripple::after,
  .hero__cta-loader {
    display: none;
  }

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

  .glass-card {
    border: 1px solid #ccc;
    box-shadow: none;
  }
}