/* grid+flex */

.row-grid-flex-pre-cart {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tre colonne di uguale larghezza */
    gap: 30px; /* Spaziatura tra le colonne */
}

/* Colonna dell'immagine */
.image-column {
    /*  20250321 1701
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    */
    /* 20250321 */
}

/* Riquadro dell'immagine */
.image-box {
    flex-grow: 1; /* L'immagine occuperà lo spazio disponibile */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position:relative; /* 20250210 fix icon added-to-cart */
}

.added-to-cart {
    color: #C00 !important;
    display: table-cell;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 8px;
    right: 6px;
    z-index: 91;
    text-align: center;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.added-to-cart:before {
    content: "\e116";
}

/*
.row-grid-flex-pre-cart .image-box img {
    border: 1px solid #AAA;
}
*/
.row-grid-flex-pre-cart .image-box img {
    border: 1px solid #AAA;
    aspect-ratio: 1179 / 892; /* 20250303 per evitare collasso se non trova immagine */
    width: 100%;
}

/* Riquadri piccoli sotto l'immagine */
.small-boxes {
    display: flex;
    gap: 10px;
        /* 20250319 */
        flex-wrap: wrap;
        justify-content: space-between;
}
/* Riquadri piccoli */
.product-version-box {
    
    display:flex;
    /* flex: 1; */ /* Occupa spazio uguale tra i due riquadri */
        /* 20250319 */
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 48%;


    align-items: center;
    justify-content: center; 
    text-align: center;

    height: 140px; /* Altezza fissa per i riquadri piccoli - in modo da poterla sottrarre al 100% in .border-box */
    border: 1px solid #AAA;
    padding: 4px;

    background-color: rgb(224,224,224);
}
@media screen and (min-width:576px) { /* 20250319 */
    .product-version-box {
        flex-basis: 48.95%;
    }
}    
@media screen and (min-width:992px) { /* 20250319 */
    .product-version-box {
        flex-basis: 48.2%;
    }
}    


.version-available {
    cursor: pointer;
    border-color: #32B044;
    /* background-color: #FFF; */
}
.version-unavailable {
    /* border-color: #C00; */
}
.version-available:hover, .version-selected {
    background-color: #FFF;
}

.version-available,
.version-unavailable {
    position:relative;
}
.version-available::after,
.version-unavailable::after {
    content: "";
    width: 22px;
    height: 22px;
    display: block;

    background-color: transparent;
    /* background-image: url(/dev/shopping_cart_dev/images/icons/icon_alert.svg); */
    background-image: url('../svg/icon_alert.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* 22px; */
    border: 0;

    position:absolute;
    top: 4px;
    right: 4px;
}
.version-available::after {
    background-image: url('../svg/icon_ok.svg');
}


.version-label,
.version-price {
    display: block;    
    font-weight:900;
    line-height: 1.1em; /* 1.2em; */
    margin:4px 0;
}
.version-label {
    font-family:var(--ikv3-font-label);
    font-size:1.3rem; /* 20250319 */
    text-transform: uppercase;
}
.version-price {
    font-size:2.4rem;
}

/* Riquadri di testo */
.payment-option-column {
    /* 20250321 1700
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
    */
    /* Allinea in alto */
}

.payment-option-column .btn-slim>span {
    display:inline-block;
    padding-left:10px;
    padding-right:10px;
}

.payment-option-column .border-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */ /* space-evenly; */
    justify-content: space-between; /* 20250321 1703 */
    text-align: center;

    /* -------------------------------------------------------- IMPORTANT -------------------------------------------------------- */
/*    height: calc(100% - 190px); */ /* Altezza della colonna meno gli small-boxes e l'extra info coi rispettivi margini */ 
/*    height: calc(100% - (120px + 10px + 50px + 10px)); */ /* Altezza della colonna meno gli small-boxes e l'extra info coi rispettivi margini */

/* 
    height: calc(100% - (140px + 10px + 50px + 10px)); 
    20250319 NO - la gestiamo con aspect-ratio
*/
    /* Altezza della colonna meno gli small-boxes e l'extra info coi rispettivi margini */

    /* -------------------------------------------------------- IMPORTANT -------------------------------------------------------- */

    background-color: #FFF;
    border: 1px solid #AAA;
}

.no-small-boxes .payment-option-column .border-box {
    /* -------------------------------------------------------- IMPORTANT -------------------------------------------------------- */
    /* height: calc(100% - (50px + 10px) ); 
        20250319 NO - la gestiamo con aspect-ratio
    */ 
    /* Altezza della colonna meno l'extra info coi rispettivi margini */
    /* -------------------------------------------------------- IMPORTANT -------------------------------------------------------- */
}

@media screen and (min-width:992px) { /* 200250319 */
    
    .row-grid-flex-pre-cart .column .border-box { /* 20250416 */
        width: 100%;
        height: 0;
        padding-bottom: 75.30%;
    }    
    @supports (aspect-ratio: auto) { /* 20250416 */
        .row-grid-flex-pre-cart .column .border-box {
            aspect-ratio: 1179 / 892;
            height: unset;
            padding-bottom: unset;
        }
    }

}


.payment-option-column .top-block {
    /*  20250321 1659
        height:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:  center; 
    */
        /* space-evenly; 20250321*/
}
.payment-option-column .price {
    font-size:5rem; /* 50px; */
    font-weight:800;

    line-height: 1.2em; /* 20250321 */
    min-height: 1.4em; /* 20250321 1719 to fix different height and margin-bottom of .sub-period */

    margin-top: .4em;
}
.payment-option-column .label-payment-type, 
.payment-option-column .description,
.extra-info {
    font-family:var(--ikv3-font-label);
    line-height:1.6rem;
}
.payment-option-column .label-payment-type, 
.payment-option-column .description {
    margin:0 15px; /* 20250321 15px; */
}
.payment-option-column .label-payment-type {
    /* 20250321 margin: 25px; */
}
.payment-option-column .description {
    line-height:1.2em; /* 20250321 */

    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media screen and (max-width:991px) { /* 20250321 */
    .payment-option-column .description {
        margin:15px;
    }
    .payment-option-column .label-payment-type {
        margin: 25px; 
    }
}


.payment-option-column .label-payment-type {
    font-weight:800;
    text-transform: uppercase;
    padding-bottom: 5px; /* 20250321 */
}
.payment-option-column .label-payment-type {
    font-size:1.8rem; /* 20250321 1724 */
}
.payment-option-column .description {
    font-size:1.3rem;
}
.payment-option-column .btn {
    margin-top:auto;
    margin-bottom:25px;
}

@media screen and (max-width:991px) { /* 20250321 */
    .payment-option-column .btn {
        margin-top: 25px; /* 20250321 */
    }    
}

@media screen and (min-width:992px) { /* 20250321 */
    .payment-option-column .btn-primary {
        /* padding: 15px; */
        padding: min(12px, calc(100vw / 1440 * 12)); /* 20250321 */
    }
    .payment-option-column .btn {
        /* margin-top: min(15px, calc(100vw / 1440* 15)); */ /* 20250321 */
        /* margin-bottom: min(25px, calc(100vw / 1440 * 25)); */ /* 20250321 */
        margin-bottom: 30px; /* 20250321 1730 */
        margin-top: 1.2em; /* 20250416 */
    }
    @supports (aspect-ratio: auto) { /* 20250416 */        
        .payment-option-column .btn {
            margin-top:unset;
        }            
    }
    .payment-option-column .top-block {
        /* margin-top: min(25px, calc(100vw / 1440 * 25)); */ /* 20250321 1706 */
        margin-top: 30px; /* 20250321 1730 */
        /* padding-top: min(15px, calc(100vw / 1440 * 15)); */ /* 20250321 */
    }
    .payment-option-column .label-payment-type {
        padding-bottom: min(15px, calc(100vw / 1440 * 10)); /* 20250321 1744 */
    }
}
@media screen and (min-width:1200px) { /* 20250321 */
    .payment-option-column .label-payment-type {
        /* font-size: min(1.6rem, calc(100vw / 1440 * 26)); */ /* calc(100vw / 1280 * 32); */ /* 1.6rem = 25.6 */
        font-size: min(1.8rem, calc(100vw / 1440 * 20 )); /* 20250321 1742 */  /* 20250321 1726 was 20 */
    }
    .payment-option-column .description {
        font-size: min(1.3rem, calc(100vw / 1440 * 21)); /* calc(100vw / 1280 * 32); */ /* 1.3rem = 20.8 */
    }

    .payment-option-column .price {
        /* font-size:5rem; */ /* 50px; */
        font-size: min(5rem, calc(100vw / 1440 * 50)); /* calc(100vw / 1280 * 32); */ /* 5rem = 80 */
    }
}
@media screen and (min-width:1200px) and (max-width:1439px) { /* 20250321 1759 */
    .payment-option-column .top-block {
        margin-top: max(30px, calc(100vw / 1440 * 40)); /* 20250321 1753 */
    }
}
@media screen and (min-width:1440px) { /* 20250321 */
    .payment-option-column .top-block {
        margin-top: 40px; /* 20250321 1759 */
    }
}


.payment-option-column .currency {
    /* font-size:75%; */
    white-space: nowrap;
}
.sub-period {
    font-size:50%;
}
.extra-info {
    font-size:1.2rem;  /* 1.1rem 20250324 0.5em; 0.65em; */
    line-height:1.6rem; /* .8em; 1.2em; */
    /* background-color: greenyellow; */
}

.small-boxes,
.extra-info {
    margin-top: 10px;
}
.column.image-column .extra-info,
.column.payment-option-column .extra-info {
    display: block; /* 20250321 1716 */
    /* 20250321
        height:50px;
        overflow-y:hidden;
    */
}
.extra-info.version-eligibility {
}

/* layout responsivo */
@media (min-width: 992px) and (max-width: 1199px) {
    .row-grid-flex-pre-cart {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Tre colonne di uguale larghezza */
        gap: 15px; /* Spaziatura tra le colonne */
    }

    .payment-option-column .label-payment-type, 
    .payment-option-column .description {
        /* 20250321 margin:10px; */
    }
    

    .payment-option-column .price {
        font-size:4rem; /* 5rem; */
    }
    .payment-option-column .label-payment-type {
        /* font-size:1.2rem; */ /* 20250321 */ /* 1.4rem; */
        font-size:1.4rem; /* 20250321 1738 */
    }
    .payment-option-column .description {
        font-size:1.1rem; /* 20250321 */ /* 1.4rem; */
    }

    .version-label {
        font-size:1.1rem; /* 1.4rem; */
    } 
    .version-price {
        font-size:1.8rem; /* 2.4rem; */
    }
}

@media (min-width: 992px) and (max-width: 1439px) { /* 20250321 1736 */
    .payment-option-column .price {
        margin-top: min(.4rem, calc(100vw / 1440 * 20));
    }
}


/* layout responsivo */
@media (max-width: 991px) {
    .row-grid-flex-pre-cart {
        grid-template-columns: 1fr; /* Una sola colonna per schermi piccoli */
    }

    .payment-option-column .border-box { 
        height:auto;
        padding:30px;
    }
}




.text-icon-alert {
    display:inline-block;
    /* padding-left:30px; */
    padding:5px 0 5px 30px; /* 20250319 */
    position:relative;
}
.text-icon-alert::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;

    background-color: transparent;
    background-image: url('../svg/icon_alert.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* 18px; */
    border: 0;

    position:absolute;
    top:min(50%, 16px); /* abbassa al massimo a 16px pree allineare al centro di due righe, se il testo è più lungo rimane lì*/   
    left:0;
    margin-top:-11px;
}


.coupon-dovetail-right {
	height: 30px;
    width: 75px; 
    background-color:#C00;
    color:white;
    position:relative;
    padding-left:10px;
    padding-right:0;
    vertical-align:middle;
    
    display:flex;
    flex-direction: column;
    justify-content: center; /* space-evenly; */
    text-align: left;

    float:left;
}
.coupon-dovetail-right::after {
	content:"";    
	position:absolute;
	top:0;
    right:0;
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-right: 10px solid #f2f2f2;
	border-bottom: 15px solid transparent;
}
.bg_light_grey .coupon-dovetail-right::after {
	border-right: 10px solid #f2f2f2;
}
.bg_white .coupon-dovetail-right::after {
	border-right: 10px solid #FFFFFF;
}
.coupon-dovetail-right>span{
    font-size:14px;
    font-weight:800;
}


.form-coupon {
    display:grid;
/*  grid-template-columns: [dovetail-flag] 90px [input-label] max-content [empty-space] auto; */
    grid-template-columns: [dovetail-flag] 90px [input-label] max-content; /* label alla lunghezza massima che occupa il testo */
}
@media (max-width:991px) {
    .form-coupon {
        grid-template-columns: [dovetail-flag] 90px [input-label] auto; /* label alla lunghezza massima nella pagina */
    }
}

.coupon-control label {
    font-family:var(--ikv3-font-label);
    font-size:1.4rem;
    text-transform: uppercase;
    font-weight:900;
}

.coupon-control {
	height: 30px;
    display:flex;
    flex-direction: column;
    justify-content: center; /* space-evenly; */
    text-align: left;
}




/* CUSTOM FORM */

.custom-form-element label {
  display: flex;
  justify-content: flex-start;
  align-items: center; /* allineamento verticale */
  flex-wrap: nowrap;
  margin: 12px 0;
  cursor: pointer;
  position: relative;
  box-sizing:content-box !important;
}
.custom-form-element .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgb(0 0 0 / 15%); /* none;  */
}
.custom-form-element .checkbox-form-control.centered {
    display: flex;
    justify-content: center;
}
.custom-form-element .checkbox-form-control,
.custom-form-element label.checkbox-form-control {
    display: grid;
    grid-template-columns: [checkbox] 35px [label-text] auto; /* spazio dedicato a checkbox e label */
    
    gap: 5px; /* 0.5em; */
    /*
    padding-left: 6px;
    padding-right: 6px;
    */
}

.custom-form-element .checkbox-form-control input[type="checkbox"], 
.custom-form-element .checkbox-form-control input[type="radio"] { /* nascondo l'aspetto dei widget di default */
    position: relative;
    left:0;
    right:0;
        top:1px; /* se no si disallinea */
    bottom:0;
    z-index: 1020; /* mi assicuro che stia sopra a tutto - TUTTO TRANNE LA NAVIGAZIONE navbar = 1030 - per intercettare il click */
    opacity: 1;

    -webkit-appearance: none;
    appearance: none;
    background-color: transparent; /* fuchsia; */
    /* For iOS < 15 to remove gradient background */
    margin: 0; /* Not removed via appearance */
    font: inherit;
    color: currentColor;
    width: 30px;
    height: 30px;
    border: 2px solid #000; /* rgba(255, 255, 255, .7); */
    transform: translateY(-0.075em);

    display: grid;
    place-content: center;
    cursor: pointer;
}

.custom-form-element .checkbox-form-control input[type="checkbox"]::before, 
.custom-form-element .checkbox-form-control input[type="radio"]::before { /* ::BEFORE */
    content: "";
    width: 30px;
    height: 30px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;

    background-size: 100%;
    background-position: center center;
    background-color: transparent;
    cursor: pointer;
}

/* CHECKBOX */
.custom-form-element .checkbox-form-control input[type="checkbox"],
.custom-form-element .checkbox-form-control input[type="checkbox"]::before {
    border-radius: 0;
} 
.custom-form-element .checkbox-form-control input[type="checkbox"]::before {
    background-image: url('../svg/ik_icon_checkmark_squared_checkmark.svg');
}
.custom-form-element .checkbox-form-control.rounded input[type="checkbox"],
.custom-form-element .checkbox-form-control.rounded input[type="checkbox"]::before {
    border-radius: 100%;
}
.custom-form-element .checkbox-form-control.rounded input[type="checkbox"]::before {
    background-image: url('../svg/ik_icon_checkmark.svg');
}

/* RADIO */
.custom-form-element .checkbox-form-control input[type="radio"],
.custom-form-element .checkbox-form-control input[type="radio"]::before {
    border-radius: 100%; /* default tondo  */
}
.custom-form-element .checkbox-form-control input[type="radio"]::before {
    background-image: url('../svg/ik_icon_radio.svg');
}

.custom-form-element .checkbox-form-control.squared input[type="radio"],
.custom-form-element .checkbox-form-control.squared input[type="radio"]::before {
    border-radius: 0%; /* default tondo  */
}
.custom-form-element .checkbox-form-control.squared input[type="radio"]::before {
    background-image: url('../svg/ik_icon_radio_squared.svg');
}

.custom-form-element .checkbox-form-control input[type="checkbox"]:checked::before, /* CHECKED */
.custom-form-element .checkbox-form-control input[type="radio"]:checked::before {
    transform: scale(1);
}
.custom-form-element .checkbox-form-control+.checkbox-form-control {
    margin-top: 14px; /* caso particolare - sequenza di checkbox */
}
.custom-form-element label.checkbox-form-control {
    text-transform: initial;
}
.custom-form-element .checkbox-form-control.centered {
    display: flex;
    justify-content: center;
}

.custom-form-element .checkbox-form-control.disabled { /* DISABLED/ */
    opacity: .3;
    cursor: default;
}
.custom-form-element .checkbox-form-control.disabled input[type="checkbox"] {
    cursor: default;
}



/* UTILITY */

.uppercase,
.custom-form-element label.checkbox-form-control.uppercase { 
    text-transform: uppercase; 
}

.no-pad-h {
    padding-left: 0;
    padding-right: 0;
}

/* */
.pre-cart-bottom-buttons {
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}    
@supports (inset: 0) { /* @supports not (inset: 0) { */ /* @supports (gap:*) */ /* 20250416 */
    .pre-cart-bottom-buttons {
        gap: min(30px, 2vw);
    }    
}
.no-split-payment .pre-cart-bottom-buttons { /* 20241113 add this class to the main section div, in case the split payment is not allowed */
    justify-content: left;
}
.pre-cart-bottom-buttons .btn {
    background-color: rgb(68,68,68);
    color:white;
}
@supports (inset: 0) { /* @supports not (inset: 0) { */ /* @supports (gap:*) */ /* 20250416 */
    .pre-cart-bottom-buttons .btn {
        flex:1;
    }
}
@media screen and (min-width:576px) { /* 20250326 imosto le size solo da 576px in su altrimenti sballa in iPhone */
	.pre-cart-bottom-buttons .btn {
        margin:0 5px;
    }
    @supports (inset: 0) { /* @supports not (inset: 0) { */ /* @supports (gap:*) */ /* 20250416 */
        .pre-cart-bottom-buttons .btn {
            margin:unset;
            max-width: 16vw; /* max(20vw,max-content); */
            min-width: 170px; /* max(170px, max-content); */
        }
    }
	.pre-cart-bottom-buttons .btn {
	}
}
.pre-cart-additional-buttons .btn {
    background-color: transparent;
    border:1px solid rgb(51,51,51);
    color:black;
    flex:1;
    max-width: 16vw; /* max(20vw,max-content); */
    min-width: 170px; /* max(170px, max-content); */
}
.pre-cart-additional-buttons {
    text-align: center;
}
.no-split-payment .pre-cart-additional-buttons {
    text-align: left;
}

a.link-generic {
    color:#000;
    text-decoration: underline;
}
a.link-generic:hover {
    color:#666;
    text-decoration: underline;
}

.hidden { display:none; }

.btn-slim.btn-secondary {
    background-color: rgb(68,68,68);
    border: 1px solid rgb(68,68,68);
}

/* 20250320 */
.link_back {
    font-size: .8em;
    font-family: var(--ikv3-font-label);
    font-weight: bold;
    text-decoration: underline;
}