/*
 * Skeleton / shimmer loading styles (Landing + product pages).
 *  - .im-skel*            section skeletons (SectionSkeleton.vue, used by LandingLazySection)
 *  - .im-hero-skel*       full-page skeleton overlay (first load + in-app navigation)
 *  - .im-hero-skel__art*  hero image placeholders
 *  - img.im-img-loading   shimmer behind an <img> until it loads
 * Loaded by app.blade.php on skeleton pages and by Utils/skeletonCss.js on in-app navigation.
 */
/* ── Section skeleton shimmer (.im-skel) ───────────────────────────
 * Placeholder shown by LandingLazySection while a below-the-fold section
 * is waiting for the viewport / its JS chunk. Sized to match the real
 * section so swapping content in causes no layout shift.
 */

.im-skel {
  --im-skel-base: #eceff1;
  --im-skel-shine: #f8f9fa;
  width: 100%;
  overflow: hidden;
  padding: 8px 16px;
  box-sizing: border-box;
}

.im-skel-bone {
  display: block;
  border-radius: 8px;
  background-color: var(--im-skel-base, #eceff1);
  background-image: linear-gradient(
    90deg,
    var(--im-skel-base, #eceff1) 0%,
    var(--im-skel-shine, #f8f9fa) 50%,
    var(--im-skel-base, #eceff1) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: im-skel-shimmer 1.4s ease-in-out infinite;
}

.im-skel-bone--circle {
  border-radius: 50%;
  flex-shrink: 0;
}

.im-skel-bone--line {
  height: 14px;
  border-radius: 6px;
}

.im-skel-bone--title {
  height: 22px;
  border-radius: 6px;
}

.im-skel-bone--media {
  width: 100%;
  height: 120px;
  border-radius: 12px;
}

.im-skel-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid #eef0f2;
  border-radius: 16px;
  background: #fff;
}

.im-skel-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

@keyframes im-skel-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .im-skel-bone {
    animation: none;
    background-image: none;
  }
}


/* ═══ Page skeleton overlay (.im-hero-skel) ═══════════════════════════════
 * Two renderers share these classes:
 *   - partials/hero-skeleton.blade.php  first page load      (.im-hero-skel--boot)
 *   - Components/PageNavSkeleton.vue    in-app navigation
 * Both reuse each page's real hero classes (insurance-first-content-*, car-heading, …),
 * so the page CSS lays things out; here we only add the overlay, header and bone sizes.
 */

.im-hero-skel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  background: #fff;
  --im-skel-base: #e6eaed;
  --im-skel-shine: #f6f8f9;
}

/* First load only: fade out once the app is ready; collapse after 30s if it never boots. */
.im-hero-skel--boot {
  animation: im-hero-skel-expire 0s linear 30s forwards;
}

/* In-app navigation: below the header (top is set inline) and under the mobile menu
   (z-index 1100), so the menu can animate closed on top of it. */
.im-hero-skel--nav {
  z-index: 1050;
  opacity: 0;
  animation: im-nav-skel-in 180ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: opacity;
}

/* Customer bottom tabs stay visible while Products / Policies / Notifications switch */
@media (max-width: 575.98px) {
  .im-hero-skel--nav.im-hero-skel--customer,
  .im-hero-skel--nav.im-hero-skel--notifications {
    bottom: 60px;
  }
}

/* Keep both skeleton layouts in one viewport while the generic fallback cross-fades
   into the destination-specific skeleton. */
.im-nav-skel__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.im-nav-skel-swap-enter-active,
.im-nav-skel-swap-leave-active {
  transition: opacity 140ms ease;
}

.im-nav-skel-swap-enter-from,
.im-nav-skel-swap-leave-to {
  opacity: 0;
}

@keyframes im-nav-skel-in {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .im-hero-skel--nav {
    opacity: 1;
    animation: none;
  }

  .im-nav-skel-swap-enter-active,
  .im-nav-skel-swap-leave-active {
    transition: none;
  }
}

/* Product pages (desktop): the hero stays one skeleton (text + art) until its art has loaded,
   so the real text and image appear together. Sits over the real hero inside its section. */
.im-hero-skel--layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  touch-action: auto;
}

@media (max-width: 575.98px) {
  .im-hero-skel--layer {
    display: none;
  }
}

/* Generic hero skeleton (PageNavSkeleton, first visit only): shown while the next page's
   stylesheet is still downloading, so it uses no page CSS. Centred text over a soft art box;
   Landing ("--split") has the text on the left and the box on the right. */
.im-skel-generic {
  position: relative;
  height: 40.625rem;
  padding-top: 5rem;
}

.im-skel-generic__art {
  position: absolute;
  inset: 2.5rem 2rem;
  border-radius: 1.5rem;
  --im-skel-base: #f3f5f7;
  --im-skel-shine: #fafbfc;
}

.im-skel-generic__text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.im-skel-generic__h {
  width: min(31.25rem, 90%);
  height: 2.75rem;
  border-radius: 0.5rem;
}

.im-skel-generic__h + .im-skel-generic__h {
  width: min(21rem, 65%);
}

.im-skel-generic__line {
  width: 11rem;
  margin-top: 1rem;
}

.im-skel-generic__btn {
  width: 11.0625rem;
  height: 3.5rem;
  margin-top: 2.5rem;
  border-radius: 1.875rem;
}

@media (min-width: 992px) {
  .im-skel-generic--split .im-skel-generic__art {
    left: 44.375rem;
    --im-skel-base: #e6eaed;
    --im-skel-shine: #f6f8f9;
  }

  .im-skel-generic--split .im-skel-generic__text {
    align-items: flex-start;
    padding-left: 8.5rem;
    max-width: 42.375rem;
  }
}

@media (max-width: 575.98px) {
  .im-skel-generic {
    display: flex;
    flex-direction: column;
    height: auto;
    padding-top: 3rem;
  }

  .im-skel-generic__art {
    position: static;
    order: 2;
    height: 24rem;
    margin: 2.5rem 1.25rem 0;
    border-radius: 1.25rem;
    --im-skel-base: #e6eaed;
  }

  .im-skel-generic__h {
    height: 1.5rem;
  }

  .im-skel-generic__line {
    margin-top: 0.25rem;
  }

  .im-skel-generic__btn {
    width: 8.9375rem;
    height: 3rem;
    margin-top: 1rem;
  }
}

body.inertia-hydrated:not(.im-art-hold) .im-hero-skel--boot {
  pointer-events: none;
  animation: im-hero-skel-out 0.3s ease-out forwards;
}

@keyframes im-hero-skel-out {
  0% {
    opacity: 1;
  }

  99% {
    opacity: 0;
    width: 100%;
    height: 100%;
  }

  100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
}

@keyframes im-hero-skel-expire {
  to {
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }
}

/* The real hero background is not loaded here: a shimmer box (see .im-hero-skel__art) stands in. */
.im-hero-skel [class*="insurance-first-content"] {
  background-image: none;
}

/* ── Header ─────────────────────────────────────────────────────── */

.im-hero-skel__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 75px;
  padding: 0 2.625rem;
  box-sizing: border-box;
}

