.bg-primary-50{ 
  background-color: var(--primary-50);
}

.py-32{
  padding-block: var(--space-32);
}

{# formulario #}
.drupalNewsletter form{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-16) var(--space-8);
}

.drupalNewsletter form > div:first-child{
 grid-column: 1;
 grid-row: span 3;
 display: flex;
 align-items: center;
}

.drupalNewsletter form .hs-main-font-element{
  max-width: 546px;
}

.drupalNewsletter form .legal-consent-container{
  grid-column: span 2;
}

.drupalNewsletter form .hs_submit{
  grid-column: span 2;
}

.text-grey-700{ 
  color:var(--greyscale-700);
}

.drupalNewsletter form :is(input[type="text"], input[type="email"]){
    background-color:white;
    border: 2px solid var(--primary-700);
    border-radius: var(--space-8);
    padding: 12px;
    width:100%;
}

.drupalNewsletter input:focus {
  border-color: var(--primary-700);
  outline: none;
}

.drupalNewsletter .legal-consent-container ul{
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.drupalNewsletter .legal-consent-container li label{
 display:flex;
 align-items:center; 
}

.drupalNewsletter .legal-consent-container label input {
    accent-color: var(--primary-500);
    border: .774px solid var(--primary-600);
    border-radius: 4px;
    cursor: pointer;
    height: 16px;
    margin-bottom: 0;
    width: 16px;
    flex-grow: 0;
    flex-shrink: 0;
}

.drupalNewsletter label {
    margin-bottom: var(--space-8);
}

.drupalNewsletter .legal-consent-container label {
    font-weight: 500;
}

.drupalNewsletter .legal-consent-container li:last-child label {
    margin-bottom:0;
}


.drupalNewsletter label .hs-form-required{
  display:none;
}

{# error #}
.drupalNewsletter .hs-form-field:has(.hs-error-msgs) input{
  border-color: #A30F0F;
}

.drupalNewsletter .hs-error-msgs,
.drupalNewsletter .legal-consent-container .hs-error-msgs{
  margin-top: .4rem;
  padding-left: 23px;
  list-style-image: url('data:image/svg+xml;utf8,<?xml version="1.0"?><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.42215 4.00813C7.42158 3.59391 7.08533 3.25859 6.67112 3.25916C6.25691 3.25973 5.92158 3.59597 5.92215 4.01019L5.92581 6.67685C5.92638 7.09106 6.26263 7.42639 6.67684 7.42582C7.09105 7.42525 7.42638 7.08901 7.42581 6.67479L7.42215 4.00813ZM6.67844 8.59249C6.26423 8.59305 5.9289 8.9293 5.92947 9.34351C5.93004 9.75773 6.26629 10.0931 6.6805 10.0925L6.68716 10.0925C7.10138 10.0919 7.4367 9.75566 7.43613 9.34145C7.43557 8.92723 7.09932 8.59191 6.68511 8.59248L6.67844 8.59249ZM12.5925 6.6677C12.597 9.93538 9.95161 12.588 6.68393 12.5925C3.41625 12.597 0.763633 9.95162 0.759148 6.68394C0.754664 3.41626 3.40001 0.763645 6.66769 0.759161C9.93537 0.754676 12.588 3.40002 12.5925 6.6677Z" stroke="rgb(163,15,15)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.drupalNewsletter .hs-error-msgs li,
.drupalNewsletter .legal-consent-container .hs-error-msgs label{
    color: #a30f0f;
    font-size: 14px;
    font-weight: 700;
}

.drupalNewsletter .legal-consent-container a{
  color: var(--primary-500);
  text-decoration: underline;
}

{# submit #}

.drupalNewsletter .hs-submit {
    container: newsletterform / inline-size;
}

.drupalNewsletter .hs-submit .actions {
    align-items: center;
    background: var(--primary-500);
    border-radius: var(--space-8);
    display: flex;
    justify-content: center;
    position: relative;
    transition: background .3s ease-in-out;
    width: 100%;
}

.drupalNewsletter .hs-submit .hs-button {
    background: transparent;
    border: none;
    color: var(--greyscale-white, #fff);
    font-family: DM Sans, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
    padding: 16px 40px 16px 16px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .2s ease;
    -o-transition: background-color .2s ease;
    transition: background-color .2s ease;
    width: 100%;
}

.drupalNewsletter .hs-submit .actions:after {
    background: url(https://serveis.aliura.coop/hubfs/Aliura/img/Arrow-right.png);
    content: "";
    display: block;
    height: 24px;
    pointer-events: none;
    position: absolute;
    right: calc(45cqi - 40px);
    transition: right .3s ease-in-out;
    width: 24px;
}

.drupalNewsletter .actions:hover:after{
  right: calc(43cqi - 40px);
}

.drupalNewsletter .actions:hover{
   background: var(--primary-700);
}


{# msg final #}
.qrcontainer-newsletter{
  container: newsletter / inline-size;
}

.newsletter-drupal{
  aspect-ratio: 4 / 1;
}

.newsletter-drupal:has(.submitted-message){
   display:flex;
  align-items:center;
  }

.newsletter-drupal .submitted-message{
  color: var(--greyscale-700);
  align-items:center;
}
.newsletter-drupal .submitted-message > p{
  display:flex;
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-64);
}
.newsletter-drupal .submitted-message > p:before{
  content: "";
  display:flex;
  width:25px;
  height:25px;
  background: url('https://app.aliura.coop/hubfs/Aliura/Drupal/msgNewsletterCheck.svg') no-repeat center center / 100% ;
  flex-shrink: 0;
 
}

@container newsletter ( width < 798px){
  .newsletter-drupal:has(.submitted-message){
    aspect-ratio: 4 / 2;
  }
}

@container newsletterform (width <= 485px) {
  .drupalNewsletter .hs-submit .actions:after { 
    right: calc(44cqi - 40px);
  }
  .drupalNewsletter .actions:hover:after{
  right: calc(42cqi - 40px)
  }
}

@container newsletterform (width < 313px) {
  .drupalNewsletter .hs-submit .actions:after { 
    right: calc(41cqi - 40px);
  }
  .drupalNewsletter .actions:hover:after{
  right: calc(39cqi - 40px)
  }
}

@container newsletterform (width > 594px) { 
 .drupalNewsletter .hs-submit .actions:after { 
    right: calc(47cqi - 40px)
  }
  .drupalNewsletter .actions:hover:after{
  right: calc(44cqi - 40px)
}
}

@media (width < 992px ){ 
  
.drupalNewsletter form{
    grid-template-columns: 1fr;
  }
  
.drupalNewsletter form > div:first-child {
    grid-column: 1;
    grid-row: 1;
}
  .drupalNewsletter form .legal-consent-container,
  .drupalNewsletter form .hs_submit{
  grid-column: 1;
}

  
}