/**
 * HC360 Button & Cart Page Styles
 */

/* ============================================================================
   ADD TO CART BUTTON - ADDED STATE
   ============================================================================ */

button.hc360-added,
a.button.hc360-added,
button.cart-added,
a.button.cart-added {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
    opacity: 0.9;
    cursor: not-allowed !important;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Disabled state styling */
button.hc360-added:disabled,
button[disabled].hc360-added,
a.button[disabled].hc360-added {
    opacity: 0.9;
    cursor: not-allowed;
}

/* Hover state for disabled buttons */
button.hc360-added:hover:disabled,
button[disabled].hc360-added:hover,
a.button[disabled].hc360-added:hover {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

/* Optional: Add a subtle shadow for added state */
button.hc360-added:not(:disabled),
a.button.hc360-added:not([disabled]) {
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

/* ============================================================================
   WHATSAPP BUTTON POSITIONING & VISIBILITY
   ============================================================================ */

/* Make WhatsApp button visible and prominent - display: block !important */
button[class*="whatsapp"],
a[class*="whatsapp"],
button[href*="whatsapp"],
a[href*="whatsapp"],
[class*="whatsapp-button"],
[class*="whatsapp-link"],
.whatsapp-btn {
    order: -1 !important; /* Make it appear first in flex containers */
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    color: white !important;
    font-weight: bold !important;
    display: inline-block !important;
    visibility: visible !important;
}

button[class*="whatsapp"]:hover,
a[class*="whatsapp"]:hover,
button[href*="whatsapp"]:hover,
a[href*="whatsapp"]:hover,
[class*="whatsapp-button"]:hover,
[class*="whatsapp-link"]:hover,
.whatsapp-btn:hover {
    background-color: #1fa855 !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.4) !important;
}

/* If WhatsApp button text is "Contact via WhatsApp" */
[class*="contact"]:contains("WhatsApp"),
button:contains("WhatsApp"),
a:contains("WhatsApp") {
    order: -1 !important;
    background-color: #25D366 !important;
    color: white !important;
}

/* ============================================================================
   BUTTON GROUPS - LAYOUT & ORDERING
   ============================================================================ */

.button-group,
[class*="button-group"],
[class*="button-container"],
[class*="actions"],
.order-summary,
[class*="order-section"],
[class*="cart-summary"] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
}


/* Ensure WhatsApp button appears first in button containers */
button:contains("WhatsApp"),
a:contains("WhatsApp"),
[class*="whatsapp"] {
    order: -999 !important;
    flex-basis: 100%;
}

@media (max-width: 768px) {
    .button-group,
    [class*="button-group"],
    [class*="button-container"],
    [class*="actions"] {
        flex-direction: column;
    }

    button,
    a.button {
        width: 100%;
        text-align: center;
    }
}

/* ============================================================================
   CART PAGE MESSAGE
   ============================================================================ */

.hc360-cart-message {
    background: #f0f4f8;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    border-left: 4px solid #681e77;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    clear: both !important;
}

.hc360-cart-message p {
    margin: 0;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    display: block !important;
}

.hc360-cart-message strong {
    color: #681e77;
    display: inline !important;
}

@media (max-width: 768px) {
    .hc360-cart-message {
        padding: 15px;
        margin: 15px 0;
    }

    .hc360-cart-message p {
        font-size: 14px;
    }
}

/* ============================================================================
   FILTERED PACKAGES (CHECKUP FINDER)
   ============================================================================ */

[data-package-type],
[class*="package"],
[class*="card"] {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

[data-package-type].hc360-filtered,
[class*="package"].hc360-filtered,
[class*="card"].hc360-filtered {
    animation: slideInPackage 0.3s ease;
}

@keyframes slideInPackage {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   RESPONSIVE - MOBILE
   ============================================================================ */

@media (max-width: 768px) {
    button,
    a.button {
        padding: 10px 15px;
        font-size: 14px;
    }

    button.hc360-added,
    a.button.hc360-added {
        font-size: 12px;
        padding: 8px 12px;
    }
}