/* UAV Bundled Products — front end.
   The family switcher: a row of plain links between sibling products
   (e.g. every bundle built on the same base product). Deliberately
   theme-neutral so it reads reasonably on any storefront; override these
   classes from the theme if a closer match to the site design is wanted. */

.uavbp-switcher {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 10px;
}

.uavbp-switcher-item {
    display: block;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 15px !important;
    line-height: 1.3;
    text-decoration: none;
    color: #333;
    background: #fff;
    transition:
        border-color 0.15s ease,
        color 0.15s ease,
        background-color 0.15s ease;
}

a.uavbp-switcher-item:hover,
a.uavbp-switcher-item:focus {
    border-color: #0068cf;
    color: #0068cf;
}

.uavbp-switcher-item-current {
    border-color: #0068cf;
    background: #0068cf;
    color: #fff;
    font-weight: 600;
    cursor: default;
}

/* Delivery-time line. The whole pill is coloured by bucket, matching the
   reference competitor site (epotronic) — green when it ships from stock
   now, amber when it's on backorder/needs restocking but still has a real
   lead time, orange for a deliberate pre-order, red when genuinely
   unavailable. This replaced an earlier version that used one fixed amber
   box for every bucket with only the dot changing colour — reverted back
   to whole-pill colouring once the competitor reference showed their
   colour is tied to stock availability, not delivery length. */

.uav-delivery-time {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.4;
}

.uav-delivery-time__icon {
    position: relative;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: currentColor;
}

.uav-delivery-time__icon::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.25;
}

.uav-delivery-time__label {
    display: block;
    font-size: 15px !important;
}

.uav-delivery-time--fast {
    background: #edfaef;
    color: #00a32a;
}

.uav-delivery-time--standard {
    background: #fcf9e8;
    color: #996800;
}

.uav-delivery-time--preorder {
    background: #fdf1e7;
    color: #cf6f24;
}

.uav-delivery-time--custom {
    background: #f0f0f1;
    color: #50575e;
}

.uav-delivery-time--unavailable {
    background: #fcf0f1;
    color: #d63638;
}

/* The "-X% badge, struck-through Total shop price, (X% saved)" line —
   compact, single-line, matching the epotronic-style savings badge —
   the plugin's own accumulated-price-vs-bundle-price figures, not
   WooCommerce's Sale price strikethrough (the bundle's Sale price field
   is intentionally unused). Sits right next to wherever the bundle's own
   price is already shown (e.g. an Elementor "Product Price" widget), not
   a replacement for it.

   !important throughout: this gets injected onto woocommerce_get_price_html,
   i.e. straight inside whatever big/bold/coloured price styling the theme
   or page builder applies to its price container — without !important the
   theme's own rules (often !important themselves, or just higher
   specificity from a deeply-nested Elementor selector) win instead, and
   the badge renders at the price's own huge font size/colour rather than
   its own compact styling. */
.uav-bundle-savings,
.uav-bundle-savings * {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

.uav-bundle-savings {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.uav-bundle-savings__badge {
    display: inline-block !important;
    padding: 2px 6px !important;
    background: #d63638 !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
}

.uav-bundle-savings__original {
    color: #50575e !important;
    text-decoration: line-through !important;
    opacity: 0.75 !important;
}

/* Follows the Excl./Incl. BTW switch, which toggles these two classes. */
.uav-bundle-savings__original.wts-inactive {
    display: none !important;
}

.uav-bundle-savings__note {
    color: #50575e !important;
}

/* DISABLED (kept for reference, remove this wrapper comment to re-enable):
 * Wdevs Tax Switch (buttons type): segmented Excl. BTW | Incl. BTW control.
 * Wdevs renders Incl. first; flex order puts Excl. on the left to match the
 * labels used across the shop. Active segment gets the green used elsewhere.
 * ---------------------------------------------------------------------------
.wp-block-wdevs-tax-switch .wdevs-tax-buttons {
    display: inline-flex !important;
    gap: 2px !important;
    padding: 3px !important;
    background: #e9e9ea !important;
    border-radius: 999px !important;
}

.wp-block-wdevs-tax-switch .wdevs-tax-button {
    order: 2;
    margin: 0 !important;
    padding: 6px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

(Excl. is the second button in Wdevs' markup; show it first.)
.wp-block-wdevs-tax-switch .wdevs-tax-button:nth-child(2) {
    order: 1;
}

.wp-block-wdevs-tax-switch .wdevs-tax-button:hover:not(.wdevs-tax-button-active) {
    background: rgba(0, 0, 0, 0.06) !important;
}

.wp-block-wdevs-tax-switch .wdevs-tax-button.wdevs-tax-button-active {
    background: #34c759 !important;
    color: #fff !important;
}
*/

/* ---------------------------------------------------------------------------
 * Add-on cards (Add / Remove an extra such as the AP100 parachute).
 * !important throughout: the theme styles every <button> big and filled.
 * ------------------------------------------------------------------------- */
.uavbp-addon-box {
    margin: 10px 0;
}

.uavbp-addon-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 6px;
    padding: 8px 12px;
    border: 1px solid #d7dbe0;
    border-radius: 6px;
    background: #fff;
}

.uavbp-addon-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.uavbp-addon-title {
    font-size: 13px;
    line-height: 1.35;
}

.uavbp-addon-amount {
    color: #50575e;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.uavbp-addon-box .uavbp-icon {
    flex-shrink: 0;
}

.uavbp-addon-box .uavbp-icon-tag {
    color: #50575e;
}

/* State: on shows the "on" texts and the Remove button; off shows Add. */
.uavbp-addon-item[data-state="on"] .uavbp-addon-off,
.uavbp-addon-item[data-state="off"] .uavbp-addon-on {
    display: none !important;
}

.uavbp-addon-box .uavbp-addon-button span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.uavbp-addon-box .uavbp-addon-button,
.uavbp-addon-box .uavbp-addon-button:hover,
.uavbp-addon-box .uavbp-addon-button:focus,
.uavbp-addon-box .uavbp-addon-button:active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 9px 20px !important;
    border: 1px solid #c3c4c7 !important;
    border-radius: 999px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #1d2327 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.uavbp-addon-box .uavbp-addon-item[data-state="on"] .uavbp-addon-button {
    border-color: #d63638 !important;
    color: #b32d2e !important;
}

