/* WC Variations by Attribute Variations Shortcode Styles */

/* Navigation styling */
#wcvba-variations-form {
    margin-bottom: 2rem;
}

/* Scroll container wrapper - provides fade indicators */
.wcvba-pills-container {
    position: relative;
    margin-bottom: 2rem;
}

/* Main horizontal scrolling list */
#wcvba-attribute-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;           /* Prevent wrapping - key change */
    gap: 0.75rem;
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;

    /* Horizontal scroll behavior */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;

    /* Scroll snap for precise navigation */
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1rem;

    /* Hide scrollbar aesthetically while keeping functionality */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */

    /* Prevent text selection during scroll */
    -webkit-user-select: none;
    user-select: none;

    /* Enable momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
}

#wcvba-attribute-links::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}

#wcvba-attribute-links li {
    flex-shrink: 0;                 /* Prevent pills from shrinking */
    scroll-snap-align: start;
}

/* Base pill styling */
#wcvba-attribute-links a.wcvba-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Size and padding - good touch targets */
    padding: 0.75rem 1.25rem;
    min-width: max-content;
    min-height: 48px;               /* WCAG touch target minimum */

    /* Typography */
    font-size: 0.9375rem;           /* 15px - readable on mobile */
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    /* Colors - cascading fallbacks for theme compatibility */
    background-color: var(--wp--preset--color--base,
                      var(--wc-form-color-background,
                      var(--background-color, #f5f5f5)));
    color: var(--wp--preset--color--contrast,
           var(--wc-form-color-text,
           var(--text-color, #333)));
    border: 2px solid var(--wp--preset--color--contrast,
                         var(--border-color, #ddd));

    /* Shape */
    border-radius: 9999px;          /* Full pill shape */

    /* Interaction */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Hover state */
#wcvba-attribute-links a.wcvba-pill:hover:not(.deadline-expired) {
    background-color: var(--wp--preset--color--contrast,
                      var(--accent-color, #333));
    color: var(--wp--preset--color--base,
           var(--background-color, #fff));
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Focus state for accessibility */
#wcvba-attribute-links a.wcvba-pill:focus {
    outline: 2px solid var(--wp--preset--color--primary,
                          var(--accent-color, #0073aa));
    outline-offset: 2px;
}

/* Selected/active state */
#wcvba-attribute-links a.wcvba-pill.selected {
    background-color: var(--wp--preset--color--contrast,
                      var(--accent-color, #333));
    color: var(--wp--preset--color--base,
           var(--background-color, #fff));
    border-color: var(--wp--preset--color--contrast,
                      var(--accent-color, #333));
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Pill content layout for date + countdown */
.wcvba-pill-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.wcvba-pill-label {
    font-weight: 600;
}

/* Countdown timer styling */
.deadline-countdown {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.85;
    white-space: nowrap;
}

#wcvba-attribute-links a.wcvba-pill.selected .deadline-countdown {
    opacity: 1;
}

/* Expired pill state */
#wcvba-attribute-links a.wcvba-pill.deadline-expired {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(50%);
    background-color: var(--wp--preset--color--base, #f5f5f5);
    border-color: var(--wp--preset--color--contrast, #ccc);
    border-style: dashed;
}

/* Selected but expired - use expired styling, not selected styling */
#wcvba-attribute-links a.wcvba-pill.selected.deadline-expired {
    background-color: var(--wp--preset--color--base, #f5f5f5);
    color: var(--wp--preset--color--contrast, #333);
    border-color: var(--wp--preset--color--contrast, #ccc);
    border-style: dashed;
}

.deadline-closed {
    font-size: 0.75rem;
    color: inherit;
}

/* Navigation arrows (optional enhancement) */
.wcvba-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;

    width: 2.5rem;
    height: 2.5rem;
    padding: 0;

    background-color: var(--wp--preset--color--base, #fff);
    border: 1px solid var(--wp--preset--color--contrast, #ddd);
    border-radius: 50%;

    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;

    display: flex;
    align-items: center;
    justify-content: center;
}

.wcvba-scroll-btn:hover {
    background-color: var(--wp--preset--color--contrast, #333);
    color: var(--wp--preset--color--base, #fff);
}

.wcvba-scroll-btn--left {
    left: -0.5rem;
}

.wcvba-scroll-btn--right {
    right: -0.5rem;
}

/* Show arrows on hover when scrollable */
.wcvba-pills-container:hover .wcvba-scroll-btn,
.wcvba-pills-container:focus-within .wcvba-scroll-btn {
    opacity: 1;
}

/* Hide arrows when at scroll boundaries */
.wcvba-pills-container[data-scroll-start="true"] .wcvba-scroll-btn--left,
.wcvba-pills-container[data-scroll-end="true"] .wcvba-scroll-btn--right {
    opacity: 0;
    pointer-events: none;
}

/* Variation groups */
.wcvba-variation-group[aria-hidden="true"] {
    display: none !important;
}

.wcvba-variation-group[aria-hidden="false"] {
    display: block !important;
    opacity: 1;
}

/* Rely on WooCommerce's native CSS Grid for product layout */
/* WooCommerce applies display: grid and handles column widths automatically */

/* Tablet responsive (max 768px) */
@media (max-width: 768px) {
    #wcvba-attribute-links {
        gap: 0.5rem;
        padding: 0.5rem 1rem;   /* Add horizontal padding for edge pills */
        margin: 0 -1rem;        /* Compensate to reach container edges */
    }

    #wcvba-attribute-links a.wcvba-pill {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        min-height: 44px;
    }

    /* Hide arrow buttons on touch devices */
    .wcvba-scroll-btn {
        display: none;
    }

    .wcvba-variations-wrapper {
        margin: 0.5rem 0;
    }

    #wcvba-variations-form {
        margin-bottom: 1.5rem;
    }
}

/* Mobile responsive (max 480px) */
@media (max-width: 480px) {
    #wcvba-attribute-links a.wcvba-pill {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
    }

    .deadline-countdown,
    .deadline-closed {
        font-size: 0.6875rem;
    }

    .ordering-closed-notice {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
}

/* Larger screens - add comfortable spacing */
@media (min-width: 1024px) {
    #wcvba-attribute-links {
        gap: 1rem;
    }

    #wcvba-attribute-links a.wcvba-pill {
        padding: 0.875rem 1.5rem;
    }
}

/* Ordering closed notice in product group */
.ordering-closed-notice {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.ordering-closed-notice p {
    margin: 0;
    color: #856404;
    font-weight: 500;
    font-size: 1rem;
}

/* Disabled add-to-cart buttons in closed groups */
.ordering-closed .add_to_cart_button,
.ordering-closed .single_add_to_cart_button,
.ordering-closed button[name="add-to-cart"] {
    background-color: var(--secondary-color, #F5E0C3) !important;
    color: var(--accent-color, #8C5A3C) !important;
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 0.6;
}

/* Selection info display */
.wcvba-selection-info {
    margin: 0.75rem 0 1rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.wcvba-selection-label {
    font-weight: 600;
}

.wcvba-selection-variant {
    font-weight: 500;
}

.wcvba-selection-deadline {
    font-weight: normal;
}