/**
 * Business profile page.
 *
 * Same tokens as lbp-form.css, so the profile page and the form that fills it
 * read as one thing. Deliberately light: the template uses Listeo's own
 * container, row and button classes, so most of the look comes from the theme
 * and this only covers what Listeo has no class for.
 */

.lbp-profile {
    --lbp-ink: #333;
    --lbp-text: #808080;
    --lbp-line: #dbdbdb;
    --lbp-line-soft: #e6e6e6;
    --lbp-surface: #fff;
    --lbp-pill: #f4f4f4;
    --lbp-pill-text: #666;
    --lbp-radius: 3px;
    --lbp-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.06);
}

/* -------------------------------------------- header */

.lbp-profile-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 34px;
}

.lbp-profile-logo {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    border: 1px solid var(--lbp-line);
    border-radius: var(--lbp-radius);
    background: var(--lbp-surface);
    box-shadow: var(--lbp-shadow);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lbp-profile-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.lbp-profile-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.lbp-profile-heading h1 {
    margin: 0 0 10px;
    line-height: 1.2;
}

.lbp-profile-tags {
    margin-bottom: 10px;
}

.lbp-tag {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 5px 12px;
    border-radius: var(--lbp-radius);
    background: var(--lbp-pill);
    color: var(--lbp-pill-text);
    font-size: 13px;
    font-weight: 500;
}

.lbp-profile-address {
    color: var(--lbp-text);
    font-size: 15px;
    margin-bottom: 8px;
}

.lbp-profile-address i {
    margin-right: 6px;
}

.lbp-profile-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    background: #eaf6e3;
    color: #56843f;
    font-size: 13px;
    font-weight: 500;
}

.lbp-profile-verified i {
    margin-right: 5px;
}

.lbp-reg-number {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--lbp-radius);
    background: #e6f8dc;
    font-size: 13px;
}

/* -------------------------------------------- sections */

.lbp-profile-section {
    margin-bottom: 40px;
}

.lbp-profile-section h3 {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lbp-line-soft);
    font-size: 20px;
}

.lbp-profile-details {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lbp-profile-details li {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 11px 0;
    border-bottom: 1px solid var(--lbp-line-soft);
}

.lbp-profile-details li:last-child {
    border-bottom: 0;
}

.lbp-field-label {
    color: var(--lbp-text);
    font-weight: 500;
}

.lbp-field-value {
    color: var(--lbp-ink);
    text-align: right;
}

/* -------------------------------------------- sidebar */

/* .lbp-profile-widget now sits alongside Listeo's own boxed-widget/
   margin-bottom-35 classes (added directly in the template), so the border,
   background, padding and shadow come from the theme itself and this only
   covers the couple of things Listeo's box doesn't already handle. */
.lbp-profile-widget h4 {
    font-size: 17px;
}

.lbp-profile-edit-widget .button.fullwidth {
    display: block;
    text-align: center;
}

.lbp-map-caption {
    margin: 12px 0 0;
    color: var(--lbp-text);
    font-size: 14px;
}

/* -------------------------------------------- hours */

/* Exact Listeo frontend opening-hours rules, scoped to the Business Profile
   component so the output remains identical even when the theme stylesheet
   is not loaded on an Elementor-only template. */
.opening-hours {
    position: relative;
    overflow: hidden;
}

.opening-hours ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.opening-hours ul li {
    width: 100%;
    font-weight: 600;
    color: #888;
    margin: 2px 0;
    transition: 0.2s;
    cursor: default;
    overflow: hidden;
}

.opening-hours ul li:hover {
    color: #444;
}

.opening-hours ul li span {
    float: right;
    font-weight: 400;
    text-align: right;
}

/* Registered business badge: uses Listeo's native .verified-badge. */
.lbp-business-registered-badge {
    margin-bottom: 20px;
}

/* -------------------------------------------- bookmark */

.lbp-profile-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 18px;
}

.lbp-bookmark-button {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px !important;
}

.lbp-bookmark-button i {
    font-size: 15px;
}

