/* =========================================================
   CADDYLOBBY LEGAL MODAL POLISH
   Terms + Privacy
   ========================================================= */


/* ---------------------------------------------------------
   FULLSCREEN MODAL BACKDROP
   --------------------------------------------------------- */

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
}

.legal-modal[aria-hidden="true"] {
  display: none;
}

.legal-modal[aria-hidden="false"] {
  display: grid;
  place-items: center;
}

.legal-modal-backdrop {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 72% 18%,
      rgba(111, 67, 255, .18),
      transparent 34%
    ),
    radial-gradient(
      circle at 20% 78%,
      rgba(255, 53, 210, .13),
      transparent 32%
    ),
    rgba(0, 4, 14, .84);

  backdrop-filter:
    blur(13px)
    saturate(1.12);
}


/* ---------------------------------------------------------
   MAIN LEGAL WINDOW
   --------------------------------------------------------- */

.legal-modal-card {
  position: relative;
  z-index: 2;

  width:
    min(960px, calc(100vw - 42px));

  max-height:
    min(88vh, 900px);

  overflow: hidden;

  border:
    1px solid rgba(32, 223, 255, .42) !important;

  border-radius:
    18px !important;

  background:
    linear-gradient(
      145deg,
      rgba(4, 18, 40, .97),
      rgba(3, 11, 29, .98) 58%,
      rgba(13, 7, 32, .98)
    ) !important;

  box-shadow:
    0 0 0 1px rgba(255, 53, 210, .10),
    0 0 38px rgba(32, 223, 255, .08),
    0 0 64px rgba(255, 53, 210, .07),
    0 30px 90px rgba(0, 0, 0, .68) !important;
}


/* ---------------------------------------------------------
   TOP NEON EDGE
   --------------------------------------------------------- */

.legal-modal-card::before {
  content: "";

  position: absolute;

  z-index: 5;

  left: 0;
  right: 0;
  top: 0;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ff35d2 18%,
      #935dff 50%,
      #20dfff 82%,
      transparent
    );

  box-shadow:
    0 0 18px rgba(32,223,255,.30),
    0 0 24px rgba(255,53,210,.20);
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.legal-modal-kicker {
  padding:
    27px 34px 0;

  color:
    #ff60da !important;

  font-size:
    11px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .19em !important;

  text-transform:
    uppercase;

  text-shadow:
    0 0 12px rgba(255,53,210,.18);
}

.legal-modal-card > h2 {
  margin:
    4px 34px 7px !important;

  font-size:
    clamp(31px, 4vw, 48px) !important;

  line-height:
    1 !important;

  font-weight:
    950 !important;

  letter-spacing:
    -.035em !important;

  background:
    linear-gradient(
      90deg,
      #ff52d7 0%,
      #a361ff 47%,
      #20dfff 100%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  color:
    transparent !important;
}


/* ---------------------------------------------------------
   HEADER RULE
   --------------------------------------------------------- */

.legal-modal-rule {
  height:
    1px !important;

  margin:
    19px 34px 0 !important;

  border:
    0 !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,53,210,.65),
      rgba(143,85,255,.52),
      rgba(32,223,255,.52),
      transparent
    ) !important;
}


/* ---------------------------------------------------------
   CLOSE BUTTON
   --------------------------------------------------------- */

.legal-modal-close {
  position:
    absolute !important;

  top:
    20px !important;

  right:
    22px !important;

  z-index:
    10 !important;

  width:
    39px !important;

  height:
    39px !important;

  display:
    grid !important;

  place-items:
    center !important;

  padding:
    0 !important;

  border:
    1px solid rgba(32,223,255,.40) !important;

  border-radius:
    9px !important;

  background:
    rgba(3,16,34,.82) !important;

  color:
    #80ecff !important;

  box-shadow:
    inset 0 0 14px rgba(32,223,255,.03) !important;

  transition:
    .18s ease !important;
}

