/* LBN Classifieds — Frontend Styles v1.2.0
   DS v.3 sandy neumorphic design.
   Scoped to .lbn-cl-* — no theme bleed.
----------------------------------------------------------------------- */

/* ── DS Token Aliases ─────────────────────────────────────────────── */
:root {
    --cl-primary:     var(--primary_color, #285260);
    --cl-on-primary:  var(--c-text-on-primary, #faf3e3);
    --cl-bg:          var(--c-sand-200, #f3e8d1);
    --cl-card:        var(--c-sand-100, #faf3e3);
    --cl-subtle:      var(--c-sand-300, #ece0c8);
    --cl-text:        var(--c-text-body,    #5c4a32);
    --cl-text-muted:  var(--c-text-muted,   #8a7858);
    --cl-heading:     var(--c-text-heading, #2a2118);
    --cl-border:      var(--c-border-soft,  #e4d6b8);
    --cl-shadow:      var(--shadow-raised-sm, 0 2px 6px rgba(40,30,10,.10), 0 1px 2px rgba(40,30,10,.06));
    --cl-shadow-md:   var(--shadow-raised-md, 0 4px 16px rgba(40,30,10,.13), 0 2px 4px rgba(40,30,10,.08));
    --cl-inset:       var(--shadow-inset-sm, inset 0 2px 4px rgba(40,30,10,.08));
    --cl-danger:      var(--c-danger,      #b85c4a);
    --cl-danger-bg:   var(--c-danger-bg,   #fde8e4);
    --cl-success:     var(--c-success,     #4f8a6b);
    --cl-success-bg:  var(--c-success-bg,  #e0f0e8);
    --cl-warning:     var(--c-warning,     #c89a4c);
    --cl-warning-bg:  var(--c-warning-bg,  #fdf3dc);
    --cl-info:        var(--c-info,        #548c92);
    --cl-info-bg:     var(--c-info-bg,     #e0f0f2);
    --cl-featured:    var(--c-featured,    #b8893f);
    --cl-featured-bg: var(--c-featured-bg, #fdf0d8);
    --cl-radius:      var(--r-sm,  8px);
    --cl-radius-sm:   var(--r-sm,  8px);
    --cl-gap:         20px;
}

/* ── Box-sizing reset (scoped) ────────────────────────────────────── */
.lbn-cl-container *,
.lbn-cl-container *::before,
.lbn-cl-container *::after {
    box-sizing: border-box;
}

.lbn-cl-container {
    color: var(--cl-text);
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 48px;
}

/* ── Utility ──────────────────────────────────────────────────────── */
.lbn-cl-notice {
    padding: 12px 16px;
    border-radius: var(--cl-radius-sm);
    border: 1px solid transparent;
    margin-bottom: 16px;
    font-size: .9375rem;
}
.lbn-cl-notice-info  { background: var(--cl-info-bg);    border-color: var(--cl-info);    color: var(--cl-info); }
.lbn-cl-notice-warn  { background: var(--cl-warning-bg); border-color: var(--cl-warning); color: var(--cl-warning); }
.lbn-cl-notice-error { background: var(--cl-danger-bg);  border-color: var(--cl-danger);  color: var(--cl-danger); }
.lbn-cl-notice-ok    { background: var(--cl-success-bg); border-color: var(--cl-success); color: var(--cl-success); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.lbn-cl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--cl-radius-sm);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background .18s, color .18s, box-shadow .18s, opacity .18s;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background: none;
    min-height: 44px;
    min-width: 44px;
}
.lbn-cl-btn-icon {
    display: inline-flex !important;
    align-items: center;
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
}
.lbn-cl-btn:focus-visible { outline: 3px solid var(--cl-primary); outline-offset: 2px; }

.lbn-cl-btn-primary { background: var(--cl-primary); color: var(--cl-on-primary); box-shadow: var(--cl-shadow); }
.lbn-cl-btn-primary:hover { opacity: .88; color: var(--cl-on-primary); }

.lbn-cl-btn-secondary { background: var(--cl-bg); color: var(--cl-text); border-color: var(--cl-border); box-shadow: var(--cl-shadow); }
.lbn-cl-btn-secondary:hover { background: var(--cl-subtle); }

.lbn-cl-btn-whatsapp { background: #25d366; color: #fff; width: 100%; justify-content: center; display: flex; align-items: center; gap: 6px; }
.lbn-cl-btn-whatsapp:hover { background: #1ebe5b; color: #fff; }

.lbn-cl-btn-danger { background: var(--cl-danger-bg); color: var(--cl-danger); border-color: var(--cl-danger); }
.lbn-cl-btn-danger:hover { background: var(--cl-danger); color: #fff; }

.lbn-cl-btn-promote       { background: var(--cl-primary); color: var(--cl-on-primary, #fff); }
.lbn-cl-btn-promote:hover { opacity: .88; }

.lbn-cl-promote-section {
    margin-top: 28px;
    padding: 20px 22px;
    background: var(--cl-bg);
    border-radius: var(--r-md, 14px);
    box-shadow: var(--cl-shadow-sm);
}
.lbn-cl-promote-title { font-size: .95rem; font-weight: 700; color: var(--cl-text); margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.lbn-cl-promote-title i { color: var(--cl-primary); }
.lbn-cl-promote-desc { font-size: .85rem; color: var(--cl-text-muted); margin: 0 0 12px; }

.lbn-cl-btn-sold { background: var(--cl-warning-bg); color: var(--cl-warning); border-color: var(--cl-warning); }
.lbn-cl-btn-sold:hover { background: var(--cl-warning); color: #fff; }

.lbn-cl-btn-sm  { padding: 7px 14px; font-size: .875rem; min-height: auto; }
.lbn-cl-btn-xs  { padding: 4px 10px; font-size: .8125rem; min-height: auto; }
.lbn-cl-btn-lg  { padding: 13px 28px; font-size: 1rem; }

/* ── Forms ────────────────────────────────────────────────────────── */
.lbn-cl-form { width: 100%; }

.lbn-cl-field { margin-bottom: 18px; }
.lbn-cl-field label {
    display: block;
    font-weight: 600;
    font-size: .9375rem;
    margin-bottom: 6px;
    color: var(--cl-heading);
}
.lbn-cl-req { color: var(--cl-danger); }

.lbn-cl-field-input {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    font-size: .9375rem;
    color: var(--cl-text);
    background: var(--cl-card);
    box-shadow: var(--cl-inset);
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.lbn-cl-field-input:focus {
    outline: none;
    border-color: var(--cl-primary);
    box-shadow: var(--cl-inset), 0 0 0 3px rgba(40,82,96,.12);
}
.lbn-cl-textarea { resize: vertical; min-height: 120px; }

.lbn-cl-fields-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.lbn-cl-field-grow    { flex: 1 1 160px; }
.lbn-cl-field-currency{ flex: 0 0 120px; }

.lbn-cl-field-hint { font-size: .8125rem; color: var(--cl-text-muted); margin-top: 4px; }

/* ── Tags ─────────────────────────────────────────────────────────── */
.lbn-cl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

.lbn-cl-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
}
.lbn-cl-tag-price    { background: var(--cl-success-bg); color: var(--cl-success); border: 1px solid var(--cl-success); }
.lbn-cl-tag-type     { background: var(--cl-info-bg);    color: var(--cl-info);    border: 1px solid var(--cl-info); }
.lbn-cl-tag-cond     { background: var(--cl-subtle);     color: var(--cl-text-muted); border: 1px solid var(--cl-border); }
.lbn-cl-tag-location { background: var(--cl-bg);         color: var(--cl-text-muted); border: 1px solid var(--cl-border); }
.lbn-cl-tag-sold     { background: var(--cl-danger-bg);  color: var(--cl-danger);  border: 1px solid var(--cl-danger); }
.lbn-cl-tag-expiry   { background: var(--cl-warning-bg); color: var(--cl-warning); border: 1px solid var(--cl-warning); }
.lbn-cl-tag-expired  { background: var(--cl-danger-bg);  color: var(--cl-danger);  border: 1px solid var(--cl-danger); font-size: .75rem; }

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.lbn-cl-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: .875rem;
    color: var(--cl-text-muted);
    margin-bottom: 20px;
}
.lbn-cl-breadcrumb a { color: var(--cl-primary); text-decoration: none; }
.lbn-cl-breadcrumb a:hover { text-decoration: underline; }
.lbn-cl-breadcrumb-sep { color: var(--cl-text-muted); }

/* ── Single Ad Layout ─────────────────────────────────────────────── */
.lbn-cl-single-wrap .lbn-cl-single-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
}

/* Gallery */
.lbn-cl-gallery { margin-bottom: 24px; }

.lbn-cl-gallery-main {
    border-radius: var(--cl-radius);
    overflow: hidden;
    background: var(--cl-subtle);
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--cl-shadow);
}
.lbn-cl-gallery-main img,
.lbn-cl-single-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .15s;
}

.lbn-cl-gallery-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.lbn-cl-gallery-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--cl-radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .15s, opacity .15s;
    opacity: .75;
}
.lbn-cl-gallery-thumb:hover,
.lbn-cl-gallery-thumb.lbn-cl-thumb-active {
    border-color: var(--cl-primary);
    opacity: 1;
}

/* Single header */
.lbn-cl-single-header { margin-bottom: 20px; }

.lbn-cl-single-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
    color: var(--cl-heading);
}

.lbn-cl-ad-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lbn-cl-cat-badge {
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--cl-subtle);
    border: 1px solid var(--cl-border);
    font-size: .8125rem;
    color: var(--cl-text-muted);
}

.lbn-cl-posted-date { font-size: .875rem; color: var(--cl-text-muted); margin: 8px 0 0; }
.lbn-cl-views-count { font-size: .875rem; color: var(--cl-text-muted); }

/* Content */
.lbn-cl-single-content {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--cl-text);
    margin-bottom: 24px;
}
.lbn-cl-single-content p { margin: 0 0 1em; }

/* Own ad actions */
.lbn-cl-own-ad-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ── Contact / Sidebar ────────────────────────────────────────────── */
.lbn-cl-single-sidebar > * + * { margin-top: 20px; }

.lbn-cl-contact-box,
.lbn-cl-seller-box {
    background: var(--cl-card);
    border-radius: var(--cl-radius);
    padding: 20px;
    box-shadow: var(--cl-shadow-md);
}

.lbn-cl-contact-box h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--cl-heading);
}

.lbn-cl-seller-box h4 {
    font-size: .75rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--cl-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.lbn-cl-seller-box p { margin: 0 0 4px; font-size: .9375rem; }
.lbn-cl-seller-since { font-size: .8125rem; color: var(--cl-text-muted); }

/* Back link */
.lbn-cl-back-link { margin-top: 32px; }
.lbn-cl-back-link a { color: var(--cl-primary); text-decoration: none; font-size: .9375rem; }
.lbn-cl-back-link a:hover { text-decoration: underline; }

/* Report link */
.lbn-cl-report-wrap { margin-top: 12px; text-align: center; }
.lbn-cl-report-link {
    font-size: .8125rem;
    color: var(--cl-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.lbn-cl-report-link:hover { color: var(--cl-danger); }

/* ── Hero ─────────────────────────────────────────────────────────── */
.lbn-cl-hero {
    position: relative;
    width: 100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 21 / 9;
    min-height: 220px;
    background: var(--cl-primary, #285260);
    background-size: cover;
    background-position: center;
    border-radius: 0;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.lbn-cl-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(40,82,96,.72) 0%, rgba(40,82,96,.38) 100%);
}
.lbn-cl-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 48px;
    text-align: center;
    width: 100%;
    gap: 12px;
}
.lbn-cl-hero-title {
    font-family: var(--cl-font-heading, 'Cinzel', serif);
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.lbn-cl-hero-subtitle {
    color: rgba(255,255,255,.9);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 400;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
    margin: 0;
    line-height: 1.5;
}

/* ── Board Layout ─────────────────────────────────────────────────── */
.lbn-cl-board-wrap { width: 100%; }

/* Archive page adjustments (native CPT archive /classifieds/) */
.lbn-cl-archive-page-wrap .lbn-cl-hero { border-radius: 0; }
.lbn-cl-archive-page-wrap .lbn-cl-board-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 48px;
}

/* Board header with layout switcher */
.lbn-cl-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.lbn-cl-board-heading {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--cl-heading);
    display: flex;
    align-items: center;
    gap: 8px;
}
.lbn-cl-layout-switcher {
    display: flex;
    gap: 4px;
}
.lbn-cl-layout-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    background: var(--cl-card);
    color: var(--cl-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    transition: background .15s, color .15s, border-color .15s;
}
.lbn-cl-layout-btn:hover { background: var(--cl-subtle); color: var(--cl-heading); }
.lbn-cl-layout-btn.lbn-cl-layout-active {
    background: var(--cl-primary);
    color: var(--cl-on-primary);
    border-color: var(--cl-primary);
}

/* Filters */
.lbn-cl-filters-form {
    background: var(--cl-card);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    box-shadow: var(--cl-shadow);
}

.lbn-cl-filters-search { flex: 1 1 240px; }
.lbn-cl-filters-search input { margin: 0; }

.lbn-cl-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    flex: 1 1 100%;
}

.lbn-cl-filter-select {
    padding: 9px 12px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    font-size: .9rem;
    background: var(--cl-card);
    color: var(--cl-text);
    box-shadow: var(--cl-inset);
    cursor: pointer;
    min-width: 140px;
    flex: 1 1 130px;
}
.lbn-cl-filter-select:focus { outline: none; border-color: var(--cl-primary); }

.lbn-cl-price-range {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 200px;
}
.lbn-cl-price-input { width: 90px; flex: 1 1 80px; }

.lbn-cl-filter-submit,
.lbn-cl-filter-reset { white-space: nowrap; }

/* Results count */
.lbn-cl-results-count {
    font-size: .875rem;
    color: var(--cl-text-muted);
    margin-bottom: 16px;
}

/* Ad Grid — layout variants */
.lbn-cl-ad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cl-gap);
}
.lbn-cl-layout-grid-2 .lbn-cl-ad-grid { grid-template-columns: repeat(2, 1fr); }
.lbn-cl-layout-grid-3 .lbn-cl-ad-grid { grid-template-columns: repeat(3, 1fr); }
.lbn-cl-layout-grid-4 .lbn-cl-ad-grid { grid-template-columns: repeat(4, 1fr); }

/* List layout */
.lbn-cl-layout-list .lbn-cl-ad-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}
.lbn-cl-layout-list .lbn-cl-ad-card {
    flex-direction: row;
}
.lbn-cl-layout-list .lbn-cl-card-img-link {
    flex: 0 0 200px;
    aspect-ratio: auto;
    height: 140px;
}
.lbn-cl-layout-list .lbn-cl-card-body {
    padding: 16px 18px;
}

/* ── Ad Card ──────────────────────────────────────────────────────── */
.lbn-cl-ad-card {
    background: var(--cl-card);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    overflow: hidden;
    transition: box-shadow .18s, transform .18s;
    display: flex;
    flex-direction: column;
    box-shadow: var(--cl-shadow);
}
.lbn-cl-ad-card:hover {
    box-shadow: var(--cl-shadow-md);
    transform: translateY(-2px);
}
.lbn-cl-ad-card-sold { opacity: .72; }

.lbn-cl-card-img-link {
    display: block;
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--cl-subtle);
}

.lbn-cl-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s;
}
.lbn-cl-ad-card:hover .lbn-cl-card-img { transform: scale(1.04); }

.lbn-cl-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cl-subtle);
    color: var(--cl-border);
}
.lbn-cl-card-img-placeholder i { font-size: 2.5rem; }

/* Category image overlay on card */
.lbn-cl-card-cat-overlay {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
}
.lbn-cl-cat-img-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cl-card);
    border: 2px solid rgba(255,255,255,.7);
    box-shadow: 0 2px 6px rgba(40,30,10,.18);
    overflow: hidden;
}
.lbn-cl-cat-img-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.lbn-cl-cat-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.7);
    box-shadow: 0 2px 6px rgba(40,30,10,.18);
    font-size: 1.2rem;
    color: var(--cl-on-primary);
}

.lbn-cl-card-sold-badge,
.lbn-cl-card-type-badge {
    position: absolute;
    top: 8px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
}
.lbn-cl-card-sold-badge { right: 8px; background: var(--cl-danger); color: #fff; }
.lbn-cl-card-type-badge { left: 8px; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(4px); }

.lbn-cl-card-body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lbn-cl-card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.lbn-cl-card-title a {
    color: var(--cl-heading);
    text-decoration: none;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lbn-cl-card-title a:hover { color: var(--cl-primary); }

.lbn-cl-card-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cl-primary);
    margin: 0;
}

.lbn-cl-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}
.lbn-cl-card-meta-item {
    font-size: .8125rem;
    color: var(--cl-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.lbn-cl-card-meta-item i { font-size: .75rem; }

/* ── Pagination ───────────────────────────────────────────────────── */
.lbn-cl-pagination {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 28px;
}
.lbn-cl-page-btn {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    font-size: .9rem;
    text-decoration: none;
    color: var(--cl-text);
    background: var(--cl-card);
    box-shadow: var(--cl-shadow);
    transition: background .15s, border-color .15s;
}
.lbn-cl-page-btn:hover { background: var(--cl-subtle); border-color: var(--cl-primary); }
.lbn-cl-page-btn-current {
    background: var(--cl-primary);
    border-color: var(--cl-primary);
    color: var(--cl-on-primary);
}

/* ── No results ───────────────────────────────────────────────────── */
.lbn-cl-no-results {
    text-align: center;
    padding: 48px 24px;
    color: var(--cl-text-muted);
}
.lbn-cl-no-results p { font-size: 1.05rem; margin-bottom: 18px; }

/* ── Post Ad Form ─────────────────────────────────────────────────── */
.lbn-cl-post-ad-wrap { max-width: 700px; }

.lbn-cl-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--cl-heading);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--cl-border);
}

/* Image upload */
.lbn-cl-image-preview-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.lbn-cl-img-thumb {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: var(--cl-radius-sm);
    overflow: hidden;
    border: 1px solid var(--cl-border);
}
.lbn-cl-img-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lbn-cl-img-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,.65);
    color: #fff;
    border: none;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.lbn-cl-img-remove:hover { background: var(--cl-danger); }

.lbn-cl-upload-area {
    border: 2px dashed var(--cl-border);
    border-radius: var(--cl-radius-sm);
    padding: 14px 20px;
    text-align: center;
    transition: border-color .15s, background .15s;
    cursor: pointer;
    background: var(--cl-card);
}
.lbn-cl-upload-area:hover,
.lbn-cl-upload-area.lbn-cl-drag-over { border-color: var(--cl-primary); background: var(--cl-info-bg); }

.lbn-cl-upload-label { cursor: pointer; font-weight: 600; color: var(--cl-primary); font-size: .9375rem; }

/* Category checkboxes */
.lbn-cl-cat-checkboxes { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.lbn-cl-cat-check-label { display: flex; align-items: center; gap: 6px; font-weight: normal; font-size: .9375rem; cursor: pointer; }
.lbn-cl-cat-check-label input { width: auto; }

/* ── My Ads Dashboard ─────────────────────────────────────────────── */
.lbn-cl-my-ads-wrap { width: 100%; }

.lbn-cl-my-ads-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.lbn-cl-my-ads-header .lbn-cl-section-title { margin: 0; border: none; padding: 0; }

.lbn-cl-my-ads-table-wrap { overflow-x: auto; }

.lbn-cl-my-ads-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}
.lbn-cl-my-ads-table th,
.lbn-cl-my-ads-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--cl-border);
    vertical-align: middle;
}
.lbn-cl-my-ads-table th {
    font-weight: 600;
    color: var(--cl-text-muted);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    background: var(--cl-subtle);
}
.lbn-cl-my-ads-table tr:hover td { background: var(--cl-bg); }
.lbn-cl-my-ads-table .lbn-cl-row-expired td { background: var(--cl-warning-bg); }

