/* Responsive images and icons (loaded by BOTH layouts: see docs/RESPONSIVE-UI.md).
 *
 * Why this file exists: the theme's markup used `width="180px" height="35px"`
 * style attributes. An HTML parser reads those as 180/35 (the unit is ignored,
 * not the number), and attribute sizing cannot shrink - so the brand logo was
 * squashed (the artwork is 332x54) and could not scale down on a phone, and the
 * auth illustration was stretched to a 400x600 box while the artwork is ~square
 * (1380x1342). Sizing belongs in CSS, where `height: auto` keeps the ratio.
 */

/* ── Brand logo (navbar, footer, app sidebar) ─────────────────────────────── */

.bim-brand-logo {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle;
}

.layout-navbar .bim-brand-logo {
  max-height: 34px;
}

.landing-footer .bim-brand-logo {
  max-height: 44px;
}

.layout-menu .bim-brand-logo {
  max-height: 34px;
}

/* ── Auth illustrations ──────────────────────────────────────────────────── */

.auth-cover-illustration {
  width: 100%;
  height: auto;
  max-width: 38rem;
  max-height: 70vh;
  object-fit: contain;
}

/* The columns that hold the artwork are hidden on small screens anyway - belt
   and braces so a tall illustration can never push the form off-screen. */
@media (max-width: 991.98px) {
  .auth-cover-illustration {
    max-height: 40vh;
  }
}

/* ── Footer "mobile app" column ────────────────────────────────────────── */

/* No store artwork: the official badges have "Download on the App Store" baked
   into the image, which is a lie while the apps are unpublished. Icon + store
   name + one "Coming soon" pill says the same thing without pretending. */
.bim-store-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.bim-store-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  font-size: 0.9rem;
  opacity: 0.8;
  cursor: not-allowed;
}

.bim-store-item i {
  font-size: 1.15rem;
  line-height: 1;
}

