/* Bandhu Motors site styles.
 * 1. Effects from "Elementor Custom Code.md" (loader, curtain, header glass, shine, magnetic, cursor, marquee)
 * 2. Rules Elementor classes cannot hold: descendant selectors, JS states, forms inside HTML widgets
 * 3. Live earning calculator, floating WhatsApp button, mobile action bar
 * Variables (--color-red, --space-4, ...) come from the Elementor kit. */

/* ---------- 1. Effects ---------- */
html { scroll-behavior: smooth; }
@media (min-width: 1501px) { body { zoom: calc(100vw / 1440px); } }
@media (min-width: 2900px) { body { zoom: 2; } }

.bm-header { transition: background .3s, backdrop-filter .3s, box-shadow .3s; }
.bm-header.bm-scrolled {
  background: rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 6px 24px rgba(20, 20, 30, .08);
}
.bm-card { transition: box-shadow .3s; }
.bm-card:hover { box-shadow: 0 22px 48px rgba(20, 20, 30, .18) !important; }

@keyframes bmShine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(320%) skewX(-20deg); } }
.bm-shine { position: relative; overflow: hidden; }
.bm-shine-sweep { position: absolute; top: 0; left: 0; width: 40%; height: 100%; pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: bmShine .9s ease forwards; }
.bm-magnetic { transition: transform .2s ease-out; }

@keyframes bmMarquee { to { transform: translateX(-50%); } }
.bm-marquee { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; animation: bmMarquee 30s linear infinite; }
.bm-marquee:hover { animation-play-state: paused; }

@media (hover: hover) and (pointer: fine) {
  body.bm-cur-on, body.bm-cur-on * { cursor: none; }
  body.bm-cur-on a, body.bm-cur-on a *, body.bm-cur-on button, body.bm-cur-on button *,
  body.bm-cur-on [role=button], body.bm-cur-on label { cursor: pointer !important; }
  body.bm-cur-on input, body.bm-cur-on textarea, body.bm-cur-on select { cursor: text !important; }
}
.bm-dot, .bm-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 2147483000; border-radius: 50%; opacity: 0; transition: opacity .25s; }
.bm-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--color-red, #E31E24); }
.bm-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1.5px solid rgba(227, 30, 36, .7);
  transition: opacity .25s, width .25s, height .25s, margin .25s, background .25s, border-color .25s; }
.bm-ring.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(227, 30, 36, .12); border-color: rgba(227, 30, 36, .35); }

#bm-loader { position: fixed; inset: 0; z-index: 2147483100; background: #0B0B0C; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; color: #fff; transition: opacity .6s, visibility .6s; }
#bm-loader.done { opacity: 0; visibility: hidden; }
#bm-loader .bm-l-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 38px; letter-spacing: .04em; }
#bm-loader .bm-l-name span { color: #E31E24; }
#bm-loader .bm-l-sub { font-size: 11px; font-weight: 600; letter-spacing: .34em; color: rgba(255, 255, 255, .7); }
#bm-loader .bm-l-row { display: flex; align-items: center; gap: 14px; }
#bm-loader .bm-l-bar { position: relative; width: 180px; height: 3px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
#bm-loader .bm-l-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: #E31E24; }
#bm-loader .bm-l-pct { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; min-width: 48px; }
#bm-curtain { position: fixed; inset: 0; z-index: 2147483050; background: #E31E24; transform: translateY(100%); transition: transform .5s cubic-bezier(.7, 0, .3, 1); pointer-events: none; }
#bm-curtain.in { transform: translateY(0); }
#bm-curtain.out { transform: translateY(-100%); }
@media (max-width: 767px) { .elementor-location-footer a { min-height: 44px; display: inline-flex; align-items: center; } }
@media (prefers-reduced-motion: reduce) { .bm-marquee { animation: none; } #bm-curtain { display: none; } }

/* ---------- 2. Descendant rules, JS states, forms ---------- */
.elementor .elementor-widget-html.bm-html { min-width: 0; }
.elementor .row > .elementor-widget-html.bm-html { flex: 1 1 var(--col-min-lg); }
.elementor .map-embed > .elementor-widget-html.bm-html { width: 100%; }
.bm-html .form-card { margin: 0; }
.bm-html .form-card > .form-field { flex: none; }
.bm-html .form-card p, .bm-html .form-card h3 { margin: 0; }
.bm-html .form-input, .bm-html .form-textarea { font: inherit; font-size: var(--fs-md); }
.bm-html .button-whatsapp { font-family: var(--font-body); }
.bm-html .button-whatsapp .icon-sm { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.bm-html .form-error { color: var(--color-red); font-size: var(--fs-sm); font-weight: 600; }
.bm-html .form-input.is-invalid { border-color: var(--color-red); }
.elementor .breadcrumb a { color: var(--color-white-70); }
.bm-html .button-whatsapp { display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--button-height);
  padding: 0 var(--space-6);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--fs-base);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.3s; }