.lbn-cl-th-img,
.lbn-cl-td-img { width: 68px; padding: 8px 12px; }

.lbn-cl-row-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--cl-radius-sm);
    display: block;
}
.lbn-cl-row-thumb-placeholder {
    width: 52px;
    height: 52px;
    background: var(--cl-subtle);
    border-radius: var(--cl-radius-sm);
    border: 1px solid var(--cl-border);
}

.lbn-cl-ad-row-title { font-weight: 600; color: var(--cl-heading); text-decoration: none; }
.lbn-cl-ad-row-title:hover { color: var(--cl-primary); }

.lbn-cl-td-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.lbn-cl-td-actions { white-space: nowrap; }
.lbn-cl-td-actions .lbn-cl-btn { margin: 2px; }

/* Status badges */
.lbn-cl-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .8125rem;
    font-weight: 600;
}
.lbn-cl-status-live    { background: var(--cl-success-bg); color: var(--cl-success); }
.lbn-cl-status-pending { background: var(--cl-warning-bg); color: var(--cl-warning); }
.lbn-cl-status-draft   { background: var(--cl-subtle);     color: var(--cl-text-muted); }
.lbn-cl-status-sold    { background: var(--cl-danger-bg);  color: var(--cl-danger); }

/* ── Dashboard stat cards ─────────────────────────────────────────── */
.lbn-cl-stats-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 16px 0 24px;
}
.lbn-cl-stat-card {
    background: var(--cl-card);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 140px;
    box-shadow: var(--cl-shadow);
}
.lbn-cl-stat-warn { border-left: 4px solid var(--cl-warning); }
.lbn-cl-stat-number { font-size: 2rem; font-weight: 700; color: var(--cl-primary); line-height: 1; }
.lbn-cl-stat-label  { font-size: .875rem; color: var(--cl-text-muted); margin-top: 4px; }

