/**
 * Floating Cart Mobile Styles
 * Carrito flotante para fichas de producto en móviles (< 768px)
 * Usa las variables CSS del tema para colores y fuentes
 */

/* Ocultar por defecto */
.floating-cart-mobile {
    display: none;
}

/* Mostrar solo en móviles */
@media (max-width: 767px) {
    .floating-cart-mobile {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--background-1-light);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        z-index: 9999;
        padding: 12px 16px;
        transform: translateY(100%);
        transition: transform 0.3s ease-in-out;
    }

    .floating-cart-mobile.is-visible {
        transform: translateY(0);
    }

    .floating-cart-mobile.is-hidden {
        transform: translateY(100%);
    }

    /* Contenedor principal */
    .floating-cart-mobile__wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Información del producto */
    .floating-cart-mobile__product-info {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .floating-cart-mobile__image {
        width: 50px;
        height: 50px;
        border-radius: var(--border-radius, 8px);
        object-fit: cover;
        flex-shrink: 0;
    }

    .floating-cart-mobile__details {
        flex: 1;
        min-width: 0;
    }

    .floating-cart-mobile__title {
        font-family: var(--tamano7-font-family);
        font-size: calc(var(--tamano7-font-size-mobile) - 2px);
        font-weight: var(--tamano7-font-weight-mobile);
        line-height: var(--tamano7-line-height-mobile);
        letter-spacing: var(--tamano7-letter-spacing-mobile);
        margin: 0 0 4px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--color-1-headings-dark);
    }

    .floating-cart-mobile__price {
        font-family: var(--tamano7-font-family);
        font-size: var(--tamano7-font-size, 16px);
        font-weight: 700;
        line-height: var(--tamano7-line-height, 1.2);
        letter-spacing: var(--tamano7-letter-spacing, 0);
        color: var(--color-1-body-dark);
        margin: 0;
    }

    .floating-cart-mobile__price del {
        font-size: 12px;
        color: #999;
        font-weight: 400;
        margin-right: 6px;
    }

    .floating-cart-mobile__price ins {
        text-decoration: none;
    }

    /* Variaciones */
    .floating-cart-mobile__variations {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 0;
        border-top: 1px solid var(--color-fondos-fondo-oscuro, #eee);
    }

    .floating-cart-mobile__variation-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        min-width: calc(50% - 4px);
    }

    .floating-cart-mobile__variation-label {
        font-family: var(--tamano-7-mediumcta-font-family);
        font-size: calc(var(--tamano-7-mediumcta-font-size-mobile) - 2px);
        font-weight: var(--tamano-7-mediumcta-font-weight-mobile);
        line-height: var(--tamano-7-mediumcta-line-height-mobile);
        letter-spacing: var(--tamano-7-mediumcta-letter-spacing-mobile);
        color: var(--boton-4-texto-normal);
        text-transform: none;
        margin-bottom: 5px;
    }

    .floating-cart-mobile__variation-select {
        width: 100%;
        padding: 10px 35px 10px 15px;
        border: 1.5px solid var(--boton-4-texto-normal);
        border-radius: 3px;
        font-family: var(--tamano7-font-family);
        font-size: calc(var(--tamano-7-mediumcta-font-size-mobile) - 3px);
        font-weight: var(--tamano7-font-weight, 400);
        line-height: var(--tamano7-line-height, 1.2);
        letter-spacing: var(--tamano7-letter-spacing, 0);
        background-color: transparent;
        color: var(--boton-4-texto-normal);
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        cursor: pointer;
    }

    .floating-cart-mobile__variation-select:focus {
        outline: none;
        border-color: var(--boton-4-texto-normal);
    }

    /* Acciones: cantidad y botón */
    .floating-cart-mobile__actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Selector de cantidad */
    .floating-cart-mobile__quantity {
        display: flex;
        align-items: center;
        border: 1px solid var(--background-2-light);
        border-radius: var(--border-radius, 8px);
        overflow: hidden;
        background: #f9f9f9;
    }

    .floating-cart-mobile__qty-btn {
        width: 36px;
        height: 36px;
        border: none;
        background: transparent;
        font-family: var(--tamano7-font-family, inherit);
        font-size: 18px;
        font-weight: var(--tamano7-font-weight, 500);
        color: var(--color-1-body-dark);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }

    .floating-cart-mobile__qty-btn:hover {
        background: var(--background-2-light);
    }

    .floating-cart-mobile__qty-btn:active {
        background: var(--background-2-light);
    }

    .floating-cart-mobile__qty-input {
        width: 40px;
        height: 36px;
        border: none;
        border-left: 1px solid var(--background-2-light);
        border-right: 1px solid var(--background-2-light);
        text-align: center;
        font-family: var(--tamano7-font-family, inherit);
        font-size: var(--tamano7-font-size, 14px);
        font-weight: var(--tamano7-font-weight, 600);
        background: var(--background-1-light);
        color: var(--color-1-body-dark);
        -moz-appearance: textfield;
        appearance: textfield;
    }

    .floating-cart-mobile__qty-input::-webkit-outer-spin-button,
    .floating-cart-mobile__qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
    }

    /* Botón añadir al carrito - Mismo estilo que el de la ficha de producto */
    .floating-cart-mobile__add-btn {
        flex: 1;
        height: 44px;
        border: none;
        border-radius: 30px;
        background-color: var(--color-boton-2-normal) !important;
        color: var(--color-boton-2-texto-normal) !important;
        font-family: var(--tamano-7-mediumcta-font-family);
        font-size: calc(var(--tamano-7-mediumcta-font-size-mobile) - 2px);
        font-weight: var(--tamano-7-mediumcta-font-weight-mobile);
        line-height: var(--tamano-7-mediumcta-line-height-mobile);
        letter-spacing: var(--tamano-7-mediumcta-letter-spacing-mobile);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        transition: background 0.2s, transform 0.1s;
        position: relative;
    }

    .floating-cart-mobile__add-btn:hover {
        background: var(--color-boton-2-hover);
        color: var(--color-boton-2-texto-hover);
    }

    .floating-cart-mobile__add-btn:active {
        transform: scale(0.98);
    }

    .floating-cart-mobile__add-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .floating-cart-mobile__add-btn svg {
        width: 20px;
        height: 25px;
    }

    .floating-cart-mobile__add-btn svg path {
        fill: var(--color-boton-2-texto-normal);
    }

    .floating-cart-mobile__add-btn svg rect {
        fill: transparent;
    }

    .floating-cart-mobile__add-btn.loading {
        pointer-events: none;
    }

    .floating-cart-mobile__add-btn.loading .floating-cart-mobile__btn-text {
        opacity: 0;
    }

    .floating-cart-mobile__add-btn.loading svg {
        opacity: 0;
    }

    .floating-cart-mobile__add-btn.loading::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        border: 2px solid var(--color-boton-2-texto-normal);
        border-top-color: transparent;
        border-radius: 50%;
        animation: floating-cart-spin 0.8s linear infinite;
    }

    @keyframes floating-cart-spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* Estado de éxito */
    .floating-cart-mobile__add-btn.added {
        background: var(--color-boton-2-hover, #28a745);
    }

    /* Stock agotado */
    .floating-cart-mobile__out-of-stock {
        text-align: center;
        padding: 8px;
        color: #dc3545;
        font-family: var(--tamano7-font-family, inherit);
        font-size: var(--tamano7-font-size, 13px);
        font-weight: var(--tamano7-font-weight, 500);
        line-height: var(--tamano7-line-height, 1.2);
        letter-spacing: var(--tamano7-letter-spacing, 0);
    }

    /* Mensaje de variación requerida */
    .floating-cart-mobile__select-variation {
        text-align: center;
        padding: 4px 0;
        color: var(--color-textos-texto-light, #666);
        font-family: var(--tamano7-font-family, inherit);
        font-size: var(--tamano7-font-size, 12px);
        font-weight: var(--tamano7-font-weight, 400);
        line-height: var(--tamano7-line-height, 1.2);
        letter-spacing: var(--tamano7-letter-spacing, 0);
    }

    /* Ajustar el body para evitar que el contenido quede tapado */
    body.has-floating-cart {
        padding-bottom: 140px;
    }

    body.has-floating-cart.simple-product {
        padding-bottom: 90px;
    }
}