.legal-modal-close:hover {
  border-color:
    rgba(255,53,210,.70) !important;

  color:
    #ff6edc !important;

  background:
    rgba(255,53,210,.075) !important;

  box-shadow:
    0 0 17px rgba(255,53,210,.08) !important;
}


/* ---------------------------------------------------------
   SCROLLABLE DOCUMENT AREA
   --------------------------------------------------------- */

.legal-modal-content {
  max-height:
    calc(88vh - 133px) !important;

  overflow-y:
    auto !important;

  padding:
    22px 34px 34px !important;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(32,223,255,.50)
    rgba(3,14,31,.45);
}

.legal-modal-content::-webkit-scrollbar {
  width:
    8px;
}

.legal-modal-content::-webkit-scrollbar-track {
  background:
    rgba(3,14,31,.46);

  border-radius:
    999px;
}

.legal-modal-content::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    linear-gradient(
      180deg,
      #20dfff,
      #855fff,
      #ff35d2
    );
}


/* ---------------------------------------------------------
   DOCUMENT
   --------------------------------------------------------- */

.legal-policy {
  color:
    #c2d5e7 !important;

  font-size:
    14px !important;

  line-height:
    1.72 !important;
}

.legal-policy h3 {
  margin:
    29px 0 10px !important;

  padding-top:
    23px !important;

  border-top:
    1px solid rgba(78,116,160,.17);

  color:
    #ff68dc !important;

  font-size:
    17px !important;

  font-weight:
    900 !important;

  letter-spacing:
    -.01em !important;
}

.legal-policy h3:first-child {
  margin-top:
    0 !important;

  padding-top:
    0 !important;

  border-top:
    0 !important;
}

.legal-policy p {
  margin:
    0 0 14px !important;

  color:
    #bcd0e3 !important;
}

.legal-policy ul,
.legal-policy ol {
  margin:
    10px 0 17px !important;

  padding-left:
    23px !important;
}

.legal-policy li {
  margin:
    7px 0 !important;

  color:
    #bcd0e3 !important;
}

.legal-policy strong {
  color:
    #edf7ff !important;
}

.legal-policy a {
  color:
    #59e6ff !important;

  text-decoration-color:
    rgba(32,223,255,.40) !important;

  text-underline-offset:
    3px;
}

.legal-policy a:hover {
  color:
    #ff72de !important;

  text-decoration-color:
    rgba(255,53,210,.56) !important;
}


/* ---------------------------------------------------------
   TERMS / PRIVACY SUBTLE INDIVIDUAL COLOUR
   --------------------------------------------------------- */

#terms-modal .legal-modal-card {
  border-color:
    rgba(32,223,255,.42) !important;
}

#privacy-modal .legal-modal-card {
  border-color:
    rgba(255,53,210,.40) !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 680px) {

  .legal-modal-card {
    width:
      calc(100vw - 20px);

    max-height:
      92vh;

    border-radius:
      13px !important;
  }

  .legal-modal-kicker {
    padding:
      24px 20px 0;
  }

  .legal-modal-card > h2 {
    margin:
      5px 20px 7px !important;

    padding-right:
      36px;

    font-size:
      31px !important;
  }

  .legal-modal-rule {
    margin:
      17px 20px 0 !important;
  }

  .legal-modal-content {
    max-height:
      calc(92vh - 120px) !important;

    padding:
      20px !important;
  }

  .legal-policy {
    font-size:
      13px !important;
  }

  .legal-modal-close {
    top:
      14px !important;

    right:
      14px !important;
  }

}

/* ===== REFUND MODAL ACCENT START ===== */

#refund-modal .legal-modal-card {
  border-color:
    rgba(143, 85, 255, .48) !important;

  box-shadow:
    0 0 0 1px rgba(255,53,210,.08),
    0 0 38px rgba(143,85,255,.09),
    0 0 58px rgba(32,223,255,.05),
    0 30px 90px rgba(0,0,0,.68) !important;
}

/* ===== REFUND MODAL ACCENT END ===== */