.lbp-bookmark-button.is-bookmarked i:before {
    content: "\f004";
}

.lbp-bookmark-button.is-bookmarked {
    opacity: .9;
}

.lbp-bookmark-button:disabled {
    cursor: not-allowed;
    opacity: .65;
}

/* -------------------------------------------- responsive */

@media only screen and (max-width: 768px) {
    .lbp-profile-header {
        flex-direction: column;
        gap: 16px;
    }

    .lbp-profile-details li {
        flex-direction: column;
        gap: 3px;
    }

    .lbp-field-value {
        text-align: left;
    }
}

@media only screen and (max-width: 768px) {
    .lbp-profile-actions {
        justify-content: stretch;
    }

    .lbp-bookmark-button {
        width: 100%;
        justify-content: center;
    }
}

/* -------------------------------------------- titlebar */

.lbp-titlebar-type {
    display: block;
    margin-top: 6px;
    opacity: 0.85;
    font-size: 15px;
}

/* -------------------------------------------- archive */

.lbp-archive {
    padding-bottom: 30px;
}

.lbp-archive-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 30px 0 30px;
    padding: 18px;
    border: 1px solid var(--lbp-line);
    border-radius: var(--lbp-radius);
    background: var(--lbp-surface);
    box-shadow: var(--lbp-shadow);
}

.lbp-archive-search {
    flex: 1 1 260px;
}

.lbp-archive-filters input[type="text"],
.lbp-archive-filters select {
    width: 100%;
    height: 51px;
    box-sizing: border-box;
    padding: 0 20px;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.06);
    font-size: 15px;
    color: #808080;
    margin: 0;
}

.lbp-archive-type {
    flex: 0 1 220px;
}

.lbp-archive-filters .button {
    height: 51px;
    line-height: 51px;
    padding: 0 28px;
    margin: 0;
}

.lbp-archive-clear {
    color: #888;
    font-size: 14px;
    text-decoration: underline;
}

/* -------------------------------------------- business cards */

/*
 * The card (templates/business-card.php) reuses Listeo's own .listing-card-nl
 * structure and classes wholesale, so almost all of its look comes from the
 * theme's own new-grid-layout-nl CSS — the same rules a real listing card
 * gets. What follows only covers what a business has that a listing doesn't
 * (a logo placeholder, a listings-count + "View Profile" footer in place of
 * the price/rating sidebar) and the grid wrapper Listeo has no ready-made
 * class for.
 */

.lbp-archive { padding-bottom: 20px; }

.lbp-no-listings {
    padding: 18px 20px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    color: #888;
    background: #fff;
    font-size: 14px;
}

.lbp-archive-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 35px;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 4px;
}

.lbp-archive-search { flex: 1 1 auto; }
.lbp-archive-type { flex: 0 0 220px; }
.lbp-archive-filters input,
.lbp-archive-filters select { width: 100%; height: 50px; margin: 0; }
.lbp-archive-filters .button { height: 50px; margin: 0; }
.lbp-archive-clear { white-space: nowrap; }

@media only screen and (max-width: 767px) {
    .lbp-archive-filters { flex-direction: column; align-items: stretch; }
    .lbp-archive-type { flex-basis: auto; }
}

/* Grid wrapper — Elementor's Columns control and the archive both render
   into this, at data-columns="2|3|4"; auto-fill is the fallback for
   anything narrower than that many columns actually fit. */
.lbp-business-elementor-grid,
.lbp-business-grid.new-grid-layout-nl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    margin-top: 10px;
}

