/*
Theme Name: the7dtchild
Author: Dream-Theme
Author URI: http://dream-theme.com/
Description: The7 is perfectly scalable, performance and SEO optimized, responsive, retina ready multipurpose WordPress theme. It will fit every site – big or small. From huge corporate portals to studio or personal sites – The7 will become a great foundation for your next project!
Version: 1.0.0
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/

.checkout-product-customization {
    display: flex;
    flex-wrap: wrap;
    gap: 0px 20px;
    /*border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    background-color: #f9f9f9;*/
    margin-bottom: 15px;
}

.checkout-product-customization:not(:last-child)::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #0000001F;
    margin: 20px 0;
}

.checkout-product-customization > div {
    flex: 1 1 100%;
}

.checkout-product-customization h5 {
    flex: 1 1 100%;
    color: #333;
    margin-bottom: 10px!important;
    font-size: 20px;
    font-weight: 600;
}

.label-container {
    display: block;
    font-size: 0.85em;
    color: #666;
}

.field-container {
    display: flex;
    flex-wrap: wrap; /* Per far sì che gli elementi vadano a capo se necessario */
    gap: 0px 20px;
}

.field-container > div {
    flex: 1 1 calc(33% - 20px); /* Impostazione predefinita per 3 elementi */
}

/* Caso per 2 elementi */
.field-container > div:nth-child(1) {
    flex: 1 1 70%; /* Primo elemento 70% */
}

.field-container > div:nth-child(2) {
    flex: 1 1 calc(30% - 20px); /* Secondo elemento 30% */
}

/* Caso per 3 elementi */
.field-container > div:nth-child(1) {
    flex: 1 1 60%; /* Primo elemento 60% */
}

.field-container > div:nth-child(2),
.field-container > div:nth-child(3) {
    flex: 1 1 calc(20% - 20px); /* Secondo e terzo elemento 20% */
}

/* Media query per la versione mobile */
@media (max-width: 768px) {
    .field-container > div {
        flex: 1 1 100%; /* Ogni blocco occupa il 100% della larghezza */
    }

    /* Se ci sono 2 elementi, il primo occupa il 100% e il secondo il 50% */
    .field-container > div:nth-child(1) {
        flex: 1 1 100%; /* Primo elemento 100% */
    }

    .field-container > div:nth-child(2) {
        flex: 1 1 50%; /* Secondo elemento 50% */
    }

    /* Se ci sono 3 elementi, il primo occupa il 100%, il secondo e il terzo 50% */
    .field-container > div:nth-child(3) {
        flex: 1 1 50%; /* Terzo elemento 50% */
    }
}

.custom-name-field { 
    width: 100%!important;
}

.personalizzazione-mobile { display: none; }


@media (max-width: 768px) {
    table.tabella-personalizzazioni { display: none; }
    .personalizzazione-mobile { display: block; }
    .personalizzazione-riga {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 15px;
        margin-bottom: 20px;
        background: #f9f9f9;
        border: 1px solid #ccc;
        border-radius: 8px;
    }
    .personalizzazione-campo {
        display: flex;
        flex-direction: column;
    }
    .personalizzazione-campo label {
        font-weight: bold;
        margin-bottom: 5px;
        font-size: 14px;
    }
    .personalizzazione-campo input,
    .personalizzazione-campo select {
        width: 100%;
    }
}