/* path: core/static/ui/css/blocks/final_cta.css */

/* =============================================================================
   Final CTA
   ============================================================================= */

.FinalCta__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
  align-items:start;
  padding:var(--space-4);
  background:var(--surface);
  border:1px solid var(--divider-2);
  border-radius:var(--r-m);
}

.FinalCta__main{
  min-width:0;
}

.FinalCta__head{
  margin:0 0 var(--space-4);
}

.FinalCta__title{
  margin:0 0 var(--space-2);
  text-wrap:balance;
}

.FinalCta__subtitle{
  max-width:none;
}

.FinalCta__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--space-2);
}

.FinalCta__item{
  position:relative;
  padding-left:var(--space-4);
  color:var(--text-2);
  line-height:1.4;
}

.FinalCta__item::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  transform:translateY(-50%);
}

.FinalCta__panel{
  min-width:0;
  display:grid;
  gap:var(--space-3);
}

.FinalCta__panelTitle{
  margin:0;
  color:var(--text);
  font-family:var(--font-head);
  font-size:1.12rem;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.02em;
}

.FinalCta__panelSubtitle{
  max-width:34ch;
  margin:0;
  color:var(--text-2);
  font-size:var(--body);
  line-height:1.45;
}

.FinalCta__form{
  display:grid;
  gap:var(--space-3);
}

.FinalCta__label.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.FinalCta__input{
  width:100%;
  height:var(--h-input);
  padding:0 var(--space-3);
  border:1px solid var(--divider-2);
  border-radius:var(--r-m);
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  outline:none;
  transition:
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease;
}

.FinalCta__input::placeholder{
  color:var(--text-3);
}

.FinalCta__input:hover{
  border-color:var(--divider-3);
}

/* =============================================================================
   Channels
   ============================================================================= */

.FinalCta__channels{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.FinalCta__channel{
  position:relative;
  display:inline-flex;
  min-width:0;
  cursor:pointer;
}

.FinalCta__channelInput{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.FinalCta__channelText{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border:1px solid var(--divider-2);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  color:var(--text-2);
  font-size:.95rem;
  line-height:1;
  white-space:nowrap;
  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.FinalCta__channel:hover .FinalCta__channelText{
  border-color:var(--divider-3);
  background:rgba(255,255,255,.032);
  color:var(--text);
}

.FinalCta__channelInput:checked + .FinalCta__channelText{
  border-color:rgba(207,133,36,.38);
  background:rgba(207,133,36,.14);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.FinalCta__channelInput:focus-visible + .FinalCta__channelText{
  border-color:rgba(207,133,36,.42);
}

/* =============================================================================
   Consent
   ============================================================================= */

.FinalCta__consent{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:var(--space-2);
  min-width:0;
  cursor:pointer;
}

.FinalCta__checkbox{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.FinalCta__checkboxUi{
  position:relative;
  width:20px;
  height:20px;
  flex:0 0 20px;
  margin-top:1px;
  border:1px solid var(--divider-3);
  border-radius:5px;
  background:var(--surface-2);
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.FinalCta__checkboxUi::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:5px;
  height:9px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg) scale(.85);
  opacity:0;
  transition:
    opacity .16s ease,
    transform .16s ease;
}

.FinalCta__checkbox:checked + .FinalCta__checkboxUi{
  border-color:rgba(207,133,36,.42);
  background:rgba(207,133,36,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.FinalCta__checkbox:checked + .FinalCta__checkboxUi::after{
  opacity:1;
  transform:rotate(45deg) scale(1);
}

.FinalCta__checkbox:focus-visible + .FinalCta__checkboxUi{
  border-color:var(--divider-3);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 3px rgba(207,133,36,.12);
}

.FinalCta__consent:hover .FinalCta__checkboxUi{
  border-color:rgba(255,255,255,.18);
}

.FinalCta__consentText{
  min-width:0;
  color:var(--text-3);
  font-size:var(--small);
  line-height:1.35;
  overflow-wrap:normal;
}

.FinalCta__consentLink{
  color:var(--text-2);
  text-decoration:underline;
  text-underline-offset:2px;
  white-space:nowrap;
}

.FinalCta__form .Btn.BtnPrimary{
  border:1px solid transparent;
}

@media (max-width:767.98px){
  .FinalCta__grid{
    gap:var(--space-3);
  }

  .FinalCta__title{
    text-wrap:balance;
  }

  .FinalCta__subtitle{
    max-width:none;
  }

  .FinalCta__list{
    gap:var(--space-2);
  }

  .FinalCta__form{
    gap:var(--space-2);
  }

  .FinalCta__consent{
    margin:0;
  }

  .FinalCta__consentText{
    font-size:.92rem;
    line-height:1.35;
  }
}

@media (max-width:374.98px){
  .FinalCta__consentLink{
    white-space:normal;
  }
}

@media (min-width:768px){
  .FinalCta__grid{
    gap:var(--space-5);
  }

  .FinalCta__head{
    margin-bottom:var(--space-4);
  }

  .FinalCta__subtitle{
    max-width:46ch;
  }
}

@media (min-width:1024px){
  .FinalCta__grid{
    grid-template-columns:minmax(0, 1fr) minmax(420px, .82fr);
    gap:clamp(32px, 4vw, 80px);
    align-items:start;
  }

  .FinalCta__main{
    max-width:720px;
    padding-right:0;
  }

  .FinalCta__panel{
    align-self:center;
  }
}