.im-hero-skel__mark {
  width: 44px;
  height: 44px;
}

.im-hero-skel__wordmark {
  width: 6.5rem;
  height: 1.5rem;
}

.im-hero-skel__pill {
  width: 8.5rem;
  height: 2.25rem;
  border-radius: 1.125rem;
}

.im-hero-skel__nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.im-hero-skel__account {
  width: 5.5rem;
}

/* Mobile-only round buttons (notifications + menu). */
.im-hero-skel__mob {
  display: none;
  width: 2rem;
  height: 2rem;
}

/* Below 992px the real header collapses to the 60px hamburger layout. */
@media (max-width: 991.98px) {
  .im-hero-skel__header {
    height: 60px;
    padding: 0 20px;
  }

  .im-hero-skel__nav,
  .im-hero-skel__pill,
  .im-hero-skel__account {
    display: none;
  }

  .im-hero-skel__mob {
    display: block;
  }

  .im-hero-skel__mob:first-of-type {
    margin-left: auto;
  }
}

@media (max-width: 575.98px) {
  .im-hero-skel__header {
    height: auto;
    min-height: 60px;
    padding: 8px 20px;
    border-bottom: 1px solid rgba(74, 74, 74, 0.1);
  }

  .im-hero-skel__mark {
    width: 32px;
    height: 32px;
  }

  .im-hero-skel__wordmark {
    width: 5rem;
    height: 1.125rem;
  }

  .im-hero-skel__account {
    display: none;
  }

  .im-hero-skel__mob {
    display: block;
  }

  .im-hero-skel__mob:first-of-type {
    margin-left: auto;
  }
}

/* ── Hero text ──────────────────────────────────────────────────── */

