/**
 * Copyright © CycleMotion. All rights reserved.
 */

/* ---- Header "Customer View" toggle (CSS switch) ---- */
.cymo-hide-pricing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cymo-hide-pricing-toggle__label {
    white-space: nowrap;
}

.cymo-hide-pricing-toggle .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    vertical-align: middle;
    margin: 0;
}

.cymo-hide-pricing-toggle .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cymo-hide-pricing-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.cymo-hide-pricing-toggle .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: .4s;
}

.cymo-hide-pricing-toggle .switch input:checked + .slider {
    background-color: #2196F3;
}

.cymo-hide-pricing-toggle .switch input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

.cymo-hide-pricing-toggle .switch input:checked + .slider:before {
    transform: translateX(18px);
}

.cymo-hide-pricing-toggle .slider.round {
    border-radius: 22px;
}

.cymo-hide-pricing-toggle .slider.round:before {
    border-radius: 50%;
}

/* ---- Hide catalog/product pricing when the toggle is ON ---- */
/* .price-box is the wrapper emitted by the catalog price renderer, so it covers
   listing, product, search, widgets and related/upsell prices. .prices-tier is
   the PDP tier-price list ("Buy N for X each and save Y%"), which renders outside
   .price-box. Cart, minicart and checkout totals use different markup and are
   intentionally left visible. */
body.cymo-hide-pricing .price-box,
body.cymo-hide-pricing .prices-tier {
    display: none !important;
}

/* ---- "ex of GST" / "inc of GST" suffix after catalog prices (PLP + PDP) ---- */
/* Sits at the end of .price-box; inherit so it matches the price font and colour. */
.price-box .gst-label {
    color: #023761;
    font-size: 11px;
    font-weight: inherit;
    white-space: nowrap;
}

/* PDP: the theme forces .price-box > span to display:block (stacking the suffix
   below the price). Override so the price and its GST suffix sit on one line. */
.catalog-product-view .product-info-price .price-box.price-final_price > .price-container,
.catalog-product-view .product-info-price .price-box.price-final_price > .gst-label {
    display: inline-block;
    vertical-align: baseline;
}