/* ============================================================
   THW WooCommerce Sync Addon — Front-End Styles
   ============================================================ */

/* ── Tebex Buy Button (WooCommerce pages) ─────────────────── */
.thws-buy-btn {
    display: inline-flex !important;
    align-items: center;
    gap: .45em;
    background: #6c63ff !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: .65em 1.4em !important;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease !important;
    text-decoration: none !important;
    font-size: .95rem !important;
}
.thws-buy-btn:hover,
.thws-buy-btn:focus {
    background: #574fd6 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    outline: none;
}
.thws-buy-btn:disabled,
.thws-buy-btn.is-loading {
    opacity: .65 !important;
    cursor: not-allowed !important;
    transform: none !important;
}
.thws-buy-btn--lg {
    font-size: 1rem !important;
    padding: .75em 1.6em !important;
    width: 100%;
    justify-content: center;
}

/* ── Loading spinner ──────────────────────────────────────── */
.thws-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: thwsSpin .7s linear infinite;
    vertical-align: middle;
}
@keyframes thwsSpin {
    to { transform: rotate(360deg); }
}

/* ── Single product buy area ─────────────────────────────── */
.thws-single-buy {
    margin: 1.2rem 0;
}
.thws-qty-wrap {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}
.thws-qty-wrap label {
    font-size: .88rem;
    font-weight: 600;
    color: #333;
    min-width: 60px;
}
.thws-qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}
.thws-qty-btn {
    width: 36px;
    height: 42px;
    background: #f8f9fa;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    color: #333;
    padding: 0;
}
.thws-qty-btn:hover { background: #e2e2e2; }
.thws-qty-input {
    width: 52px !important;
    border: none !important;
    border-left: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
    text-align: center !important;
    font-size: 1rem !important;
    padding: .5em 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}
.thws-qty-input::-webkit-outer-spin-button,
.thws-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.thws-qty-input:focus { outline: none !important; }

.thws-buy-note {
    font-size: .78rem !important;
    color: #888 !important;
    margin-top: .5rem !important;
    text-align: center;
}

/* ── Shop loop badge ─────────────────────────────────────── */
.thws-loop-badge {
    position: absolute;
    top: .5rem;
    left: .5rem;
    background: #6c63ff;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .2em .55em;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
    z-index: 2;
    pointer-events: none;
}

/* Ensure product image wrapper is relative so badge positions correctly */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a img {
    position: relative;
}

/* ── Price suffix ────────────────────────────────────────── */
.thws-price-suffix {
    font-size: .78em;
    color: #888;
    font-weight: 400;
    margin-left: .25em;
}

/* ── Admin product list column ───────────────────────────── */
.thws-col-badge {
    display: inline-block;
    background: #f0eeff;
    color: #6c63ff;
    font-size: .75rem;
    font-weight: 700;
    padding: .15em .5em;
    border-radius: 4px;
    border: 1px solid #d4d0ff;
}