/* Heading bones follow the real h1/h2's own font-size and line-height (any breakpoint). */
.im-hero-skel__lh {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.im-hero-skel__lh > .im-skel-bone {
  height: 0.72em;
  margin-block: calc((1lh - 0.72em) / 2);
  border-radius: 0.16em;
}

/* Product heroes centre their text. */
.im-hero-skel .text-center .im-hero-skel__lh > .im-skel-bone {
  margin-inline: auto;
}

/* Button bone. Landing's "Purchase Now" is bigger than the product pages' button. */
.im-hero-skel__btn {
  width: 11rem;
  height: 3.75rem;
  border-radius: 1.875rem;
}

.im-hero-skel:not(.im-hero-skel--landing) .im-hero-skel__btn {
  width: 11.0625rem;
  height: 3.5rem;
  margin-inline: auto;
}

/* Travel's "Watch demo" link under the button. */
.im-hero-skel__demo {
  display: block;
  width: 8.0625rem;
  height: 1.75rem;
  margin: 1.3125rem auto 0;
}

/* Solar's "Security starts from…" chip text. */
.im-hero-skel__chip {
  width: 13.3rem;
  height: 1.75rem;
}

/* Solar's heading wraps onto a second line on mobile only. */
.im-hero-skel__wrap-line {
  display: none;
}

@media (max-width: 575.98px) {
  .im-hero-skel__btn {
    width: 10.5rem;
    height: 3rem;
  }

  .im-hero-skel:not(.im-hero-skel--landing) .im-hero-skel__btn {
    width: 8.9375rem;
    height: 3rem;
  }

  .im-hero-skel__demo {
    width: 8.125rem;
    height: 1.5rem;
    margin-top: 1.375rem;
  }

  .im-hero-skel__chip {
    width: 10.125rem;
    height: 0.75rem;
  }

  .im-hero-skel__wrap-line {
    display: block;
    width: 62%;
    margin-inline: auto;
  }
}

/* ── Hero art placeholders ──────────────────────────────────────── */

/* Section that holds an art box; the hero content stays above the box. */
.im-art-host {
  position: relative;
}

.im-art-host > [class*="insurance-first-content"] {
  position: relative;
  z-index: 1;
}

/* Desktop/tablet box. Product heroes put their text on top of the art, so the box is softer
   than the text bones. */
.im-hero-skel__art {
  position: absolute;
  inset: 2.5rem 2rem;
  border-radius: 1.5rem;
  --im-skel-base: #f3f5f7;
  --im-skel-shine: #fafbfc;
}

/* Landing: the art is only on the right, beside the heading (margin 8.5rem + width 33.875rem). */
.im-hero-skel__art--right {
  left: calc(52% + 1rem);
  --im-skel-base: #e6eaed;
  --im-skel-shine: #f6f8f9;
}

@media (min-width: 1200px) {
  .im-hero-skel__art--right {
    left: 44.375rem;
  }
}

/* Mobile: the art is an <img> in .back-image-logo, so the box fills that frame instead. */
.im-hero-skel__art-m {
  width: calc(100% - 2.5rem);
  height: calc(100% - 4rem);
  margin: 2rem 1.25rem;
  border-radius: 1.25rem;
}

@media (max-width: 575.98px) {
  .im-hero-skel__art {
    display: none;
  }
}

/* Solar: the art is an <img> with its own aspect ratio (class solar-hero__art); text sits on top.
   The box keeps the image's full size (so the hero is the same height); a transparent side
   border insets the visible shimmer. */
.solar-hero .im-hero-skel__art-solar {
  box-sizing: border-box;
  border-inline: 2rem solid transparent;
  background-clip: padding-box;
  border-radius: 1.5rem;
  --im-skel-base: #f3f5f7;
  --im-skel-shine: #fafbfc;
}

@media (max-width: 575.98px) {
  .solar-hero .im-hero-skel__art-solar {
    border-inline-width: 1.25rem;
    /* the box sits right under the button: leave some space above it */
    border-top: 1.5rem solid transparent;
  }
}

/* ── Landing only: badge, heading, car button, logos, "Protecting…" heading ── */

.im-hero-skel--landing .insurance-first-bttn > .im-skel-bone--circle {
  width: 3.75rem;
  height: 3.75rem;
  flex: 0 0 3.75rem;
}

.im-hero-skel__logo {
  flex-shrink: 0;
  width: 6.625rem;
  height: 3.25rem;
  margin-block: 1.7rem;
  border-radius: 1rem;
}

.im-hero-skel__dealing {
  width: 100%;
  max-width: 52.875rem;
}

.im-hero-skel__dealing > .im-skel-bone {
  margin-inline: auto;
}

.im-hero-skel__dealing > .im-skel-bone:nth-child(3) {
  display: none;
}

@media (max-width: 575.98px) {
  .im-hero-skel--landing .electric-text-bttn .im-skel-bone {
    width: 22em !important;
    height: 0.875rem !important;
  }

  .im-hero-skel--landing h1.im-hero-skel__lh {
    text-align: center;
  }

  .im-hero-skel--landing h1.im-hero-skel__lh > .im-skel-bone {
    margin-inline: auto;
  }

  .im-hero-skel--landing h1.im-hero-skel__lh > .im-skel-bone:nth-child(1) {
    width: 96% !important;
  }

  .im-hero-skel--landing h1.im-hero-skel__lh > .im-skel-bone:nth-child(2) {
    width: 66% !important;
  }

  .im-hero-skel--landing h1.im-hero-skel__lh > .im-skel-bone:nth-child(3) {
    display: none;
  }

  .im-hero-skel--landing .insurance-first-bttn > .im-skel-bone--circle {
    width: 2.75rem;
    height: 2.75rem;
    flex-basis: 2.75rem;
  }

  .im-hero-skel__dealing > .im-skel-bone:nth-child(3) {
    display: block;
  }
}

@media (max-width: 767.98px) {
  .im-hero-skel__logo {
    width: 5rem;
    height: 2.5rem;
    margin-block: 1.25rem;
  }
}

/* ── Section skeleton: layouts mirroring the real sections ────────── */

.im-skel--cards,
.im-skel--testimonials,
.im-skel--faqs {
  padding: 0;
}

/* ProductCards (.offer-card sizes are scoped inside ProductCards.vue; keep in sync). */
.im-skel-offer-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.im-skel-offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 15.625rem;
  height: 26.549rem;
  gap: 2.125rem;
  padding: 0.813rem;
  box-sizing: border-box;
  border-radius: 0.813rem;
  background-color: #F3FAFC;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 12px 0px, rgba(0, 0, 0, 0.21) 0px 51px 49px -49px;
}