/* -- Featured Section ------------------------------------------------ */
.lbn-cl-featured-section { margin-bottom: 8px; }
.lbn-cl-featured-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--cl-featured);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lbn-cl-featured-divider {
    border: none;
    border-top: 2px dashed var(--cl-featured);
    margin: 24px 0;
    opacity: .4;
}
.lbn-cl-ad-card-featured {
    border: 2px solid var(--cl-featured) !important;
    box-shadow: 0 0 0 1px var(--cl-featured-bg), var(--cl-shadow) !important;
}
.lbn-cl-card-featured-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cl-featured-bg);
    color: var(--cl-featured);
    font-size: .875rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ── Subscribe form ──────────────────────────────────────────────── */
.lbn-cl-subscribe-wrap { max-width: 720px; margin: 0 auto; padding: 16px 0 40px; }

.lbn-cl-subscribe-card {
    background: var(--cl-card);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    padding: 28px 32px;
    box-shadow: var(--cl-shadow);
}

.lbn-cl-subscribe-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 8px; color: var(--cl-heading); }
.lbn-cl-subscribe-intro { color: var(--cl-text-muted); margin: 0 0 24px; line-height: 1.6; }

.lbn-cl-form-section {
    border-top: 1px solid var(--cl-border);
    padding-top: 22px;
    margin-top: 22px;
}
.lbn-cl-form-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.lbn-cl-form-section-title { font-size: 1rem; font-weight: 700; margin: 0 0 16px; color: var(--cl-heading); }

