form.checkout_fields .input-container { background-color: white; }
form.checkout_fields { padding: 0px 20px; width: calc(100% - 40px); }
form.checkout_fields { display: flex; flex-direction: column; align-items: center; }
    form.checkout_fields .input-container { display: flex; flex-direction: column; border-radius: 7px; padding: 20px 0px 20px 0px; border: none; width: calc(100%); position: relative; margin-bottom: 5px; }
.form-title { display: flex; width: calc(100%); padding: 0px; flex-direction: row; align-items: center; }
form.checkout_fields .input-container.strong_uline { color: #494647; font-style: normal; line-height: 98%; background-color: transparent; text-decoration-line: underline; text-align: justify; margin: 40px; width: 70%; }
.privacy_check { display: flex; flex-wrap: nowrap; width: 72%; margin-bottom: 40px; }
    .privacy_check > div { padding: 20px; text-align: justify; }
form.checkout_fields .input-container input[type="text"], form.checkout_fields .input-container textarea, form.checkout_fields .input-container input[type="password"] { padding: 20px 16px; border-radius: 7px; border: 1px solid #e7e7e7; color: #494647; font-size: 16px; font-style: normal; font-weight: 600; line-height: normal; align-self: stretch; flex: 1; }
    form.checkout_fields .input-container textarea{height:200px;}
    form.checkout_fields ::-webkit-input-placeholder { font-weight: 300; }
.order-summary ::-webkit-input-placeholder { font-weight: 300; }
form.checkout_fields .input-container span:first-child { text-align: left; position: absolute; top: 0px; }
form.checkout_fields .input-container-row { display: flex; justify-content: space-between; width: 72%; margin: 0 auto; gap: 5px; }
.checkbox-container { display: flex; align-items: center; width: 72%; justify-content: flex-start; margin: 10px 0px; }
    .checkbox-container span.label { margin-left: 10px; }
.button-container { margin-top: 40px; }
.progress-container { display: flex; justify-content: center; align-items: center; margin: 20px; width: calc(100% - 40px); }

.progress-bar { display: flex; align-items: center; width: 100%; max-width: 600px; }

.step { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #d3cbc4; display: flex; justify-content: center; align-items: center; color: #d3cbc4; background-color: white; position: relative; cursor: pointer; }

    .step.active { border-color: #7b5e42; color: #7b5e42; }

.connector { height: 2px; background-color: #d3cbc4; flex-grow: 1; margin: 0; }

.step.active + .connector { background-color: #7b5e42; }

form.checkout_fields { display: flex; flex-direction: column; align-items: center; padding: 0px; width: 100%; }
.user-area.orderslist > div.order-all .order_status.returnproducts { background-color: transparent; }
form.checkout_fields .input-container.error input[type="text"], form.checkout_fields .input-container.error input[type="password"] { border: 1px solid #ff0000; }
.input-container.error::before { content: "Campo obbligatorio"; color: red; position: absolute; top: -5px; right: 10px; margin-top: 5px; }

.spedizione.section_wrapper > *.active:last-child { margin-bottom: 0px; }
.shipping-method { padding-top: 0px; position: relative; width: 100%; }
    
    .shipping-method input[type="radio"] { margin-right: 10px; outline: none; position: absolute; }
.hidden { display: none !important; }
div#invoice-type.hidden { display: none; }
.shipping-method > label { padding: 20px 20px; display: flex; align-items: center; font-size: 20px; font-style: normal; font-weight: 300; line-height: normal; color: #000; border: 1px solid #e7e7e7; border-radius: 7px; }
.shipping-method.active > label { border: 2px solid #000; color: #000; font-weight: 600; }
#inStoreOptions span { position: relative; }
.medula-admin { display: none !important; }
.shipping-method > label::before { content: ''; display: flex; margin-right: 12px; vertical-align: middle; width: 16px; height: 16px; appearance: none; border: 1px solid #A5A5A4; border-radius: 4px; font-size: 14px; line-height: 16px; justify-content: center; font-weight: 400; }
.shipping-method.error::before { content: "Campo obbligatorio"; color: red; position: absolute; top: -25px; right: 10px; margin-top: 5px; }
.shipping-method.error > label { border: 1px solid #ff0000; }
.shipping-method.active > label::before { content: '✔'; background-color: #4caf50; border: 2px solid #4caf50; color: #fff; }
.input-container select { width: 100%; padding: 20px 16px; border-radius: 7px; border-radius: 7px; border: 1px solid #CDCDCD; margin-bottom: 20px; }
.options { width: 100%; }
div#inStoreOptions .input-container, div#courierOptions .input-container { padding: 20px 0px 10px 0px; }
img.antepri { max-width: 30px; margin-left: 10px; }
.order-summary.opened > .order-summary-title > img.antepri { display: none; }
.order-summary { width: calc(100% - 40px); margin: 0 auto; border: none; padding: 0px 20px; background-color: #F5F5F5; border-radius: 0px; }
.order-summary-title { display: flex; align-items: center; justify-content: space-between; }
.order-summary .item { display: flex; justify-content: space-between; align-items: stretch; /*border-bottom: 1px solid #dad9d9; border-top: 1px solid #dad9d9;*/ flex-direction: column; }
    .order-summary .item .item-image { flex: 1; }
.order-summary .item-image img { width: 100%; height: auto; object-fit: cover; border-radius: 0px; border: 0.5px solid rgba(0, 0, 2, 0.51); }
.order-summary .item-details { flex: 3; margin-left: 0px; display: flex; flex-direction: column; padding: 0px 0px 0px 20px; align-items: flex-start; }
.order-summary .item-brand { display: flex; width: 100%; align-items: center; margin-bottom: 5px; }
    .order-summary .item-brand span.item-last { margin-left: auto; }
.order-summary .item-low { width: 100%; display: flex; flex-direction: row; justify-content: space-between; margin-top: auto; align-items: stretch; }
.order-summary .coupon { display: flex; align-items: center; position: relative; padding: 0px 0px 20px 0px; height: 40px; }
    .order-summary .coupon.opened { padding: 20px 0px 20px 0px; }
    .order-summary .coupon > * { height: 100%; }
    .order-summary .coupon input { flex: 2; padding: 5px; border: 1px solid #fff; border-radius: 7px 0px 0px 7px; margin-right: 0px; }
    .order-summary .coupon button { padding: 0px 20px; background-color: #494647; color: #fff; border: none; border-radius: 0px 7px 7px 0px; cursor: pointer; height: 48px; font-size: 16px; font-weight: 300; }
    .order-summary .coupon button { padding: 5px 10px; background-color: #333; color: #fff; border: none; border-radius: 0px 7px 7px 0px; cursor: pointer; }
.order-summary-details { flex-direction: column; display: flex; }
.order-summary .coupon label { color: #494647; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; text-transform: uppercase; position: absolute; top: -15px; display: none; }
.order-summary .coupon.opened label { display: flex; }
.order-summary-details > div { display: flex; flex-direction: row; justify-content: flex-start; width: 100%; padding: 14px 0px; align-content: center; }
.order-summary-details > div { display: flex; flex-direction: row; justify-content: flex-start; width: 100%; align-content: center; }
.order-summary-details > div > span:last-child { margin-left: auto; }
.black-button { display: flex; align-items: center; align-self: center; margin: 0px auto; border-radius: 8px; background: #494647; color: #fff; height: 48px; align-content: center; padding: 0px 40px; font-weight: 300; }
.black-button:hover { color: #fff; background-color: #000; }
.order-summary-details,
.order-summary .item {max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin-bottom 0.5s ease-in-out; padding: 0; margin-bottom: 0;}
.order-summary .item.opened { margin-bottom: 30px; }
.order-summary-details.opened { max-height: 1000px; }
.item.opened { max-height: 1000px; padding: 15px 0px 0px 0px; }
.item-single { display: flex; justify-content: space-between; align-items: stretch; margin-bottom: 15px; }
a.open_item.opened { background-image: url(/contents/svg/ics.svg); height: 23px; width: 23px; }


.form-title h3, .form-title h4, .form-title h5, .form-title h6, .order-summary h2, .order-summary-title h4,
.checkout_fields h3, .checkout_fields h4, .checkout_fields h5, .checkout_fields h6 { font-family: 'basic-sans', sans-serif; }
.form-title h4 { font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; text-transform: uppercase; padding: 0px; margin: 16px 0px; }
.form-title h5 { font-size: 13px; font-style: normal; font-weight: 600; line-height: normal; padding: 0px; color: #494647; margin-left: auto; }
form.checkout_fields .input-container span:first-child { color: #939292; font-style: normal; line-height: normal; font-size: 16px; font-weight: 300; }

.remove_item { background-image: url(/contents/images/reserved/com/cestino_bt.png); width: 15px; height: 17px; background-size: 100%; background-repeat: no-repeat; display: flex; }
.shipping-timing { display: inline-block; padding: 0px 0px 30px; background-color: #fff; font-size: 14px; text-align: left; width: 100%; }
    .shipping-timing span { margin-left: 5px; font-weight: 600; }
.order-summary-title h2 { font-size: 24px; font-style: normal; font-weight: 400; line-height: normal; color: #494647; display: none; }
.order-summary-title h4 { color: #494647; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
span.brand-name { color: #494647; text-align: justify; font-family: "questa-grande"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 125%; }
span.sale-percent { margin: 0px 10px; color: #CC3617; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; border: 0.5px solid #cc3617; border-radius: 7px; padding: 2px 2px; }
.item-name { color: #494647; font-size: 16px; font-style: normal; font-weight: 400; line-height: 15px; letter-spacing: -0.16px; }
.item-code { color: #494647; font-size: 12px; font-style: normal; font-weight: 400; line-height: 15px; letter-spacing: -0.12px; }

.item-low-sx { display: flex; color: #494647; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; flex-direction: column; align-items: flex-start; }
.item-low-dx { display: flex; color: #494647; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; flex-direction: column; align-items: flex-end; }
.item-low-sx span { font-weight: 600; }
.item-quantity, .item_size { font-size: 15px; }
.item-price { margin-top: auto; color: #000; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.18px; }
.item-saleprice { color: #000; font-size: 14px; font-style: normal; font-weight: 300; line-height: normal; letter-spacing: -0.14px; text-decoration: line-through; }
a.open_item { width: 23px; background-image: url(/contents/images/reserved/com/freccia_medium_bg.png); height: 23px; background-repeat: no-repeat; background-position: center; margin-left: 20px; }


.line-three-elements > span:nth-child(2) { font-weight: 600; margin-left: 10px; }
.line-two-elements.order { font-weight: 600; padding-top: 30px; border-top: 1px solid #dad9d9; margin-top: 15px; text-transform: uppercase; }
    .line-two-elements.order > span:nth-child(2), .totale_mobile { font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.18px; }
.totale_mobile { margin-left: auto; }
.payment-option { display: flex; align-items: flex-start; margin-bottom: 20px; border: 1px solid #e7e7e7; padding: 20px; border-radius: 8px; }
.payment.section_wrapper > .payment-option:last-child { margin-bottom: 0px; }
.payment-option.flag_on { border: 2px solid #000; }
.payment-option:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.payment-radio { width: 20px; height: 20px; appearance: none; border: 1px solid #A5A5A4; border-radius: 4px; margin-right: 15px; cursor: pointer; position: relative; flex-shrink: 0; margin-top: 18px; }
.payment-option.bank .payment-radio { margin-top: 0px; }
.payment-radio:checked { background-color: #4caf50; border: 2px solid #4caf50; }
    .payment-radio:checked::after { content: '✔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; color: #FFF; }
.payment-content { flex-grow: 1; }
    .payment-content label { display: flex; align-items: center; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; color: #000; }
        .payment-content label .payment-title { display: none; }
.bank .payment-content label .payment-title { display: block; }
.bank .payment-content label .payment-title > span:nth-child(2) { display: none; }
.payment-content img { margin-right: 10px; max-width: 60%; }
.payment-description { font-size: 0.9em; color: #000; margin-top: 5px; font-size: 14px; font-style: normal; font-weight: 300; line-height: normal; text-align: left; }
.payment-description a { color: #007bff; text-decoration: none; cursor: pointer; }
 .payment-description a:hover { text-decoration: underline; }
.popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
.popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; max-height: 400px; padding: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; overflow-y: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.invoice.compact .input_wrapper { display: none; }
.invoice-option .input-container { margin-top: 10px; }
.invoice-option .input-container.error input { border-color: red; }
.invoice-option .hidden { display: none; }
div#invoice-type { display: flex; flex-direction: column; margin-bottom: 20px; }
.invoice-option { display: flex; gap: 20px; margin-top:20px; }
.wrap-option { display: flex; margin-top: 20px; margin-bottom: 20px; flex-direction: column; align-items: flex-start; }
.invoice-option .toggle-container, .wrap-option .toggle-container { cursor: pointer; font-weight: 400; padding: 10px; font-size: 18px; padding-left: 0px; }
.invoice-option .toggle-selected, .wrap-option .toggle-selected { font-weight: bold; }
.invoice-option .toggle-container.ball::before, .wrap-option .toggle-container.ball::before { display: inline-flex; content: ""; width: 14px; height: 14px; border-radius: 50%; background-color: #DCDCDC; margin-right: 10px; }
.invoice-option .toggle-container.ball.toggle-selected::before, .wrap-option .toggle-container.ball.toggle-selected::before { background-color: #000; }
.invoice-option .toggle-container.line, .wrap-option .toggle-container.line { text-decoration: none; font-weight: 300; padding-left: 0px; }
.invoice-option .toggle-container.line.toggle-selected, .wrap-option .toggle-container.line.toggle-selected { text-decoration: underline; font-weight: 600; color: #000;}
.invoice.section_wrapper .input_wrapper { padding-bottom: 30px; }
.input_wrapper.hidden { display: none; }
input#cfButton { margin-top: 30px; }
.postcard.compact .input_wrapper { display: none; }
.postcard.section_wrapper .input_wrapper.hidden{display:none;}
.postcard-option .input-container { margin-top: 10px; }
.postcard-option .input-container.error input { border-color: red; }
.postcard-option .hidden { display: none; }
div#postcard-type { display: flex; flex-direction: column; margin-bottom: 20px; }
.postcard-option { display: flex; gap: 20px; margin-bottom: 0px; }
div#postcard-container .input-container { padding-bottom: 20px; }
div#postcard-container .input-container.select { padding-bottom: 5px; }
.wrap-option { display: flex; margin-bottom: 20px; flex-direction: column; align-items: flex-start; }
.postcard-option .toggle-container, .wrap-option .toggle-container { cursor: pointer; font-weight: 400; padding: 10px; font-size: 18px; padding-left: 0px; }
.postcard-option .toggle-selected, .wrap-option .toggle-selected { font-weight: bold; }
.postcard-option .toggle-container.ball::before, .wrap-option .toggle-container.ball::before { display: inline-flex; content: ""; width: 14px; height: 14px; border-radius: 50%; background-color: #DCDCDC; margin-right: 10px; }
.postcard-option .toggle-container.ball.toggle-selected::before, .wrap-option .toggle-container.ball.toggle-selected::before { background-color: #000; }
.postcard-option .toggle-container.line, .wrap-option .toggle-container.line { text-decoration: none; font-weight: 300; padding-left: 0px; }
.postcard-option .toggle-container.line.toggle-selected, .wrap-option .toggle-container.line.toggle-selected { text-decoration: underline; font-weight: 600; color: #000; }
.postcard.section_wrapper .input_wrapper { padding-bottom: 30px; }
.modtem1004.wd100.wm100 { max-width: 1366px; margin: 0px auto; float: none; display: flex; flex-direction: column; }
.section_wrapper { flex: 1; display: flex; flex-direction: column; padding: 0px; margin: 0px 20px 10px 20px; border: none; border-radius: 7px; align-self: stretch; }
.spedizione.section_wrapper div#inStoreContainer { margin-bottom: 20px; }
.input_wrapper { display: flex; border: 1px solid #ededed; padding: 30px 20px 0px 20px; flex-direction: column; align-self: stretch; }
.modulomedula { display: none !important; }
.section_wrapper.compact .input-container { display: none; }
.spedizione_1.compact .shipping-method { display: none; }
.spedizione_1.compact .output_statico, .spedizione_2.compact .output_statico, .payment.compact .output_statico, .invoice.compact .output_statico { display: flex; border: 1px solid #ededed; padding: 30px 20px 30px 20px; flex-direction: column; align-self: stretch; flex: 1; }
.edit_input { display: none; }
.compact .output_statico { display: block; }
.output_statico { padding-bottom: 30px; display: none; }
.compact .edit_input { display: flex; position: absolute; right: 0px; font-size: 13px; font-weight: 600; text-decoration: underline; }
.compact .form-title { position: relative; }
    .compact .form-title h5 { display: none; }
.spedizione_2.compact .input_wrapper { display: none; }
.wrapInStoreOptions { border-radius: 7px; border: none; position: relative; margin-bottom: 5px; display: flex; border: 1px solid #ededed; padding: 30px 20px 0px 20px; flex-direction: column; align-self: stretch; }
.compact .wrapInStoreOptions { display: none; }
/*.payment.compact .payment-option { display: none; }*/ 
.output_statico .shipping-timing { font-size: inherit; }
.compact .payment-title, .compact .output_statico { display: flex; flex-direction: column; align-items: flex-start; }
.close_popup { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background-color: #000; color: #fff; border: none; border-radius: 50%; font-size: 16px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: background-color 0.3s ease; }
    .close_popup:hover { background-color: #444; }
/* Stile base del popup per mobile (già funzionante) */
.section_wrapper.option_popup { width: calc(100vw - 40px); height: 100vh; top: 0; left: 0; transform: none; border-radius: 0; background-color: #fefefe; padding: 20px; border: none; display: flex; flex-direction: column; max-height: 100vh; overflow-y: auto; position: fixed; z-index: 101; margin: unset; opacity: 0; animation: slideInMobile 0.5s forwards; }
select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url('/contents/svg/dwn_arw.svg') no-repeat right 10px center;  padding-right: 30px; }
select { width: 100%;  padding: 10px 20px;  border-radius: 10px;  border: 1px solid #e0dede;  font-weight: bold;  background-color: white;  cursor: pointer; }
.invoice.section_wrapper .input_wrapper { padding-bottom: 30px; }
/* Selettore per nascondere il popup con effetto di uscita */
.section_wrapper.option_popup.hidden { animation: slideOutMobile 0.5s forwards; }
/* Overlay Checkout */
.overlay_checkout { display: flex; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100vh; overflow: hidden; background-color: rgba(0, 0, 0, 0.8); opacity: 0; animation: fadeIn 0.5s forwards; }
.overlay_checkout.hidden { animation: fadeOut 0.5s forwards; }
/* Versione Desktop */
@media screen and (min-width: 990px) {
.section_wrapper.option_popup { width: 600px; max-width: 90vw; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 24px; padding: 40px; border: 1px solid #888; max-height: 100vh; opacity: 0; animation: slideInDesktop 0.5s forwards; }
 .section_wrapper.option_popup.hidden { animation: slideOutDesktop 0.5s forwards; }
.spedizione.section_wrapper.option_popup { height: 700px; }
.payment.section_wrapper.option_popup { height: 700px; }
.invoice.section_wrapper.option_popup { height: 500px; }
.dati.section_wrapper.option_popup { height: 500px; }
}
/* Animazioni per l'overlay */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Animazioni per il popup - Mobile */
@keyframes slideInMobile {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideOutMobile {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-100%); opacity: 0; }
}

/* Animazioni per il popup - Desktop */
@keyframes slideInDesktop {
    from { transform: translate(-50%, -60%); opacity: 0; }
    to { transform: translate(-50%, -50%); opacity: 1; }
}

@keyframes slideOutDesktop {
    from { transform: translate(-50%, -50%); opacity: 1; }
    to { transform: translate(-50%, -60%); opacity: 0; }
}




@media screen and (min-width: 990px) {
    .modtem1004.wd100.wm100 { flex-direction: row; }
    .order-summary { flex: 2; order: 2; }
    form.checkout_fields { flex: 3; order: 1; }
    .input_wrapper, .wrapInStoreOptions, .private-container, .company-container { display: flex; flex-wrap: wrap; column-gap: 20px; flex-direction: row; flex: 1; }
    form.checkout_fields .section_wrapper .wrapInStoreOptions > .input-container,
    form.checkout_fields .dati.section_wrapper .input_wrapper > .input-container { width: calc(50% - 10px); }
    form.checkout_fields .dati.section_wrapper.option_popup .input_wrapper { display: flex; align-content: flex-start; }
    form.checkout_fields
    .order-summary { padding: 20px; }
    .order-summary-title h2 { display: flex; }
    .totale_mobile, a.open_item { display: none; }
    .order-summary-details { display: flex; }
    .order-summary .item { display: flex; }
    .order-summary .coupon > label { display: flex; top: -30px; }
    .order-summary-details { max-height: 1000px; }
    .order-summary .item { max-height: 1000px; padding: 15px 0px 0px 0px; margin-bottom: 50px; }
    .spedizione_1, .spedizione_2 { display: flex; gap: 20px; flex-wrap: wrap; }
    .payment.section_wrapper { display: flex; gap: 20px; flex-wrap: wrap; flex-direction: row; }
    
    .spedizione_2 .shipping-method, .payment-option, .invoice .input-container,
    .spedizione_1 .shipping-method { flex: 1 1 calc(50% - 10px); /* Ogni elemento occupa circa la metà dello spazio disponibile meno 10px (per tenere conto del gap) */ box-sizing: border-box; /* Include padding e bordi nella larghezza totale */ }
    .payment-option { margin-bottom: 0px; }
    .invoice-option, .invoice-type { width: 100%; margin-bottom: 0px; }
    .input_wrapper.hidden, .wrapInStoreOptions.hidden { display: none; }
    .order-summary > .order-summary-title > img.antepri { display: none; }
}
    .w-80 {
        width: calc(80% - 10px) !important;
    }

    .w-20 {
        width: calc(20% - 10px) !important;
    }
    .w-100 {
        width: calc(100% - 10px) !important;
    }
    .display_none{
        display: none !important;
    }