.im-skel-offer__img {
  width: 8.4rem;
  height: 5rem;
}

.im-skel-offer__body,
.im-skel-offer__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.im-skel-offer__body {
  gap: 1.068rem;
}

.im-skel-offer__footer {
  gap: 0.799rem;
}

.im-skel-offer__btn {
  width: 9rem;
  height: 3rem;
  border-radius: 1.875rem;
}

/* Desktop only: 3 cards per row, like ProductCards.vue (.offer-grid max-width: 50rem). */
@media (min-width: 992px) {
  .im-landing-skel .im-skel-offer-grid,
  .im-hero-skel--landing .im-skel-offer-grid {
    max-width: 50rem;
    margin: 0 auto;
  }
}

@media (max-width: 767.98px) {
  .im-skel--cards {
    padding: 0 15px;
  }

  .im-skel-offer-grid {
    gap: 0.75rem;
  }

  .im-skel-offer {
    width: calc(50% - 0.375rem);
    height: 17rem;
    gap: 1.5rem;
  }

  .im-skel-offer:nth-child(n + 5) {
    display: none;
  }

  .im-skel-offer__img {
    width: 5.5rem;
    height: 2.5rem;
  }

  .im-skel-offer__body .im-skel-bone--line {
    display: none;
  }

  .im-skel-offer__btn {
    width: 7rem;
    height: 2.5rem;
  }
}

/* Testimonials / FAQs reuse the real classes; just tidy the bone spacing. */
.im-skel-reuse .im-skel-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

#im-faqs.im-skel-reuse .faq-card .im-skel-bone--title {
  margin-bottom: 0.25rem;
}

/* Mobile FAQs are an accordion (<576px); desktop cards are hidden by #im-faqs rules. */
#im-faqs .im-skel-accordion {
  display: none;
}

@media (max-width: 575.98px) {
  #im-faqs .im-skel-accordion {
    display: flex;
    flex-direction: column;
  }

  .im-skel-accordion__item {
    display: flex;
    align-items: center;
    height: 3.75rem;
    margin-bottom: 22px;
    padding: 0 16px;
    border: 1px solid rgba(74, 74, 74, 0.2);
    border-radius: 12px;
    background-color: rgba(243, 250, 252, 1);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 12px 0px, rgba(0, 0, 0, 0.21) 0px 51px 49px -49px;
  }
}

.im-skel-carousel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* ═══ In-page placeholders (Landing + product pages after in-app navigation) ═══
 * Same boxes as the overlay, rendered by the page until the hero art has loaded
 * (see Composables/useHeroArtPlaceholder.js).
 */