.lbn-cl-form-row { margin-bottom: 18px; }
.lbn-cl-form-row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .875rem; color: var(--cl-heading); }
.lbn-cl-required { color: var(--cl-danger); margin-left: 2px; }
.lbn-cl-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    font-size: .9375rem;
    background: var(--cl-card);
    box-shadow: var(--cl-inset);
    color: var(--cl-text);
    appearance: auto;
}
.lbn-cl-select:focus { outline: 2px solid var(--cl-primary); border-color: var(--cl-primary); }
.lbn-cl-field-note { font-size: .8125rem; color: var(--cl-text-muted); margin: 5px 0 0; }
.lbn-cl-file-input { display: block; margin-top: 6px; font-size: .875rem; }

/* Package cards */
.lbn-cl-package-options { display: flex; gap: 12px; flex-wrap: wrap; }
.lbn-cl-package-card {
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 2px solid var(--cl-border);
    border-radius: var(--cl-radius);
    padding: 14px 12px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: var(--cl-bg);
}
.lbn-cl-package-card:has(input:checked) {
    border-color: var(--cl-primary);
    background: var(--cl-info-bg);
}
.lbn-cl-package-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.lbn-cl-pkg-icon { font-size: 1.5rem; line-height: 1; color: var(--cl-primary); }
.lbn-cl-pkg-days { font-size: .875rem; font-weight: 600; color: var(--cl-text); }
.lbn-cl-pkg-price { font-size: 1.25rem; font-weight: 700; color: var(--cl-primary); }