.bm-html .button-whatsapp { background: var(--color-whatsapp); color: var(--color-white); }
.bm-html .button-whatsapp:hover { color: var(--color-white); box-shadow: var(--shadow-card-hover); }
.elementor .feature-item .icon-sm { color: var(--color-red); }
.bm-html .card-model .button-whatsapp { height: var(--button-height-sm); font-size: var(--fs-sm); }
.elementor .card-blog-featured .card-blog-media { flex: 1.3 1 var(--col-min-md); }
.elementor .card-blog-featured .card-blog-image { height: 100%; min-height: var(--featured-image-min); }
.elementor .card-blog-featured .card-blog-body { flex: 1 1 var(--col-min-xs); justify-content: center; padding: var(--space-8); }
.elementor .chip-filter.is-active { background: var(--color-red); border-color: var(--color-red); color: var(--color-white); }
.elementor .card-model.is-hidden, .elementor .card-blog.is-hidden { display: none; }
.bm-html .form-card { flex: 1 1 var(--col-min-lg); min-width: 0; background: var(--color-white); border-radius: var(--radius); box-shadow: var(--shadow-card-hover); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); }
.bm-html .form-mockup-label { align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--color-grey); border: var(--border-width) dashed var(--color-border-mid); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); }
.bm-html .form-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-4xl); text-transform: uppercase; line-height: var(--lh-tight); }
.bm-html .form-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.bm-html .form-field { flex: 1 1 var(--card-min); min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bm-html .form-label { display: flex; gap: var(--space-1); font-size: var(--fs-sm); font-weight: 600; }
.bm-html .form-required { color: var(--color-red); }
.bm-html .form-input, .bm-html .form-textarea { width: 100%;
  height: var(--button-height);
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-border-mid);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink); }
.bm-html .form-textarea { height: auto; padding: var(--space-3) var(--space-4); resize: vertical; }
.bm-html .form-input:focus, .bm-html .form-textarea:focus { outline: none; border-color: var(--color-red); }
.bm-html .form-note { font-size: var(--fs-sm); color: var(--color-grey); }
.bm-html .map-frame { width: 100%; height: var(--map-height); border: 0; border-radius: var(--radius); box-shadow: var(--shadow-card); }
.elementor .takeaway-item .icon-sm { color: var(--color-red); margin-top: var(--space-1); }
@media (max-width: 767px) {
  .bm-html .form-card { padding: var(--space-6); }
  .elementor .card-stat-row .card-stat { flex: 1 1 calc(50% - var(--space-5)); background: var(--color-white); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-2); }
  .elementor .card-blog-featured .card-blog-body { padding: var(--space-6); }
  .elementor .card-blog-featured .card-blog-image { min-height: var(--featured-image-min-mobile); }
  .bm-html .button-row .button-whatsapp { width: 100%; }
}

/* Article heroes carry their own image as a local style; keep the hero sizing. */
.elementor .hero-article { background-size: cover !important; background-position: right center !important; background-repeat: no-repeat !important; }
@media (max-width: 767px) { .elementor .hero-article { background-size: 100% auto !important; background-position: top center !important; } }

/* ---------- 3. Calculator, floating buttons ---------- */
.calc-range.bm-live > .elementor-widget-e-divider, .calc-range.bm-live > .e-divider-base, .calc-range.bm-live > [class*="calc-range-"] { display: none !important; }
.calc-range.bm-live { position: relative; }
.calc-range.bm-live input[type=range] { width: 100%; margin: 0; accent-color: #E31E24; cursor: pointer; background: transparent; }
.calc-number input { width: 90px; height: 40px; background: #16181B; border: 1px solid #2A2C31; border-radius: 4px; color: #fff; text-align: center; font: inherit; font-size: 16px; padding: 0 6px; }

.bm-float-wa { position: fixed; right: 24px; bottom: 24px; z-index: 9990; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(20, 20, 30, .25); transition: transform .2s; }
.bm-float-wa:hover { transform: scale(1.06); color: #fff; }
.bm-float-wa svg, .bm-mbar svg { width: 26px; height: 26px; }
.bm-top { position: fixed; right: 30px; bottom: 92px; z-index: 9990; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #15171A; color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; cursor: pointer; padding: 0; }
.bm-top.show { opacity: 1; visibility: visible; }
.bm-top svg { width: 20px; height: 20px; }
.bm-mbar { display: none; }
@media (max-width: 767px) {
  .bm-float-wa, .bm-top { display: none; }
  .bm-mbar { display: flex; gap: 8px; padding: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; background: #fff; border-top: 1px solid #ECECEC; box-shadow: 0 -6px 24px rgba(20, 20, 30, .08); }
  .bm-mbar a { flex: 1; height: 48px; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; color: #fff; text-decoration: none; }
  .bm-mbar svg { width: 18px; height: 18px; }
  .bm-mbar .wa { background: #25D366; } .bm-mbar .call { background: #15171A; } .bm-mbar .enq { background: #E31E24; }
  body { padding-bottom: 64px; }
}
@media (max-width: 400px) { .elementor .logo-sub { letter-spacing: .06em; } }