/* Mobile: the box covers the (still hidden) image, inside its frame. */
.im-hero-skel__art-m--page {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* While the art loads the image is invisible; once loaded it fades in as the box fades out.
   (!important: the first-load critical CSS forces hero images to opacity 1.) */
img.im-art-pending {
  opacity: 0 !important;
}

.back-image-logo.im-art-host .back-image-logo__lcp,
.solar-hero__art {
  transition: opacity 0.3s ease;
}

/* Solar: the <picture> shows a shimmer box (inset like the overlay's) until the image loads;
   a pseudo-element keeps the image at its full size so the hero doesn't change height. */
.solar-hero picture.im-art-loading {
  position: relative;
  display: block;
}

.solar-hero picture.im-art-loading::before {
  content: "";
  position: absolute;
  inset: 0 2rem;
  border-radius: 1.5rem;
  background: linear-gradient(90deg, #f3f5f7 0%, #fafbfc 50%, #f3f5f7 100%);
  background-size: 200% 100%;
  animation: im-skel-shimmer 1.4s ease-in-out infinite;
}

@media (max-width: 575.98px) {
  .solar-hero picture.im-art-loading::before {
    inset: 1.5rem 1.25rem 0; /* space above: the box sits right under the button */
  }
}

/* Vue <Transition name="im-fade"> around the in-page boxes. */
.im-fade-leave-active {
  transition: opacity 0.3s ease;
}

.im-fade-leave-to {
  opacity: 0;
}

/* ── Shimmer behind an <img> until it has loaded ──────────────────── */

img.im-img-loading {
  color: transparent;
  background-color: #eceff1;
  background-image: linear-gradient(90deg, #eceff1 0%, #f8f9fa 50%, #eceff1 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: im-skel-shimmer 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  img.im-img-loading {
    animation: none;
    background-image: none;
  }
}

/* Partner-logo strip: each logo fades in once loaded (no grey boxes). */
.bank-imgs-logo img {
  transition: opacity 0.4s ease;
}

.bank-imgs-logo img.im-img-fade {
  opacity: 0;
}

/* ═══ Below the hero: full-screen skeletons ═══════════════════════════════ */

/* Product pages' second section (ProductBelowHeroSkeleton / product-skeleton-below-hero):
   the heading is one line from 992px up, two lines below that. */
@media (min-width: 992px) {
  .im-hero-skel__wrap-lg {
    display: none;
  }
}

/* Rating faces: 128px (48px on phones); Solar's stars are 110px (56px below 992px). */
.im-hero-skel__emoji {
  width: 128px;
  height: 128px;
}

.im-hero-skel--solar .im-hero-skel__emoji {
  width: 110px;
  height: 115px;
}

@media (max-width: 991.98px) {
  .im-hero-skel--solar .im-hero-skel__emoji {
    width: 56px;
    height: 59px;
  }
}

@media (max-width: 575.98px) {
  .im-hero-skel__emoji {
    width: 48px;
    height: 48px;
  }
}

/* Business hero (BusinessHeroSkeleton / business-skeleton-hero): buttons, form fields and the
   message + submit row. The real form card animates in; its skeleton must not. */
.im-hero-skel .biz-form-card,
.im-hero-skel .biz-field {
  animation: none;
}

.im-hero-skel__biz-btn {
  width: 11.5rem;
  height: 3rem;
  border-radius: 999px;
}

.im-hero-skel__biz-input {
  height: 46px;
  border-radius: 0.5rem;
}

.im-hero-skel__biz-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 13px;
}

.im-hero-skel__biz-message {
  height: 6rem;
  border-radius: 0.5rem;
}

.im-hero-skel__biz-submit {
  height: 45px;
  border-radius: 999px;
}

@media (min-width: 768px) {
  .im-hero-skel__biz-input {
    height: 54px;
  }

  .im-hero-skel__biz-bottom {
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
  }

  .im-hero-skel__biz-message {
    flex: 2;
    height: 80px;
  }

  .im-hero-skel__biz-submit {
    flex: 1;
  }
}

@media (max-width: 575.98px) {
  .im-hero-skel__biz-btn {
    width: 11rem;
    height: 2.75rem;
  }
}

/* Generic (first visit) skeleton: a section under the hero, so it fills the screen too. */
.im-skel-generic-below {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 3.5rem 1.25rem;
}

.im-skel-generic-below__row {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.im-skel-generic-below__row > .im-skel-bone {
  width: 6rem;
  height: 6rem;
}

@media (max-width: 575.98px) {
  .im-skel-generic-below__row > .im-skel-bone {
    width: 3rem;
    height: 3rem;
  }
}

/* Second-section paragraph bones: the real paragraph shrinks to its text, so fixed widths. */
.im-hero-skel__p-line {
  width: min(34.25rem, calc(100vw - 2.5rem));
}

.im-hero-skel__p-line--short {
  width: min(22rem, 60vw);
}

/* Business: the heading/description boxes shrink to their content, so give the bone column the
   box's full width (its own max-width still applies); the badge matches the real pill. */
.im-hero-skel .biz-heading .im-hero-skel__lh,
.im-hero-skel .biz-hero__desc .im-hero-skel__lh {
  width: 100vw;
  max-width: 100%;
}

.im-hero-skel .biz-badge {
  height: 40px;
}

.im-hero-skel .biz-badge .im-skel-bone {
  width: 21.25rem;
}

@media (max-width: 575.98px) {
  .im-hero-skel .biz-badge {
    height: 36px;
  }

  .im-hero-skel .biz-badge .im-skel-bone {
    width: 13.75rem;
  }
}

/* Intro banners above the header (first-load skeleton): same lime strip as the real banners. */
.im-hero-skel__banners {
  overflow: hidden;
  background: #dfff00;
}

.im-hero-skel__banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 3rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  --im-skel-base: rgba(17, 24, 39, 0.14);
  --im-skel-shine: rgba(255, 255, 255, 0.42);
}

.im-hero-skel__banner-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

.im-hero-skel__banner-copy {
  width: min(34rem, 48vw);
  height: 0.75rem;
}

.im-hero-skel__banner-meta {
  width: 5rem;
  height: 0.75rem;
}

.im-hero-skel__banner-cta {
  width: 6.25rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 999px;
}

.im-hero-skel__banner-close {
  position: absolute;
  right: 1.5rem;
  width: 0.875rem;
  height: 0.875rem;
}

.im-hero-skel__banner[data-type="thumbnail"] .im-hero-skel__banner-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
}

