/* Sitex VAT Toggle v2.5.20 */

/* ---- Pill — half size ---- */
.svt-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: #f5f6f7;
    border: 1px solid #e2e4e6;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    user-select: none;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

/* Shop: prepended into .before-shop-loop */
#svt-shop-toggle { display: none; } /* fully removed from layout flow until JS relocates it into .before-shop-loop, so it reserves no space at its original render position and never flashes there first */
.before-shop-loop { min-height: 48px; } /* reserves space for the JS-inserted toggle so it does not cause a layout shift on load */
.before-shop-loop .svt-wrapper { margin-right: 10px; }
#svt-shop-toggle { margin-bottom: 0; margin-top: 0; }

/* Product: after social share */
body.single-product .product-price { min-height: 68px; } /* reserves space for the JS-inserted small inc./ex. VAT text so it does not cause a layout shift on load */
#svt-product-toggle { margin-top: 12px; margin-bottom: 12px; display: none; } /* hidden until JS (placeProductToggle) relocates it to the admin-configured position, then reveals it via display:inline-flex — prevents it flashing in its default render spot before the real move happens */

/* ---- Labels ---- */
.svt-label-ex,
.svt-label-incl {
    transition: color 0.18s;
    cursor: pointer;
    font-size: 11px;
    white-space: nowrap;
}

/* Default (ex. VAT active): left active, right dim */
.svt-label-ex   { color: #374151; }
.svt-label-incl { color: #9ca3af; }

/* Toggled on (inc. VAT active): left dim, right active */
.svt-wrapper.svt-on .svt-label-ex   { color: #9ca3af; }
.svt-wrapper.svt-on .svt-label-incl { color: #374151; }

/* ---- Switch (30×17px) ---- */
.svt-toggle {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
    font-size: 0 !important; /* neutralises any theme's global button font-size (e.g. var(--theme-button-font-size))
                                 which was inflating this switch's size on Power-Hub; this button has no visible
                                 text of its own (the ex./inc. labels are separate spans), so 0 is safe */
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important; /* theme's global button rule also forces height:2.625rem; must be reset to auto so the switch keeps its intended ~17px track height */
    width: auto !important;
    line-height: 1 !important;
}
.svt-toggle__track {
    display: block;
    width: 30px;
    height: 17px;
    background: #1e73be;
    border-radius: 100px;
    position: relative;
    transition: background 0.18s;
}
.svt-toggle__thumb {
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.18s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.svt-wrapper.svt-on .svt-toggle__thumb { transform: translateX(13px); }
.svt-wrapper.svt-on .svt-toggle__track { background: #243159; }
.svt-toggle:focus-visible .svt-toggle__track { outline: 2px solid #1e73be; outline-offset: 2px; }

/* ---- Secondary price (after .price, outside flex container) ---- */
/* Support both old (.svt-card-secondary) and new (.svt-sec) class names */
/* Old JS versions injected inside .price (flex row) — force block display */
.price .svt-card-secondary,
.price .svt-sec {
    display: block !important;
    width: 100%;
    font-size: 12px;
    color: #374151;
    font-weight: 600;
    margin-top: 2px;
    line-height: 1.4;
    flex-basis: 100%;
}

/* New JS injects after .price — already block in block parent */
/* Shop cards: secondary price sits BELOW the main price.
   flex-basis:100% forces a new line even inside flex-row containers */
.svt-sec {
    display: block;
    width: 100%;
    flex-basis: 100%;
    flex-shrink: 0;
    font-size: 12px;
    color: #374151;
    font-weight: 600;
    margin-top: 1px;
    line-height: 1.4;
}

/* Product page: secondary sits BELOW the price */
.svt-sec-prod {
    display: block;
    width: 100%;
    flex-basis: 100%;
    flex-shrink: 0;
    font-size: 13px;
    color: #374151;
    font-weight: 600;
    margin-top: 1px;
    line-height: 1.4;
}

/* Selected variation: keep the VAT line grouped with the price while adding
   breathing room before the quantity and add-to-basket controls. */
.single_variation .woocommerce-variation-price .svt-sec-prod,
.single_variation .woocommerce-variation-price + .svt-sec-prod {
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .svt-wrapper { font-size: 10px; padding: 3px 8px; gap: 4px; }
    .svt-toggle__track { width: 26px; height: 15px; }
    .svt-toggle__thumb { width: 11px; height: 11px; }
    .svt-wrapper.svt-on .svt-toggle__thumb { transform: translateX(11px); }
}

/* Always show the quick-view secondary price. */
.svt-qv-sec {
    display: block !important;
}

/* Allow .product-price to wrap on Blonwe theme (power-hub) only
   Override the theme's gap:15px so secondary sits tight under the price */
.theme-blonwe .product-detail-inner .product-price {
    flex-wrap: wrap;
    gap: 1px;
}

/* Power-Hub shop cards: reduce row-gap on cart wrapper so secondary
   price sits tight under the main price (theme sets row-gap: 10px) */
.theme-blonwe .products .product-cart-wrapper {
    row-gap: 2px !important;
}


/* The theme's own .product-price min-height (53px on some products) only
   accounts for the single price line — it does not leave room for the
   secondary 'inc./ex. VAT' text this plugin adds underneath it. When that
   text is inserted, content exceeds the theme's reserved height and the
   box visibly grows, pushing everything below it down. This override
   reserves enough height up front for both lines so nothing shifts. */
.product-price { min-height: 68px; }

/* ---- Quick view: show the original toggle below the VAT price line ---- */

/* Blonwe renders quick-view price ranges as a flex row in reverse order.
   The JavaScript values are already sorted low-to-high, so force only the
   popup's parent product range back to normal visual order. This is scoped
   away from product cards, product pages and selected-variation prices. */
.mfp-content .product-price > .price,
.quick-view-modal .product-price > .price,
.site-quickview .product-price > .price,
.quick-view-product-wrapper .product-price > .price,
.yith-wcqv-main .product-price > .price,
.woosq-product .product-price > .price {
    flex-direction: row !important;
}

.mfp-content .svt-qv-toggle,
.mfp-content .svt-quick-view-toggle,
.quick-view-modal .svt-qv-toggle,
.quick-view-modal .svt-quick-view-toggle,
.site-quickview .svt-qv-toggle,
.site-quickview .svt-quick-view-toggle,
.quick-view-product-wrapper .svt-qv-toggle,
.quick-view-product-wrapper .svt-quick-view-toggle,
.yith-wcqv-main .svt-qv-toggle,
.yith-wcqv-main .svt-quick-view-toggle,
.woosq-product .svt-qv-toggle,
.woosq-product .svt-quick-view-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* Quick view secondary price — same style as shop cards */
.svt-qv-sec {
    display: block;
    font-size: 13px;
    color: #374151;
    font-weight: 600;
    margin-top: 2px;
    margin-bottom: 12px !important;
    line-height: 1.4;
}

/* Some theme/quick-view combinations reuse the product-page secondary class.
   Keep the small alternate-VAT line 12px above the quick-view toggle pill. */
.mfp-content .svt-sec-prod,
.quick-view-modal .svt-sec-prod,
.site-quickview .svt-sec-prod,
.quick-view-product-wrapper .svt-sec-prod,
.yith-wcqv-main .svt-sec-prod,
.woosq-product .svt-sec-prod {
    margin-bottom: 12px !important;
}