/* Package type heading (Featured / Banner) */
.lbn-cl-pkg-type-heading {
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cl-primary);
    margin: 16px 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lbn-cl-pkg-type-heading:first-child { margin-top: 0; }

/* Banner image upload wrap */
#lbn-cl-banner-upload-wrap {
    padding: 12px 14px;
    background: var(--cl-bg-subtle);
    border-radius: 10px;
    border: 1px dashed var(--cl-border);
}
#lbn-cl-banner-upload-wrap label.lbn-cl-form-label { display: block; font-weight: 600; margin-bottom: 6px; }
#lbn-cl-banner-file { display: block; margin-bottom: 6px; }

/* Order summary */
.lbn-cl-order-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--cl-success-bg);
    border: 1px solid var(--cl-success);
    border-radius: var(--cl-radius-sm);
    padding: 10px 14px;
    font-size: .9375rem;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.lbn-cl-order-summary strong { color: var(--cl-success); }

/* Payment method tabs */
.lbn-cl-method-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.lbn-cl-method-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 2px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    padding: 10px 14px;
    cursor: pointer;
    min-width: 80px;
    background: var(--cl-bg);
    transition: border-color .2s, background .2s;
}
.lbn-cl-method-tab:has(input:checked) { border-color: var(--cl-primary); background: var(--cl-info-bg); }
.lbn-cl-method-tab input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.lbn-cl-method-icon { font-size: 1.4rem; line-height: 1; color: var(--cl-primary); }
.lbn-cl-method-name { font-size: .75rem; font-weight: 600; color: var(--cl-text); text-align: center; }