@media (max-width: 575.98px) {
  .im-hero-skel__banner {
    gap: 0.5rem;
    padding: 0 2.25rem 0 0.75rem;
  }

  .im-hero-skel__banner-copy {
    width: min(12rem, 48vw);
  }

  .im-hero-skel__banner-meta {
    display: none;
  }

  .im-hero-skel__banner-cta {
    width: 4.75rem;
    height: 1.75rem;
  }

  .im-hero-skel__banner-close {
    right: 0.75rem;
  }
}

/* Extra block under Solar's testimonials (fills tall tablet screens). */
.im-hero-skel__more {
  margin-top: 3rem;
}


/* Reserve the scrollbar gutter from the very first paint. WebLayout.vue sets the same rule,
   but its CSS only arrives with the JS bundle - the scrollbar then popped in and shifted the page. */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* First-load overlay must not trap touch/wheel scrolling while the app boots. */
.im-hero-skel--boot {
  touch-action: auto;
  overscroll-behavior: auto;
}

/* ═══ Landing below-hero skeleton (Components/LandingSkeleton/*) ═══════ */
.im-landing-skel .im-lsk-revolution-title { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.im-landing-skel .im-lsk-revolution-title > i { height: 2.4rem; }

/* Steps: column per step (desktop/tablet) */
.im-landing-skel .im-lsk-step-num { width: 2.25rem; height: 2.25rem; margin: 0 auto; }
.im-landing-skel .im-lsk-step-icon { width: 113px; height: 113px; margin: 34px auto; }
.im-landing-skel .im-lsk-step-text { width: 70%; height: 39px; margin: 0 auto; }

/* Zero charges */
.im-landing-skel .im-lsk-money-title { width: min(34rem, 85%); height: 156px; }
.im-landing-skel .im-lsk-pill { width: 100%; max-width: 17.3rem; height: 5rem; border-radius: 5rem; }
.im-landing-skel .im-lsk-coin { width: 17.75rem; height: 17.75rem; flex-shrink: 0; }
.im-landing-skel .im-lsk-money-caption { width: 12rem; height: 1.5rem; }
.im-landing-skel .im-lsk-emoji { width: 16%; max-width: 7.25rem; aspect-ratio: 1; }
.im-skel-para { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; height: 26px; }
.im-skel-para > :nth-child(2) { display: none; }

/* Features icon grid: real .insurance-sixth-desktop grid; only the bones are ours */
.im-landing-skel .im-lsk-feature-icon { width: 5rem; height: 5rem; margin: 0 auto; }

@media (max-width: 575.98px) {
  .im-landing-skel .im-lsk-step-num { width: 29px; height: 29px; margin: 0; flex-shrink: 0; }
  .im-landing-skel .im-lsk-step-icon { width: 59px; height: 59px; margin: 0; flex-shrink: 0; }
  .im-landing-skel .im-lsk-step-text { width: 9.5rem; height: 1rem; margin: 0; }
  .im-landing-skel .im-lsk-pill { width: 208px; height: 54px; }
  .im-landing-skel .im-lsk-coin { width: 154px; height: 164px; margin: 0 auto; border-radius: 50%; }
  .im-landing-skel .im-lsk-money-title { height: 96px; }
  .im-landing-skel .im-lsk-money-caption { height: 36px; }
  .im-landing-skel .im-lsk-emoji { aspect-ratio: auto; height: 129px; }
  .im-skel-para { height: 44px; }
  .im-skel-para > :nth-child(2) { display: block; }
}

/* Real below-hero content while its images load: laid out (so images can load) but invisible
   and out of the scroll height; the skeleton stands in for it. */
.im-landing-pending { height: 0; overflow: hidden; visibility: hidden; }

@media (min-width: 768px) {
  .im-skel-single-md { display: none !important; }
}

@media (min-width: 992px) {
  .im-skel-single-lg { display: none !important; }
}

/* Tablet: the zero-charges title is shorter than on laptop. */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .im-landing-skel .im-lsk-money-title { height: 108px; }
}

