/* Styling for the Languages Spoken / Experience (in Years) / required-field-asterisk additions
 * to the submit & edit listing forms. A real enqueued stylesheet — NOT an inline <style> tag in
 * the form's PHP-built HTML, which WordPress's content sanitizer (wp_kses) silently strips before
 * it ever reaches the browser, taking every rule in it down with it. */

.lp-required {
    color: #dc3232;
}

/* "Use Starter Template" helper below the Description editor — see
 * lp_render_description_template_button() in functions.php. Deliberately a small, quiet outline
 * button (not a solid CTA block) since this is a secondary convenience action, not the primary
 * thing on the form — the loud filled-gold look read as "the button", competing with Submit.
 * !important throughout: the same submit-form button reset that forces .lp-title-phone-btn to use
 * !important (see that rule's own comment in this file) also flattens a plain button here to a
 * solid filled block otherwise, at a higher specificity than a bare single class can beat. */
.lp-desc-template-row {
    margin: 14px 0 4px;
}

.lp-desc-template-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: #d29e00 !important;
    border: 1px solid #d29e00 !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: none !important;
    padding: 7px 12px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.lp-desc-template-btn i {
    color: #fff;
    font-size: 12px;
}

.lp-desc-template-btn:hover,
.lp-desc-template-btn:focus {
    background: #a87e00 !important;
    border-color: #a87e00 !important;
    color: #fff !important;
}

.lp-desc-template-hint {
    display: block;
    margin-top: 6px;
    color: #999;
    font-size: 12px;
}

.lp-languages-experience-row {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Category's own wrapper has no bottom margin, so Specializations (and, on category change,
 * Languages/Experience right after it) sits flush against it with no breathing room */
.lp-new-cat-wrape {
    margin-bottom: 20px;
}

.lp-specialization-wrape {
    margin-top: 20px;
}

.lp-languages-experience-row .lp-languages-wrape,
.lp-languages-experience-row .lp-experience-wrape {
    padding-top: 6px;
    padding-bottom: 6px;
}

.lp-languages-wrape .select2-container,
.lp-specialization-wrape .select2-container {
    width: 100% !important;
}

/* the multi-select chip box has no bottom padding by default, so the last row of chips sits
 * flush against (and visually looks clipped by) the box's own bottom edge */
.lp-languages-wrape .select2-container--default .select2-selection--multiple,
.lp-specialization-wrape .select2-container--default .select2-selection--multiple {
    padding-bottom: 10px;
    min-height: 42px;
}

/* the generic required-field validator (submit-listing.js) adds error-msg to the element right
 * after the original, hidden <select> — for a select2 widget that's the .select2-container it
 * builds, not the field itself, so the red border needs to target select2's own inner element */
.select2-container.error-msg .select2-selection,
.lp-experience-wrape input.error-msg {
    border-color: #dc3232 !important;
}

/* Languages Spoken / Experience row on the single-listing title bar. .cat-icon's circular,
 * colored look (used for Phone/Email/Website in the sidebar contact list) comes from that
 * widget's own wrapper markup, not from .cat-icon itself — outside the sidebar it falls back to
 * a bare, unstyled icon stacked above the text instead of a circle sitting inline beside it, so
 * both are set explicitly here instead of assumed inherited. */
.lp-listing-lang-exp {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 40px;
    margin: 15px 0;
    padding: 0;
    list-style: none;
}

/* .list-st-img (a class this <ul> also carries, from the original markup) is a theme-wide rule
 * meant for vertically-stacked lists: margin-bottom on every li, zeroed on :last-child so there's
 * no trailing gap (see main.css). In this flex ROW it does the opposite of what's wanted — only
 * the first li keeps the 10px bottom margin, pushing its content up relative to the last li,
 * which is exactly the vertical misalignment between Languages/Experience. Neutralize it here. */
.lp-listing-lang-exp li {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 220px;
    margin-bottom: 0;
}

.lp-listing-lang-exp li > span:last-child {
    display: inline-flex;
    align-items: center;
}

.lp-listing-lang-exp li:not(:last-child) {
    border-right: 1px solid #e5e5e5;
    padding-right: 20px;
}