.bim-store-label {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Footer "request a demo" form ──────────────────────────────────────── */

/* The footer is dark in both themes (#241d31 + artwork), so the form needs its
   own colours - the theme's .form-label/.form-control assume a light surface. */
.bim-demo-form {
  color: #fff;
}

.bim-demo-form .form-label {
  margin-bottom: 0.2rem;
  color: #fff;
  font-size: 0.78rem;
  opacity: 0.85;
}

.bim-demo-form .form-control {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.bim-demo-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.bim-demo-form .form-control:focus {
  background-color: rgba(255, 255, 255, 0.11);
  border-color: #ee8437;
  box-shadow: 0 0 0 0.15rem rgba(238, 132, 55, 0.25);
  color: #fff;
}

.bim-demo-error {
  margin-top: 0.2rem;
  color: #ff9b9b;
  font-size: 0.72rem;
}

.bim-demo-note {
  margin: 0.55rem 0 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.72rem;
  line-height: 1.35;
}

/* Off-screen rather than hidden: a bot still fills it in. */
.bim-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Auth artwork ───────────────────────────────────────────────────────── */

/* The photo is a studio shot on a VERY slightly grey background, so a square
   frame shows up as a pale rectangle against the page's white. Rather than
   framing it (or painting a white ring over it), the image itself is masked with
   a radial fade: opaque over the subject, transparent at the edges, so the grey
   corner colour dissolves into whatever the page background is. That also means
   it stays correct if the surface is ever not white - a white gradient overlay
   would not. */
.bim-auth-artwork {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 30rem;
}

.bim-auth-photo {
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* The photo's own straight edges become visible as soon as its studio backdrop is
   darker than the page. The gentleman's is (rgb(230, 221, 214)), so its top (95%
   backdrop), left (100%) and right (47%) read as borders, while the bottom was
   fine (38%, and the part that is backdrop sits under his body).

   A circular fade cannot fix that by itself: the subject's shoulders are 241px
   from the fade's centre, further than the top edge's 211px, so any radius that
   fades the top edge would cut him open. So the radial fade is INTERSECTED with a
   short fade at each of the four edges - the radial keeps the subject, the edge
   fades take the frame's borders to nothing.

   5% (24px of the 480px frame) is the longest that leaves every subject intact:
   the gentleman's hair starts exactly 24px below the top edge, his arm 35px in
   from the left, lady-1's skull 28px below the top, lady-2's arm 100px in. */
.bim-auth-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  -webkit-mask-image: radial-gradient(circle at 50% 44%, #000 40%, rgba(0, 0, 0, 0.92) 54%, transparent 72%),
    linear-gradient(to bottom, transparent, #000 5%),
    linear-gradient(to top, transparent, #000 5%),
    linear-gradient(to right, transparent, #000 5%),
    linear-gradient(to left, transparent, #000 5%);
  mask-image: radial-gradient(circle at 50% 44%, #000 40%, rgba(0, 0, 0, 0.92) 54%, transparent 72%),
    linear-gradient(to bottom, transparent, #000 5%),
    linear-gradient(to top, transparent, #000 5%),
    linear-gradient(to right, transparent, #000 5%),
    linear-gradient(to left, transparent, #000 5%);
  /* The layers are unioned (added) by default, which would defeat the edge fades;
     `intersect` multiplies them instead. The -webkit- keyword is the same thing for
     older engines (Safari still only accepts the legacy spelling). */
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* The register photo's subject stands in the left third of the frame, so the
   square crop is shifted left to bring her to the middle - the mask above and
   the cards below are tuned for a centred subject. The right side of that photo
   is empty backdrop, so spending it on the crop costs nothing. */
.bim-auth-photo--subject-left img {
  object-position: 12% 45%;
}

/* The forgot-password photo is the mirror image: the subject occupies the right
   ~62% of the frame, so the crop is pushed fully right (the maximum shift -
   centring the bounding box exactly would need 107%). Nothing is cut: his body
   runs to the source's right edge, so anything less than 100% would slice it. */
.bim-auth-photo--subject-right img {
  object-position: 100% 45%;
}

/* The floating statistics cards (left / top-right / bottom-right, like the theme's
   original illustration). Positioned in percentages so the whole composition
   scales with the frame, and sized in percentages for the same reason. */
.bim-stat {
  position: absolute;
  height: auto;
  pointer-events: none;
  will-change: transform;
}

.bim-stat--users {
  top: -4%;
  right: -7%;
  width: 47%;
  animation: bim-stat-float 7s ease-in-out infinite;
}

/* Low and out to the left: at 31% it clipped the subject's face. It stops at -7%
   of the frame because the frame sits in a 3rem-padded column, so a bigger
   overhang would touch the viewport edge at the 992px breakpoint. */
.bim-stat--vouchers {
  top: 46%;
  left: -7%;
  width: 42%;
  animation: bim-stat-float 8.5s ease-in-out -2.5s infinite;
}

.bim-stat--revenue {
  right: -6%;
  bottom: 1%;
  width: 42%;
  animation: bim-stat-float 9.5s ease-in-out -5s infinite;
}

@keyframes bim-stat-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* A gentle drift is decoration; never move things for someone who asked not to. */
@media (prefers-reduced-motion: reduce) {
  .bim-stat {
    animation: none;
  }
}

/* ── Auth sign-in tile ──────────────────────────────────────────────────── */

/* The form sits on the app's card surface. Only the width is capped here - the
   theme's .card already brings the radius and the soft shadow the rest of the app
   uses (0.625rem / 0 .125rem .625rem rgba(76,78,100,.22)). */
.bim-auth-tile {
  max-width: 100%;
}

/* ── Auth pages: footer on the floor ─────────────────────────────────────────
   Login is short. With the guest layout's fixed navbar and a ~600px card, the
   page runs out of content well above the fold on a large screen, so the footer
   strip floated in the middle of the page with empty space beneath it.

   `margin-top: auto` on the footer, inside a 100vh column, pushes it to the
   bottom and leaves the card sitting exactly where it was. Growing the content
   instead (flex on the wrapper) would ALSO re-centre the card vertically, which
   is a bigger change than this needs - the wrapper keeps its intrinsic height and
   only the free space moves.

   Scoped to `bim-auth-page`, which layouts/guest.blade.php only puts on the auth
   flow: the landing page's sections assume normal block flow. */
.bim-auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* dvh where supported. On a phone, `100vh` includes the collapsed browser
     chrome, which would leave the footer just below the fold again. */
  min-height: 100dvh;
}

.bim-auth-page > footer {
  margin-top: auto;
}

/* ── Auth header on a phone ──────────────────────────────────────────────────
   The minimal auth navbar holds the brand and one button. At 390px the header has
   about 324px, the wordmark is 209px and the "Create Account" button 179px - 412px
   in total, so at full size they can never share a row. (That is why the layout also
   shortens that one label to "Register" below the sm breakpoint; "Sign In" and
   "Log Out" are short enough either way.)

   With the short label the pair fits, so `nowrap` keeps them on one line: brand hard
   left, button hard right, instead of the previous brand top-left / button
   bottom-right on two rows.

   The LOGO absorbs any remaining squeeze, never the button: the logo still reads
   when scaled down, whereas shrinking the button would break its label onto a second
   line inside the pill. */
@media (max-width: 767.98px) {
  .bim-auth-page .layout-navbar .navbar {
    flex-wrap: nowrap;
  }

  /* Three things have to be true before the logo will actually shrink, and missing
     any one of them leaves the row overflowing off-screen:
       - the brand must opt out of the theme's `flex-shrink: 0`;
       - the whole chain (brand, the <a> inside it) needs `min-width: 0`, because a
         flex item will not go below its content width otherwise and an image is
         content;
       - the image needs a percentage `max-width` to resolve against. */
  .bim-auth-page .layout-navbar .navbar-brand,
  .bim-auth-page .layout-navbar .navbar-brand > * {
    min-width: 0;
  }

  .bim-auth-page .layout-navbar .navbar-brand {
    flex-shrink: 1;
    margin-right: 0.5rem;
  }

  /* The button keeps its size - only the brand gives way. */
  .bim-auth-page .layout-navbar .navbar-nav {
    flex-shrink: 0;
  }

  .bim-auth-page .layout-navbar .bim-brand-logo {
    max-width: 100%;
  }
}

/* ── The auth header must not sit on top of the card ─────────────────────────
   The theme fixes the navbar (`layout-navbar-fixed` on <html>), so it is out of
   flow and floats over whatever follows. The auth pages only offset it with two
   stray <br>s, which is less than the navbar is tall: 24px of the card was hidden
   at 390px, and more once the navbar wrapped to a second row.

   `sticky` rather than `static` or a padded wrapper: a sticky element still
   occupies layout space, so nothing can sit under it and there is no offset to
   keep in sync with the navbar's height (58px on a phone, 75px on a desktop -
   which a hard-coded padding would have to track). It also stays visible while the
   register form scrolls, and it keeps front-main.js's `navbar-active` scroll
   shadow meaningful; `static` would have made that shadow dead code, since a
   header that scrolls away is never over anything.

   Safe because the theme already gives this navbar `z-index: 999!important` and
   `backdrop-filter: unset!important` (nav.layout-navbar in front-page.css), plus
   an opaque background, so scrolled content passes underneath rather than showing
   through.

   The selector is one element plus two classes on purpose: that beats the theme's
   `.layout-navbar-fixed .layout-navbar` on specificity, so this cannot be broken
   by reordering the stylesheets. */
body.bim-auth-page .layout-navbar {
  position: sticky;
  top: 0;
}

/* ── Auth phone row (code + number) ─────────────────────────────────────── */

/* The country code sizes itself from its content (`w-auto` on the select): as a
   3/9 grid column it was 70px, while "+256" plus the theme's select padding and
   the arrow needs ~82px, so the code was clipped. The row uses align-items-stretch
   so the select is as tall as the floating input beside it. */
.phone-row .phone-number {
  /* Lets the number field shrink instead of widening the row. */
  min-width: 0;
}

.phone-row select {
  /* The native select sizes to the widest option ("+256" + the theme's padding
     and arrow = ~81px), which leaves the code touching the edges. 5.5rem gives it
     breathing room; the flex row cannot wrap, so the number field just shrinks. */
  min-width: 5.5rem;
  font-variant-numeric: tabular-nums;
}

/* ── Catch-all: nothing should ever be wider than its column ─────────────── */

.landing-footer img,
.footer-top img {
  max-width: 100%;
  height: auto;
}

/* ── Front-page list icons ──────────────────────────────────────────────── */

/* The theme pins these 16x8 arrows to a fixed pixel size, so they never scale
   with the heading's text size (or with a bumped-up browser font setting).
   Sizing off the font instead keeps the 2:1 ratio and lets the icon grow with
   the text it sits next to. */
.list-unstyled h5 img {
  width: auto;
  height: 0.5em;
  max-width: 100%;
  object-fit: contain;
}

/* -- Landing page --------------------------------------------------------- */

/* The CTA phone. The asset itself was rotated 90 degrees (portrait phone, but
   the portal UI read sideways); it is portrait on disk now, so this only caps it
   - without a cap a 438x905 image fills a half-width column at 1200px+. The
   background is transparent, so it floats on the section. */
.bim-cta-phone {
  width: 100%;
  max-width: 16rem;
  height: auto;
}

/* Pricing: the slider picks a plan, so the emphasis is dynamic. The badge is
   always laid out (visibility, not display) so dragging does not reflow the row
   under the visitor's finger. */
.plan-card {
  transition: outline-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.plan-badge {
  visibility: hidden;
}

.plan-card.is-recommended {
  /* #ee8437, not var(--bs-primary): the theme keeps --bs-primary at Sneat's
     indigo (#666cff) and paints the brand orange onto components instead - so the
     variable would draw an indigo ring around an orange card. Same literal this
     file already uses for the tab slider and the demo form focus ring.

     And an outline, not a box-shadow: these cards carry Bootstrap's `shadow-none`
     utility (`box-shadow: none !important`), which silently cancelled the ring. */
  border-color: #ee8437;
  outline: 0.25rem solid rgba(238, 132, 55, 0.14);
  outline-offset: -1px;
  transform: translateY(-0.25rem);
}

.plan-card.is-recommended .plan-badge {
  visibility: visible;
}

/* The handle's tooltip floats 25px above the track, so the question needs room
   for it - a `mb-*` utility cannot do this (they are !important, and mb-5 = 3rem
   still collided). 4rem = 25px offset + the tooltip's own height + a gap. */
.pricing-picker #pricing-question {
  margin-bottom: 4rem;
}

/* Scoped with the section id on purpose: the theme ships
   `.landing-pricing #slider-pricing { margin: 0 auto }` inside a
   `min-width: 992px` query, which outranks any class-only selector and silently
   zeroes the bottom margin below the pips (that is how the readout ended up on
   top of the 1,000 / 5,000 labels). (1,2,0) beats its (1,1,0). */
#landingPricing .pricing-picker .noUi-target {
  max-width: 46rem;
  /* The pip labels hang 80px below the track (absolutely positioned, so they do
     not add height to the slider) - without this margin the value readout below
     lands on top of them. 5.75rem = 80px of pips + a 12px gap. */
  margin: 0 auto 5.75rem;
}

.pricing-picker .noUi-value {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color, #6d6b77);
}

/* Contact tile: three promises under the copy. The numbered chip is the anchor -
   without it the list reads as another paragraph in an already-paragraphy tile. */
.bim-contact-steps li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
  line-height: 1.45;
}

.bim-contact-steps li:last-child {
  margin-bottom: 0;
}

.bim-step-num {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.6rem;
  text-align: center;
}

/* How it works: the icon chip replaces the theme's artwork cards, so the strip
   stays three columns wide all the way down to the small breakpoints. */
.bim-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  /* Brand orange again, for the reason given on .plan-card.is-recommended. */
  background: rgba(238, 132, 55, 0.12);
  color: #ee8437;
}

.bim-step-card {
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* border-color, not a shadow: the same `shadow-none` utility sits on these cards. */
.bim-step-card:hover {
  transform: translateY(-0.25rem);
  border-color: #ee8437;
}

@media (prefers-reduced-motion: reduce) {
  .plan-card,
  .plan-card.is-recommended,
  .bim-step-card,
  .bim-step-card:hover {
    transition: none;
    transform: none;
  }
}

/* At lg the contact tile is only 5/12 wide, so the display-6 headline wrapped to
   five lines and made the tile ~520px tall next to a 407px form. Dropping it to
   h4 size at that width balances the pair; below lg the columns stack, where the
   large headline is what makes the tile read. */
@media (min-width: 992px) {
  #landingContact .bg-primary .display-6 {
    font-size: 1.75rem;
    line-height: 1.3;
  }
}