/* ═══ Product page below-hero skeletons (Components/ProductSkeleton/*) ═══ */
.im-product-skel .im-hero-skel__lh > .im-skel-bone { margin-inline: auto; }

/* Solar needs comparison (the real component's styles are scoped to it) */
.im-lsk-needs { display: flex; flex-direction: column; align-items: center; gap: 3.5rem; padding: 6.25rem 2.5rem; }
.im-lsk-needs__card { width: min(77.5rem, 100%); border: 1px solid rgba(74, 74, 74, 0.2); border-radius: 0.75rem; overflow: hidden; }
.im-lsk-needs__banner { width: 100%; aspect-ratio: 1240 / 400; border-radius: 0; }
.im-lsk-needs__cols { display: grid; grid-template-columns: 1fr 1fr; }
.im-lsk-needs__col { display: flex; flex-direction: column; gap: 0.9rem; padding: 2rem; }
@media (max-width: 575.98px) {
  .im-lsk-needs { padding: 3rem 1rem; gap: 2rem; }
  .im-lsk-needs__cols { grid-template-columns: 1fr; }
}

@media (min-width: 576px) {
  .im-landing-skel .im-lsk-steps--tall .im-lsk-step-text { height: 56px; }
}

/* Marketplace text blocks (label + big line), sized like the real "Get a quote / In < 20 sec" copy */
.im-landing-skel .im-lsk-mk-label { width: 10rem; height: 1.7rem; margin-bottom: 0.8rem; }
.im-landing-skel .im-lsk-mk-big { width: 11rem; height: 1.9rem; margin-bottom: 0.6rem; }
.im-landing-skel .im-lsk-mk-big--short { width: 8rem; }
.im-hero-skel__dealing { margin-inline: auto; }
@media (max-width: 575.98px) {
  .im-landing-skel .im-lsk-mk-label { width: 7rem; }
  .im-landing-skel .im-lsk-mk-big { width: 7.5rem; }
}
@media (min-width: 576px) {
  .im-landing-skel .text-block-first .im-lsk-mk-label { width: 11.4rem; }
  .im-landing-skel .text-block-second .im-lsk-mk-label,
  .im-landing-skel .text-block-second .im-lsk-mk-big { width: 15.9rem; }
  .im-landing-skel .text-block-second .im-lsk-mk-big--short { width: 12rem; }
}
@media (max-width: 575.98px) {
  .im-landing-skel .im-lsk-mk-big--short { display: none; }
  .im-landing-skel .im-lsk-mk-label { height: 1.2rem; margin-bottom: 0.5rem; }
  .im-landing-skel .im-lsk-mk-big { height: 1.4rem; margin-bottom: 0.4rem; }
}

/* Car needs cards: title (two lines) and check rows (two lines, last one line) */
.im-landing-skel .im-lsk-needs-title { display: flex; flex-direction: column; gap: 0.6rem; height: 80px; padding-top: 0.5rem; }
.im-landing-skel .im-lsk-needs-title > i { height: 1.4rem; }
.im-landing-skel .im-lsk-needs-text { display: flex; flex-direction: column; flex: 1; }
.im-landing-skel .im-lsk-needs-text > i { height: 14px; margin-block: 4px; }

/* ═══ Business below-hero skeleton (Components/BusinessSkeleton/*) ═══ */
.im-lsk-biz-pill { width: 11rem; height: 2.5rem; border-radius: 2rem; display: block; }
.biz-offer .im-hero-skel__lh > .im-skel-bone,
.biz-why .im-hero-skel__lh > .im-skel-bone,
.biz-review .im-hero-skel__lh > .im-skel-bone,
.biz-solution .im-hero-skel__lh > .im-skel-bone { margin-inline: auto; }

/* ═══ Footer pages (FooterPageSkeleton / partials/footer-skeleton.blade.php) ══════════════════
 * Hero and body reuse the pages' own classes (FAQS-section, insurance-first-content, contact-container,
 * takaful-card, social-media-card, insureMart-blog-card…); only the bone sizes are set here.
 */

/* The hero text wrapper only exists to carry the feedback / blogs wrapper classes. */
.im-skel-hero-text {
  display: contents;
}