/* below Bootstrap's md breakpoint, .post-meta-left-box/.post-meta-right-box (col-md-8/col-md-4
 * in title-bar.php) stack into a single column instead of sitting side by side — two 220px-wide
 * flex items no longer have room to sit next to each other in that narrow column, which is what
 * was pushing the icon and text apart instead of leaving them inline on one row. The title bar
 * also centers its own text at this width (a pre-existing mobile rule elsewhere in the theme)
 * with enough specificity to win over a plain class selector, hence !important on the
 * alignment here — deliberately scoped to this same mobile-only media query, not applied
 * globally, since the desktop layout wasn't the thing reported as broken. */
@media (max-width: 767px) {
    .lp-listing-lang-exp {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .lp-listing-lang-exp li {
        flex: 1 1 100%;
        justify-content: flex-start !important;
        text-align: left !important;
        border-right: none;
        padding-right: 0;
    }

    .lp-listing-lang-exp li span {
        text-align: left !important;
    }
}

.lp-listing-lang-exp .cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef1f8;
    color: #1b2a4e;
    line-height: 1;
}

.lp-listing-lang-exp .cat-icon i {
    font-size: 14px;
    line-height: 1;
}

/* "View Contact Number - {masked}" button on the single-listing title bar. Its container
 * (.post-meta-right-box, shared with the Share/Save buttons) carries its own more specific
 * link reset that otherwise wins the cascade against a plain single-class selector — !important
 * throughout is deliberate, not accidental, to guarantee this renders as a button regardless. */
.lp-title-phone-btn-wrap {
    /* pushes the button down to roughly line up with the Specializations pill row on the left
     * (which sits below the H1 + category badge) instead of the top of the right column right
     * under Share/Save — an estimate, since the two columns' content heights aren't tied
     * together, so nudge this if a given listing's category badge wraps to a different height.
     * Only makes sense on the 2-column desktop layout — below Bootstrap's md breakpoint
     * .post-meta-left-box/.post-meta-right-box stack into one column (see title-bar.php's
     * col-md-8/col-md-4), so there's no second column to line up with any more; without the
     * override below this same large gap reappears as dead space above the button on mobile. */
    margin-top: 110px;
}

@media (max-width: 767px) {
    .lp-title-phone-btn-wrap {
        margin-top: 15px;
    }
}

a.lp-title-phone-btn {
    display: inline-block !important;
    background: #d29e00 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 14px 22px !important;
    margin-bottom: 12px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    border: none !important;
    line-height: normal !important;
    transition: background 0.2s ease;
}

a.lp-title-phone-btn:hover,
a.lp-title-phone-btn:focus {
    background: #a87e00 !important;
    color: #fff !important;
}

/* Search-by-name box on the archive filter bar (listing-with-header-filters.php's
 * .lp-archive-name-search) — a plain text search for a listing's own name, next to the existing
 * Near Me/Price/Open Now/etc. taxonomy filter pills. */
.lp-archive-name-search {
    display: inline-flex;
    align-items: stretch;
    margin: 0 10px 15px 0;
    vertical-align: top;
}

/* Archive filter bar's What/Where search — reuses lawyerpro's templates/banner-search.php
 * (see filter.php / listing-with-header-filters.php) rather than duplicating that markup, but
 * that widget's own CSS (plugins/lawyerpro/assets/css/styles.css) is entirely scoped to
 * `.lpro-banner-search`, tuned for sitting on the dark banner photo — a transparent wrapper, and
 * relying on the banner's own overlay for contrast. On the plain white archive header it needs its
 * own opaque, bordered treatment instead; re-scoped here rather than touching the plugin's CSS, so
 * the homepage banner's own look isn't affected by tweaks meant only for this context. */
.lp-archive-what-where {
    display: inline-block;
    max-width: 100%;
    margin: 20px 0 15px;
    vertical-align: top;
}

