/**
 * Easy Chat to Checkout - Frontend Styles
 *
 * @package EasyChatToCheckout
 * @since   2.2.4
 */

/* ==========================================================================
   Base Button
   ========================================================================== */

.ectc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    border: 2px solid transparent;
    cursor: pointer;
    box-sizing: border-box;
    max-width: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease,
        transform 0.15s ease;
    position: relative;
    isolation: isolate;
    vertical-align: middle;
}

.ectc-button,
.ectc-button:hover,
.ectc-button:focus,
.ectc-button:visited,
.ectc-button:active {
    text-decoration: none !important;
    outline: none;
    box-shadow: none;
}

.ectc-button svg {
    flex-shrink: 0;
    display: block;
    fill: currentColor;
    width: 18px;
    height: 18px;
}

.ectc-button .ectc-button-text {
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    text-transform: none;
}

.ectc-button:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.ectc-button:active {
    transform: translateY(1px);
}

.ectc-button:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.35);
    outline-offset: 2px;
}

/* ==========================================================================
   Sizes
   ========================================================================== */

.ectc-button.ectc-size-small {
    padding: 8px 16px;
    font-size: 13px;
}
.ectc-button.ectc-size-small svg {
    width: 16px;
    height: 16px;
}

.ectc-button.ectc-size-medium {
    padding: 12px 24px;
    font-size: 15px;
}
.ectc-button.ectc-size-medium svg {
    width: 20px;
    height: 20px;
}

.ectc-button.ectc-size-large {
    padding: 16px 32px;
    font-size: 17px;
}
.ectc-button.ectc-size-large svg {
    width: 22px;
    height: 22px;
}

.ectc-button.ectc-size-custom {
    padding: 12px 24px;
    font-size: 15px;
    min-width: 140px;
}

/* ==========================================================================
   Shapes
   ========================================================================== */

.ectc-button.ectc-shape-rounded { border-radius: 8px; }
.ectc-button.ectc-shape-pill    { border-radius: 999px; }
.ectc-button.ectc-shape-square  { border-radius: 0; }

/* ==========================================================================
   Animations
   ========================================================================== */

.ectc-button.ectc-anim-glow      { animation: ectc-f-glow 2s infinite; }
.ectc-button.ectc-anim-pulse     { animation: ectc-f-pulse 1.6s infinite; }
.ectc-button.ectc-anim-bounce    { animation: ectc-f-bounce 1.6s infinite; }
.ectc-button.ectc-anim-heartbeat { animation: ectc-f-heartbeat 1.5s infinite; }
.ectc-button.ectc-anim-float     { animation: ectc-f-float 3s ease-in-out infinite; }

.ectc-button.ectc-anim-pulse:hover,
.ectc-button.ectc-anim-bounce:hover,
.ectc-button.ectc-anim-heartbeat:hover,
.ectc-button.ectc-anim-float:hover {
    animation-play-state: paused;
}

@keyframes ectc-f-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.55); }
    50%      { box-shadow: 0 0 0 12px rgba(109, 40, 217, 0); }
}
@keyframes ectc-f-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@keyframes ectc-f-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes ectc-f-heartbeat {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.08); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.08); }
    70%  { transform: scale(1); }
}
@keyframes ectc-f-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* ==========================================================================
   Single Product — Positions
   ========================================================================== */

.ectc-button-wrap-own-row {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    clear: both;
}

