/* ============================================================
   Laxmi Trade — brand overrides (loaded LAST)
   - constrain the square Laxmi logo so it fits navbar/footer
   - place any saffron-theme fine-tuning here
   ============================================================ */

/* Logo sizing (original logo.svg was 154x31 wide; ours is square) */
img[src$="laxmi-logo.png"] {
  height: 44px;
  width: auto;
  object-fit: contain;
}
.navbar-brand img[src$="laxmi-logo.png"] {
  height: 46px;
}
.footer-section img[src$="laxmi-logo.png"],
footer img[src$="laxmi-logo.png"],
.footer-section img[src$="laxmi-logo-light.png"],
footer img[src$="laxmi-logo-light.png"] {
  height: 40px;            /* wide lockup must fit the 260px brand column */
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Floating Play-Store button: was Kwik lime-green, make it saffron */
.wa-widget-playstore-button a {
  background: #ff8a1f !important;
}

/* Overlays/popups are JS-triggered (scroll / button). Without that JS they
   would show on load — hide by default so first paint matches the original.
   (Re-enabled later when interactive JS is wired up.) */
#ssOverlay.signup-scroll-overlay,
.signup-scroll-overlay,
.popup-overlay {
  display: none !important;
}

/* ============================================================
   Promo ambassador grid (replaces the old YouTube testimonial slider)
   ============================================================ */
.promo-ambassadors-grid { overflow: hidden; }
/* DESKTOP: all 5 visible at once, static 5-up grid (no scroll). Bull sits 3rd = centre. */
.promo-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.promo-track .promo-dupe { display: none; }   /* duplicate set is for the mobile marquee only */
.promo-track .portrait-video-card.promo-card {
  height: 380px;
  background: linear-gradient(160deg, #fff6e9 0%, #ffe6c2 100%);
  box-shadow: 0 10px 30px rgba(232, 138, 30, 0.15);
}
.promo-track .portrait-video-card.promo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PHONE ONLY: not all cards fit → continuous right→left auto-scroll marquee.
   Laptops/tablets (≥768px) keep the static 5-up grid above. The track holds two
   identical sets (5 + 5 dupes); translateX(-50%) lands exactly one set over (each
   card carries a uniform margin-right) → seamless infinite loop. */
@media (max-width: 767.98px) {
  .promo-track {
    display: flex;
    width: max-content;
    gap: 0;
    animation: promoScroll 26s linear infinite;
    will-change: transform;
  }
  .promo-track .promo-dupe { display: block; }
  .promo-track .portrait-video-card.promo-card {
    flex: 0 0 auto;
    width: 220px;
    height: 340px;
    margin-right: 14px;
  }
  /* pause while the user is touching/holding the row */
  .promo-ambassadors-grid:active .promo-track,
  .promo-track:hover { animation-play-state: paused; }
}
@media (max-width: 575px) {
  .promo-track .portrait-video-card.promo-card { width: 180px; height: 300px; margin-right: 12px; }
}
@keyframes promoScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .promo-track { animation: none; }
}

/* FAQ answers: allow taller content (original capped at 200px) */
.faq-item.active .faq-answer { max-height: 600px; }

/* ── Navbar logo / menu vertical alignment ── */
.navbar { padding-top: .5rem; padding-bottom: .5rem; }
.navbar-brand { display: inline-flex; align-items: center; margin: 0; padding: 0; }
.navbar-brand img[src$="laxmi-logo.png"] {
  height: 38px;
  width: auto;
  display: block;
}
.navbar .navbar-nav { align-items: center; }
.navbar .navbar-nav .nav-link { display: inline-flex; align-items: center; }
/* Optical nudge: inside the PNG the "laxmitrade" wordmark sits ~5.5px below the
   image's vertical centre (lotus mark + top transparency), which left it low vs
   the menu text. Measured exact offset and lift it so the wordmark baseline
   lines up with Home / About Us / Margin Table. */
@media (min-width: 992px) {
  .navbar-brand img[src$="laxmi-logo.png"] { transform: translateY(-9px); }
}

/* Testimonials: empty placeholder cards (await celebrity HQ images) */
.promo-ambassadors-grid .promo-card.promo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.promo-ambassadors-grid .promo-card.promo-empty span {
  color: #c98a3e;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  opacity: .8;
}

/* Auth pages: social-proof avatar must stay small (was an avatar stack) */
.signup-left .social-proof .user-img {
  height: 48px;
  width: 72px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* ── Mobile navbar: keep logo + login + CTA + hamburger from colliding ── */
@media (max-width: 991.98px) {
  .navbar-brand img[src$="laxmi-logo.png"] { height: 24px; }
  .navbar .btn-open-account { padding: .36rem .64rem; font-size: .74rem; }
  .navbar .d-lg-none.ms-auto { gap: .45rem !important; padding-left: .4rem; }
  .navbar .d-lg-none .fm { font-size: .78rem !important; white-space: nowrap; }
}
@media (max-width: 360px) {
  .navbar-brand img[src$="laxmi-logo.png"] { height: 22px; }
  .navbar .btn-open-account { padding: .32rem .5rem; font-size: .7rem; }
}
@media (max-width: 339px) {
  /* only the smallest phones: drop top-bar "Log in" text (still in /signin) */
  .navbar .d-lg-none .fm { display: none; }
}

/* ── Mobile: hero feature pills in a tidy 3 × 2 grid (was stacking 1/row) ── */
@media (max-width: 767.98px) {
  .hero-strip .d-flex.flex-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
  .hero-strip .badge-pill {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal !important;
    padding: 7px 5px !important;
    font-size: 0.64rem !important;
    line-height: 1.12;
    min-height: 40px;
  }
}

/* ── Hero bull image: lift it up so it aligns (remove the big gap) ── */
@media (max-width: 991.98px) {
  /* mobile: kill the 130px bottom padding that pushed the bull way down */
  .hero-section .pb-120 { padding-bottom: 6px !important; }
  .hero-section .negative-img { margin-top: -28px; margin-bottom: -30px; }
}
@media (min-width: 992px) {
  /* desktop: bull was bottom-aligned & sat low — bring it up */
  .hero-section .pb-120 { padding-bottom: 36px; }
}

/* ── Logo: full wordmark on desktop, compact icon on mobile (fits the top bar) ── */
.laxmi-logo-icon { display: none; }
@media (max-width: 991.98px) {
  .navbar-brand .laxmi-logo-wordmark { display: none !important; }
  .navbar-brand .laxmi-logo-icon { display: block !important; height: 34px; width: auto; transform: translateY(-4px); }
}

/* ── Mobile slide-in drawer (right → left), matching the original Kwik UX ── */
.mobile-nav-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transition: opacity .3s ease; z-index: 1040;
}
.mobile-nav-overlay.active { opacity: 1; visibility: visible; }
.mobile-nav-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 82%; max-width: 340px;
  background: #fff; z-index: 1050; box-shadow: -8px 0 30px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow-y: auto;
}
.mobile-nav-drawer.active { transform: translateX(0); }
.mobile-nav-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid #eee;
}
/* logo + login on ONE line, vertically centred (kill inline-img baseline gap) */
.mobile-nav-header > a { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.mobile-nav-header > a img { display: block; }
.mobile-nav-header > div { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.mobile-nav-links { display: flex; flex-direction: column; padding: 6px 0; flex: 1; }
.mobile-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; color: #0d0d0d; text-decoration: none;
  font-size: 15px; font-weight: 500; border-bottom: 1px solid #f4f4f4; cursor: pointer;
}
.mobile-nav-item:hover { background: #fff8ef; color: #e67e22; }
.mobile-nav-chevron { transition: transform .25s ease; }
.mobile-nav-accordion.open .mobile-nav-chevron { transform: rotate(180deg); }
.mobile-nav-sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: #faf9f7; }
.mobile-nav-sub.open { max-height: 160px; }
.mobile-nav-sub-item {
  display: block; padding: 12px 34px; color: #555; text-decoration: none;
  font-size: 14px; border-bottom: 1px solid #f4f4f4;
}
.mobile-nav-sub-item:hover { color: #e67e22; }
.mobile-nav-cta { padding: 18px 22px; border-top: 1px solid #eee; }
@media (min-width: 992px) { .mobile-nav-overlay, .mobile-nav-drawer { display: none !important; } }

/* Signup mobile "Download App" button: was Kwik lime-green → saffron */
.btn-playstore { background: #ff9933 !important; color: #0d0d0d !important; border-color: #ff9933 !important; }
.btn.btn-playstore:hover, .btn.btn-playstore:focus, .btn.btn-playstore:active {
  background: #ff8a1f !important; color: #0d0d0d !important; border-color: #ff8a1f !important;
}

/* ── Responsive images: hero/app posters must never overflow on mobile ── */
.negative-img { max-width: 100%; height: auto; }
.app-section .app-phone-img,
.app-section img,
.zb-mascot-img { max-width: 100%; height: auto; }

/* Mobile: dark "Mobile App" section poster — full image, pushed to the RIGHT.
   Kwik's media-query.css pulls .app-phone-wrap margin-left:-164px (overlap effect)
   which clips the poster off the left edge on phones. Cancel it and right-align. */
@media (max-width: 991.98px) {
  .app-section .app-phone-wrap {
    margin-left: auto;   /* flex item: absorbs free space → poster sits on the right;
                            also overrides Kwik's -164px left pull that caused the cut */
    margin-right: 0;
  }
  .app-section .app-phone-img {
    max-height: 360px;
    width: auto;
    max-width: 100%;
    margin: 0;
    display: block;
  }
}

/* Signup live password-rule met state (JS toggles .lt-rule-ok) */
.pwd-hint.lt-rule-ok { color: #1a9c3e; }
.pwd-hint.lt-rule-ok svg rect { fill: #1a9c3e; }
.pwd-hint.lt-rule-ok svg circle { stroke: #1a9c3e; }


/* Welcome page: hide navbar Log in / Open Account CTAs (user already created account) */
body.lt-welcome-route .btn-open-account,
body.lt-welcome-route a[href="/signin"],
body.lt-welcome-route a[href="/signup"] { display: none !important; }

/* Auth pages (login / signup): the navbar shows ONLY the logo — hide the nav
   links, the Log in / Open Account CTAs, and the mobile menu (three-dot). */
body.lt-signin-route .navbar .container-xl > :not(.navbar-brand),
body.lt-signup-route .navbar .container-xl > :not(.navbar-brand) { display: none !important; }

/* ── Auth pages: trust-badges card + compact footer below the form ── */
.auth-trust-card {
  background: #fff; border: 1px solid #f0e2cd; border-radius: 16px;
  box-shadow: 0 6px 22px rgba(230,126,34,.08);
  display: flex; justify-content: space-around; align-items: flex-start; gap: 8px;
  padding: 22px 14px; margin: 22px auto 0; max-width: 980px;
}
.auth-trust-item {
  flex: 1 1 0; min-width: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 4px;
}
.auth-trust-icon {
  width: 46px; height: 46px; border-radius: 50%; background: #ff9933;
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.auth-trust-icon i { font-size: 20px; color: #1a1305; line-height: 1; }
.auth-trust-item strong { font-size: 14px; font-weight: 700; color: #2a1f10; }
.auth-trust-item > span:last-child { font-size: 12px; color: #8a7a62; line-height: 1.3; }

.auth-footer { text-align: center; padding: 22px 14px 12px; max-width: 980px; margin: 0 auto; }
.auth-footer p { font-size: 14px; color: #5b4a33; margin: 0 0 8px; }
.auth-footer .lt-brand { color: #ff9933; font-weight: 700; }
.auth-footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; }
.auth-footer-links a { color: #6b5b47; text-decoration: none; font-size: 13px; }
.auth-footer-links a:hover { color: #e67e22; }
.auth-footer-links > span { color: #c9bba6; }
@media (max-width: 400px) {
  .auth-trust-card { flex-wrap: wrap; row-gap: 18px; }
  .auth-trust-item { flex: 0 0 46%; }
}


/* OTP popup: inline below the mobile field (not a floating overlay) so it
   doesn't cover the Create/Change button; verification is on the Submit button. */
.otp-popup { position: static !important; left: auto !important; right: auto !important; top: auto !important; margin: 10px 0 6px !important; }

/* Floating buttons — stack them so they don't overlap: the WhatsApp live-chat
   FAB (App.vue .lt-wa-fab, ~56px @ bottom 22 / right 18) stays at the very
   bottom, and the Play-Store / app button sits directly ABOVE it. */
.wa-widget-playstore-button {
  bottom: 88px !important;
  margin: 0 !important;
  right: 21px !important;
  z-index: 3001 !important;
}
@media (max-width: 560px) {
  .wa-widget-playstore-button { bottom: 76px !important; right: 14px !important; }
}