/* --------------------------------
    Botonera inferior en móvil (Kitoli)

    En pantallas estrechas la barra de Taopix pasa de arriba a una botonera
    fija abajo, con iconos: Inicio · Mis proyectos · Cesta · Mi cuenta.
    Solo CSS: el script de Taopix reescribe el texto de los botones y el
    HTML del botón de la cesta, así que los iconos van en ::before y nunca
    dentro de su HTML. Se carga después de tpxMultilineBasketAPI.css.
-------------------------------- */

#tpx-basket-bar li#tpx-homelinkli
{
    display: none;
}

@media only screen and (max-width: 767px) {

    /* Hueco para que la botonera no tape el final de la página */
    body
    {
        padding-bottom: calc(59px + env(safe-area-inset-bottom));
    }

    #tpx-basket-bar
    {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        padding: 0 0 env(safe-area-inset-bottom);
        background: #fff;
        border-top: 1px solid rgba(0,0,0,0.12);
        border-bottom: 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
    }

    #tpx-basket-bar .tpx-bar-container
    {
        width: 100%;
        position: static;
    }

    #tpx-basket-bar ul.tpx-accountLinks
    {
        float: none;
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #tpx-basket-bar ul.tpx-accountLinks > li
    {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        display: block;
    }

    #tpx-basket-bar li#tpx-homelinkli { display: block; order: 1; }
    #tpx-projectslinkli { order: 2; }
    #tpx-basket-bar ul.tpx-accountLinks > li:has(#tpx-basketButtonWrapper) { order: 3; }
    #tpx-basket-bar ul.tpx-accountLinks > li:has(#tpx-register) { order: 4; }

    /* Cada botón: icono arriba y texto pequeño debajo */
    #tpx-basket-bar a#tpx-homelink,
    #tpx-basket-bar a#tpx-projectslist,
    #tpx-basket-bar a#tpx-register,
    #tpx-basket-bar a#tpx-basketlink
    {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 58px;
        padding: 0 4px 7px;
        box-sizing: border-box;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        text-transform: none;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #444;
        background: none;
        border-radius: 0;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
    }

    #tpx-basket-bar a#tpx-homelink::before,
    #tpx-basket-bar a#tpx-projectslist::before,
    #tpx-basket-bar a#tpx-register::before,
    #tpx-basket-bar a#tpx-basketlink::before
    {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-left: -12px;
        background: currentColor;
        -webkit-mask: var(--tpx-icon) center / contain no-repeat;
        mask: var(--tpx-icon) center / contain no-repeat;
    }

    #tpx-basket-bar a#tpx-homelink
    {
        --tpx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5'/%3E%3C/svg%3E");
    }

    #tpx-basket-bar a#tpx-projectslist
    {
        --tpx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h11a1 1 0 0 1 1 1v14l-3.5-2-3.5 2V6'/%3E%3Cpath d='M4 5v13a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M16 7h3a1 1 0 0 1 1 1v12'/%3E%3C/svg%3E");
    }

    /* Cesta con asa, como la del logo de Kitoli Orders */
    #tpx-basket-bar a#tpx-basketlink
    {
        --tpx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 10V8.5a4.5 4.5 0 0 1 9 0V10'/%3E%3Cpath d='M3 10h18a9 9 0 0 1-18 0z'/%3E%3C/svg%3E");
    }

    #tpx-basket-bar a#tpx-register
    {
        --tpx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
    }

    #tpx-basket-bar a#tpx-homelink:hover,
    #tpx-basket-bar a#tpx-projectslist:hover,
    #tpx-basket-bar a#tpx-register:hover,
    #tpx-basket-bar a#tpx-basketlink:hover,
    #tpx-basket-bar a#tpx-basketlink:active
    {
        color: #c2171c;
        background: none;
        text-decoration: none;
    }

    /* Botón de la cesta: el texto "Cesta" y el número como globo rojo */
    #tpx-basket-bar #tpx-basketButtonWrapper
    {
        display: block;
    }

    #tpx-basket-bar .tpx-basketLabel
    {
        display: block;
        float: none;
        padding: 0;
    }

    #tpx-basket-bar .tpx-basketCount
    {
        position: absolute;
        top: 4px;
        left: 50%;
        margin-left: 6px;
        float: none;
        width: auto;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        box-sizing: border-box;
        border-radius: 9px;
        border: 2px solid #fff;
        background: #c2171c;
        color: #fff;
        font-size: 10px;
        line-height: 14px;
        text-align: center;
        z-index: 1;
    }

    /* Cesta y Mis proyectos: panel que sube desde abajo, encima de la botonera.
       El script de Taopix pone `left` en línea al abrir Mis proyectos. */
    #tpx-basket-bar .tpx-shopping-cart,
    #tpx-basket-bar .tpx-projectlist
    {
        position: fixed;
        top: auto !important;
        left: 0 !important;
        right: 0;
        bottom: calc(59px + env(safe-area-inset-bottom));
        width: 100%;
        max-height: calc(100vh - 140px);
        box-sizing: border-box;
        overflow: auto;
        border: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
    }

    #tpx-basket-bar .tpx-shopping-cart:after,
    #tpx-basket-bar .tpx-projectlist:after
    {
        display: none;
    }

    #tpx-basket-bar .tpx-shopping-cart-items-container
    {
        height: auto;
        min-height: 120px;
        max-height: 45vh;
    }

    #tpx-basket-bar .tpx-projectlist-items-container
    {
        height: auto;
        min-height: 120px;
        max-height: calc(100vh - 200px);
    }

    #tpx-basket-bar a.tpx-checkout-button
    {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-top: 16px;
    }
}