.ectc-button-wrap-own-row .ectc-button {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.single-product .ectc-button-wrap-own-row {
    margin-bottom: 18px;
}

.single-product form.cart .ectc-button.ectc-pos-after_add_to_cart {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin-top: 14px;
    clear: both;
}

.ectc-button-wrap {
    display: block;
    width: 100%;
    margin: 16px 0;
    clear: both;
}

.ectc-button-wrap .ectc-button {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========================================================================
   SHOP / ARCHIVE / SHORTCODE BUTTONS — MAXIMUM AGGRESSION
   ========================================================================== */

/* Wrapper — full width, always */
.ectc-button-wrap-shop {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    clear: both !important;
    float: none !important;
    position: static !important;
}

/* The button itself — every property forced */
a.ectc-button.ectc-button-shop,
.ectc-button-wrap-shop .ectc-button,
.ectc-button-wrap-shop a.ectc-button {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 16px !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    line-height: 1.3 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    height: auto !important;
    min-height: 40px !important;
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    float: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    background-clip: padding-box !important;
}

/* Absolutely kill text-decoration on every state */
a.ectc-button.ectc-button-shop,
a.ectc-button.ectc-button-shop:hover,
a.ectc-button.ectc-button-shop:focus,
a.ectc-button.ectc-button-shop:visited,
a.ectc-button.ectc-button-shop:active,
.ectc-button-wrap-shop a,
.ectc-button-wrap-shop a:hover,
.ectc-button-wrap-shop a:focus,
.ectc-button-wrap-shop a:visited,
.ectc-button-wrap-shop a:active {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit;
}

/* Kill text-decoration on all children */
.ectc-button.ectc-button-shop *,
.ectc-button.ectc-button-shop *::before,
.ectc-button.ectc-button-shop *::after,
.ectc-button-wrap-shop .ectc-button *,
.ectc-button-wrap-shop .ectc-button *::before,
.ectc-button-wrap-shop .ectc-button *::after {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Icon — fixed size, proper spacing */
.ectc-button.ectc-button-shop svg,
.ectc-button-wrap-shop .ectc-button svg,
.ectc-button-wrap-shop a.ectc-button svg {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    fill: currentColor !important;
    border: none !important;
    background: transparent !important;
}

/* Text span */
.ectc-button.ectc-button-shop .ectc-button-text,
.ectc-button-wrap-shop .ectc-button-text,
.ectc-button-wrap-shop a.ectc-button .ectc-button-text {
    display: inline-block !important;
    text-decoration: none !important;
    border: none !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    vertical-align: middle !important;
}

/* Hover state */
a.ectc-button.ectc-button-shop:hover,
.ectc-button-wrap-shop .ectc-button:hover {
    text-decoration: none !important;
    filter: brightness(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transform: none !important;
}

/* ==========================================================================
   WooCommerce ul.products grid (classic + shortcode)
   ========================================================================== */

.woocommerce ul.products li.product .ectc-button-wrap-shop,
.woocommerce-page ul.products li.product .ectc-button-wrap-shop {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    clear: both !important;
}

.woocommerce ul.products li.product a.ectc-button.ectc-button-shop,
.woocommerce-page ul.products li.product a.ectc-button.ectc-button-shop {
    text-decoration: none !important;
}

/* Column layouts (shortcode generates .columns-N wrapper) */
.woocommerce[class*="columns-"] ul.products li.product a.ectc-button,
.woocommerce-page[class*="columns-"] ul.products li.product a.ectc-button {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* ==========================================================================
   Elementor & Page Builder compatibility
   ========================================================================== */

.elementor-widget-woocommerce-products .ectc-button,
.elementor-widget-wc-products .ectc-button,
.elementor-widget-woocommerce-archive-products .ectc-button,
.elementor-widget-woocommerce-product-categories .ectc-button {
    text-decoration: none !important;
}

.elementor-widget-woocommerce-products .ectc-button-wrap,
.elementor-widget-wc-products .ectc-button-wrap,
.elementor-widget-woocommerce-archive-products .ectc-button-wrap {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
}

/* ==========================================================================
   Hide Add to Cart
   ========================================================================== */

body.ectc-hide-add-to-cart .single_add_to_cart_button,
body.ectc-hide-add-to-cart .single-product form.cart button[type="submit"],
body.ectc-hide-add-to-cart .single-product form.cart .button,
body.ectc-hide-add-to-cart form.cart button[type="submit"],
body.ectc-hide-add-to-cart form.cart .single_add_to_cart_button {
    display: none !important;
}

body.ectc-hide-add-to-cart form.cart .ectc-button,
body.ectc-hide-add-to-cart .single-product form.cart .ectc-button {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
}

/* ==========================================================================
   Hide Quantity Selection
   ========================================================================== */

body.ectc-hide-quantity .quantity,
body.ectc-hide-quantity .product-quantity,
body.ectc-hide-quantity input.qty,
body.ectc-hide-quantity .qty,
body.ectc-hide-quantity form.cart .quantity,
body.ectc-hide-quantity form.cart input.qty,
body.ectc-hide-quantity .woocommerce-variation-add-to-cart .quantity,
body.ectc-hide-quantity .woocommerce-variation-add-to-cart input.qty,
body.ectc-hide-quantity .elementor-widget-woocommerce-product-add-to-cart .quantity,
body.ectc-hide-quantity .elementor-widget-woocommerce-product-add-to-cart input.qty,
body.ectc-hide-quantity .elementor-add-to-cart .quantity,
body.ectc-hide-quantity .elementor-add-to-cart input.qty,
body.ectc-hide-quantity .single-product form.cart .quantity,
body.ectc-hide-quantity .single-product .quantity,
body.ectc-hide-quantity .single-product .product-quantity,
body.ectc-hide-quantity .single-product input.qty,
body.ectc-hide-quantity .single-product .qty,
body.ectc-hide-quantity .single-product div.quantity,
body.ectc-hide-quantity .woocommerce .quantity,
body.ectc-hide-quantity .woocommerce div.quantity {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
}

body.ectc-hide-quantity form.cart .ectc-button.ectc-pos-after_add_to_cart,
body.ectc-hide-quantity form.cart .ectc-button.ectc-pos-before_add_to_cart,
body.ectc-hide-quantity .single-product form.cart .ectc-button.ectc-pos-after_add_to_cart {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 768px) {
    .ectc-button.ectc-size-small  { padding: 10px 16px; font-size: 13px; }
    .ectc-button.ectc-size-medium { padding: 12px 20px; font-size: 15px; }
    .ectc-button.ectc-size-large  { padding: 14px 24px; font-size: 16px; }

    .single-product form.cart .ectc-button.ectc-pos-after_add_to_cart,
    .ectc-button-wrap-own-row .ectc-button {
        width: 100%;
        max-width: 100%;
    }

    a.ectc-button.ectc-button-shop,
    .ectc-button-wrap-shop .ectc-button {
        padding: 11px 14px !important;
        font-size: 13px !important;
    }
}

@media screen and (max-width: 480px) {
    .ectc-button {
        width: 100%;
    }

    .ectc-button .ectc-button-text {
        white-space: normal;
    }

    a.ectc-button.ectc-button-shop,
    .ectc-button-wrap-shop .ectc-button {
        white-space: normal !important;
    }

    a.ectc-button.ectc-button-shop .ectc-button-text,
    .ectc-button-wrap-shop .ectc-button-text {
        white-space: normal !important;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ectc-button,
    .ectc-button[class*="ectc-anim-"] {
        animation: none !important;
        transition: none !important;
    }

    .ectc-button:hover,
    .ectc-button:active {
        transform: none !important;
    }
}

@media (prefers-contrast: high) {
    .ectc-button {
        border-width: 2px;
        font-weight: 700;
    }
}

@media print {
    .ectc-button,
    .ectc-button-wrap,
    .ectc-button-wrap-own-row,
    .ectc-button-wrap-shop {
        display: none !important;
    }
}