/* Mobile banner art (the faqs/contact/partners illustrations are short strips). */
.im-hero-skel__art-m--banner {
  /* The frame has the art's height (or its padding); the bone fills it, inset a little. */
  position: absolute;
  inset: 0.5rem 1.25rem;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 1rem;
}

/* Hero buttons: "Apply Now" is the default size, "Add Review" the large one. */
.im-hero-skel .im-hero-skel__btn.im-hero-skel__btn--md {
  width: 125px;
  height: 48px;
}

.im-hero-skel .im-hero-skel__btn.im-hero-skel__btn--lg {
  width: 157px;
  height: 56px;
}

/* A line that exists on desktop/tablet only (the wrap-line class is its mobile-only twin). */
@media (max-width: 575.98px) {
  .im-hero-skel__line-sm-up {
    display: none;
  }

  .im-hero-skel .im-hero-skel__btn.im-hero-skel__btn--md {
    width: 122px;
    height: 44px;
  }

  .im-hero-skel .im-hero-skel__btn.im-hero-skel__btn--lg {
    width: 124px;
    height: 48px;
  }
}

/* Blogs hero search box (558px wide on desktop, as the real form). */
.im-skel-search {
  display: block;
  width: 100%;
  height: 56px;
  border-radius: 0.5rem;
}

/* FAQs: category tabs. */
.im-skel-tabs {
  display: flex;
  gap: 0.5rem;
  width: min(688px, 100%);
  height: 51px;
  margin: 0 auto 3rem;
}

.im-skel-tabs > .im-skel-bone {
  flex: 1;
  height: 100%;
  border-radius: 0.5rem;
}

@media (max-width: 575.98px) {
  .im-skel-tabs {
    height: 36px;
    margin-bottom: 0.75rem;
  }
}

/* Contact / careers form fields. */
.im-skel-field {
  flex: 1 1 auto; /* grows across a row, keeps its 56px height in a column */
  height: 56px;
  border-radius: 0.75rem;
}

.im-skel-field--area {
  flex: none;
  width: 100%;
  height: 122px;
}

.im-skel-field--file {
  flex: none;
  width: 100%;
  height: 116px;
}

.im-skel-field--btn {
  flex: none;
  width: 7.8rem;
  height: 48px;
  border-radius: 999px;
}

@media (max-width: 575.98px) {
  .im-skel-field--file {
    height: 140px;
  }

  .im-skel-field--btn {
    height: 44px;
  }
}

/* Feedback video cards (the card class sets the width; the bone fills it). */
.im-skel-video {
  display: block;
  width: 100%;
  height: 377px;
  border-radius: inherit;
}

.user-video-card.im-skel-video-card {
  background: var(--im-skel-base, #eceff1);
  box-shadow: none;
}

/* Social media icon tile. */
.im-skel-social-icon {
  width: 101px;
  height: 101px;
  border-radius: 1rem;
}

@media (max-width: 575.98px) {
  .im-skel-social-icon {
    width: 42px;
    height: 42px;
    border-radius: 0.5rem;
  }
}

/* Blogs: category chips and the post image. */
.im-skel-chip {
  display: block;
  height: 37px; /* on phones the nav-item adds 12px around it: 49px, like the real chip */
  border-radius: 999px;
}

.insureMart-blog-card > .im-skel-bone.blog-img {
  height: 200px;
}

/* Careers job summary: the two detail rows sit 16px apart (each row is one line tall). */
.im-skel-job-meta {
  gap: 1rem;
}

/* Careers: the intro text and the file box take more lines below 992px (the form column is narrower). */
.im-hero-skel__line-lg-down {
  display: none;
}

@media (max-width: 991.98px) {
  .im-hero-skel__line-lg-down {
    display: block;
  }

  .im-skel-field--file {
    height: 140px;
  }
}

/* Feedback: the heading column has the width its real text gives it (353px), and shrinks like it. */
@media (min-width: 576px) {
  .im-skel-videotext {
    flex: 0 1 353px;
  }
}

/* Footer pages share class names with Landing, whose styles can still be active while their skeleton is up
   (the page we are leaving keeps its scope). Landing gives the hero a fixed aspect ratio; footer heroes grow
   with their text. */
.im-hero-skel .FAQS-section .insurance-first-content {
  aspect-ratio: auto;
}

@media (max-width: 575.98px) {
  /* Careers (phones): both detail rows fit on one line; the real block is one border + padding taller. */
  .im-skel-job-meta {
    padding-bottom: 1.3rem;
  }
}

/* Footer pages: while their own styles are the only ones applied, the page we are leaving would be unstyled
   (and can be wider than the screen), so it is taken out of the layout; the header stays. */
html.im-nav-isolated .im-web-layout-slot,
html.im-nav-isolated .im-web-layout-slot ~ * {
  display: none;
}