:root {
    --color-main: #ffb3c6;
    --color-main-darker: #E5A2B3; /* DARK VERSION */
    --color-main-light: #ffe5ec; /* LIGHT VERSION */
}

body {
    background-color: var(--color-main-darker);
    font-size: 20px;
    color: #212121;
    
    font-family: Cambria;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* Additional styling for the input if needed */
input[type="number"] {
    /* Any additional styles you want */
}

#divbody {
    background-color: #FFFFFF;
}

#divbody-sub {
    padding: 32px;
}

/* TEXT */
.title-index {
    font-size: 38px;
}

.subtitle-index {
    font-size: 28px;
    font-weight: bold;
}

.title {
    font-size: 28px;
}

.subtitle {
    font-size: 22px;
    font-weight: bold;
}

.normaltext {

}

.minitext {

}

.link {
    color: var(--color-main);
    text-decoration: none;
} .link:hover {
    text-decoration: underline;
}

.link2 {
    color: white;
    text-decoration: none;
} .link2:hover {
    text-decoration: underline;
}

.link3 {
    color: black;
    text-decoration: none;
} .link3:hover {
    text-decoration: underline;
}

.ff-main {
    font-family: Georgia;
}

/* CONTAINER */
.container {
    padding: 24px;
    border: 1px solid #D3D3D3;
    border-radius: 3px;
    box-shadow: 5px 5px 5px #D3D3D3;
    text-align: left;
}

/* MAIN INDEX */
#container-index-main-first {
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url("../images/index-image/index-container-t-topimg.jpg");
    background-position: center center;
    background-size: cover;
}

#container-index-main-first-inner-container{
    text-align: center; 
    padding: 48px;
}

#container-index-main-second {
    padding: 48px;
    padding-bottom: 24px;
}

#container-index-main-t {
    padding: 24px;

    background-image: url("../images/background/index-t-cont-bg-image.jpg");
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

#container-index-main-f {
    padding: 48 24 48 24px;
    position: relative;
}

#container-index-main-f-imgcontainerbg {
    position: relative;
    max-width: 400px;
} #container-index-main-f-imgcontainerbg > div {
    height: 0px;
    padding-bottom: 100%;
    position: relative;

    background-image: url("../images/background/index-ourstart-bg.jpg");
    background-position: center center;
    background-size: cover;
}

#container-index-main-f-second-cont-r {
    padding-left: 48px;
}

/* SHOP */
.col-container-product {
    padding: 3px;
    max-width: 280px;
    min-width: 220px;
    width: 100%;
}

.container-product-shop-list {
    border: 1px solid var(--color-main-light);
    border-radius: 3px;
    box-shadow: 2px 2px 3px #F2F2F2;
} .container-product-shop-list:hover {
    border: 1px solid var(--color-main-light);
    border-radius: 3px;
}

.container-product-shop-productimage {
    overflow: hidden;
} .container-product-shop-productimage > a {

} .container-product-shop-productimage > a > div {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 0px;
    width: 100%;
    padding-bottom: 100%;
    transition: transform 0.3s ease-in-out;
} .container-product-shop-list:hover .container-product-shop-productimage > a > div {
    transform: scale(1.2); /* Zoom by 20% */
}

.container-product-shop-producttitle {
    font-size: 22px;
    text-align: left;
}

.container-product-shop-desc {
    text-align: left;
    font-size: 16px;
    color: #999999;
}

.container-product-shop-price {
    font-weight: bold;
    font-weight: 22px;
    text-align: left;
    color: #2D2D2D;
}

.container-product-shop-price-baseprice {

}

.container-product-shop-price-basepricediscounted {
    text-decoration: line-through;
    font-size: 16px;
    color: #808080;
}

.container-product-shop-price-discountpercentege {
    font-size: 16px;
    color: #FF6060;
}

.container-product-shop-price-discountedprice {
}

/* IN PRODUCTS */
.colmultiimgproducts-left {

}

.colmultiimgproducts-right {
    max-width: 100px;
}

#colmultiimgproducts-bigimgcont {
    width: 95%;
    height:0px;
    padding-bottom: 95%;

    background-position: center center;
    background-size: cover;
}

.colmultiimgproducts-minicontainer {
    width: 95%;
    height:0px;
    padding-bottom: 95%;

    background-position: center center;
    background-size: cover;

    cursor: pointer;
}

.col-cart-price-right {
    border-left: 1px solid var(--color-main-light);
    padding-left: 12px;
}

