<div class="hero-product__warranty">
<div class="hero-product__warranty__top">
<div class="care-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221.77 221.25">
<path fill="#fff" d="M221.77,173.32c0,26.36-21.62,47.93-48.04,47.93H48.04c-26.42,0-48.04-21.57-48.04-47.93V47.93C0,21.57,21.62,0,48.04,0h125.69c26.42,0,48.04,21.57,48.04,47.93v125.4Z" />
<g>
<g>
<path fill="#f1b43f" d="M114.59,57.75c-.03-.06-.06-.12-.11-.18l-.79-1.01c-.15-.19-.37-.31-.61-.34-.24-.03-.48,.05-.66,.2l-7.7,6.35c-.29,.23-.69,.27-1.01,.08l-6.52-3.76c-.2-.11-.34-.3-.41-.52l-1.82-6.26c-.1-.34,.01-.7,.29-.93l8.14-6.71c.37-.31,.43-.85,.14-1.23l-1.03-1.33c-.06-.07-.12-.12-.2-.17-3.17-.64-6.38-.25-9.22,.99-3.54,1.6-6.48,4.53-7.98,8.44-1.81,4.71-1.1,9.75,1.39,13.72,.36,.57,.67,1.1,.94,1.6,1.63,1.97,3.77,3.56,6.33,4.54,2.43,.93,4.96,1.2,7.38,.9,.33-.11,.68-.19,1.06-.22,.21-.02,.42-.05,.64-.08,4.75-1.14,8.87-4.51,10.76-9.4,.6-1.55,.92-3.13,1-4.7Z" />
<path fill="#f1b43f" d="M95.97,75.87c-1.63-.15-2.19-.11-3.72-.7-1.66-.64-2.17-1.12-3.56-2.22-2.46,6.35-21.09,49.9-21.09,49.9-1.11,2.89,.33,6.14,3.24,7.25,2.9,1.11,6.16-.33,7.27-3.23l17.86-51.01Zm-7.71,6.39l1.74,.66-12.22,31.75-1.74-.67,12.22-31.75Zm-16.41,45.23c-1.45-.55-2.18-2.18-1.62-3.63,.56-1.45,2.18-2.17,3.63-1.61,1.45,.56,2.17,2.18,1.62,3.63-.56,1.45-2.18,2.17-3.63,1.61Z" />
</g>
<g>
<polygon fill="#f1b43f" points="138.59 92.46 123.01 54.84 124.09 49.44 118.18 40.93 115.93 41.79 113.69 42.65 115.01 52.92 119.43 56.21 133.08 94.57 138.59 92.46" />
<path fill="#f1b43f" d="M141.78,95.59l-8.97,3.43,8.44,27.7c1.36,3.54,5.34,5.3,8.88,3.94,3.54-1.36,5.31-5.32,3.95-8.86l-12.31-26.22Zm5.87,25.71l-1.95,.75-7.7-20.01,1.95-.75,7.7,20.01Z" />
</g>
</g>
<g>
<path d="M35.49,155.57l6.11,15.82h-2.98l-1.49-4.19h-6.33l-1.49,4.19h-2.87l6.09-15.82h2.95Zm-1.53,2.73l-2.4,6.8h4.84l-2.38-6.8h-.07Z" />
<path d="M45.8,155.57v15.82h-2.53v-15.82h2.53Z" />
<path d="M59.77,165.72c0,3.01-1.51,5.98-4.95,5.98-1.44,0-3.06-.51-3.84-1.8h-.04v5.72h-2.53v-15.69h2.4v1.55h.04c.73-1.33,2.09-1.86,3.55-1.86,3.6,0,5.38,2.75,5.38,6.09Zm-5.71,3.99c2.29,0,3.18-2.04,3.18-4.03s-.96-4.05-3.2-4.05c-2.35,0-3.2,1.99-3.2,4.05s.98,4.03,3.22,4.03Z" />
<path d="M63.99,155.57v5.87h.04c.73-1.15,2.02-1.82,3.46-1.82,2.64,0,4.04,1.53,4.04,3.81v7.95h-2.53v-7.09c0-1.46-.44-2.68-2.24-2.68s-2.78,1.44-2.78,2.95v6.82h-2.53v-15.82h2.53Z" />
<path d="M83.61,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.27,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z" />
<path d="M96.91,155.57v2.39h-5.04v13.43h-2.78v-13.43h-5.02v-2.39h12.84Z" />
<path d="M100.71,155.57v5.87h.04c.73-1.15,2.02-1.82,3.46-1.82,2.64,0,4.04,1.53,4.04,3.81v7.95h-2.53v-7.09c0-1.46-.44-2.68-2.24-2.68s-2.78,1.44-2.78,2.95v6.82h-2.53v-15.82h2.53Z" />
<path d="M120.95,165.45c0,.29-.02,.58-.04,.86h-8.44c0,1.88,1.09,3.39,3.09,3.39,1.4,0,2.33-.58,2.8-1.91h2.4c-.51,2.46-2.69,3.9-5.2,3.9-3.62,0-5.62-2.53-5.62-6.01s2.13-6.07,5.55-6.07c3.24,0,5.46,2.66,5.46,5.83Zm-2.58-.8c-.13-1.6-1.18-3.04-2.91-3.04s-2.91,1.35-3,3.04h5.91Z" />
<path d="M126.13,156.5v3.43h2.29v1.88h-2.29v6.25c0,1.2,.29,1.44,1.27,1.44,.47,0,.93-.04,1.02-.09v1.95c-1,.11-1.29,.13-1.64,.13-2.42,0-3.18-.78-3.18-3.08v-6.6h-1.91v-1.88h1.91v-3.43h2.53Z" />
<path d="M140.19,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.27,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z" />
<path d="M162.49,160.6h-2.78c-.56-2.1-1.87-3.15-3.95-3.15-3.02,0-4.82,2.5-4.82,6.03s1.78,6.03,4.82,6.03c2.27,0,3.75-1.6,4.04-4.14h2.71c-.29,3.79-2.84,6.4-6.75,6.4-2.24,0-4.06-.8-5.49-2.35-1.4-1.57-2.11-3.57-2.11-5.94,0-4.52,2.82-8.29,7.6-8.29,3.66,0,6.37,2.06,6.73,5.41Z" />
<path d="M174.31,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.26,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z" />
<path d="M183.77,159.69v2.44c-.38-.07-.73-.11-1.09-.11-1.89,0-3.11,1.64-3.11,3.83v5.54h-2.53v-11.46h2.38v2.22h.04c.36-1.46,2.07-2.53,3.35-2.53,.49,0,.58,0,.96,.07Z" />
<path d="M195.32,165.45c0,.29-.02,.58-.04,.86h-8.44c0,1.88,1.09,3.39,3.09,3.39,1.4,0,2.33-.58,2.8-1.91h2.4c-.51,2.46-2.69,3.9-5.2,3.9-3.62,0-5.62-2.53-5.62-6.01s2.13-6.07,5.55-6.07c3.24,0,5.46,2.66,5.46,5.83Zm-2.58-.8c-.13-1.6-1.18-3.04-2.91-3.04s-2.91,1.35-3,3.04h5.91Z" />
</g>
</svg>
</div>
<div class="care-title">
<h3>Extended warranty service</h3>
<div class="care-title__subtitle">
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.4" y="0.4" width="12.2" height="12.2" rx="6.1" stroke="#007DE1" stroke-width="0.8" />
<path d="M6.87598 7.90527H5.78711C5.79036 7.60254 5.81641 7.34863 5.86523 7.14355C5.91406 6.93522 5.99544 6.74642 6.10938 6.57715C6.22656 6.40788 6.38118 6.22884 6.57324 6.04004C6.72298 5.89681 6.85807 5.76172 6.97852 5.63477C7.09896 5.50456 7.19499 5.36784 7.2666 5.22461C7.33822 5.07812 7.37402 4.91048 7.37402 4.72168C7.37402 4.5166 7.33984 4.34245 7.27148 4.19922C7.20312 4.05599 7.10221 3.94694 6.96875 3.87207C6.83854 3.7972 6.67578 3.75977 6.48047 3.75977C6.31771 3.75977 6.16471 3.79232 6.02148 3.85742C5.87826 3.91927 5.7627 4.01693 5.6748 4.15039C5.58691 4.2806 5.53971 4.45312 5.5332 4.66797H4.35645C4.36296 4.25781 4.46061 3.91276 4.64941 3.63281C4.83822 3.35286 5.09212 3.1429 5.41113 3.00293C5.73014 2.86296 6.08659 2.79297 6.48047 2.79297C6.91667 2.79297 7.28939 2.86784 7.59863 3.01758C7.90788 3.16406 8.14388 3.37891 8.30664 3.66211C8.47266 3.94206 8.55566 4.2806 8.55566 4.67773C8.55566 4.96419 8.4987 5.22461 8.38477 5.45898C8.27083 5.6901 8.12272 5.90658 7.94043 6.1084C7.75814 6.30697 7.5612 6.50553 7.34961 6.7041C7.16732 6.87012 7.04362 7.05078 6.97852 7.24609C6.91341 7.43815 6.87923 7.65788 6.87598 7.90527ZM5.68945 9.42871C5.68945 9.25293 5.74967 9.10482 5.87012 8.98438C5.99056 8.86068 6.15495 8.79883 6.36328 8.79883C6.57161 8.79883 6.736 8.86068 6.85645 8.98438C6.97689 9.10482 7.03711 9.25293 7.03711 9.42871C7.03711 9.60449 6.97689 9.75423 6.85645 9.87793C6.736 9.99837 6.57161 10.0586 6.36328 10.0586C6.15495 10.0586 5.99056 9.99837 5.87012 9.87793C5.74967 9.75423 5.68945 9.60449 5.68945 9.42871Z" fill="#007DE1" />
</svg>
<a class="overlay-modal__trigger" href="#" data-modal="warranty-info">Learn more</a>
</div>
</div>
</div>
<div class="hero-product__warranty__bottom">
<div class="radio-item">
<input class="custom-radio custom-radio--warranty" name="care" id="care-no" type="radio" value="care-no" checked>
<label for="care-no">Without extended warranty</label>
</div>
<div class="radio-item">
<input class="custom-radio custom-radio--warranty" name="care" id="care-plus" type="radio" value="care-plus" data-title="AlphaTheta Care Plus">
<label for="care-plus">AlphaTheta Care Plus (+ €20)</label>
</div>
<div class="radio-item">
<input class="custom-radio custom-radio--warranty" name="care" id="care-pro" type="radio" value="care-pro" data-title="AlphaTheta Care Pro">
<label for="care-pro">AlphaTheta Care Pro (+ €25)</label>
</div>
</div>
</div>
<section class="overlay-modal" data-modal="warranty-info">
<div class="overlay-modal__overlay">
<span class="overlay-modal__bg overlay-modal__trigger--close"></span>
<div class="overlay-modal__inner">
<span class="overlay-modal__close overlay-modal__trigger--close"><span class="icon-cross">
<span class="icon-cross__inner"></span>
</span></span>
<div class="overlay-modal__content">
<h3 class="heading heading--4">
<span data-step="1">What is the extended warranty?</span>
</h3>
<div class="overlay-modal__description">
<div class="form-container__info">
<br>
<h3 class="form-container__info--title">AlphaTheta Care Plus:</h3>
<p class="form-container__info--text">
Free repair for a total of 3 years (1-year manufacturer warranty +2 years extended warranty)
for natural failure in the use case of following the manual, such as the exhaustion of
buttons and faders.
</p>
<br>
<h3 class="form-container__info--title">AlphaTheta Care Pro:</h3>
<p class="form-container__info--text">
In addition to the natural failure, Pro covers a 3-year warranty for accidental damage such
as dropping liquid spills and dropping the equipment, and it also has a free loaner units
service to minimize the damage of running the venue business.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="overlay-modal" data-modal="atc-care">
<div class="overlay-modal__overlay">
<span class="overlay-modal__bg overlay-modal__trigger--close"></span>
<div class="overlay-modal__inner">
<span class="overlay-modal__close overlay-modal__trigger--close"></span>
<div class="overlay-modal__content">
<h3 class="heading heading--4">
<span class="form-title"></span>
</h3>
<br>
<form id="form-atccare" class="form-container" novalidate>
<div class="client">
<div class="client__type">
<div class="customer-field">
<input class="custom-radio" name="care" id="private" type="radio" value="private" checked>
<label for="private">Private client</label>
</div>
</div>
<div class="client__type">
<div class="customer-field">
<input class="custom-radio" name="care" id="business" type="radio" value="business">
<label for="business">Business client</label>
</div>
</div>
</div>
<div class="overlay-modal__form">
<div class="input-field">
<div class="input-field__inner">
<input class="input-field__info" type="text" name="firstname" value="" required>
<span class="input-field__placeholder">Name</span>
</div>
</div>
<br>
<div class="input-field">
<div class="input-field__inner">
<input class="input-field__info" type="text" name="surname" value="" required>
<span class="input-field__placeholder">Surname</span>
</div>
</div>
<br>
<div class="business-field hidden">
<div class="input-field">
<div class="input-field__inner">
<input class="input-field__info" type="text" name="company" value="" required disabled>
<span class="input-field__placeholder">Company name</span>
</div>
</div>
<br>
<div class="input-field">
<div class="input-field__inner">
<input class="input-field__info" type="text" name="vat" value="" required disabled>
<span class="input-field__placeholder">VAT number</span>
</div>
</div>
<br>
</div>
<div class="input-field">
<div class="input-field__inner">
<input class="input-field__info" type="text" name="email" value="" required>
<span class="input-field__placeholder">E-mail address</span>
</div>
</div>
<br>
<div class="input-field">
<div class="input-field__inner">
<input class="input-field__info" type="text" name="confirm-email" value="" required>
<span class="input-field__placeholder">Confirm e-mail address</span>
</div>
</div>
<div class="overlay-modal__note">
<p class="legal">
You can unsubscribe from these communications at any time. For more information on how to unsubscribe
AlphaTheta’s privacy practices and how AlphaTheta is committed to protecting and respecting your
privacy, please review AlphaTheta’s
<a href="#" target="_blank">Privacy Policy</a>.
</p>
<p class="legal">
The [AlphaTheta Care] program is administered by New Leaf Service Contracts, Inc. (“New Leaf”). When you
submit your application, New Leaf will receive personal information about you. New Leaf processes the
personal information it collects and receives as described in its
<a href="#" target="_blank">Privacy Policy</a>.
</p>
<div class="checkbox">
<div class="checkbox__inner">
<input class="input-field__info" type="checkbox" name="alphatheta" value="yes" id="alphatheta">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
<label for="alphatheta">
From time to time, AlphaTheta Music Americas, Inc. (“AlphaTheta”) would like to contact you
about our products and services, as well as other content that may be of interest to you.
If you consent to AlphaTheta contacting you for this purpose, please check the box.
</label>
</span>
</div>
</div>
<br>
<div class="checkbox">
<div class="checkbox__inner">
<input class="input-field__info" type="checkbox" name="agree" value="agree" id="agree" required>
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
<label for="agree"> I agree to the <a href="#" target="_blank">terms of use</a>.</label>
</span>
</div>
</div>
</div>
<div id="error-atccare" class="hidden">
This is an error
</div>
<div class="overlay-modal__action">
<button type="submit" href="#" class="action action--normal action--on-light">
<span class="action__label">Buy now</span>
<span class="action__bg"></span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
{{!-- Extended warranty --}}
<div class="hero-product__warranty">
<div class="hero-product__warranty__top">
<div class="care-icon">
{{render '@care-icon' }}
</div>
<div class="care-title">
<h3>Extended warranty service</h3>
{{render '@care-info' }}
</div>
</div>
<div class="hero-product__warranty__bottom">
{{render '@radio-form' }}
</div>
</div>
{{!-- Learn more --}}
<section class="overlay-modal" data-modal="warranty-info">
<div class="overlay-modal__overlay">
<span class="overlay-modal__bg overlay-modal__trigger--close"></span>
<div class="overlay-modal__inner">
<span class="overlay-modal__close overlay-modal__trigger--close"><span class="icon-cross">
<span class="icon-cross__inner"></span>
</span></span>
<div class="overlay-modal__content">
<h3 class="heading heading--4">
<span data-step="1">What is the extended warranty?</span>
</h3>
<div class="overlay-modal__description">
<div class="form-container__info">
<br>
<h3 class="form-container__info--title">AlphaTheta Care Plus:</h3>
<p class="form-container__info--text">
Free repair for a total of 3 years (1-year manufacturer warranty +2 years extended warranty)
for natural failure in the use case of following the manual, such as the exhaustion of
buttons and faders.
</p>
<br>
<h3 class="form-container__info--title">AlphaTheta Care Pro:</h3>
<p class="form-container__info--text">
In addition to the natural failure, Pro covers a 3-year warranty for accidental damage such
as dropping liquid spills and dropping the equipment, and it also has a free loaner units
service to minimize the damage of running the venue business.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
{{!-- Radio buttons --}}
<section class="overlay-modal" data-modal="atc-care">
<div class="overlay-modal__overlay">
<span class="overlay-modal__bg overlay-modal__trigger--close"></span>
<div class="overlay-modal__inner">
<span class="overlay-modal__close overlay-modal__trigger--close">{{ @icon-cross }}</span>
<div class="overlay-modal__content">
<h3 class="heading heading--4">
<span class="form-title"></span>
</h3>
<br>
<form id="form-atccare" class="form-container" novalidate>
<div class="client">
<div class="client__type">
<div class="customer-field">
<input class="custom-radio" name="care" id="private" type="radio" value="private" checked>
<label for="private">Private client</label>
</div>
</div>
<div class="client__type">
<div class="customer-field">
<input class="custom-radio" name="care" id="business" type="radio" value="business">
<label for="business">Business client</label>
</div>
</div>
</div>
<div class="overlay-modal__form">
<div class="input-field">
<div class="input-field__inner">
<input class="input-field__info" type="text" name="firstname" value="" required>
<span class="input-field__placeholder">Name</span>
</div>
</div>
<br>
<div class="input-field">
<div class="input-field__inner">
<input class="input-field__info" type="text" name="surname" value="" required>
<span class="input-field__placeholder">Surname</span>
</div>
</div>
<br>
<div class="business-field hidden">
<div class="input-field">
<div class="input-field__inner">
<input class="input-field__info" type="text" name="company" value="" required disabled>
<span class="input-field__placeholder">Company name</span>
</div>
</div>
<br>
<div class="input-field">
<div class="input-field__inner">
<input class="input-field__info" type="text" name="vat" value="" required disabled>
<span class="input-field__placeholder">VAT number</span>
</div>
</div>
<br>
</div>
<div class="input-field">
<div class="input-field__inner">
<input class="input-field__info" type="text" name="email" value="" required>
<span class="input-field__placeholder">E-mail address</span>
</div>
</div>
<br>
<div class="input-field">
<div class="input-field__inner">
<input class="input-field__info" type="text" name="confirm-email" value="" required>
<span class="input-field__placeholder">Confirm e-mail address</span>
</div>
</div>
<div class="overlay-modal__note">
<p class="legal">
You can unsubscribe from these communications at any time. For more information on how to unsubscribe
AlphaTheta’s privacy practices and how AlphaTheta is committed to protecting and respecting your
privacy, please review AlphaTheta’s
<a href="#" target="_blank">Privacy Policy</a>.
</p>
<p class="legal">
The [AlphaTheta Care] program is administered by New Leaf Service Contracts, Inc. (“New Leaf”). When you
submit your application, New Leaf will receive personal information about you. New Leaf processes the
personal information it collects and receives as described in its
<a href="#" target="_blank">Privacy Policy</a>.
</p>
<div class="checkbox">
<div class="checkbox__inner">
<input class="input-field__info" type="checkbox" name="alphatheta" value="yes" id="alphatheta">
<span class="checkbox__spoof">
<span class="checkbox__icon">
{{render '@icon-check' }}
</span>
</span>
<span class="checkbox__label">
<label for="alphatheta">
From time to time, AlphaTheta Music Americas, Inc. (“AlphaTheta”) would like to contact you
about our products and services, as well as other content that may be of interest to you.
If you consent to AlphaTheta contacting you for this purpose, please check the box.
</label>
</span>
</div>
</div>
<br>
<div class="checkbox">
<div class="checkbox__inner">
<input class="input-field__info" type="checkbox" name="agree" value="agree" id="agree" required>
<span class="checkbox__spoof">
<span class="checkbox__icon">
{{render '@icon-check' }}
</span>
</span>
<span class="checkbox__label">
<label for="agree"> I agree to the <a href="#" target="_blank">terms of use</a>.</label>
</span>
</div>
</div>
</div>
<div id="error-atccare" class="hidden">
This is an error
</div>
<div class="overlay-modal__action">
<button type="submit" href="#" class="action action--normal action--on-light">
<span class="action__label">Buy now</span>
<span class="action__bg"></span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
/* No context defined. */
// New styling
.hero-product__warranty {
max-width: var(--section--2);
background-color: var(--color--neutrals-1);
border-radius: var(--gap);
padding: var(--gap--4);
margin: var(--gap--8) 0;
&__top {
display: flex;
.care-title {
line-height: var(--gap--6);
&__subtitle {
display: flex;
align-items: center;
svg {
flex: 0 auto !important;
width: 20px;
height: 20px;
padding-right: var(--gap--1);
}
a {
color: var(--color--action);
text-decoration: none;
&:hover {
cursor: pointer;
}
}
}
}
}
&__bottom {
margin-top: var(--gap--4);
}
}
// Radio buttons
.custom-radio {
appearance: none;
-webkit-appearance: none;
background-color: var(--color--neutrals-0);
border: 3px solid var(--color--neutrals-2);
transition: 400ms;
&:checked {
background-color: var(--color--action);
}
}
.customer-field {
display: flex;
align-items: center;
background-color: var(--color--neutrals-1);
border-radius: var(--gap--1);
padding: var(--gap--2) var(--gap--1);
input[type="radio"] {
width: 20px;
height: 20px;
margin: 0 var(--gap--2);
border-radius: 50% !important;
cursor: pointer;
}
label {
cursor: pointer !important;
}
}
.form-container {
background-color: var(--color--neutrals-0);
}
.client {
margin: var(--gap--2) 0;
&__type {
display: flex;
flex-direction: column;
span {
color: var(--color--neutrals-4);
padding: var(--gap--2) 0;
}
&:first-of-type {
margin-bottom: var(--gap--6);
}
}
@media (min-width: 500px) {
display: grid;
grid-template-columns: auto auto;
grid-gap: var(--gap--5);
}
}
.checkbox {
&__label {
color: var(--color--neutrals-4);
a {
color: var(--color--action);
text-decoration: none;
}
}
}
.legal {
color: var(--color--neutrals-4);
margin: 0 0 var(--gap--6) 0 !important;
a {
color: var(--color--action);
text-decoration: none;
}
}
// Error
.input-field__info {
&.has-error {
border: 1px solid var(--color--negative) !important;
}
}
const CARE = (function(window, undefined) {
const SETTINGS = {
debug: false,
modal: 'atc-care',
};
const SELECTORS = {
customerType: '.customer-field',
businessField: '.business-field',
form: '#form-atccare',
item: '.input-field__info',
formTitle: '.form-title',
triggerTitle: '.custom-radio--warranty',
error: '#error-atccare',
action: '.hero-product__actions .action--modal',
};
const CLASSES = {
error: 'has-error',
hidden: 'hidden',
}
function onChange() {
const formTitle = document.querySelector(SELECTORS.formTitle);
const warrantyName = this.dataset.title;
formTitle.innerHTML = warrantyName;
const action = document.querySelector(SELECTORS.action);
if (action) {
if (warrantyName) {
action.dataset.modal = SETTINGS.modal;
} else {
delete action.dataset.modal;
}
}
}
function clientTypeToggle(e) {
const businessField = document.querySelector(SELECTORS.businessField);
const wrapper = e.currentTarget;
const input = wrapper.querySelector('input');
const clientType = input.getAttribute("value");
input.click();
businessField.classList.toggle(CLASSES.hidden);
const elements = businessField.querySelectorAll('input');
if (clientType === "business") {
businessField.classList.remove(CLASSES.hidden);
[...elements].forEach(e => e.removeAttribute('disabled'));
} else {
businessField.classList.add(CLASSES.hidden);
[...elements].forEach(e => e.setAttribute('disabled', true));
}
}
function init() {
if (SETTINGS.debug) { console.log('CARE.init'); }
const form = document.querySelector(SELECTORS.form);
if (form) {
form.addEventListener('submit', onSubmit);
}
const error = document.querySelector(SELECTORS.error);
if (error) {
error.classList.add(CLASSES.hidden);
}
const triggerTitle = document.querySelectorAll(SELECTORS.triggerTitle);
const customerType = document.querySelectorAll(SELECTORS.customerType);
[...triggerTitle].forEach((trigger) => {
trigger.addEventListener('click', onChange)
});
[...customerType].forEach((type) => {
type.addEventListener('click', clientTypeToggle)
});
};
function onSubmit(e) {
if (!validate(e)) {
e.preventDefault();
}
}
function validate(e) {
let errors = false;
const form = e.target;
[...form.elements].forEach(element => {
if (!element.checkValidity()) {
errors = true;
setElementError(element);
} else {
removeElementError(element);
}
})
if (errors) {
e.preventDefault();
}
return !errors;
}
function setElementError(element) {
const item = element.closest(SELECTORS.item);
if (item) {
item.classList.add(CLASSES.error);
}
}
function removeElementError(element) {
const item = element.closest(SELECTORS.item);
if (item) {
item.classList.remove(CLASSES.error);
}
}
document.addEventListener('DOMContentLoaded', init);
}(window));
No notes defined.