/* Safety net for any block cart / mini-cart markup left elsewhere on the
   site: the Store API renders prices that PHP filters cannot reach. */
.wc-block-components-product-price,
.wc-block-cart-item__total,
.wc-block-components-totals-item,
.wc-block-cart__submit,
.widget_shopping_cart .total {
    display: none;
}

/* Cart icon in the header. Colours come from custom properties so a theme
   can brand the badge without overriding the rules. */

/* The theme prints this item before the other widgets of the position, so
   it is pushed last in the flex row to sit after them (after the phone
   number, typically). */
.quotepro-cart {
    order: var(--quotepro-cart-order, 10);
}

/* Ordering only works inside a flex container. Navbars already are one;
   off-canvas positions are usually plain block containers, so the element
   holding the icon — and only that one — is turned into a flex column. */
:has(> .quotepro-cart:not(.uk-navbar-item)) {
    display: flex;
    flex-direction: column;
}

.quotepro-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Follows the header text colour instead of the default link colour,
       so the icon sits naturally beside the other header items. */
    color: inherit;
    text-decoration: none;
    /* Room above and to the right for the badge: without it the badge is
       anchored to a box the size of the icon and covers it entirely. */
    padding: 0.4rem 0.65rem 0.15rem 0.15rem;
}

.quotepro-cart-link:hover,
.quotepro-cart-link:focus-visible {
    color: inherit;
    opacity: 0.7;
    text-decoration: none;
}

/* Sits in the top-right corner of the icon, overlapping it only slightly. */
.quotepro-cart-count {
    position: absolute;
    top: -0.2rem;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--quotepro-badge-bg, #222);
    color: var(--quotepro-badge-color, #fff);
    /* Optional ring separating the badge from the icon underneath; set it to
       the header background colour to make the badge stand out. */
    box-shadow: 0 0 0 2px var(--quotepro-badge-ring, transparent);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

/* The badge stays in the DOM when empty so WooCommerce can refresh it. */
.quotepro-cart-count[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   Request screen. Layout and components come from UIkit; these rules only
   cover what UIkit has no class for.
   -------------------------------------------------------------------------- */

/* Doubled up on purpose: themes style .uk-card with the same specificity and
   would otherwise win on load order, dropping the sticky behaviour. */
.uk-card.quotepro-recap {
    position: sticky;
    top: 2rem;
}

@media (max-width: 959px) {
    .uk-card.quotepro-recap {
        position: static;
    }
}

/* Themes often paint .uk-card-title white, meant for dark cards: on a light
   card the title would vanish. Plugin styles load before the theme, so an
   equal-specificity rule would lose on order — hence the third class, which
   wins outright. Brandable through the custom property. */
.quotepro-recap .quotepro-recap__title,
.quotepro-recap .quotepro-recap__title.uk-card-title {
    color: var(--quotepro-recap-title-color, inherit);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.quotepro-recap__list {
    margin-bottom: 0;
}

.quotepro-recap__thumb img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.quotepro-recap__name {
    display: block;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
}

.quotepro-recap__name:hover {
    color: inherit;
    text-decoration: underline;
}

.quotepro-recap__qty .uk-input {
    text-align: center;
}

.quotepro-recap__remove {
    color: inherit;
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.quotepro-recap__remove:hover,
.quotepro-recap__remove:focus-visible {
    color: inherit;
    opacity: 1;
}

.quotepro-recap__count {
    margin-bottom: 0.75rem;
}

.quotepro-recap__more {
    text-decoration: none;
    font-size: 0.9rem;
}

.quotepro-form__title {
    margin-bottom: 0;
}

.quotepro-form__intro {
    margin-top: 0.4rem;
    margin-bottom: 2rem;
}

/* Checkbox and its label aligned on the first line, not stretched. */
.quotepro-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.quotepro-privacy .uk-checkbox {
    flex: none;
    margin-top: 0.2rem;
}

.quotepro-submit {
    margin-top: 0.5rem;
}

@media (max-width: 639px) {
    .quotepro-submit {
        width: 100%;
    }
}

.quotepro-empty__icon {
    opacity: 0.25;
}

/* Confirmation screen. */
.quotepro-sent {
    margin: 2rem 0 3rem;
}

.quotepro-sent__card {
    max-width: 34rem;
    width: 100%;
}

/* Same reason as the card above: the theme colours .uk-icon at equal
   specificity, so this selector is deliberately more specific. */
.quotepro-sent .quotepro-sent__icon {
    color: var(--quotepro-success-color, #4f9149);
}

.quotepro-sent__title {
    margin-bottom: 0.5rem;
}

.quotepro-sent__lead {
    margin: 0 0 0.5rem;
}

.quotepro-sent__secondary {
    margin-left: 0.5rem;
}

@media (max-width: 639px) {
    .quotepro-sent__card .uk-button {
        display: block;
        width: 100%;
    }

    .quotepro-sent__secondary {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.quotepro-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}