/* Method instructions */
.lbn-cl-method-instructions {
    background: var(--cl-subtle);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    padding: 14px 16px;
    margin: 12px 0;
}
.lbn-cl-method-instructions h4 { margin: 0 0 8px; font-size: .9375rem; color: var(--cl-heading); }
.lbn-cl-instr-body { font-size: .875rem; color: var(--cl-text); line-height: 1.6; }

/* Form actions */
.lbn-cl-form-actions { margin-top: 24px; }

/* Notice variants */
.lbn-cl-notice--info    { background: var(--cl-info-bg);    color: var(--cl-info);    border-radius: var(--cl-radius-sm); padding: 10px 14px; }
.lbn-cl-notice--warning { background: var(--cl-warning-bg); color: var(--cl-warning); border-radius: var(--cl-radius-sm); padding: 10px 14px; }
.lbn-cl-notice--ok      { background: var(--cl-success-bg); color: var(--cl-success); border-radius: var(--cl-radius-sm); padding: 10px 14px; }
.lbn-cl-notice--error   { background: var(--cl-danger-bg);  color: var(--cl-danger);  border-radius: var(--cl-radius-sm); padding: 10px 14px; }

/* Success screen */
.lbn-cl-subscribe-success { text-align: center; padding: 32px 16px; }
.lbn-cl-success-icon { font-size: 3rem; margin-bottom: 12px; color: var(--cl-success); }
.lbn-cl-subscribe-success h3 { font-size: 1.25rem; margin: 0 0 10px; color: var(--cl-heading); }
.lbn-cl-subscribe-success p { color: var(--cl-text-muted); max-width: 480px; margin: 0 auto 10px; }