.lp-archive-what-where .lp-search-bar {
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

/* Force one line via flex rather than leaning on Bootstrap's .form-inline (its .form-group only
 * goes inline-block above the 768px breakpoint, and easily loses that fight against whatever else
 * on this page is already overriding display — same class of problem as this file's other
 * cascade-fight comments). Targeting the <form> itself sidesteps that entirely.
 *
 * Each field keeps its own border/box (no shared outer frame around the row) — a real gap between
 * them (not touching) so adjacent borders never sit flush against each other and read as one
 * thick/doubled line.
 *
 * The explicit resets below (background/border/box-shadow/padding/width/float) exist purely to
 * cancel out main.css's `.search-row .form-inline` rule — a completely unrelated style meant for a
 * different search form, which this form incidentally also matches (it sits inside .search-row via
 * filter.php's wrapper, and banner-search.php's <form> carries the same form-inline class). That
 * rule's own border+background+box-shadow was the real source of the extra outer frame, and its
 * `width: 100%` (fighting this form's content-sized inline-block container) was what threw the
 * internal gaps off. */
.lp-archive-what-where .lp-search-bar form {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    width: auto !important;
    float: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.lp-archive-what-where .form-group {
    display: flex !important;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px !important;
    margin: 0 !important;
}

.lp-archive-what-where .input-group-addon.lp-border,
.lp-archive-what-where .lp-where {
    color: #555;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
}

.lp-archive-what-where input,
.lp-archive-what-where select {
    color: #333;
}

.lp-archive-what-where .what-placeholder input {
    min-width: 300px;
    height: 40px;
    line-height: 40px;
}

.lp-archive-what-where .lp-location-search input#cities,
.lp-archive-what-where .lp-location-search .chosen-container .chosen-single {
    height: 40px;
    line-height: 40px;
}

.lp-archive-what-where .lp-search-bar-right {
    display: flex;
    align-items: stretch;
    margin: 0;
}

.lp-archive-what-where .lp-search-bar-right input.lp-search-btn {
    height: 100%;
    min-height: 42px;
    padding: 0 20px !important;
    background: #d29e00 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
}

.lp-archive-what-where .lp-search-bar-right:hover input.lp-search-btn {
    background: #a87e00 !important;
}

.lp-archive-what-where .lp-search-icon {
    display: none;
}

@media (max-width: 767px) {
    .lp-archive-what-where .lp-search-bar form {
        flex-direction: column;
        align-items: stretch;
    }

    .lp-archive-what-where .form-group {
        width: 100%;
    }

    .lp-archive-what-where .what-placeholder input {
        width: 100%;
    }
}

.lp-archive-name-search input[type="text"] {
    width: 220px;
    height: 40px;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: 0 12px;
    font-size: 13px;
}

.lp-archive-name-search-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #d29e00 !important;
    border: 1px solid #d29e00 !important;
    border-radius: 0 4px 4px 0;
    color: #fff !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
}

.lp-archive-name-search-btn:hover,
.lp-archive-name-search-btn:focus {
    background: #a87e00 !important;
    border-color: #a87e00 !important;
}

@media (max-width: 767px) {
    .lp-archive-name-search {
        display: block;
        margin-right: 0;
    }

    .lp-archive-name-search input[type="text"] {
        width: 100%;
    }
}

/* "Professional Signup" as a real thin row inside #lpro-navbar, above the main logo/menu row (see
 * lpro_headerStyle_1.php) — not a separate fixed element, and not absolutely-positioned floating
 * text either (that read as crammed against the Add Listing button with no breathing room). <nav>
 * itself has no `display: flex` of its own — only its .lpro-nav-container child does — so a plain
 * block-level .lpro-topbar sitting before that container simply stacks above it as its own row for
 * free, no absolute positioning needed. Living inside the nav (rather than as a preceding sibling)
 * still matters for the reason noted before: #lpro-navbar goes `position: fixed` whenever the
 * sticky-header theme option is on (dynamic-css.php's .loaded-fixed/.fixed rules), which ignores
 * normal document flow and would otherwise hide a true sibling behind it — being a child instead
 * means this row is included in the nav's own fixed box and the theme's existing
 * sticky-height/padding-top JS automatically accounts for it. */
.lpro-topbar {
    display: block;
    background: rgba(0, 0, 0, 0.25);
    padding: 8px 25px;
    text-align: right;
}

.lpro-topbar-signup {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 0;
}

.lpro-topbar-signup:hover,
.lpro-topbar-signup:focus {
    color: var(--p-color, #d29e00);
}

/* Login/Signup modal (#app-view-login-popup, login_popup_style "style2" — see
 * lpro_headerStyle_1.php) was rendering BEHIND #lpro-navbar: both have z-index: 99999, a tie, and
 * with equal z-index the later element in DOM order wins the stacking — the nav is rendered after
 * the modal markup in that file, so it painted on top, leaving the modal's close button unreachable.
 * Pre-existing theme issue, just newly visible now that the Login/Signup trigger sits somewhere
 * more prominent. Simplest fix: push the modal itself above the nav's z-index. main.css's own
 * `#app-view-login-popup { z-index: 99999 !important }` (main.css:2926) is an exact specificity tie
 * with a bare `#app-view-login-popup` override, which would come down to stylesheet load order —
 * the `html` prefix below adds a type selector purely to win outright, regardless of order. */
html #app-view-login-popup {
    z-index: 100000 !important;
}

/* Google Login button on the Login/Signup popup — restyled to match Google's own "Continue with
 * Google" button design (white background, bordered, colorful G logo, centered), replacing the
 * theme's default solid red block (#d62d20, the pre-2015 Google brand red, shared with the
 * Facebook/Twitter button styles) and its cramped, left-packed 14px-icon layout. `!important`
 * needed throughout to beat the theme's own `!important` rules — border-radius: 0 on
 * `.social-login li a` (main.css:2726) and the tight `padding: 1px 7px 1px 1px` /
 * `display: inline-block` on `#app-view-login-popup .social-login li a` (main.css:2913-2916), plus
 * `span { float: left }` right after it (main.css:2918-2920) which is what was pinning the icon and
 * text flush left instead of centered. */
#app-view-login-popup .social-login .google,
#app-view-login-popup .social-login .google:hover {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 240px;
    padding: 11px 16px !important;
    background: #fff !important;
    border: 1px solid #dadce0 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

#app-view-login-popup .social-login .google:hover {
    border-color: #c6c9cc !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

#app-view-login-popup .social-login .google .lp-pop-icon-img {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}

#app-view-login-popup .social-login .google .lp-pop-icon-img img {
    width: 20px !important;
    height: 20px !important;
}

