/**
* 2007-2025 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    PrestaShop SA <contact@prestashop.com>
*  @copyright 2007-2025 PrestaShop SA
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/

#verona-cake-configurator {

    /****************************/
    /********* UTILITY **********/
    /****************************/

    h2 {
        color: #2f2810;
    }

    h2 > span {
        display: block;
        font-size: 14px;
        padding-top: 5px;
        opacity: 0.8;
    }

    .hidden {
        display: none !important;
    }

    .error {
        color: red;
    }

    /*****************************/
    /********* SECTIONS **********/
    /*****************************/

    section:first-child {
        padding-top: 75px;
    }

    section:nth-child(even of :not(.hidden)):before {
        position: absolute;
        content: "";
        background-color: #F486B80A;
        height: 100%;
        width: 300vw;
        left: -100vw;
        top: 0;
        z-index: -999;
    }

    section {
        position: relative;
        padding-top: 33px;
        padding-bottom: 33px;
        border-bottom: 1px solid #e8e8e8;
        border-top: 1px solid #e8e8e8;
    }

    /*** SECTION COUNTER ***/
    counter-reset: section;

    section:not(.hidden) > h2:before {
        counter-increment: section;
        content:  counter(section) ". ";
    }

    /*** ALL LABELS - DEFAULT ***/
    label {
        text-align: left;
    }

    /***************************/
    /********* RADIOS **********/
    /***************************/

    .radioGroup {
        display: flex;
        flex-wrap: wrap;
    }

    .radio {
        width: 100%;
        padding: 5px;
    }

    @media (min-width: 768px) {
        .radio {
            width: 50%;
        }
    }

    /* default radio button hidden - show only nice label */
    .radio > input {
        display: none;
    }

    /* label for radio button */
    .radio > label {
        background-color: #f8f8f8;
        -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        padding: 5px;
        margin: 0;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        transition: 0.2s all;
        cursor: pointer;
        border: 4px solid #ffcae3;
    }

    /* fake radio button */
    .radio > label > .fakeRadio {
        background: white;
        height: 50%;
        aspect-ratio: 1/1;
        border: 1px solid #e3e3e3;
        margin: 15px;
        -webkit-transition: 0.2s all;
        -o-transition: 0.2s all;
        transition: 0.2s all;
    }
    .radio > label > .fakeRadio i {
        display: none;
    }

    /* fake radio button when selected */
    .radio > input:checked ~ label .fakeRadio i {
        display: inherit;
    }
    .radio > input:checked ~ label .fakeRadio i:before {
        content: '\ea5e';
        font-size: xxx-large;
        color: #f486b8;
    }

    .radio > input:checked ~ label {
        background: #ffcae3;
        transform: scale(1.01);
    }

    .radio > label > h2 {
        margin-left: 30px;
        flex-grow: 1;
    }

    .radio > label > img {
        height: 100px;
        filter: drop-shadow(6000px 0px 0 #2f2810);
        transform: translateX(-6000px);
    }


    /*******************************/
    /********* EXTRA INFO **********/
    /*******************************/

    .extraInfo {
        display: block;
        padding-top: 25px;
    }

    .extraInfo input {
        display: none;
    }


    /***************************/
    /********* BUTTON **********/
    /***************************/

    .button {
        display: inline-block;
        padding: 20px;
        margin-top: 10px;
        color: white;
        cursor: pointer;
    }

    .buttonOk {
        background: #f486b8;
    }

    .buttonCancel {
        background: #6b6b6b;
    }


    /***************************/
    /********* SUBMIT **********/
    /***************************/

    .submit {
        display: inline-block;
        padding-top: 25px;
    }


    /****************************/
    /********* SELECTS **********/
    /****************************/


    /******************************/
    /********* TEXT AREA **********/
    /******************************/

    textarea {
        display: block;
        height: 200px;
        width: 600px;
        max-width: 100%;
        border: 1px solid lightgrey;
    }


    /*************************/
    /********* FILE **********/
    /*************************/

    input[type="file"] {
        padding: 15px;
        width: 600px;
        max-width: 100%;
        border: 1px solid lightgrey;
        background-color: white;
    }


    /***************************/
    /********* WEIGHT **********/
    /***************************/

    label[for="weight"] {
        display: block;
    }


    /***************************/
    /********* FLAVOR **********/
    /***************************/

    #bonus-flavor-accept:checked ~ label.buttonOk {
        display: none;
    }

    #bonus-flavor-accept:not(:checked) ~ label.buttonCancel {
        display: none;
    }


    /*************************/
    /********* INFO **********/
    /*************************/

    .info-image-preview {
        display: block;
        width: 600px;
    }

    .info-image-preview:not([src]) {
        display: none;
    }
}