/* ── RTL Support ──────────────────────────────────────────────────── */
[dir="rtl"] .lbn-cl-my-ads-table th,
[dir="rtl"] .lbn-cl-my-ads-table td,
.rtl .lbn-cl-my-ads-table th,
.rtl .lbn-cl-my-ads-table td { text-align: right; }

[dir="rtl"] .lbn-cl-card-sold-badge,
.rtl .lbn-cl-card-sold-badge { right: auto; left: 8px; }

[dir="rtl"] .lbn-cl-card-type-badge,
.rtl .lbn-cl-card-type-badge { left: auto; right: 8px; }

[dir="rtl"] .lbn-cl-card-cat-overlay,
.rtl .lbn-cl-card-cat-overlay { left: auto; right: 8px; }

[dir="rtl"] .lbn-cl-card-featured-badge,
.rtl .lbn-cl-card-featured-badge { right: auto; left: 8px; }

[dir="rtl"] .lbn-cl-required,
.rtl .lbn-cl-required { margin-left: 0; margin-right: 2px; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .lbn-cl-layout-grid-4 .lbn-cl-ad-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .lbn-cl-single-wrap .lbn-cl-single-layout { grid-template-columns: 1fr; }
    .lbn-cl-single-sidebar { order: -1; }
    .lbn-cl-layout-grid-3 .lbn-cl-ad-grid,
    .lbn-cl-layout-grid-4 .lbn-cl-ad-grid { grid-template-columns: repeat(2, 1fr); }
    .lbn-cl-layout-list .lbn-cl-card-img-link { flex: 0 0 150px; }
}

