/**
 * roomvo-samples.css
 *
 * "Order a sample" product button and the header cart toggle. Colours come
 * from the design tokens (modules/design/assets/css/tokens.css) so both follow
 * the Customizer's product CTA settings; fallbacks keep them usable when the
 * tokens sheet is not loaded.
 *
 * Kadence repaints every <button> on :hover/:focus/:active with its own
 * palette (white on some sites), so each control pins its own background for
 * those states.
 */

/* ---------- Order sample button (product page) ---------- */

/* Top margin lives on the button itself (not .rv-order-sample-wrap) so it
   applies the same whether the markup came from auto_place()'s wrapper div
   or bare from the [roomvo_order_sample_button] shortcode / block, which
   render no wrapper at all. */

.rv-order-sample {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 30px;
    padding: 16px 24px;
    border: 2px solid var(--rv-product-cta-bg, var(--rv-btn-primary, #1a1a1a));
    border-radius: var(--rv-btn-radius, 4px);
    background: transparent;
    color: var(--rv-product-cta-bg, var(--rv-btn-primary, #1a1a1a));
    font-family: var(--rv-product-cta-font, inherit);
    font-size: var(--rv-product-cta-size, 16px);
    font-weight: var(--rv-product-cta-weight, 500);
    line-height: 19px;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.rv-order-sample:hover,
.rv-order-sample:focus,
.rv-order-sample:focus-visible,
.rv-order-sample:active {
    background: var(--rv-product-cta-bg, var(--rv-btn-primary, #1a1a1a));
    border-color: var(--rv-product-cta-bg, var(--rv-btn-primary, #1a1a1a));
    color: var(--rv-product-cta-text, var(--rv-btn-primary-text, #fff));
}

.rv-order-sample:focus-visible {
    outline: 2px solid var(--rv-product-cta-hover-bg, var(--rv-accent-hover, #1a1a1a));
    outline-offset: 2px;
}

.rv-order-sample.is-busy {
    opacity: .6;
    cursor: progress;
}

@media (max-width: 768px) {
    .rv-order-sample {
        padding: 14px 20px;
        font-size: 15px;
    }
}

/* ---------- Header cart toggle ---------- */

.rv-cart-toggle-item {
    display: flex;
    align-items: center;
}

/* Kadence lays header items out with the item's own margin; match the gap the
   theme leaves between the navigation and a header button. */
.site-header-item-main-navigation + .rv-cart-toggle-item,
.site-header-item + .rv-cart-toggle-item {
    margin-left: 12px;
}

.rv-cart-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.rv-cart-toggle:hover,
.rv-cart-toggle:focus,
.rv-cart-toggle:focus-visible,
.rv-cart-toggle:active {
    background: var(--rv-surface-soft, rgba(0, 0, 0, 0.06));
    color: inherit;
    box-shadow: none;
}

.rv-cart-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.rv-cart-toggle.is-busy {
    opacity: .6;
    cursor: progress;
}

.rv-cart-toggle__icon {
    display: block;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

/* The "has items" dot: top-right of the icon, ringed so it reads on any
   header colour. Toggled through the `hidden` attribute by roomvo-samples.js. */
.rv-cart-toggle__indicator {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rv-accent, #e2401c);
    box-shadow: 0 0 0 2px var(--rv-surface, #fff);
    pointer-events: none;
}

.rv-cart-toggle__indicator[hidden] {
    display: none;
}

/* ---------- Builder-tagged toggle (class only) ----------
 * A Kadence Advanced Button (or any element) carrying .roomvo-cart-toggle in a
 * block header: keep its own look, just anchor the dot that
 * roomvo-samples.js appends. */
.roomvo-cart-toggle {
    position: relative;
}

.roomvo-cart-toggle .rv-cart-toggle__indicator {
    top: 2px;
    right: 2px;
}

.roomvo-cart-toggle.is-busy {
    opacity: .6;
    cursor: progress;
}