/* Mobile Product Actions Optimization - Arrocísimo */

/* DESKTOP: Default layout (no changes) */
.product-hero-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.product-gallery {
    flex: 1;
    max-width: 600px;
}

.product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* MOBILE: Reorder product info sections to prioritize actions */
@media (max-width: 768px) {
    .product-hero-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .product-gallery {
        max-width: 100%;
        order: 1; /* Gallery first */
    }
    
    .product-info {
        order: 2; /* Info section second */
        display: grid;
        grid-template-areas: 
            "header"
            "price" 
            "actions-mobile"
            "description"
            "sizes"
            "toppings"
            "flavor-bases"
            "delivery";
        gap: 20px;
        width: 100%;
    }
    
    /* Reorder sections using grid areas */
    .product-header {
        grid-area: header;
    }
    
    .product-price {
        grid-area: price;
    }
    
    .product-description {
        grid-area: description;
    }
    
    /* Create mobile actions container */
    .mobile-actions-container {
        grid-area: actions-mobile;
        background: rgba(138, 0, 40, 0.02);
        border: 2px solid rgba(138, 0, 40, 0.1);
        border-radius: 15px;
        padding: 20px;
        margin: 10px 0;
        box-shadow: 0 4px 12px rgba(138, 0, 40, 0.1);
    }
    
    .mobile-actions-container .quantity-selector {
        margin: 0 0 15px 0;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    
    .mobile-actions-container .product-actions {
        margin: 0;
    }
    
    /* Hide original desktop positions on mobile */
    .product-info > .quantity-selector,
    .product-info > .product-actions {
        display: none;
    }
    
    /* Show mobile container */
    .mobile-actions-container {
        display: block;
    }
    
    /* Size info section (tradicional) */
    .product-info-section:has(.size-options-info) {
        grid-area: sizes;
    }
    
    /* Toppings section */
    .product-info-section:has(.toppings-categories) {
        grid-area: toppings;
    }
    
    /* Flavor base section (frutiarroz) */
    .product-info-section:has(.flavor-base-options-info) {
        grid-area: flavor-bases;
    }
    
    /* Delivery info */
    .delivery-info {
        grid-area: delivery;
    }
}

/* DESKTOP: Hide mobile container */
@media (min-width: 769px) {
    .mobile-actions-container {
        display: none;
    }
}

/* Enhanced mobile quantity selector styling */
@media (max-width: 768px) {
    .mobile-actions-container .quantity-selector-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-bottom: 15px;
    }
    
    .mobile-actions-container .quantity-selector-controls label {
        font-weight: 600;
        color: var(--vino-tinto-medio);
        font-size: 1.1rem;
    }
    
    .mobile-actions-container .quantity-controls {
        display: flex;
        align-items: center;
        gap: 0;
        background: white;
        border: 2px solid var(--vino-tinto-medio);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .mobile-actions-container .qty-btn {
        background: var(--vino-tinto-medio);
        color: white;
        border: none;
        padding: 12px 16px;
        font-size: 1.2rem;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 44px; /* iOS touch target */
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-actions-container .qty-btn:hover {
        background: var(--vino-oscuro);
    }
    
    .mobile-actions-container .qty-btn:active {
        transform: scale(0.95);
    }
    
    .mobile-actions-container #quantity {
        border: none;
        text-align: center;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--vino-tinto-medio);
        padding: 12px 16px;
        width: 60px;
        background: white;
        -webkit-appearance: none;
    }
    
    .mobile-actions-container #quantity:focus {
        outline: none;
        background: rgba(138, 0, 40, 0.05);
    }
    
    /* Mobile action buttons optimization */
    .mobile-actions-container .product-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .mobile-actions-container .btn-large {
        padding: 16px 20px;
        font-size: 1.1rem;
        font-weight: 600;
        min-height: 52px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all 0.3s ease;
    }
    
    .mobile-actions-container .btn-primary {
        background: var(--vino-tinto-medio);
        border: 2px solid var(--vino-tinto-medio);
        color: white;
        box-shadow: 0 4px 15px rgba(138, 0, 40, 0.3);
    }
    
    .mobile-actions-container .btn-primary:hover {
        background: var(--vino-oscuro);
        border-color: var(--vino-oscuro);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(138, 0, 40, 0.4);
    }
    
    .mobile-actions-container .btn-secondary {
        background: transparent;
        border: 2px solid var(--vino-tinto-medio);
        color: var(--vino-tinto-medio);
        flex: 0 0 auto;
        align-self: center;
        width: 52px;
        padding: 16px;
        border-radius: 10px;
    }
    
    .mobile-actions-container .btn-secondary:hover {
        background: rgba(138, 0, 40, 0.1);
        transform: translateY(-1px);
    }
    
    /* Cart button when visible */
    .mobile-actions-container .btn-cart {
        background: var(--dorado-acento);
        border: 2px solid var(--dorado-acento);
        color: var(--vino-oscuro);
    }
    
    .mobile-actions-container .btn-cart:hover {
        background: #b8941f;
        border-color: #b8941f;
        transform: translateY(-2px);
    }
}

/* Small mobile devices optimization */
@media (max-width: 480px) {
    .product-info {
        gap: 15px;
    }
    
    .mobile-actions-container {
        padding: 15px;
        margin: 5px 0;
    }
    
    .mobile-actions-container .quantity-selector-controls {
        gap: 12px;
        margin-bottom: 12px;
    }
    
    .mobile-actions-container .quantity-selector-controls label {
        font-size: 1rem;
    }
    
    .mobile-actions-container .btn-large {
        padding: 14px 18px;
        font-size: 1rem;
        min-height: 48px;
    }
    
    .mobile-actions-container .product-actions {
        gap: 10px;
    }
}

/* Animation for smooth transitions */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .mobile-actions-container {
        animation: slideInFromTop 0.4s ease-out;
    }
}

/* Ensure proper spacing and visual hierarchy */
@media (max-width: 768px) {
    .product-header {
        text-align: center;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(138, 0, 40, 0.1);
    }
    
    .product-price {
        text-align: center;
        padding: 15px 0;
        background: rgba(138, 0, 40, 0.02);
        border-radius: 10px;
        margin: 0;
    }
    
    .product-price .current-price {
        font-size: 2rem;
        font-weight: 700;
        color: var(--vino-tinto-medio);
        display: block;
        margin-bottom: 5px;
    }
    
    .product-price .price-unit {
        font-size: 0.9rem;
        color: #666;
    }
}

/* Enhanced visual feedback for mobile actions */
@media (max-width: 768px) {
    .mobile-actions-container .btn-primary:active {
        transform: translateY(0px) scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .mobile-actions-container .btn-secondary:active {
        transform: translateY(0px) scale(0.95);
        transition: transform 0.1s ease;
    }
    
    /* Add subtle pulse animation to primary button */
    @keyframes mobilePulse {
        0% { box-shadow: 0 4px 15px rgba(138, 0, 40, 0.3); }
        50% { box-shadow: 0 6px 20px rgba(138, 0, 40, 0.4); }
        100% { box-shadow: 0 4px 15px rgba(138, 0, 40, 0.3); }
    }
    
    .mobile-actions-container .btn-primary {
        animation: mobilePulse 3s ease-in-out infinite;
    }
}