/*
 * Custom styles for the YPP Quick Order Plugin.
 * @version 1.3.0 - Advanced responsive buttons and layout.
 */

/* General Action Buttons */
.action-button {
    padding: 0.5rem 1rem; color: white; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500;
    transition: background-color 0.2s; border: none; cursor: pointer;
}
.action-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Share & Export Buttons */
.share-button {
    padding: 0.75rem 1.5rem; color: white; border-radius: 0.375rem; font-weight: 600;
    transition: all 0.2s ease-in-out; text-align: center; display: block; width: 100%;
}
.share-button:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.share-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }


/* Quantity Input with Buttons */
.quantity-input-wrapper { display: flex; align-items: center; justify-content: center; }
.quantity-btn {
    width: 36px; height: 36px; border: 1px solid #d1d5db; background-color: #f9fafb;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; line-height: 1; color: #4b5563;
}
.quantity-btn:hover { background-color: #f3f4f6; }
.quantity-btn.minus-btn { border-radius: 0.375rem 0 0 0.375rem; }
.quantity-btn.plus-btn { border-radius: 0 0.375rem 0.375rem 0; }
.ypp-quantity-input {
    width: 50px; height: 36px; text-align: center; border: 1px solid #d1d5db;
    border-left: none; border-right: none; padding: 0.25rem; -moz-appearance: textfield;
}
.ypp-quantity-input::-webkit-inner-spin-button, .ypp-quantity-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ypp-quantity-input:disabled { background-color: #f3f4f6; cursor: not-allowed; }

/* DESKTOP LAYOUT (>= 768px) */
.product-item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: center; padding: 1rem; border-bottom: 1px solid #e5e7eb; }
.product-item:last-child { border-bottom: none; }
.product-info { grid-column: span 5; } .product-price { grid-column: span 2; text-align: right; }
.product-quantity { grid-column: span 2; } .product-total { grid-column: span 2; text-align: right; font-weight: 600; }
.product-action { grid-column: span 1; text-align: center; }
.product-info { display: flex; align-items: center; gap: 1rem; }
.product-image { width: 64px; height: 64px; object-fit: cover; border-radius: 0.375rem; border: 1px solid #e5e7eb; flex-shrink: 0; }
.product-name { font-weight: 600; color: #111827; } .product-sku { font-size: 0.875rem; color: #6b7280; }
.ypp-remove-product { background: none; border: none; cursor: pointer; color: #ef4444; font-size: 1.5rem; line-height: 1; transition: color 0.2s; }
.ypp-remove-product:hover { color: #b91c1c; }
#ypp-product-list-header {display: grid; }


/*
 * MOBILE LAYOUT (< 768px)
 */
@media (max-width: 767px) {
    /* Stacked "card" view for products */
    .product-item { display: block; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; margin: 0 0 1rem 0; }
    .product-item.invalid-product { border-color: #fca5a5; }
    .product-info, .product-price, .product-quantity, .product-total, .product-action {
        grid-column: auto; display: flex; justify-content: space-between; align-items: center;
        text-align: right; padding: 0.75rem 0; border-bottom: 1px dashed #e5e7eb;
    }
    .product-info { padding-top: 0; border-bottom: 1px solid #e5e7eb; gap: 0.75rem; }
    .product-action { border-bottom: none; padding-bottom: 0; }
    .product-price::before, .product-quantity::before, .product-total::before { content: attr(data-title); font-weight: 600; text-align: left; color: #4b5563; }
    .ypp-remove-product { width: 100%; background-color: #fee2e2; color: #b91c1c; padding: 0.75rem; border-radius: 0.375rem; font-weight: 600; text-align: center; }

    /* Responsive Buttons: Hide desktop buttons, show "More" button */
    #ypp-share-buttons {
        display: none;
    }
    #ypp-more-actions-mobile {
        display: block;
    }
    #ypp-more-actions-menu .share-button {
        width: 100%;
        border-radius: 0;
        border-bottom: 1px solid #e5e7eb;
        text-align: left;
        padding: 1rem;
    }
     #ypp-more-actions-menu .share-button:last-child {
        border-bottom: none;
    }
}