.uavbp-addon-box .uavbp-addon-item[data-state="off"] .uavbp-addon-button {
    border-color: #34c759 !important;
    color: #1a7f37 !important;
}

.uavbp-addon-box .uavbp-addon-button:hover {
    background: #f6f7f7 !important;
}

.uavbp-addon-box .uavbp-addon-button svg {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
}

.uavbp-addon-box .wts-inactive {
    display: none !important;
}

.uavbp-addon-loading .uavbp-addon-button {
    opacity: 0.6;
    pointer-events: none;
}

.uav-bundle-savings.uavbp-addon-hidden {
    display: none !important;
}

@media (max-width: 480px) {
    .uavbp-addon-item {
        flex-wrap: wrap;
    }

    .uavbp-addon-box .uavbp-addon-button {
        flex-basis: 100% !important;
    }
}

/* Lease button after assets/lease-button.js moved it below the
   "Koop het nu" / "Offerteaanvraag" row. */
.kdl-lease-button-wrap.uavbp-lease-moved {
    margin-top: 12px;
}

/* ---------------------------------------------------------------------------
 * Price card ([uavbp_price_card]): price with an Excl. / Incl. BTW switch,
 * the saving, and the price in the other tax mode. Every figure is there
 * twice (.wts-price-incl / .wts-price-excl); the inactive one is hidden.
 * !important on the type and colours: Elementor's global typography and
 * the theme's .amount rules otherwise win inside a Shortcode widget.
 * ------------------------------------------------------------------------- */
.uavbp-price-card {
    margin: 10px 0 14px;
    padding: 20px 22px;
    border: 1px solid #e3e5e8;
    border-radius: 12px;
    background: #fff;
    color: #50575e;
    font-size: 16px;
    line-height: 1.4;
}

.uavbp-price-card .wts-inactive {
    display: none !important;
}

.uavbp-price-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
}

.uavbp-price-card__price,
.uavbp-price-card__price .amount,
.uavbp-price-card__price bdi {
    color: #22a33a !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

.uavbp-price-card__savings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 8px;
}

.uavbp-price-card__savings,
.uavbp-price-card__savings .amount,
.uavbp-price-card__savings bdi {
    font-size: 15px !important;
    font-weight: 400 !important;
}

.uavbp-price-card__badge {
    padding: 2px 6px;
    border-radius: 3px;
    background: #e02424;
    color: #fff !important;
    font-weight: 700 !important;
}

.uavbp-price-card__was,
.uavbp-price-card__was .amount {
    color: #6b7280 !important;
    text-decoration: line-through;
}

.uavbp-price-card__saved {
    color: #6b7280;
}

.uavbp-price-card__other {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eceef0;
}

.uavbp-price-card__other,
.uavbp-price-card__other .amount,
.uavbp-price-card__other bdi {
    color: #6b7280 !important;
    font-size: 17px !important;
    font-weight: 400 !important;
}

/* Excl. BTW [switch] Incl. BTW — green when incl. is shown. */
.uavbp-tax-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.uavbp-tax-toggle__label {
    color: #333;
    font-size: 15px !important;
    cursor: pointer;
    user-select: none;
}

.uavbp-tax-toggle .uavbp-tax-toggle__switch {
    position: relative;
    flex: 0 0 auto;
    width: 48px !important;
    height: 28px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #e9e9ea !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.uavbp-tax-toggle .uavbp-tax-toggle__switch[aria-checked="true"] {
    background: #34c759 !important;
}

.uavbp-tax-toggle__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.uavbp-tax-toggle__switch[aria-checked="true"] .uavbp-tax-toggle__knob {
    transform: translateX(20px);
    background: #fff;
}

.uavbp-tax-toggle__switch:focus-visible {
    outline: 2px solid #0068cf;
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .uavbp-price-card {
        padding: 16px;
    }

    .uavbp-price-card__price,
    .uavbp-price-card__price .amount,
    .uavbp-price-card__price bdi {
        font-size: 32px !important;
    }
}

/* "Offerteaanvraag" button (Elementor CSS class requestQuotation--btn):
   hidden until assets/price-card.js finds the price is high enough. */
.requestQuotation--btn {
    display: none;
}

.requestQuotation--btn.is-visible {
    display: flex;
    flex-direction: row;
    justify-content: center;
}