/* =========================================================
   Casafari Minisite
   Isolated styling for CASAFARI valuation widget
   ========================================================= */

.crt-casafari-minisite {
  position: relative;
  width: 100%;
  overflow-x: clip;
  background: var(--crt-casafari-bg-color, #f7f4ef);
  padding:
    var(--crt-casafari-padding-top-desktop, 40px)
    var(--crt-casafari-padding-x-desktop, 24px)
    var(--crt-casafari-padding-bottom-desktop, 56px);
  box-sizing: border-box;
}

.crt-casafari-minisite *,
.crt-casafari-minisite *::before,
.crt-casafari-minisite *::after {
  box-sizing: border-box;
}

.crt-casafari-minisite--full-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@supports (width: 100dvw) {
  .crt-casafari-minisite--full-bleed {
    width: 100dvw;
    max-width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

.crt-casafari-minisite__inner {
  width: 100%;
  max-width: var(--crt-casafari-max-width-desktop, 920px);
  margin: 0 auto;
}

.crt-casafari-minisite__embed {
  width: 100%;
  min-height: var(--crt-casafari-height-desktop, 560px);
  background: var(--crt-casafari-card-bg-color, #ffffff);
  border: 1px solid var(--crt-casafari-border-color, #e8e3dc);
  border-radius: var(--crt-casafari-border-radius, 24px);
  overflow: visible;
}

.crt-casafari-minisite--shadow .crt-casafari-minisite__embed {
  box-shadow: 0 18px 50px rgba(7, 16, 25, 0.08);
}

.crt-casafari-minisite--clip .crt-casafari-minisite__embed {
  max-height: var(--crt-casafari-height-desktop, 560px);
  overflow: hidden;
}

/* Most external valuation widgets render through iframe.
   These rules try to keep the visual area compact. */

.crt-casafari-minisite__embed iframe {
  display: block !important;
  width: 100% !important;
  min-height: var(--crt-casafari-height-desktop, 560px) !important;
  height: var(--crt-casafari-height-desktop, 560px) !important;
  max-height: var(--crt-casafari-height-desktop, 560px) !important;
  border: 0 !important;
  border-radius: var(--crt-casafari-border-radius, 24px);
}

/* Defensive rules for non-iframe injected markup */

.crt-casafari-minisite__embed > div {
  max-width: 100%;
}

.crt-casafari-minisite--clip .crt-casafari-minisite__embed > div {
  max-height: var(--crt-casafari-height-desktop, 560px);
  overflow: hidden;
}

/* Mobile */

@media (max-width: 767px) {
  .crt-casafari-minisite {
    padding:
      var(--crt-casafari-padding-top-mobile, 28px)
      var(--crt-casafari-padding-x-mobile, 18px)
      var(--crt-casafari-padding-bottom-mobile, 40px);
  }

  .crt-casafari-minisite--full-bleed-mobile {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  @supports (width: 100dvw) {
    .crt-casafari-minisite--full-bleed-mobile {
      width: 100dvw;
      max-width: 100dvw;
      margin-left: calc(50% - 50dvw);
      margin-right: calc(50% - 50dvw);
    }
  }

  .crt-casafari-minisite__inner {
    max-width: var(--crt-casafari-max-width-mobile, 420px);
  }

  .crt-casafari-minisite__embed {
    min-height: var(--crt-casafari-height-mobile, 680px);
    border-radius: min(var(--crt-casafari-border-radius, 24px), 18px);
  }

  .crt-casafari-minisite--clip .crt-casafari-minisite__embed {
    max-height: var(--crt-casafari-height-mobile, 680px);
  }

  .crt-casafari-minisite__embed iframe {
    min-height: var(--crt-casafari-height-mobile, 680px) !important;
    height: var(--crt-casafari-height-mobile, 680px) !important;
    max-height: var(--crt-casafari-height-mobile, 680px) !important;
    border-radius: min(var(--crt-casafari-border-radius, 24px), 18px);
  }

  .crt-casafari-minisite--clip .crt-casafari-minisite__embed > div {
    max-height: var(--crt-casafari-height-mobile, 680px);
  }
}