/* floating rating card */
@font-face {
  font-family: "Syne";
  src: url("/fonts/Syne-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "PlusJakartaSans";
  src: url("/fonts/PlusJakartaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "PlusJakartaSans";
  src: url("/fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
:root{
    --evergreen:#172B36;
    --seaglass:#114C5A;
    --cloud:#F1F6F4;
    --peppermint:#D9E8E3;
    --solar:#FFC801;
    --amber:#FF9932;
    --skyline:#508CBB;
    --display:'Syne',Poppins,Verdana,sans-serif;
    --body:'Plus Jakarta Sans',Inter,Calibri,Arial,sans-serif;
    --maxw:1180px;
    --mantine-color-anchor: #708a98 !important;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--body);
    color:var(--evergreen);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{
    font-weight:700;text-transform:uppercase;letter-spacing:.16em;
    font-size:12px;
  }
  h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.01em}
  a{color:inherit;text-decoration:none}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex !important;align-items:center !important;gap:10px !important;
    font-family:var(--body) !important;font-weight:700 !important;font-size:16px !important;
    padding:16px 30px !important;border-radius:0 !important;border:0 !important;cursor:pointer !important;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s !important;
    white-space:nowrap !important;
  }
  .btn-solar{background:var(--solar) !important;color:var(--evergreen) !important;box-shadow:0 8px 28px rgba(255,200,1,.32) !important; width: 100% !important; height: 56px !important;}
  .btn-solar:hover{transform:translateY(-3px) !important;box-shadow:0 14px 38px rgba(255,200,1,.45) !important}
  .btn-ghost{background:transparent;color:var(--cloud);border:1.5px solid rgba(241,246,244,.35)}
  .btn-ghost:hover{border-color:var(--cloud);transform:translateY(-3px)}
  .btn-ever{background:var(--evergreen);color:var(--cloud)}
  .btn-ever:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(23,43,54,.28)}
  .btn .arr{transition:transform .25s}
  .btn:hover .arr{transform:translateX(4px)}

body {
    position:relative;
    background:linear-gradient(160deg,#1d3742,#142730) !important;
    min-height: 100vh;
    padding:30px;
    /* border:1px solid rgba(217,232,227,.14);border-radius:0; */
    /* box-shadow:0 30px 80px rgba(0,0,0,.4); */
    /* animation:float 6s ease-in-out infinite; */
  }
  /* @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} */
  .ratingcard .rc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
  .ratingcard .rc-name{font-family:var(--display) !important;font-weight:700 !important;font-size:18px !important;color:var(--cloud) !important}
  .ratingcard .rc-sub{font-size:12px;color:var(--peppermint);opacity:.8}
  .rc-badge{background:var(--solar);color:var(--evergreen);font-family:var(--display);font-weight:800;
    font-size:30px;width:64px;height:64px;border-radius:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .rc-bar{margin:14px 0}
  .rc-bar .rc-lab{display:flex;justify-content:space-between;font-size:12px;color:var(--peppermint);margin-bottom:7px}
  .rc-track{height:8px;border-radius:0;background:rgba(217,232,227,.16);overflow:hidden}
  .rc-fill{height:100%;border-radius:0;background:linear-gradient(90deg,var(--skyline),var(--solar));
    width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
  .rc-foot{margin-top:22px;padding-top:18px;border-top:1px solid rgba(217,232,227,.12);
    font-size:12px;color:var(--peppermint);display:flex;align-items:center;gap:8px}
  .rc-foot .free{background:rgba(255,200,1,.15);color:var(--solar);padding:3px 10px;border-radius:0;font-weight:700}
  .rc-form{display:flex;flex-direction:column;gap:12px;margin-top:4px}
  .rc-flabel{font-size:11px !important;font-weight:700 !important;color:var(--peppermint) !important;text-transform:uppercase !important;letter-spacing:.12em !important; margin-bottom: 12px;}
  .rc-input{width:100% !important;padding:15px 16px !important;border:1px solid rgba(217,232,227,.30) !important;background:rgba(241,246,244,.06) !important;
    color:var(--cloud) !important;font-family:var(--body) !important;font-size:15px !important;outline:none !important;transition:border-color .2s, background .2s; 
    height: 50px !important;
  min-height: unset !important; border-radius: 0 !important;}
  .rc-input::placeholder{color:rgba(217,232,227,.55)}
  .rc-input:focus{border-color:var(--solar);background:rgba(241,246,244,.10)}
  .rc-go{justify-content:center;width:100%;margin-top:2px}
.rc-footer { margin-top: 20px !important; }

.mantine-Title-root {

  font-family:var(--display) !important;
  font-weight:700 !important;
  color:var(--cloud) !important;
  
  &.h1 {
    /* font-size: var(--mantine-font-size-2xl) !important;*/
    font-size: 2.5rem !important;
    margin-bottom: 20px !important;
  }

  &.h2 {
    /* font-size: var(--mantine-font-size-xl) !important;*/
    font-size: 2rem !important;
    margin-bottom: 20px !important;
  }

  &.h3 {
    /* font-size: var(--mantine-font-size-xl) !important;*/
    font-size: 1.5rem !important;
    margin-bottom: 20px !important;
  }

}

.mantine-TextInput-input {
  border-radius: 0 !important;
  width: 100% !important;
  padding: 15px 16px !important;
  border: 1px solid rgba(217, 232, 227, .30) !important;
  background: rgba(241, 246, 244, .06) !important;
  color: var(--cloud) !important;
  font-family: var(--body) !important;
  font-size: 15px !important;
  outline: none !important;
  transition: border-color .2s, background .2s;
  height: 50px !important;
  min-height: unset !important;
  border-radius: 0 !important;
}

.mantine-InputWrapper-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--peppermint) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  margin-bottom: 12px;
}

:not(.mantine-Popover-dropdown) {
  & p.mantine-Text-root:not(.mantine-Popover-dropdown *) {
    color: var(--peppermint) !important;
    font-size: var(--mantine-font-size-sm);
  }
}

.mantine-Alert-message {
  color: var(--peppermint) !important;
  
}

.mantine-Button-root {
  background:var(--solar) !important;
  box-shadow:0 8px 28px rgba(255,200,1,.32) !important;
  width: 100% !important;
  height: 56px !important;
  border-radius: 0 !important;
  outline: none !important;
  transition: border-color .2s, background .2s;

  & .arr {transition:transform .25s}
  
  &:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 38px rgba(255,200,1,.45) !important;

    & .arr {
      transform:translateX(4px)
    }
  }
  
  & .mantine-Button-inner {
    color:var(--evergreen) !important;
    font-family: var(--body) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
  }
}