.container-quantity {
    position: relative;
    max-width: 150px;
    height: 40px;
    display: flex;
} 

.container-quantity-mid > input {
    text-align: center;
    color: #3D3D3D;
    width: 100%;
    height: 40px;
}

.container-quantity-button {
    text-align: center;
    line-height: 40px;
    height:40px;
    width: 40px;
    cursor: pointer;

    font-weight: bold;

} .container-quantity-button:hover {
    background-color: var(--color-main);
    color: white;
}

.container-quantity-upleft {
    position: absolute;
    top: 0;
    left: 0;
    flex: 1;
}

.container-quantity-mid {
    flex: 1;
}

.container-quantity-upright {
    position: absolute;
    top: 0;
    right: 0;
    flex: 1;
}

/* CART */
.cart-container-product {
    position: relative;
    text-align: left;
    padding: 24px;
    border-bottom: 1px solid var(--color-main-light);
}

.miniicon-delete {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 24px;
    right: 24px;
}

.cart-carticon-noproducts-inside {
    max-width: 200px;
    height: 200px;

    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("../images/cart/cart-noproducts.png");
    background-size: 60%;

    background-color: var(--color-main);
    border-radius: 50%;
}

/* PAYMENTS */
.tetxsnap-a {

}

.tetxsnap-b {
    font-weight: bold;
}

/* INPUT */
input[type="text"], select {
    width: 100%;
    height: 32px;
    border-radius: 3px;
    border: 1px solid #3D3D3D;
    padding: 4px;
    font-size: 16px;
}

/* DIVIRORE - SMALL DIV */
.spacebar-lj {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 100%;
    position: relative;
    padding: 24px 0;
}

.spacebar-lj::before,
.spacebar-lj::after { 
    content: '';
    flex: 1;
    height: 2px;
    background-color: var(--color-main);
}

.spacebar-lj > div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px; /* Spazio tra l'immagine e le linee */
}

.spacebar-lj img {
    height: 24px;
    width: auto;
}

.spacebar {
    width: 100%;

    padding: 24 0px;
} .spacebar > div {
    height: 1px;
    background-color: var(--color-main-light);
}

/* CONTAINER INDEX SPECIFIC PRODUCTS BIG ADS */
.container-specific-prod-promo {
    margin: 12px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-specific-prod-promo-inner {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* Allinea il contenuto a destra */
    align-items: center;
}

.container-specific-prod-promo-cont {
    padding: 48px;
    max-width: 35%;
    background: rgba(255, 255, 255, 0.7);
}

/* ORDERS */
.order-check-info-span-1 {
    color: #4C4C4C;
}

.order-small-product-image {
    max-width: 150px;
    height: 150px;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* STRIPE */
.stripe-button {
    width: 100%;
    background-color: #6772E5; /* Colore principale di Stripe */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.stripe-button:hover {
    background-color: #5469D4; /* Colore più scuro per l'hover */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.stripe-button:active {
    background-color: #3B4CCA; /* Colore ancora più scuro per il click */
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
}

.stripe-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.4); /* Effetto focus */
}


@media(max-width:450px) {
    #container-index-main-first {
        height: 70%;
        background-image: url("../images/index-image/index-container-t-topimg-mobile.jpg");
    }

    #container-index-main-first-inner-container{
        text-align: center; 
        padding: 24px;
    }
    
    #container-index-main-second {
        padding: 24px;
    }

    #container-index-main-f-second-cont-r {
        padding-left: 0px;
    }

    /* SHOP - IN PRODUCT */
    .colmultiimgproducts-right {
        display: flex;
        flex-wrap: wrap; 
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
    }

    .colmultiimgproducts-minicontainer {
        flex: 1 1 auto;
        min-width: 0;
        height: 0px;
        margin: 5px;
        max-width: 80px;
        padding-bottom: 80px;
    }

    .col-cart-price-right {
        border-left: 0px;
        border-top: 1px solid var(--color-main-light);
        padding-left: 0px;
        padding-top: 12px;
    }

    /* CONTAINER INDEX SPECIFIC PRODUCTS BIG ADS */
    .container-specific-prod-promo-inner {
        width: 100%;
        display: flex;
        justify-content: flex-end; /* Allinea il contenuto a destra */
        align-items: center;
    }

    .container-specific-prod-promo-cont {
        padding: 24px;
        max-width: 100%;
        background: rgba(255, 255, 255, 0.75);
    }
}