.lbp-business-elementor-grid[data-columns="2"],
.lbp-business-grid.new-grid-layout-nl[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.lbp-business-elementor-grid[data-columns="3"],
.lbp-business-grid.new-grid-layout-nl[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.lbp-business-elementor-grid[data-columns="4"],
.lbp-business-grid.new-grid-layout-nl[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 992px) {
    .lbp-business-elementor-grid[data-columns="3"],
    .lbp-business-elementor-grid[data-columns="4"],
    .lbp-business-grid.new-grid-layout-nl[data-columns="3"],
    .lbp-business-grid.new-grid-layout-nl[data-columns="4"] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .lbp-business-elementor-grid,
    .lbp-business-grid.new-grid-layout-nl { grid-template-columns: 1fr !important; }
}

/* Bootstrap's own .col-* rules (loaded by the theme) would otherwise fight
   the grid's own column widths for these cells. */
.lbp-business-card-col {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.lbp-business-modern-card { height: 100%; }
.lbp-business-modern-card .listing-card-container-nl { width: 100%; height: 100%; }
.lbp-business-modern-card .listing-card-nl { height: 100%; }

.lbp-business-logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
    color: #bbb;
    font-size: 46px;
}

/* The image here is always the logo, not a photo — cover-fit (the theme's
   default for this slot) would crop most logos badly, so it's shown
   uncropped on a light backdrop instead. */
.lbp-business-modern-card .listing-image-container-nl {
    background: #f7f7f7;
}

.lbp-business-modern-card .slider-image-nl {
    object-fit: cover;
    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.lbp-business-modern-card .lbp-business-favorite .liked {
    color: var(--listeo-primary-color, #f04444);
}

.lbp-business-type-text {
    display: block;
    color: #888 !important;
    font-size: 16px;
    line-height: 22px;
    /* Same top-margin Listeo's own .listing-location-nl uses after a title —
       this row plays the same role .listing-location-nl does natively. */
    margin: 6px 0 0 0 !important;
}

/* Business type follows Listeo's address treatment, but uses a briefcase icon. */
.lbp-business-type-text i {
    color: #999;
    font-size: 13px;
    margin-right: 6px;
    vertical-align: 1px;
}

/* The card lifts on hover natively (.listing-card-container-nl:hover); this
   business card skips that. */
.lbp-business-modern-card.listing-card-container-nl:hover,
.lbp-business-modern-card .listing-card-container-nl:hover {
    transform: none;
}

/* Business-card content spacing, on Listeo's own scale: 6px is the exact gap
   the theme itself puts between .listing-title-nl and .listing-location-nl —
   used here both above the title and (on .lbp-business-type-text above)
   below it, so the tag/title/type rhythm reads the same as native text. */
.lbp-business-operation-tags {
    margin-bottom: 6px;
}

.lbp-business-modern-card .listing-title-nl {
    margin: 0;
}

/* Operation uses the same yellow featured-pill treatment as Listeo's cards. */
.lbp-business-operation-tags .badge-nl.featured-nl {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    background-color: #ffc0002e;
    color: #E4AC00;
}

/* Card padding: Listeo's own .details-sidebar-col-nl uses 15px top/bottom
   (with 25px left/right) — the same value applied here, rather than the
   theme's fuller 25px, or no padding at all. */
.lbp-business-modern-card .details-main-col-nl {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* The footer (Listeo's own .details-sidebar-col-nl — price/rating on a real
   listing) needs no overrides now that it holds one line of text: its
   native height, padding and border-top already fit that correctly. */
.lbp-business-listings-count .rating-text-nl,
.lbp-business-listings-count .rating-text-nl strong {
    color: #888 !important;
}


/* Elementor Business Archive Filter */
.lbp-elementor-business-filter .lbp-archive-operation {
    flex: 0 1 220px;
}
.lbp-elementor-business-filter .lbp-archive-operation select {
    width: 100%;
    height: 50px;
    margin: 0;
}
@media only screen and (max-width: 767px) {
    .lbp-elementor-business-filter .lbp-archive-operation {
        flex-basis: auto;
    }
}

/* Elementor Business Profiles — Listeo-style sorting control */
.lbp-business-elementor-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
}
.lbp-business-elementor-header .sort-by {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.lbp-business-elementor-header .sort-by-label {
    color: #888;
    white-space: nowrap;
}
.lbp-business-elementor-header .lbp-business-sort {
    min-width: 155px;
    height: 44px;
    padding: 0 38px 0 14px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    background: #fff;
    color: #555;
    font-size: 14px;
    cursor: pointer;
}