/**
 * EAATCQL Frontend Styles
 *
 * Styles for the AJAX Add to Cart with Quantity widget.
 */

/* --- Wrapper and Layout --- */
.eaatcql-wrapper { display: flex; position: relative; }

/* --- Quantity Input Area --- */
.eaatcql-quantity-wrapper { display: flex; align-items: center; flex-grow: 0; flex-shrink: 0; }
.eaatcql-quantity-wrapper input.qty.eaatcql-qty-input { text-align: center; border: 1px solid #ddd; height: auto; line-height: normal; box-shadow: none; appearance: textfield; -moz-appearance: textfield; margin: 0; max-width: 100%; }
.eaatcql-quantity-wrapper input.qty.eaatcql-qty-input::-webkit-outer-spin-button,
.eaatcql-quantity-wrapper input.qty.eaatcql-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Quantity +/- Buttons --- */
.eaatcql-qty-btn { cursor: pointer; border: 1px solid #ddd; background-color: #f8f8f8; color: #555; line-height: 1; display: inline-flex; align-items: center; justify-content: center; user-select: none; transition: background-color 0.2s ease, color 0.2s ease; }
.eaatcql-qty-btn:hover { background-color: #eee; }
.eaatcql-qty-btn:active { background-color: #e5e5e5; }
.eaatcql-qty-btn i, .eaatcql-qty-btn svg { vertical-align: middle; width: 1em; height: 1em; }
.eaatcql-quantity-wrapper.has-plus-minus input.qty { border-left: none; border-right: none; border-radius: 0 !important; }
.eaatcql-quantity-wrapper.has-plus-minus .eaatcql-qty-btn.minus { border-right: none; }
.eaatcql-quantity-wrapper.has-plus-minus .eaatcql-qty-btn.plus { border-left: none; }
/* Spacing margin is applied via Elementor control selectors */


/* --- Add to Cart Button --- */
.eaatcql-button {
    display: inline-flex; /* Use flex for alignment */
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.eaatcql-button .eaatcql-button-icon { display: inline-flex; align-items: center; line-height: 1; }
.eaatcql-button .eaatcql-button-icon i, .eaatcql-button .eaatcql-button-icon svg { line-height: 1; width: 1em; height: 1em; }
.eaatcql-button .eaatcql-button-text { line-height: 1; }

/* --- Button Loading State --- */
.eaatcql-button.loading {
    opacity: 1;
    cursor: wait;
    background-image: none !important; /* Hide default background spinners */
    /* Ensure flex properties are maintained */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hide text and icon when loading */
.eaatcql-button.loading .eaatcql-button-text,
.eaatcql-button.loading .eaatcql-button-icon {
    visibility: hidden; /* Hide visually but keep space */
    opacity: 0; /* Reinforce hiding */
}

/* Hide default WC/Theme spinner potentially using ::after */
.eaatcql-button.loading::after {
    content: none !important;
    display: none !important;
}

/* Custom Loading Spinner (using ::before - Absolutely Centered) */
.eaatcql-button.loading::before {
    content: '';
    box-sizing: border-box;
    /* Size and Thickness from Elementor Controls (Defaults shown) */
    width: 16px; /* Example size, should be dynamic via CSS vars if possible */
    height: 16px; /* Example size, should be dynamic via CSS vars if possible */
    border-width: 2px; /* Example thickness */
    /* Style */
    border-style: solid;
    border-radius: 50%;
    /* Color from Elementor Control (Defaults to button text color) */
    border-color: currentColor; /* Use text color of button for spinner */
    border-top-color: transparent;
    /* border-right-color: transparent; */ /* Optional: Use only one transparent edge */
    /* Animation */
    animation: eaatcql-spinner 0.8s linear infinite;
    /* --- Positioning --- */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* --- Remove flex-item specific styles --- */
    /* display: inline-block; */ /* No longer needed */
    /* flex-shrink: 0; */ /* No longer needed */
    /* line-height: 0; */ /* No longer needed */
}
@keyframes eaatcql-spinner {
    to { transform: rotate(360deg); }
}

/* --- Button Added State --- */
.eaatcql-button.added { /* Optional custom styles */ }
/* Hide our spinner if added class remains */
.eaatcql-button.added::before {
    content: none !important;
    display: none !important;
}


/* --- Stock Status --- */
.eaatcql-stock-status { font-size: 0.9em; line-height: 1.4; }
.eaatcql-stock-status .stock { color: inherit; }

/* --- Hide Default "View Cart" Link --- */
.eaatcql-wrapper.eaatcql-hide-view-cart a.added_to_cart { display: none !important; }
/* Hide default ::after content when button is added and link is hidden */
.eaatcql-wrapper.eaatcql-hide-view-cart .eaatcql-button.added::after { display: none !important; }

/* --- Custom Notification Feedback --- */
.eaatcql-feedback-placeholder { display: block; height: 0; width: 100%; margin: 0; padding: 0; line-height: 0; order: 99; }
.eaatcql-feedback { box-sizing: border-box; display: block; width: 100%; text-align: center; margin-top: 10px; padding: 5px 10px; border-radius: 3px; border: 1px solid transparent; opacity: 0; transition: opacity 0.3s ease-in-out; }
.eaatcql-feedback.fade-in { opacity: 1; }
.eaatcql-feedback-success { background-color: #e5f5e6; color: #34a853; border-color: #c7e8ca; }
.eaatcql-feedback-error { background-color: #fce8e6; color: #ea4335; border-color: #f5c6cb; }

/* --- Reverse Stacked Layout --- */
.elementor-widget.eaatcql-layout-column .eaatcql-stock-status { order: 0; }
.elementor-widget.eaatcql-layout-column .eaatcql-quantity-wrapper { order: 1; }
.elementor-widget.eaatcql-layout-column .eaatcql-button { order: 2; }
.elementor-widget.eaatcql-layout-column.eaatcql-stack-reversed-yes .eaatcql-stock-status { order: 0; }
.elementor-widget.eaatcql-layout-column.eaatcql-stack-reversed-yes .eaatcql-button { order: 1; }
.elementor-widget.eaatcql-layout-column.eaatcql-stack-reversed-yes .eaatcql-quantity-wrapper { order: 2; }

/* --- Responsive Considerations --- */
@media (max-width: 767px) {
    .eaatcql-feedback { font-size: 0.9em; }
}