.acf-monthly-payment {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    border-radius: 0;
    background: transparent;
    color: #1a1d24;
    padding: 8px 0 4px;
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
    font-weight: 400;
}

/* Shortcode host — bar is direct child; no listing wrapper rounding. */
.acfcu-finance-simple {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Listing archive / directory cards: finance row under stm price partials */
.acf-cu-price-widget-finance.acfcu-finance-added {
    margin-top: 4px;
    font-size: 12px;
}

/* Injected below Elementor Price widget: keep finance row left-aligned with price block. */
.elementor-widget-motors-single-listing-price .acf-cu-price-widget-finance,
.elementor-widget-stm-single-listing-price .acf-cu-price-widget-finance {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    padding-top: 0;
    display: flex;
    justify-content: flex-start;
}

.elementor-widget-motors-single-listing-price .acf-cu-price-widget-finance .acfcu-finance-simple,
.elementor-widget-stm-single-listing-price .acf-cu-price-widget-finance .acfcu-finance-simple {
    display: inline-block;
    width: auto;
    max-width: 100%;
    vertical-align: top;
}

/* Tighter gap; centered to match the price row in the white card (not left, not right-only). */
.elementor-widget-motors-single-listing-price .acf-cu-price-widget-finance .acf-monthly-payment,
.elementor-widget-stm-single-listing-price .acf-cu-price-widget-finance .acf-monthly-payment {
    padding: 2px 0 4px;
    text-align: left;
    width: auto;
    max-width: 100%;
    margin-left: 0;
}

.elementor-widget-motors-single-listing-price .acf-cu-price-widget-finance .acf-finance-text,
.elementor-widget-stm-single-listing-price .acf-cu-price-widget-finance .acf-finance-text {
    justify-content: flex-start;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.acf-finance-text {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.2em 0.35em;
}

.acf-finance-est,
.acf-finance-suffix {
    font-weight: 400;
    color: #1a1d24;
}

.acf-finance-amount {
    font-weight: 700;
    color: #1a1d24;
}

.acf-finance-info {
    margin-left: 0.15em;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #d9dce2;
    color: #3a3f4a;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    align-self: center;
}

/*
 * Tooltip below the finance bar so it is not clipped by the blue box / ancestors.
 * (position above required overflow:visible on all parents; Elementor often still clips.)
 */
.acf-finance-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    /*
     * width:auto shrink-to-fits against the narrow .acf-monthly-payment box (only as wide as the
     * “Est. … p/m” row), which collapses the tooltip into a tall sliver. Fix with an explicit width.
     */
    box-sizing: border-box;
    width: min(280px, calc(100vw - 32px));
    text-align: center;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Single listing price widget: keep tooltip centered internally, but bias popup to the right. */
.elementor-widget-motors-single-listing-price .acf-finance-tooltip,
.elementor-widget-stm-single-listing-price .acf-finance-tooltip {
    left: calc(50% + 72px);
    text-align: center;
}

.acf-finance-info:hover + .acf-finance-tooltip {
    opacity: 1;
}

.acf-monthly-payment:has(.acf-finance-info:hover) .acf-finance-tooltip {
    opacity: 1;
}

/*
 * Listing cards (archive/search/grid/list): tooltip is clipped or misaligned in tight layouts.
 * Single listing keeps the full bar — card markup is wrapped with .acfcu-finance-added; Elementor single price widget does not use that class.
 */
.acfcu-finance-added .acf-finance-tooltip,
.acfcu-finance-added .acf-finance-info {
    display: none !important;
}

/* Featured listing modal — primary action (was “Proceed”) */
#acf-featured-modal .acf-proceed.button.button-primary {
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background-color: #4e90cc;
    border: 1px solid #4e90cc;
}

#acf-featured-modal .acf-proceed.button.button-primary:hover {
    background-color: #3c7bb3;
    border-color: #3c7bb3;
}

/*
 * Motors single listing price — label + amount on accent bar.
 */
.single-car-prices .single-regular-price > .labeled {
    color: #000 !important;
}

.single-car-prices .single-regular-price > .h3 {
    color: #000 !important;
    font-size: 32px !important;
    line-height: 1.15;
    font-weight: 700;
}

/* Theme nudges amount right by 1px; remove for exact left-edge alignment with finance row. */
.elementor-widget-motors-single-listing-price .single-car-prices .single-regular-price > .h3,
.elementor-widget-stm-single-listing-price .single-car-prices .single-regular-price > .h3 {
    left: 0;
}

/* Less space below the price row (theme default is 13px bottom on .single-regular-price). */
.elementor-widget-motors-single-listing-price .single-car-prices .single-regular-price,
.elementor-widget-stm-single-listing-price .single-car-prices .single-regular-price {
    padding-bottom: 4px;
    text-align: left;
}

.elementor-widget-motors-single-listing-price .single-car-prices,
.elementor-widget-stm-single-listing-price .single-car-prices {
    text-align: left;
}

/* User Data Advanced alignment customizations removed: theme defaults apply (left-aligned). */