/*
 * Free pill on the Add listing button, and the signed-out line on /add-listing.
 *
 * Linked from the property theme's head include (footer/styles.blade.php),
 * which runs after @stack('styles'). A @push from the header cannot land:
 * the header renders in the body, after that stack has already been emitted,
 * and a <style> inside #app is stripped when Vue mounts. This file is outside
 * both.
 *
 * The pill is inside the existing button. It does not change the button's
 * height: line-height stays under the label's line, vertical padding is 0,
 * and the button already refuses to wrap. Logical margin so Arabic mirrors.
 *
 * Contrast: #0745D9 on #ffffff is about 7.4:1. On the phone menu the same
 * blue sits on #E8F0FF (still above 4.5:1). The signed-out line is #12141a
 * on the form's light background.
 */

.hz-cta__free {
    display: inline-block;
    flex: 0 0 auto;
    margin-inline-start: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ffffff;
    color: #0745D9;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.hz-mobile-menu__links .hz-cta__free {
    background: #E8F0FF;
    color: #0745D9;
}

.hz-add-free-note {
    margin: 8px 0 0;
    max-width: 62ch;
    color: #12141a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: start;
}

@media (max-width: 720px) {
    /*
     * The handset row is brand, language, this button, and the menu.
     * The pill is about 36px. Taking that out of the button's own side
     * padding keeps the menu control inside the row. Height is untouched:
     * padding-inline only, and the pill's line is shorter than the label.
     */
    .hz-header .hz-cta:has(.hz-cta__free) {
        padding-inline: 12px;
    }

    .hz-header .hz-cta__free {
        margin-inline-start: 4px;
        padding: 0 4px;
    }
}

.hz-mobile-menu__links a:has(.hz-cta__free) {
    flex-wrap: nowrap;
    white-space: nowrap;
}