<div class="c-voucher-main-form c-voucher-main-form--minimal">
<div class="c-voucher-main-form__reasons">
<div class="c-voucher-main-form__option">
<div class="c-selection c-selection--expandable">
<input class="c-selection__radio u-visuallyhidden" type="radio" name="voucher-reason" id="voucher-reason-double-payment-20">
<div class="text-container">
<div class="c-selection__input"></div>
<p class="c-selection__text">Ho pagato due volte</p>
</div>
<label class="c-selection__label" for="voucher-reason-double-payment-20">
<span class="u-visuallyhidden">Ho pagato due volte</span>
</label>
<div class="c-selection__fold">
<div class="c-voucher-partial-form">
<div class="c-voucher-partial-form__fieldset">
<p class="u-typo-level-2 u-typo-weight-bold u-mb-space-32">Per procedere al rimborso carica la seconda ricevuta del pagamento.</p>
<div class="c-form">
<div class="c-voucher-partial-form__control">
<label for="input-payment-receipt" class="is-positive" aria-label="">
Ricevuta di pagamento <span class="required-marker" aria-hidden="true">*</span>
<input id="input-payment-receipt" type="file" class="" placeholder="" value="" aria-describedby="file-note" multiple>
<p class="c-field__note " id="file-note">
File accettati: .pdf, .png, .jpg. Dimensione massima 3MB
</p>
</label>
<p class="c-field__note" id="" aria-hidden="true">
</p>
</div>
<div class="c-voucher-partial-form__control">
<label for="double-payment-textarea-field" class="" aria-label="">
Info aggiuntive:
<textarea id="double-payment-textarea-field" placeholder="" class="" rows="5" aria-describedby="double-payment-textarea-note"></textarea>
<em class="c-field__note " id="double-payment-textarea-note">
Massimo 500 caratteri
</em>
</label>
</div>
</div>
<p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
</div>
<div class="c-voucher-partial-form__selection">
<p class="u-typo-level-2 u-typo-weight-bold u-color-night-120 u-my-space-24">Indica in che modo vuoi essere rimborsato.</p>
<div grid="grid">
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk-voucher.svg" alt="Voucher digitale">
</div>
<div class="c-selection__text">
<strong>Voucher elettronico parcheggi</strong>
<p class="c-selection__extra-text">(Spendibile, entro un anno, per il prodotto Parcheggi del nostro e-commerce)</p>
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="voucher-88">
<label class="c-selection__label" for="voucher-88">
<span class="u-visuallyhidden"><strong>Voucher elettronico parcheggi</strong></span>
</label>
<div class="c-selection__input"></div>
</div>
</div>
</div>
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk-richiesta-rimborso.svg" alt="Riaccredito">
</div>
<div class="c-selection__text">
<strong>Riaccredito su [Carta di Credito]</strong>
<p class="c-selection__extra-text">(Accredito entro 60 giorni dalla richiesta)</p>
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="credit-back-57">
<label class="c-selection__label" for="credit-back-57">
<span class="u-visuallyhidden"><strong>Riaccredito su [Carta di Credito]</strong></span>
</label>
<div class="c-selection__input"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-voucher-main-form__option">
<div class="c-selection c-selection--expandable">
<input class="c-selection__radio u-visuallyhidden" type="radio" name="voucher-reason" id="voucher-reason-malfunction-76">
<div class="text-container">
<div class="c-selection__input"></div>
<p class="c-selection__text">Malfunzionamento di impianti od apparecchiature dell'Aeroporto di Bologna</p>
</div>
<label class="c-selection__label" for="voucher-reason-malfunction-76">
<span class="u-visuallyhidden">Malfunzionamento di impianti od apparecchiature dell'Aeroporto di Bologna</span>
</label>
<div class="c-selection__fold">
<div class="c-voucher-partial-form">
<div class="c-voucher-partial-form__fieldset c-form">
<div class="c-voucher-partial-form__control">
<label for="malfunction-textarea-field" class="" aria-label="">
Descrivi il malfunzionamento: <span class="required-marker" aria-hidden="true">*</span>
<textarea id="malfunction-textarea-field" placeholder="" class="" rows="5" required aria-required="true" aria-describedby="malfunction-textarea-note"></textarea>
<em class="c-field__note " id="malfunction-textarea-note">
Massimo 500 caratteri
</em>
</label>
</div>
<p class="u-typo-level-2 u-mt-space-32 u-mb-space-16">Se hai della documentazione a supporto della tua richiesta, puoi caricarla qui:</p>
<div class="c-voucher-partial-form__control">
<label for="input-file-malfunction" class="is-positive" aria-label="">
Carica file (facoltativo)
<input id="input-file-malfunction" type="file" class="" placeholder="" value="" aria-describedby="file-note" multiple>
<p class="c-field__note " id="file-note">
File accettati: .pdf, .png, .jpg. Dimensione massima 3MB
</p>
</label>
<p class="c-field__note" id="" aria-hidden="true">
</p>
</div>
<p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
</div>
<div class="c-voucher-partial-form__selection">
<p class="u-typo-level-2 u-typo-weight-bold u-color-night-120 u-my-space-24">Indica in che modo vuoi essere rimborsato.</p>
<div grid="grid">
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk-voucher.svg" alt="Voucher digitale">
</div>
<div class="c-selection__text">
<strong>Voucher elettronico parcheggi</strong>
<p class="c-selection__extra-text">(Spendibile, entro un anno, per il prodotto Parcheggi del nostro e-commerce)</p>
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="voucher-43">
<label class="c-selection__label" for="voucher-43">
<span class="u-visuallyhidden"><strong>Voucher elettronico parcheggi</strong></span>
</label>
<div class="c-selection__input"></div>
</div>
</div>
</div>
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk-richiesta-rimborso.svg" alt="Riaccredito">
</div>
<div class="c-selection__text">
<strong>Riaccredito su [Carta di Credito]</strong>
<p class="c-selection__extra-text">(Accredito entro 60 giorni dalla richiesta)</p>
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="credit-back-39">
<label class="c-selection__label" for="credit-back-39">
<span class="u-visuallyhidden"><strong>Riaccredito su [Carta di Credito]</strong></span>
</label>
<div class="c-selection__input"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-voucher-main-form__option">
<div class="c-selection c-selection--expandable">
<input class="c-selection__radio u-visuallyhidden" type="radio" name="voucher-reason" id="voucher-reason-airport-issue-12">
<div class="text-container">
<div class="c-selection__input"></div>
<p class="c-selection__text">L’Aeroporto di Bologna era chiuso</p>
</div>
<label class="c-selection__label" for="voucher-reason-airport-issue-12">
<span class="u-visuallyhidden">L’Aeroporto di Bologna era chiuso</span>
</label>
<div class="c-selection__fold">
<div class="c-voucher-partial-form">
<div class="c-voucher-partial-form__fieldset c-form">
<div class="c-voucher-partial-form__control">
<label for="malfunction-textarea-field" class="" aria-label="">
Descrivi il malfunzionamento: <span class="required-marker" aria-hidden="true">*</span>
<textarea id="malfunction-textarea-field" placeholder="" class="" rows="5" required aria-required="true" aria-describedby="malfunction-textarea-note"></textarea>
<em class="c-field__note " id="malfunction-textarea-note">
Massimo 500 caratteri
</em>
</label>
</div>
<p class="u-typo-level-2 u-mt-space-32 u-mb-space-16">Se hai della documentazione a supporto della tua richiesta, puoi caricarla qui:</p>
<div class="c-voucher-partial-form__control">
<label for="input-file-malfunction" class="is-positive" aria-label="">
Carica file (facoltativo)
<input id="input-file-malfunction" type="file" class="" placeholder="" value="" aria-describedby="file-note" multiple>
<p class="c-field__note " id="file-note">
File accettati: .pdf, .png, .jpg. Dimensione massima 3MB
</p>
</label>
<p class="c-field__note" id="" aria-hidden="true">
</p>
</div>
<p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
</div>
<div class="c-voucher-partial-form__selection">
<p class="u-typo-level-2 u-typo-weight-bold u-color-night-120 u-my-space-24">Indica in che modo vuoi essere rimborsato.</p>
<div grid="grid">
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk-voucher.svg" alt="Voucher digitale">
</div>
<div class="c-selection__text">
<strong>Voucher elettronico parcheggi</strong>
<p class="c-selection__extra-text">(Spendibile, entro un anno, per il prodotto Parcheggi del nostro e-commerce)</p>
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="voucher-57">
<label class="c-selection__label" for="voucher-57">
<span class="u-visuallyhidden"><strong>Voucher elettronico parcheggi</strong></span>
</label>
<div class="c-selection__input"></div>
</div>
</div>
</div>
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk-richiesta-rimborso.svg" alt="Riaccredito">
</div>
<div class="c-selection__text">
<strong>Riaccredito su [Carta di Credito]</strong>
<p class="c-selection__extra-text">(Accredito entro 60 giorni dalla richiesta)</p>
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="credit-back-8">
<label class="c-selection__label" for="credit-back-8">
<span class="u-visuallyhidden"><strong>Riaccredito su [Carta di Credito]</strong></span>
</label>
<div class="c-selection__input"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-voucher-main-form__option">
<div class="c-selection c-selection--expandable">
<input class="c-selection__radio u-visuallyhidden" type="radio" name="voucher-reason" id="voucher-reason-flight-37">
<div class="text-container">
<div class="c-selection__input"></div>
<p class="c-selection__text">Il mio volo aereo è stato cancellato o dirottato su altro scalo</p>
</div>
<label class="c-selection__label" for="voucher-reason-flight-37">
<span class="u-visuallyhidden">Il mio volo aereo è stato cancellato o dirottato su altro scalo</span>
</label>
<div class="c-selection__fold">
<div class="c-voucher-partial-form">
<div class="c-voucher-partial-form__fieldset c-form">
<p class="u-typo-level-2 u-mb-space-32">Inserisci il codice del volo.</p>
<div grid="grid">
<div grid="6@sm">
<div class="c-voucher-partial-form__control">
<label for="input-departure-date" class="is-datepicker" aria-label="Scegli la data di partenza del volo">
Data di partenza <span class="required-marker" aria-hidden="true">*</span>
<input id="input-departure-date" type="date" class="" placeholder="" value="">
</label>
</div>
</div>
<div grid="6@sm">
<div class="c-voucher-partial-form__control">
<label for="input-flight-number" class="" aria-label="">
Numero volo <span class="required-marker" aria-hidden="true">*</span>
<input id="input-flight-number" type="text" class="" placeholder="" value="">
</label>
</div>
</div>
</div>
<p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
</div>
<div class="c-voucher-partial-form__selection">
<p class="u-typo-level-2 u-typo-weight-bold u-color-night-120 u-my-space-24">Indica in che modo vuoi essere rimborsato.</p>
<div grid="grid">
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk-voucher.svg" alt="Voucher digitale">
</div>
<div class="c-selection__text">
<strong>Voucher elettronico parcheggi</strong>
<p class="c-selection__extra-text">(Spendibile, entro un anno, per il prodotto Parcheggi del nostro e-commerce)</p>
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="voucher-58">
<label class="c-selection__label" for="voucher-58">
<span class="u-visuallyhidden"><strong>Voucher elettronico parcheggi</strong></span>
</label>
<div class="c-selection__input"></div>
</div>
</div>
</div>
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk-richiesta-rimborso.svg" alt="Riaccredito">
</div>
<div class="c-selection__text">
<strong>Riaccredito su [Carta di Credito]</strong>
<p class="c-selection__extra-text">(Accredito entro 60 giorni dalla richiesta)</p>
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="credit-back-15">
<label class="c-selection__label" for="credit-back-15">
<span class="u-visuallyhidden"><strong>Riaccredito su [Carta di Credito]</strong></span>
</label>
<div class="c-selection__input"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-voucher-main-form c-voucher-main-form--minimal{{#if modifier}} {{ modifier }}{{/if}}">
{{!-- VOUCHER REASONS --}}
<div class="c-voucher-main-form__reasons">
<div class="c-voucher-main-form__option">
{{#> @selection--expandable selection-double-payment }}
{{ render "@voucher-partial-form--double-payment" }}
{{/@selection--expandable}}
</div>
<div class="c-voucher-main-form__option">
{{#> @selection--expandable selection-malfunction }}
{{ render "@voucher-partial-form--malfunction" }}
{{/@selection--expandable}}
</div>
<div class="c-voucher-main-form__option">
{{#> @selection--expandable selection-airport-issue }}
{{ render "@voucher-partial-form--malfunction" }}
{{/@selection--expandable}}
</div>
<div class="c-voucher-main-form__option">
{{#> @selection--expandable selection-flight }}
{{ render "@voucher-partial-form--flight" }}
{{/@selection--expandable}}
</div>
</div>
{{!-- END VOUCHER REASONS --}}
</div>
{
"selection-parking": {
"modifier": "c-selection--compact",
"text": "Parcheggio",
"img": {
"src": "/images/svgs/stk_uscita_parcheggio.svg",
"alt": ""
},
"input": {
"id": "selection-parking",
"name": "selection-product"
}
},
"selection-mbl": {
"modifier": "c-selection--compact",
"text": "MBL Vip Lounge",
"img": {
"src": "/images/svgs/stk_MBL.svg",
"alt": ""
},
"input": {
"id": "selection-mbl",
"name": "selection-product"
}
},
"highlight-mbl": {
"text": "<p><strong>Voucher digitale MBL Vip Lounge:</strong></p><p>L'esito della tua richiesta ti sarà comunicato al tuo indirizzo email [mail profilo myblq]</p>"
},
"selection-double-payment": {
"text": "Ho pagato due volte",
"input": {
"id": "voucher-reason-double-payment",
"name": "voucher-reason"
}
},
"selection-malfunction": {
"text": "Malfunzionamento di impianti od apparecchiature dell'Aeroporto di Bologna",
"input": {
"id": "voucher-reason-malfunction",
"name": "voucher-reason"
}
},
"selection-airport-issue": {
"text": "L’Aeroporto di Bologna era chiuso",
"input": {
"id": "voucher-reason-airport-issue",
"name": "voucher-reason"
}
},
"selection-flight": {
"text": "Il mio volo aereo è stato cancellato o dirottato su altro scalo",
"input": {
"id": "voucher-reason-flight",
"name": "voucher-reason"
}
},
"btn-submit": {
"type": "button",
"text": "Invia la richiesta",
"modifier": "c-button--submit"
},
"btn-cancel": {
"type": "button",
"text": "Annulla richiesta",
"modifier": "c-button--as-link",
"id": "btn-cancel-form-request"
}
}
.c-voucher-main-form {
background-color: secondary(basic-white, 100);
padding: remify(16px);
border-radius: remify(8px);
display: flex;
flex-direction: column;
gap: remify(24px);
@include min-screen(bp(tablet)) {
padding: remify(24px);
}
}
.c-voucher-main-form__reasons {
display: flex;
flex-direction: column;
gap: remify(16px);
}
.c-voucher-main-form__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: remify(24px);
}
/*------------------------------------*\
Modifier: c-voucher-main-form--minimal
\*------------------------------------*/
.c-voucher-main-form--minimal {
background-color: transparent;
padding: 0;
}
No notes defined.