#app-view-login-popup .social-login .google span:not(.lp-pop-icon-img) {
    float: none !important;
    color: #3c4043 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15px;
}

/* "No listings yet" archive empty-state — see lp_seo_render_empty_state() in seo-routing.php */
.lp-empty-state {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 20px;
    text-align: center;
}

.lp-empty-state h2 {
    margin-bottom: 10px;
}

.lp-empty-state-suggestions {
    margin-top: 30px;
    text-align: left;
}

.lp-empty-state-suggestions h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.lp-empty-state-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lp-empty-state-suggestions li {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}

.lp-empty-state-cta {
    margin-top: 30px;
    padding: 16px;
    background: #f6f6f6;
    border-radius: 6px;
}

/* Single-listing title bar: Profile Image + tier badge sitting side by side with the
 * name/details, instead of stacked above them. See title-bar.php's .lp-title-photo-row. */
.lp-title-photo-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.lp-title-photo-col {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.lp-title-photo-frame {
    width: 110px;
    height: 150px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    background: #fff;
    flex-shrink: 0;
}

.lp-title-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-title-info-col {
    padding-top: 4px;
}

.lp-title-divider {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 20px 0;
}

/* "Specializations" boxed section — the specialization pills pulled out from under the title into
 * their own full-width panel below the title/photo row. */
.lp-specializations-box {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 24px;
    margin: 30px 0;
}

.lp-specializations-box h3 {
    margin: 0 0 18px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lp-specializations-box h3 i {
    color: #1b2a4e;
}

.lp-title-info-col {
    flex: 1 1 auto;
    min-width: 0;
}

/* below Bootstrap's md breakpoint the title bar's own mobile rules center its text (see the
 * .lp-listing-lang-exp note above for the same constraint) — stack the photo above the info
 * instead of beside it so the circular photo isn't squeezed into a narrow column, and center
 * the column itself to match that existing centered mobile treatment. */
@media (max-width: 767px) {
    .lp-title-photo-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .lp-title-info-col {
        width: 100%;
    }
}

/* Profile Image preview + remove control on the edit-listing form */
.lp-featured-preview-wrap {
    position: relative;
    display: inline-block;
    margin-top: 10px;
}

.lp-remove-featured-image {
    position: absolute;
    top: -8px;
    right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dc3232;
    color: #fff !important;
    font-size: 16px;
    line-height: 1;
    text-decoration: none !important;
}

.lp-remove-featured-image:hover,
.lp-remove-featured-image:focus {
    background: #a82222;
    color: #fff !important;
}