@media (max-width: 640px) {
    .lbn-cl-container { padding: 14px 12px 36px; }
    .lbn-cl-single-title { font-size: 1.3rem; }
    .lbn-cl-ad-grid,
    .lbn-cl-layout-grid-2 .lbn-cl-ad-grid,
    .lbn-cl-layout-grid-3 .lbn-cl-ad-grid,
    .lbn-cl-layout-grid-4 .lbn-cl-ad-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .lbn-cl-layout-list .lbn-cl-ad-card { flex-direction: column; }
    .lbn-cl-layout-list .lbn-cl-card-img-link { flex: none; height: auto; aspect-ratio: 4/3; }
    .lbn-cl-filters-form { padding: 12px 14px; }
    .lbn-cl-filter-select { min-width: 100px; }
    .lbn-cl-price-input { width: 70px; }
    .lbn-cl-my-ads-table th,
    .lbn-cl-my-ads-table td { padding: 10px 10px; font-size: .875rem; }
    .lbn-cl-stats-row { gap: 10px; }
    .lbn-cl-stat-card { padding: 12px 16px; min-width: 110px; }
    .lbn-cl-stat-number { font-size: 1.6rem; }
    .lbn-cl-subscribe-card { padding: 18px 16px; }
    .lbn-cl-package-options { gap: 8px; }
    .lbn-cl-package-card { flex: 1 1 90px; padding: 10px 8px; }
    .lbn-cl-method-tabs { gap: 6px; }
    .lbn-cl-method-tab { min-width: 64px; padding: 8px 10px; }
}

/* ── Favorites ────────────────────────────────────────────────────── */
.lbn-cl-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lbn-cl-title-row .lbn-cl-single-title { flex: 1; margin: 0; }
.lbn-cl-card-fav-btn,
.lbn-cl-fav-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--cl-muted);
    transition: color .15s, transform .12s;
    flex-shrink: 0;
    min-height: auto;
}
.lbn-cl-card-fav-btn:hover,
.lbn-cl-fav-btn:hover { color: var(--c-danger, #c0392b); transform: scale(1.15); }
.lbn-cl-fav-active { color: var(--c-danger, #c0392b) !important; }
.lbn-cl-fav-btn { font-size: 1.6rem; margin-inline-start: 4px; }