/* ============================================================
   Zilideon Frontend — Submit Form
   ============================================================ */

.zl-submit-wrap { max-width: 720px; margin: 0 auto; font-family: inherit; }

/* Notices */
.zl-notice {
    padding: 14px 18px; border-radius: 8px; margin-bottom: 20px;
    font-size: 15px; line-height: 1.5;
}
.zl-notice-success { background: #edfaed; border-left: 4px solid #46b450; color: #1a5c1e; }
.zl-notice-error   { background: #fdecea; border-left: 4px solid #dc3232; color: #7a1a1a; }
.zl-notice-info    { background: #eef2ff; border-left: 4px solid #7b68ee; color: #3c3c5a; }

/* Form sections */
.zl-form-section {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}
.zl-section-title {
    font-size: 16px; font-weight: 600; margin: 0 0 4px;
    color: #1d2327; border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; margin-bottom: 16px;
}
.zl-section-hint { font-size: 13px; color: #888; margin: -10px 0 16px; }

/* Grid */
.zl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .zl-grid-2 { grid-template-columns: 1fr; } }

/* Fields */
.zl-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.zl-field:last-child { margin-bottom: 0; }
.zl-field label { font-size: 13px; font-weight: 500; color: #444; }
.zl-req { color: #dc3232; }

.zl-field input[type="text"],
.zl-field input[type="email"],
.zl-field input[type="tel"],
.zl-field input[type="number"],
.zl-field input[type="url"],
.zl-field select,
.zl-field textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; font-size: 15px;
    border: 1px solid #ddd; border-radius: 8px;
    background: #fafafa; color: #1d2327;
    transition: border-color .15s, box-shadow .15s;
    outline: none; font-family: inherit;
}
.zl-field input:focus,
.zl-field select:focus,
.zl-field textarea:focus {
    border-color: #7b68ee;
    box-shadow: 0 0 0 3px rgba(123,104,238,.12);
    background: #fff;
}
.zl-field textarea { resize: vertical; min-height: 130px; }
.zl-field small { font-size: 12px; color: #999; }

/* Error state */
.zl-field-error input,
.zl-field-error select,
.zl-field-error textarea {
    border-color: #dc3232;
    background: #fff8f8;
}

/* Char count */
.zl-char-count { font-size: 12px; color: #aaa; text-align: right; }

/* Checkbox inline */
.zl-checkbox-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; cursor: pointer; }

/* Image upload area */
.zl-image-upload-area {
    border: 2px dashed #ddd; border-radius: 10px;
    padding: 24px; text-align: center;
    cursor: pointer; transition: border-color .2s, background .2s;
    position: relative;
}
.zl-image-upload-area:hover,
.zl-image-upload-area.zl-drag-over {
    border-color: #7b68ee; background: #f5f3ff;
}
.zl-file-input {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.zl-upload-placeholder svg { color: #bbb; margin-bottom: 8px; }
.zl-upload-placeholder p { margin: 0 0 4px; font-size: 15px; color: #555; }
.zl-upload-placeholder span { font-size: 12px; color: #aaa; }

/* Image previews */
.zl-image-previews {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 16px; justify-content: center;
}
.zl-preview-item {
    position: relative; width: 90px; height: 90px;
    border-radius: 8px; overflow: hidden; border: 2px solid #eee;
    cursor: grab; transition: box-shadow .15s, border-color .15s, opacity .15s;
    user-select: none;
}
.zl-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; opacity: 0; transition: opacity .2s; }
.zl-preview-item img.zl-img-loaded { opacity: 1; }
.zl-preview-item:hover { border-color: #7b68ee; box-shadow: 0 2px 10px rgba(123,104,238,.25); }

/* Shimmer while image is being read by FileReader */
.zl-preview-item.zl-preview-loading::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: zl-shimmer .9s infinite linear;
    z-index: 1;
}
.zl-preview-item.zl-preview-loading::after {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/28px no-repeat;
    z-index: 2;
}
@keyframes zl-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Cover item */
.zl-preview-item.zl-preview-is-cover { border-color: #7b68ee; box-shadow: 0 0 0 3px rgba(123,104,238,.3); }

/* Cover badge */
.zl-preview-cover-badge {
    position: absolute; bottom: 0; left: 0; right: 0;
    color: #fff; font-size: 10px; font-weight: 600;
    text-align: center; padding: 3px 0; transition: background .15s;
}
.zl-preview-is-cover .zl-preview-cover-badge { background: rgba(123,104,238,.9); }
.zl-preview-item:not(.zl-preview-is-cover) .zl-preview-cover-badge {
    background: rgba(0,0,0,.45); opacity: 0; transition: opacity .15s;
}
.zl-preview-item:not(.zl-preview-is-cover):hover .zl-preview-cover-badge { opacity: 1; }

/* Drag states */
.zl-preview-item.zl-preview-dragging { opacity: .35; cursor: grabbing; }
.zl-preview-item.zl-preview-drag-over {
    border-color: #7b68ee; border-style: dashed;
    box-shadow: 0 0 0 3px rgba(123,104,238,.4);
}

/* Compression saving badge */
.zl-preview-saving {
    position: absolute; top: 4px; left: 4px;
    background: rgba(22,163,74,.85); color: #fff;
    font-size: 9px; font-weight: 700; line-height: 1;
    padding: 2px 4px; border-radius: 3px;
    z-index: 2; pointer-events: none;
}

/* Remove button */
.zl-preview-remove {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,.55); color: #fff;
    border: none; border-radius: 50%; width: 20px; height: 20px;
    font-size: 12px; cursor: pointer; line-height: 20px; text-align: center; padding: 0;
    z-index: 2;
}

/* Draft bar */
.zl-draft-bar {
    font-size: 12px; border-radius: 6px; padding: 7px 14px;
    margin-bottom: 14px; display: none;
}
.zl-draft-bar--ok  { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.zl-draft-bar--warn{ background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.zl-draft-bar a    { color: inherit; text-decoration: underline; margin-left: 6px; }

/* Submit button */
.zl-form-submit { text-align: center; margin-top: 8px; }
.zl-btn-submit {
    display: inline-flex; align-items: center; gap: 8px;
    background: #7b68ee; color: #fff;
    border: none; border-radius: 8px;
    padding: 14px 36px; font-size: 16px; font-weight: 600;
    cursor: pointer; transition: background .15s, transform .1s;
    font-family: inherit;
}
.zl-btn-submit:hover  { background: #6a58d6; }
.zl-btn-submit:active { transform: scale(.98); }
.zl-btn-submit:disabled { background: #bbb; cursor: not-allowed; }

.zl-submit-note { font-size: 13px; color: #999; margin-top: 10px; text-align: justify; }
.zl-submit-note a { color: #7b68ee; text-decoration: underline; }
.zl-submit-note a:hover { color: #6a58d6; }

/* ===== Video URL field + embedded preview (submit form & single listing) ===== */
.zl-video-hint { display: block; }
.zl-video-preview { margin-top: 14px; }
.zl-video-preview:empty { margin-top: 0; }
.zl-video-preview-status {
    font-size: 13px; padding: 10px 12px; border-radius: 8px;
    background: #f5f3ff; color: #5b4bc4;
}
.zl-video-preview-status.zl-video-preview-error {
    background: #fdecea; color: #7a1a1a;
}

.zl-video-embed { max-width: 480px; }
.zl-video-embed-frame {
    position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */
    border-radius: 10px; overflow: hidden; background: #000;
}
.zl-video-embed-frame iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.zl-video-embed-tiktok,
.zl-video-embed-instagram { display: flex; justify-content: flex-start; }
.zl-video-embed-tiktok blockquote,
.zl-video-embed-instagram blockquote { margin: 0; }

.zl-listing-video-section { margin: 24px 0; }
.zl-listing-video-section .zl-desc-heading { margin-bottom: 12px; }

/* ============================================================
   Single Listing Page
   ============================================================ */

.zl-listing-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    font-family: inherit;
    background: #fff;
}

/* Breadcrumb */
.zl-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: #888; margin-bottom: 20px;
    flex-wrap: wrap;
}
.zl-breadcrumb a { color: #7b68ee; text-decoration: none; }
.zl-breadcrumb a:hover { text-decoration: underline; }
.zl-bc-current { color: #555; }

/* Two-column grid */
.zl-listing-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
}
/* Without this, the 1fr track's automatic minimum is the min-content
   width of its contents (e.g. a long unbroken URL in the description
   or a details-table cell). That can force the whole grid wider than
   .zl-listing-wrap, pushing the 360px sidebar column out past the
   centered container and into the browser viewport. */
.zl-listing-main {
    min-width: 0;
}
@media (max-width: 780px) {
    .zl-listing-grid { grid-template-columns: 1fr; }
}

/* ---- Gallery arrows ---- */
.zl-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    transition: background .15s, box-shadow .15s;
    color: #1d2327;
    padding: 0;
}
.zl-gallery-arrow:hover {
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.zl-gallery-arrow-prev { left: 12px; }
.zl-gallery-arrow-next { right: 12px; }

/* ---- Gallery ---- */
.zl-gallery { margin-bottom: 24px; }
.zl-gallery-main {
    border-radius: 12px; overflow: hidden;
    background: #f5f5f5; aspect-ratio: 4/3;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.zl-main-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: opacity .2s;
    position: relative; z-index: 1;
}
.zl-gallery-thumbs {
    display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.zl-thumb {
    width: 96px !important; height: 96px !important; padding: 0; border: 2px solid transparent;
    border-radius: 8px; overflow: hidden; cursor: pointer; background: none;
    flex-shrink: 0; transition: border-color .15s;
}
.zl-thumb img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.zl-thumb:hover, .zl-thumb-active { border-color: #7b68ee; }

.zl-gallery-placeholder {
    background: #f5f5f5; border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 260px; color: #bbb; margin-bottom: 24px;
}
.zl-gallery-placeholder .dashicons { font-size: 48px; width: 48px; height: 48px; }
.zl-gallery-placeholder p { font-size: 13px; margin: 8px 0 0; }

/* ---- Description ---- */
.zl-listing-description {
    background: #fff;
    padding: 24px 0;
}
.zl-listing-description .zl-desc-heading,
.zl-listing-description .zl-desc-body {
    padding-left: 16px;
    padding-right: 16px;
}
.zl-desc-divider {
    border: none;
    border-top: 1px solid #e8e8e8;
    margin: 0;
}
.zl-desc-divider-top {
    margin-top: 16px;
}
.zl-desc-heading { font-size: 15px; font-weight: 600; margin: 0 0 14px; color: #1d2327; }
.zl-desc-body { font-size: 15px; color: #444; line-height: 1.7; overflow-wrap: break-word; word-break: break-word; }
.zl-desc-body p:first-child { margin-top: 0; }
.zl-desc-body p:last-child  { margin-bottom: 0; }

/* ---- Sidebar cards ---- */
.zl-listing-card {
    background: #fff; border: 1px solid #e8e8e8;
    border-radius: 12px; padding: 20px;
    margin-bottom: 16px;
}
.zl-card-heading {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: #888; margin: 0 0 14px;
}

/* Title + price */
.zl-listing-title {
    font-size: 20px; font-weight: 700; color: #1d2327;
    line-height: 1.3; margin: 0 0 12px;
}
.zl-listing-price {
    font-size: 26px; font-weight: 700; color: #1d2327; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.zl-price-contact { font-size: 14px; color: #888; font-weight: 500; display: block !important; white-space: normal !important; overflow: visible !important; }
.zl-negotiable {
    font-size: 12px; background: #edfaed; color: #1a7a1a;
    border-radius: 20px; padding: 2px 10px; font-weight: 500;
}

/* Meta pills */
.zl-listing-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.zl-meta-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; color: #555; background: #f5f5f5;
    border-radius: 20px; padding: 4px 10px;
}
.zl-meta-pill a { color: inherit; text-decoration: none; }
.zl-meta-pill a:hover { color: #7b68ee; }
.zl-meta-pill svg { flex-shrink: 0; }

/* Contact buttons */
.zl-contact-card { display: flex; flex-direction: column; gap: 10px; }
.zl-contact-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 16px; border-radius: 8px; font-size: 15px; font-weight: 600;
    text-decoration: none; transition: background .15s;
    border: none; cursor: pointer; width: 100%; box-sizing: border-box;
}
.zl-contact-btn:active { opacity: .88; }

/* Show contact — primary reveal button */
.zl-btn-show-contact {
    background: #7b68ee; color: #fff;
}
.zl-btn-show-contact:hover { background: #6a58d6; color: #fff; }

/* Revealed contacts row */
.zl-contact-revealed {
    flex-direction: column; gap: 8px;
}

.zl-btn-call      { background: #7b68ee; color: #fff; }
.zl-btn-call:hover { background: #6a58d6; color: #fff; }
.zl-btn-whatsapp  { background: #25d366; color: #fff; }
.zl-btn-whatsapp:hover { background: #1db954; color: #fff; }

/* Chat trigger */
.zl-btn-chat { background: #fff; color: #7b68ee; border: 1.5px solid #7b68ee; }
.zl-btn-chat:hover { background: #f5f3ff; }

/* ── Save / Favourite button ── */
.zl-save-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px 4px 8px; border-radius: 20px;
    background: transparent; border: 1.5px solid #d1d5db;
    font-size: 12px; font-weight: 600; color: #6b7280;
    cursor: pointer; transition: border-color .15s, color .15s, background .15s;
    vertical-align: middle;
}
.zl-save-btn:hover { border-color: #e57373; color: #e57373; }
.zl-save-btn .zl-save-icon { transition: fill .15s, stroke .15s; flex-shrink: 0; }
.zl-save-btn--saved { border-color: #e57373; color: #e57373; }
.zl-save-btn--saved .zl-save-icon { fill: #e57373; stroke: #e57373; }
.zl-save-count {
    background: #f3f4f6; border-radius: 10px; padding: 0 5px;
    font-size: 11px; font-weight: 700; color: #374151; min-width: 18px;
    text-align: center;
}

/* ── Chat panel ── */
.zl-chat-panel {
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin-top: 4px;
}
.zl-chat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: #7b68ee; color: #fff;
}
.zl-chat-header-name {
    font-size: 13px; font-weight: 600;
}
.zl-chat-close {
    background: none; border: none; color: #fff; font-size: 20px;
    line-height: 1; cursor: pointer; padding: 0 2px; opacity: .8;
}
.zl-chat-close:hover { opacity: 1; }
.zl-chat-messages {
    min-height: 120px; max-height: 200px;
    overflow-y: auto; padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
    background: #f9fafb;
}
.zl-chat-msg {
    display: flex; flex-direction: column; gap: 2px; max-width: 85%;
}
.zl-chat-msg-self  { align-self: flex-end; align-items: flex-end; }
.zl-chat-msg-other { align-self: flex-start; align-items: flex-start; }
.zl-chat-bubble {
    display: inline-block; padding: 7px 11px;
    border-radius: 14px; font-size: 13px; line-height: 1.5; word-break: break-word;
}
.zl-chat-msg-self  .zl-chat-bubble { background: #7b68ee; color: #fff; border-bottom-right-radius: 4px; }
.zl-chat-msg-other .zl-chat-bubble { background: #e5e7eb; color: #1d2327; border-bottom-left-radius: 4px; }
.zl-chat-time { font-size: 10px; color: #9ca3af; padding: 0 4px; }
.zl-chat-input-row {
    display: flex; gap: 6px; padding: 10px 12px;
    border-top: 1px solid #e5e7eb; background: #fff;
}
.zl-chat-input {
    flex: 1; padding: 8px 12px; border: 1px solid #ddd;
    border-radius: 20px; font-size: 13px; outline: none;
    font-family: inherit;
}
.zl-chat-input:focus { border-color: #7b68ee; }
.zl-chat-send {
    padding: 8px 14px; background: #7b68ee; color: #fff;
    border: none; border-radius: 20px; font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.zl-chat-send:hover { background: #6a58d6; }
.zl-chat-send:disabled { opacity: .5; cursor: not-allowed; }

/* Seller card */
.zl-seller-row { display: flex; align-items: center; gap: 32px; }
.zl-seller-avatar { flex-shrink: 0; width: 64px; height: 64px; }
.zl-avatar-img {
    border-radius: 50% !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    display: block !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1;
}
.zl-avatar-placeholder {
    width: 64px; height: 64px; background: #eef2ff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #7b68ee;
    font-size: 28px;
}
.zl-seller-info { display: flex; flex-direction: column; gap: 6px; }
.zl-seller-name { font-size: 16px; font-weight: 600; color: #1d2327; margin: 0; line-height: 1.3; }
.zl-seller-since { font-size: 12px; color: #888; }

/* Safety tip */
.zl-safety-tip {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px; color: #888; background: #fffbe6;
    border-radius: 8px; padding: 10px 12px; border-left: 3px solid #ffb900;
}
.zl-safety-tip svg { flex-shrink: 0; margin-top: 1px; color: #e6a817; }
.zl-sell-cta-btn {
    display: block;
    text-align: center;
    margin-top: 12px;
    padding: 11px 16px;
    background: #f97316;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s;
}
.zl-sell-cta-btn:hover { background: #ea6c0a; color: #fff; }

/* ---- Related listings ---- */
.zl-related { margin-top: 40px; }
.zl-related-heading { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.zl-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.zl-related-card {
    background: #fff; border: 1px solid #e8e8e8; border-radius: 10px;
    overflow: hidden; text-decoration: none; color: inherit;
    transition: box-shadow .15s; display: block;
}
.zl-related-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.09);
}
.zl-related-thumb {
    aspect-ratio: 4/3; overflow: hidden;
    background: #f5f5f5; display: flex; align-items: center; justify-content: center;
}
.zl-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zl-related-no-img { font-size: 36px; color: #ddd; }
.zl-related-info { padding: 12px; }
.zl-related-title { font-size: 14px; font-weight: 500; margin: 0 0 4px; color: #1d2327;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zl-related-price { font-size: 15px; font-weight: 700; color: #7b68ee; margin: 0 0 4px; }
.zl-related-loc {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: #888; margin: 0;
}

/* ============================================================
   Browse Listings Page  [zl_listings]
   ============================================================ */

.zl-browse-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    font-family: inherit;
}

/* ---- Filter bar ---- */
.zl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}
.zl-filter-search {
    position: relative;
    flex: 1 1 200px;
}
.zl-filter-search svg {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: #aaa; pointer-events: none;
}
.zl-search-field { padding-left: 34px !important; }

.zl-filter-input {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fafafa;
    color: #1d2327;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    width: 100%;
}
.zl-filter-input:focus {
    border-color: #7b68ee;
    box-shadow: 0 0 0 3px rgba(123,104,238,.1);
    background: #fff;
}

.zl-price-range {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.zl-price-label { font-size: 14px; color: #666; font-weight: 500; }
.zl-price-input { width: 80px; flex: none; }
.zl-price-sep { color: #aaa; font-size: 13px; }

.zl-sort-select { flex: 0 0 auto; width: auto; min-width: 160px; }

.zl-filter-btn {
    height: 40px;
    padding: 0 20px;
    background: #7b68ee;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
    flex-shrink: 0;
}
.zl-filter-btn:hover { background: #6a58d6; }

.zl-clear-btn {
    height: 40px;
    padding: 0 14px;
    font-size: 13px;
    color: #888;
    text-decoration: none;
    border-radius: 8px;
    display: flex; align-items: center;
    transition: color .15s, background .15s;
}
.zl-clear-btn:hover { color: #dc3232; background: #fdecea; }

/* ---- Results bar ---- */
.zl-search-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 14px; }
.zl-results-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
}
/* ---- Cross-plugin discovery banner ---- */
.zl-cross-plugin-banner {
    font-size: 13px;
    color: #4a3db5;
    background: #f5f3ff;
    border: 1px solid #e0dbff;
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 16px;
}
.zl-cross-plugin-banner a {
    color: #4a3db5;
    font-weight: 600;
    text-decoration: underline;
}
.zl-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eef2ff;
    color: #4a3db5;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
}
.zl-remove-filter {
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    margin-left: 2px;
    opacity: .6;
}
.zl-remove-filter:hover { opacity: 1; }

/* ---- Listing card grid ---- */
.zl-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.zl-listing-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow .15s;
}
.zl-listing-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.07);
}
.zl-card-thumb {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.zl-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zl-card-no-img { font-size: 40px; color: #ddd; }

.zl-spotlight-badge-fallback {
    position: absolute;
    top: 8px; left: 8px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(0,0,0,.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.zl-cat-badge {
    position: absolute;
    bottom: 8px; left: 8px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.zl-card-body { padding: 14px; }
.zl-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zl-card-price {
    font-size: 16px;
    font-weight: 700;
    color: #7b68ee;
    margin: 0 0 8px;
    display: flex; align-items: center; gap: 6px;
}
.zl-card-neg {
    font-size: 11px;
    background: #edfaed;
    color: #1a7a1a;
    border-radius: 20px;
    padding: 1px 6px;
    font-weight: 500;
}
.zl-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #888;
}
.zl-card-loc {
    display: flex;
    align-items: center;
    gap: 3px;
}
.zl-card-date { font-size: 11px; }

/* ---- Pagination ---- */
.zl-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 14px;
    color: #666;
}
.zl-page-btn {
    padding: 8px 18px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    color: #444;
    font-weight: 500;
    transition: border-color .15s, color .15s;
}
.zl-page-btn:hover { border-color: #7b68ee; color: #7b68ee; }

/* ---- Empty state ---- */
.zl-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}
.zl-empty-state svg { color: #ddd; margin: 0 auto 16px; display: block; }
.zl-empty-state h2 { font-size: 20px; color: #555; margin: 0 0 8px; }
.zl-empty-state p  { font-size: 14px; margin: 0 0 20px; }
.zl-btn-reset {
    display: inline-block;
    padding: 10px 24px;
    background: #7b68ee;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background .15s;
}
.zl-btn-reset:hover { background: #6a58d6; color: #fff; }

/* ---- Responsive tweaks ---- */
@media (max-width: 600px) {
    .zl-filter-bar { padding: 12px; }
    .zl-price-range { flex-wrap: wrap; }
    .zl-listings-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

/* ===== Upgrade / Plans page ===== */
.zl-upgrade-wrap {
    max-width: 1020px;
    margin: 0 auto;
    padding: 32px 16px 48px;
}

.zl-upgrade-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 6px;
    color: #0f172a;
    letter-spacing: -0.5px;
}

.zl-upgrade-sub {
    font-size: 15px;
    color: #64748b;
    margin: 0 0 36px;
}
.zl-upgrade-sub strong {
    color: #4f46e5;
    font-weight: 700;
}

/* Grid */
.zl-plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 12px;
    align-items: stretch;
}

/* Card */
.zl-plan-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-top: 4px solid #cbd5e1;
    border-radius: 14px;
    padding: 28px 22px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.zl-plan-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.10);
    transform: translateY(-2px);
}

/* Per-plan accent colors */
.zl-plan-card:nth-child(1) { border-top-color: #94a3b8; }
.zl-plan-card:nth-child(2) { border-top-color: #3b82f6; }
.zl-plan-card:nth-child(3) { border-top-color: #7c3aed; }
.zl-plan-card:nth-child(4) { border-top-color: #d97706; }

/* Current plan highlight */
.zl-plan-current {
    border-color: #c4b5fd;
    border-top-color: #7c3aed;
    background: linear-gradient(160deg, #faf5ff 0%, #fff 60%);
    box-shadow: 0 0 0 3px rgba(124,58,237,.10), 0 4px 16px rgba(124,58,237,.08);
}
.zl-plan-current:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px rgba(124,58,237,.15), 0 10px 30px rgba(124,58,237,.12);
}

/* "Current Plan" badge */
.zl-plan-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: #7c3aed;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 0 0 8px 8px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(124,58,237,.35);
}

/* Plan header */
.zl-plan-name {
    font-size: 19px;
    font-weight: 800;
    margin: 8px 0 12px;
    color: #0f172a;
    letter-spacing: -0.3px;
}

.zl-plan-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: 6px;
}
.zl-plan-currency {
    font-size: 16px;
    font-weight: 700;
    color: #475569;
    align-self: flex-start;
    margin-top: 6px;
}
.zl-plan-amount {
    font-size: 38px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -1px;
}
.zl-plan-period {
    font-size: 12px;
    color: #94a3b8;
    margin-left: 2px;
}

.zl-plan-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 18px;
    min-height: 34px;
    line-height: 1.5;
}

/* Divider before features */
.zl-plan-features {
    list-style: none;
    margin: 0 0 auto;
    padding: 16px 0 0;
    border-top: 1px solid #f1f5f9;
    font-size: 13.5px;
    color: #374151;
    flex-grow: 1;
}
.zl-plan-features li {
    padding: 7px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #f8fafc;
}
.zl-plan-features li:last-child { border-bottom: none; }

/* Push button to bottom */
.zl-plan-card form,
.zl-plan-card > .zl-plan-btn,
.zl-plan-card > button {
    margin-top: 20px;
}

/* Buttons */
.zl-plan-btn {
    display: block;
    width: 100%;
    padding: 12px 0;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    text-align: center;
    text-decoration: none;
    transition: all .18s ease;
    letter-spacing: .01em;
    box-sizing: border-box;
}
.zl-plan-btn:hover { opacity: .9; transform: translateY(-1px); }
.zl-plan-btn:active { transform: translateY(0); }

.zl-plan-btn-primary {
    background: #4f46e5;
    color: #fff;
    border-color: #4f46e5;
    box-shadow: 0 3px 10px rgba(79,70,229,.30);
}
.zl-plan-btn-primary:hover {
    background: #4338ca;
    border-color: #4338ca;
    box-shadow: 0 5px 16px rgba(79,70,229,.38);
}
.zl-plan-btn-outline {
    background: transparent;
    color: #4f46e5;
    border-color: #c7d2fe;
}
.zl-plan-btn-outline:hover {
    background: #eef2ff;
    border-color: #a5b4fc;
}
.zl-plan-btn-disabled {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
    font-weight: 600;
}
.zl-plan-btn-disabled:hover { opacity: 1; transform: none; }

/* Remove default form margins inside cards */
.zl-plan-card form { margin-top: auto; padding-top: 20px; }

/* ===== Plans page – responsive ===== */
@media (max-width: 900px) {
    .zl-plans-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 560px) {
    .zl-upgrade-wrap {
        padding: 20px 12px 36px;
    }
    .zl-upgrade-title { font-size: 22px; }
    .zl-plans-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .zl-plan-card {
        padding: 24px 18px 20px;
    }
    .zl-plan-amount { font-size: 32px; }
}




/* "View all listings" link in single listing seller card */
.zl-seller-view-all {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: #4f46e5;
    text-decoration: none;
    font-weight: 500;
}
.zl-seller-view-all:hover { text-decoration: underline; }

/* Empty state */
.zl-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}
.zl-empty-state .dashicons { font-size: 48px; width: 48px; height: 48px; }
.zl-empty-state p { margin-top: 12px; font-size: 16px; }

@media (max-width: 600px) {
    .zl-seller-hero { flex-direction: column; align-items: flex-start; padding: 20px; gap: 16px; }
    .zl-seller-hero-img { width: 72px; height: 72px; }
    .zl-seller-hero-name { font-size: 20px; }
}


/* =========================================================
   ZILIDEON CORE MARKETPLACE INTEGRATION
========================================================= */

.zl-business-card{
    margin-bottom:20px;
    font-size: 14px;
    color: #374151;
}
.zl-business-card .zl-card-heading {
    font-size: 13px;
}
.zl-business-seller-name strong {
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
}

.zl-business-seller-name{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
    flex-wrap:wrap;
}

.zl-business-badge{
    background:#dcfce7;
    color:#166534;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.zl-business-profile-link{
    display:inline-block;
    margin-top:14px;
    font-weight:600;
    text-decoration:none;
}

.zl-marketplace-business-selector{
    margin-top:20px;
    padding:20px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fafafa;
}

.zl-marketplace-business-selector label{
    display:block;
    margin-bottom:10px;
    font-weight:600;
}

.zl-marketplace-business-selector select{
    width:100%;
    padding:12px;
    border-radius:8px;
}

.zl-marketplace-business-selector .description{
    margin-top:10px;
    color:#666;
    font-size:13px;
}


/* =========================================================
   BUSINESS OWNER UX REFINEMENT
========================================================= */

.zl-business-owner-note{
    margin-top:8px;
    font-size:13px;
    color:#666;
    line-height:1.5;
}


/* Business Trust Block */
.zl-business-trust-block{
    margin-top:14px;
    padding:12px;
    border:1px solid #e5e5e5;
    border-radius:10px;
    background:#fafafa;
}

.zl-business-rating{
    font-size:14px;
    font-weight:600;
    margin-bottom:6px;
    color:#222;
}

.zl-business-verified{
    font-size:13px;
    font-weight:600;
    color:#198754;
}


/* Review Form Integration */
.zl-listing-review-section{
    margin-top:18px;
    padding:18px;
    border:1px solid #e8e8e8;
    border-radius:12px;
    background:#fff;
}

.zl-business-review-form h3{
    margin-top:0;
    margin-bottom:16px;
}

.zl-business-review-form select,
.zl-business-review-form textarea{
    width:100%;
    border:1px solid #dcdcdc;
    border-radius:8px;
    padding:10px;
    box-sizing:border-box;
}

.zl-business-review-form button{
    margin-top:12px;
    border:none;
    border-radius:8px;
    padding:12px 18px;
    cursor:pointer;
}


/* ================================================================
   PLACE PROFILE TRUST FEATURES
   Uses same CSS class names as Zilideon Places plugin so styles
   are consistent whether shown on a Place page or a listing page.
   ================================================================ */

/* Verified Place badge — sky blue to distinguish from seller badge */
.zl-place-verified-badge {
    background: #e0f2fe;
    color: #0369a1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* "Identity verified" confirmation line inside trust block */
.zl-business-verified {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    margin-top: 8px;
}

/* ── Star display — matches Places' zl_render_stars() output ── */
/* .zl-stars-display, .zl-star-full/half/empty, .zl-rating-avg,
   .zl-rating-count are all defined by the Places plugin stylesheet.
   The rules below are scoped inside .zl-business-card so they only
   apply as overrides when Places' own CSS isn't loaded. */
.zl-business-card .zl-stars-display {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    font-size: 14px;
}
.zl-business-card .zl-star-full  { color: #f59e0b; }
.zl-business-card .zl-star-half  { color: #f59e0b; opacity: 0.55; }
.zl-business-card .zl-star-empty { color: #d1d5db; }
.zl-business-card .zl-rating-avg {
    font-weight: 700;
    color: #1d2327;
    margin-left: 4px;
}
.zl-business-card .zl-rating-count {
    color: #6b7280;
    font-size: 13px;
}

/* ── Review snippets — matches Places' zl_render_reviews_section() ── */
.zl-place-reviews-preview {
    margin-top: 14px;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
}
.zl-place-reviews-label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 10px;
}

/* .zl-review-item, .zl-review-header, .zl-review-author, .zl-review-stars,
   .zl-review-date, .zl-review-text, .zl-reviewer-badge — same classes
   used by Places' reviews section, scoped to the business card */
.zl-business-card .zl-review-item {
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}
.zl-business-card .zl-review-item:last-child { border-bottom: none; }
.zl-business-card .zl-review-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.zl-business-card .zl-review-author {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 5px;
}
.zl-business-card .zl-review-stars {
    font-size: 13px;
    color: #f59e0b;
    letter-spacing: 1px;
}
.zl-business-card .zl-review-date {
    font-size: 11px;
    color: #9ca3af;
    margin-left: auto;
}
.zl-business-card .zl-review-text {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}
.zl-business-card .zl-reviewer-badge {
    font-size: 10px;
    background: #e8f4fd;
    color: #0c5460;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════
   Item reviews — single listing page (product/item-level, distinct
   from the Place business card's shop-level review data above).
   Self-contained: Places' frontend.css is not guaranteed to be
   enqueued on a marketplace single-listing page, so the shared
   .zl-stars-display / .zl-review-* base classes are duplicated here
   under the .zl-item-reviews-section scope — same convention already
   used for .zl-business-card's own fallback block further up.
   ══════════════════════════════════════════════════════════════ */
.zl-item-reviews-section {
    margin-top: 36px;
}
.zl-item-reviews-summary {
    margin-bottom: 18px;
}
.zl-item-reviews-summary .zl-stars-display {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 16px;
}
.zl-item-reviews-summary .zl-star-full  { color: #f59e0b; }
.zl-item-reviews-summary .zl-star-half  { color: #f59e0b; opacity: .55; }
.zl-item-reviews-summary .zl-star-empty { color: #d1d5db; }
.zl-item-reviews-summary .zl-rating-avg {
    font-weight: 700;
    color: #1d2327;
    margin-left: 4px;
}
.zl-item-reviews-summary .zl-rating-count {
    color: #6b7280;
    font-size: 13px;
    margin-left: 4px;
}

.zl-item-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 26px;
}
.zl-item-review-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
}
.zl-item-review-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.zl-item-review-author {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.zl-item-review-stars {
    color: #f59e0b;
    font-size: 14px;
    letter-spacing: 1px;
    margin-left: auto;
}
.zl-item-review-date {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}
.zl-item-review-text {
    margin: 0;
    color: #374151;
    font-size: 14px;
    line-height: 1.6;
}
.zl-item-no-reviews {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 20px;
}

.zl-item-review-form-wrap {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
}
.zl-item-review-form-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 14px;
}

/* .zl-form-field / .zl-input / .zl-required / .zl-field-hint / .zl-hp-field
   are Places' generic form classes, reused here for markup consistency.
   Places' CSS is not guaranteed to be enqueued on a marketplace listing
   page (it only loads for Places' own shortcodes/archives), so — same
   fallback convention as the star/review classes above — they're scoped
   and duplicated under .zl-item-review-form-wrap rather than left
   unstyled or defined globally (where they could clash with unrelated
   .zl-input usages elsewhere in Marketplace, e.g. the submit-listing form). */
.zl-item-review-form-wrap .zl-form-field {
    margin-bottom: 14px;
}
.zl-item-review-form-wrap .zl-form-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}
.zl-item-review-form-wrap .zl-required {
    color: #ef4444;
    margin-left: 2px;
}
.zl-item-review-form-wrap .zl-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.zl-item-review-form-wrap .zl-input:focus {
    outline: none;
    border-color: #1a7ae4;
    box-shadow: 0 0 0 3px rgba(26,122,228,0.12);
}
.zl-item-review-form-wrap .zl-input[readonly] {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}
.zl-item-review-form-wrap textarea.zl-input {
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
}
.zl-item-review-form-wrap .zl-field-hint {
    display: block;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}
.zl-item-review-form-wrap .zl-hp-field { display: none !important; }
.zl-item-review-form-wrap .zl-reviewer-badge {
    font-size: 10px;
    background: #e8f4fd;
    color: #0c5460;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}
/* .zl-reviewer-badge also appears inside review list items, outside the
   form-wrap, so give it an unscoped fallback too. */
.zl-item-reviews-list .zl-reviewer-badge {
    font-size: 10px;
    background: #e8f4fd;
    color: #0c5460;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}
.zl-item-review-guest-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.5;
    margin-bottom: 14px;
}
.zl-item-review-guest-notice svg { flex-shrink: 0; margin-top: 2px; color: #d97706; }
.zl-item-review-guest-notice a { color: #1a7ae4; font-weight: 600; text-decoration: none; }

.zl-item-review-already-done {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #166534;
    font-weight: 600;
    font-size: 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 10px 12px;
}
.zl-item-review-already-done svg { flex-shrink: 0; color: #16a34a; }

/* Star rating input — button-based (own markup, not shared with Places'
   radio/label widget, to keep this section's JS fully self-contained). */
.zl-item-star-rating-input {
    display: flex;
    gap: 5px;
    margin: 2px 0;
}
.zl-item-star-btn {
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #d1d5db;
    background: none;
    border: none;
    padding: 0;
    transition: color .15s, transform .1s;
}
.zl-item-star-btn.zl-item-star-active { color: #f59e0b; transform: scale(1.1); }

.zl-item-review-msg {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}
.zl-item-review-msg.zl-msg-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.zl-item-review-msg.zl-msg-error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.zl-item-submit-review {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: #1a7ae4;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.zl-item-submit-review:hover { background: #155fc4; }
.zl-item-submit-review:active { transform: scale(.98); }
.zl-item-submit-review:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 600px) {
    .zl-item-review-header { flex-direction: column; align-items: flex-start; }
    .zl-item-review-stars  { margin-left: 0; }
    .zl-item-review-form-wrap { padding: 16px; }
    .zl-item-star-btn { font-size: 30px; }
}

/* ================================================================
   JIJI-STYLE SUBMIT FORM
   ================================================================ */

.zl-jiji-form {
    max-width: 780px;
    margin: 0 auto;
}

/* ── Seller identity section ── */
.zl-seller-identity-section {
    padding-bottom: 4px;
}
.zl-seller-identity-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.zl-seller-identity-avatar {
    flex-shrink: 0;
}
.zl-identity-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
}
.zl-seller-identity-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.zl-seller-identity-name {
    font-size: 15px;
    font-weight: 600;
    color: #1d2327;
    line-height: 1.3;
}
.zl-seller-identity-label {
    font-size: 12px;
    color: #9ca3af;
}
.zl-identity-field {
    margin-top: 0;
}
.zl-identity-select {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    color: #1d2327;
    cursor: pointer;
    appearance: auto;
}
.zl-identity-select:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}

/* Step indicator */
.zl-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 32px;
}
.zl-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #999;
    font-size: 14px;
    font-weight: 500;
}
.zl-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.zl-step.zl-step-active { color: #1a1a1a; }
.zl-step.zl-step-active .zl-step-num {
    background: #f97316;
    color: #fff;
}
.zl-step-divider {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin: 0 12px;
}

/* Category grid */
.zl-step-heading {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #1a1a1a;
}
.zl-step-sub {
    color: #6b7280;
    margin-bottom: 24px;
    font-size: 14px;
}
.zl-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.zl-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
    font-family: inherit;
}
.zl-cat-card:hover {
    border-color: #f97316;
    box-shadow: 0 4px 16px rgba(249,115,22,.15);
}
.zl-cat-icon { font-size: 32px; line-height: 1; }
.zl-cat-name { font-size: 13px; font-weight: 600; color: #374151; text-align: center; }

/* Selected category bar */
.zl-selected-cat-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
}
.zl-change-cat {
    background: none;
    border: none;
    color: #f97316;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 0;
}
.zl-change-cat:hover { text-decoration: underline; }
.zl-selected-cat-name { font-weight: 700; color: #1a1a1a; }


/* Progressive listing builder */
.zl-listing-stage { margin-bottom: 14px; transition: opacity .18s ease; }
.zl-listing-stage > .zl-form-section,
.zl-listing-stage > .zl-form-submit { position: relative; }
.zl-stage-locked { display: none; }
.zl-stage-locked .zl-form-section,
.zl-stage-locked .zl-form-submit { pointer-events: none; }
.zl-listing-stage:not(.zl-stage-locked) { animation: zlStageReveal .22s ease both; }
@keyframes zlStageReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.zl-stage-locked .zl-section-title,
.zl-stage-locked .zl-stage-kicker { color: #9ca3af; }
.zl-stage-collapsed > .zl-form-section { padding: 14px 18px; }
.zl-stage-collapsed > .zl-form-section > *:not(.zl-stage-heading),
.zl-stage-collapsed > .zl-form-submit > *:not(.zl-stage-heading) { display: none; }
.zl-stage-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.zl-stage-kicker { display:block; margin-bottom:3px; font-size:11px; line-height:1.2; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9ca3af; }
.zl-stage-heading .zl-section-title { margin-bottom:4px; padding-bottom:0; border-bottom:0; }
.zl-stage-heading .zl-section-hint { margin:0; max-width:560px; }
.zl-stage-status { flex:0 0 auto; margin-top:3px; padding:5px 9px; border-radius:999px; background:#f3f4f6; color:#6b7280; font-size:11px; font-weight:700; white-space:nowrap; }
.zl-stage-complete .zl-stage-status { background:#ecfdf3; color:#16803c; }
.zl-stage-complete .zl-stage-heading { cursor:pointer; }
.zl-stage-edit { display:none; margin-left:auto; padding:0; border:0; background:none; color:#f97316; font-size:13px; font-weight:700; cursor:pointer; }
.zl-stage-collapsed .zl-stage-edit { display:inline-flex; }
.zl-stage-continue { display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; padding:11px 17px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; color:#1f2937; font:600 14px/1.2 inherit; cursor:pointer; transition:background .15s,border-color .15s,transform .12s; }
.zl-stage-continue:hover { background:#fff7ed; border-color:#fdba74; transform:translateY(-1px); }
.zl-stage-continue span { color:#f97316; font-size:17px; }
.zl-form-context { margin-bottom:14px; }
.zl-form-context .zl-section-title { margin-bottom:4px; }
.zl-optional-subsection { padding:16px 0 4px; border-top:1px solid #f3f4f6; margin-top:12px; }
.zl-optional-subsection h4 { margin:0 0 5px; font-size:14px; color:#1f2937; }
.zl-optional-subsection h4 span { margin-left:6px; color:#9ca3af; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.zl-stage-submit-note { margin-top:0; }
@media (max-width:600px) {
  .zl-stage-heading { gap:10px; }
  .zl-stage-status { font-size:10px; padding:4px 7px; }
  .zl-stage-continue { width:100%; }
}

/* Form sections */
.zl-form-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 20px;
}
.zl-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}
.zl-section-hint {
    font-size: 13px;
    color: #6b7280;
    margin: -8px 0 16px;
}
.zl-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) { .zl-grid-2 { grid-template-columns: 1fr; } }

/* Dynamic fields */
.zl-dynamic-fields-wrap { margin-bottom: 16px; }
.zl-dynamic-field { margin-bottom: 14px; }
.zl-fields-loading { color: #6b7280; font-size: 13px; font-style: italic; }
.zl-field-error label { color: #dc2626; }
.zl-field-error input,
.zl-field-error select,
.zl-field-error textarea { border-color: #dc2626 !important; }

/* Submit row */
.zl-form-submit {
    text-align: center;
    padding: 8px 0 24px;
}
.zl-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f97316;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, transform .12s;
}
.zl-btn-submit:hover { background: #ea6c0a; transform: translateY(-1px); }
.zl-btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.zl-submit-note { font-size: 12px; color: #9ca3af; margin-top: 8px; text-align: justify; }

.zl-btn-preview {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 10px;
    transition: background .18s, border-color .18s;
}
.zl-btn-preview:hover { background: #f9fafb; border-color: #9ca3af; }

/* Checkbox inline */
.zl-checkbox-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}
.zl-req { color: #dc2626; margin-left: 2px; }

/* ================================================================
   SINGLE LISTING — Details table
   ================================================================ */

.zl-listing-details {
    margin-top: 28px;
}
.zl-details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.zl-details-table th,
.zl-details-table td {
    padding: 10px 14px;
    border: 1px solid #f3f4f6;
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word;
    word-break: break-word;
}
.zl-details-table th {
    width: 38%;
    background: #f9fafb;
    color: #6b7280;
    font-weight: 600;
}
.zl-details-table td { color: #1a1a1a; font-weight: 500; }
.zl-details-table tr:first-child th,
.zl-details-table tr:first-child td { border-top: none; }


/* ================================================================
   LOCATION — REGION BADGE + DISTRICT DROPDOWN
   ================================================================ */

.zl-location-region {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.zl-region-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #c2410c;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
}
.zl-location-region small {
    color: #9ca3af;
    font-size: 12px;
}
.zl-location-district select {
    width: 100%;
}

/* Single listing — region suffix in location pill */
.zl-loc-region {
    font-weight: 400;
    color: #9ca3af;
}

/* Title block meta row: location+time left, views right */
.zl-listing-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}
.zl-listing-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}
.zl-listing-location svg {
    flex-shrink: 0;
    color: #9ca3af;
}
.zl-listing-package-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #f97316;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 20px;
    padding: 2px 9px;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.zl-listing-views {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}
.zl-listing-views svg {
    flex-shrink: 0;
}
.zl-listing-time-ago {
    color: #9ca3af;
}

/* ===== PROMOTE YOUR LISTING ===== */
.zl-promote-section .zl-section-title { margin-bottom: 4px; }
.zl-promote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.zl-promote-card {
    position: relative;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 16px 16px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    transition: border-color .18s, box-shadow .18s;
    user-select: none;
    outline: none;
}
.zl-promote-card:hover {
    border-color: #6366f1;
    box-shadow: 0 2px 12px rgba(99,102,241,.12);
}
.zl-promote-card:focus-visible {
    box-shadow: 0 0 0 3px rgba(99,102,241,.3);
}
.zl-promote-card.zl-promote-selected {
    border-color: #6366f1;
    background: #f5f3ff;
    box-shadow: 0 4px 16px rgba(99,102,241,.15);
}
.zl-promote-badge-popular {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: #6366f1;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: .4px;
}
.zl-promote-icon { font-size: 28px; margin-bottom: 6px; }
.zl-promote-name {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}
.zl-promote-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin-bottom: 12px;
}
.zl-promote-amount {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
}
.zl-promote-amount.zl-promote-free { color: #16a34a; }
.zl-promote-currency { font-size: 14px; font-weight: 600; color: #374151; }
.zl-promote-cur-code { font-size: 12px; color: #9ca3af; align-self: flex-end; margin-bottom: 2px; }
.zl-promote-features {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    font-size: 12px;
    color: #4b5563;
    text-align: left;
}
.zl-promote-features li { padding: 2px 0; }
.zl-promote-check {
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #6366f1;
    color: #fff;
    margin: 0 auto;
}
.zl-promote-selected .zl-promote-check { display: flex; }
.zl-promote-warning {
    margin-top: 12px;
    font-size: 13px;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 8px 12px;
}
@media (max-width: 480px) {
    .zl-promote-grid { grid-template-columns: 1fr; }
}

/* ── Report button ────────────────────────────────────────────────── */

.zl-report-wrap {
    margin-top: 12px;
    text-align: center;
}
.zl-report-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.zl-report-btn:hover { color: #dc2626; background: #fef2f2; }
.zl-report-btn:disabled { opacity: .5; cursor: default; }

/* ── Report modal (shared modal styles for frontend) ─────────────── */

.zl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.zl-modal-box {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}
.zl-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px; border-bottom: 1px solid #e8eaf0;
}
.zl-modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; }
.zl-modal-close {
    background: none; border: none; font-size: 18px; line-height: 1;
    cursor: pointer; color: #6b7280; padding: 2px 6px; border-radius: 4px;
}
.zl-modal-close:hover { background: #f3f4f6; color: #111827; }
.zl-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.zl-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid #e8eaf0;
}

/* ── Report reasons radio list ───────────────────────────────────── */

.zl-report-reasons { display: flex; flex-direction: column; gap: 8px; }
.zl-report-reason-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: #374151; cursor: pointer;
    padding: 8px 10px; border-radius: 6px; border: 1px solid #e5e7eb;
    transition: border-color .15s, background .15s;
}
.zl-report-reason-label:hover { border-color: #9ca3af; background: #f9fafb; }
.zl-report-reason-label input { accent-color: #111827; }
.zl-dash-btn-danger {
    background: #dc2626; color: #fff; border: none;
    padding: 8px 16px; border-radius: 6px; font-size: 13px;
    font-weight: 600; cursor: pointer; transition: background .15s;
}
.zl-dash-btn-danger:hover { background: #b91c1c; }
.zl-dash-btn-danger:disabled { opacity: .6; cursor: default; }

/* ============================================================
   Wave 8 — Speed Perception Optimization
   ============================================================ */

/* ── Shared shimmer keyframe (reused everywhere) ──────────── */
@keyframes zl-skel-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.zl-skel {
    background: linear-gradient(90deg, #ececec 25%, #f8f8f8 50%, #ececec 75%);
    background-size: 800px 100%;
    animation: zl-skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
}

/* ── Listing card image placeholder (while <img> loads) ───── */
.zl-card-thumb {
    position: relative;
}
.zl-card-thumb-skel {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #ececec 25%, #f8f8f8 50%, #ececec 75%);
    background-size: 800px 100%;
    animation: zl-skel-shimmer 1.4s ease-in-out infinite;
    z-index: 1;
    transition: opacity .25s;
}
.zl-card-thumb-skel.zl-skel-done {
    opacity: 0;
    pointer-events: none;
}

/* ── Browse page skeleton cards ───────────────────────────── */
.zl-listing-card-skel {
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.zl-listing-card-skel .zl-skel-thumb {
    aspect-ratio: 4/3;
    background: linear-gradient(90deg, #ececec 25%, #f8f8f8 50%, #ececec 75%);
    background-size: 800px 100%;
    animation: zl-skel-shimmer 1.4s ease-in-out infinite;
}
.zl-listing-card-skel .zl-skel-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.zl-listing-card-skel .zl-skel-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ececec 25%, #f8f8f8 50%, #ececec 75%);
    background-size: 800px 100%;
    animation: zl-skel-shimmer 1.4s ease-in-out infinite;
}
.zl-listing-card-skel .zl-skel-line-title  { height: 14px; width: 80%; }
.zl-listing-card-skel .zl-skel-line-price  { height: 16px; width: 45%; }
.zl-listing-card-skel .zl-skel-line-meta   { height: 11px; width: 60%; }

/* ============================================================
   Wave 2 — Sticky "Create Listing" button (browse page, mobile)
   ============================================================ */

.zl-browse-sticky-cta {
    display: none; /* desktop: hidden */
}

@media (max-width: 768px) {
    .zl-browse-sticky-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        position: fixed;
        bottom: 20px;
        right: 16px;
        z-index: 900;
        background: #2563eb;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 15px;
        font-weight: 700;
        padding: 0 22px;
        height: 50px;
        border-radius: 25px;
        box-shadow: 0 4px 18px rgba(37,99,235,.42);
        transition: transform .2s, box-shadow .2s, width .25s, padding .25s;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        /* Safe area: sit above any system bottom bar */
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    .zl-browse-sticky-cta:active {
        transform: scale(.96);
    }

    /* The mobile bottom nav already carries a centre "+" Add Product button. Floating a second
       one at bottom:20px put it BEHIND the 58px nav (z-index 1000 > 900), so only its top half
       peeked out with no readable label. Hide it when the nav is present; if a site disables the
       nav, the pill stays and sits clear of the bottom edge. */
    body.zl-has-mobile-nav .zl-browse-sticky-cta {
        display: none;
    }

    /* Mini state: header CTA is visible — shrink to icon-only circle */
    .zl-browse-sticky-cta.zl-sticky-cta-mini {
        width: 50px;
        height: 50px;
        padding: 0;
        border-radius: 50%;
        font-size: 0; /* hide text */
        gap: 0;
    }
    .zl-browse-sticky-cta.zl-sticky-cta-mini span {
        font-size: 24px;
    }

    .zl-browse-sticky-cta span {
        font-size: 22px;
        font-weight: 300;
        line-height: 1;
    }
}

/* ============================================================
   Wave 2 — Upload error/recovery notices
   ============================================================ */

.zl-upload-notice {
    display: none;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 7px;
    margin: 10px 0;
    border-left: 4px solid transparent;
}
.zl-upload-notice--warn {
    background: #fffbeb;
    border-left-color: #f59e0b;
    color: #78350f;
}
.zl-upload-notice--error {
    background: #fef2f2;
    border-left-color: #ef4444;
    color: #991b1b;
}
.zl-upload-notice--ok {
    background: #f0fdf4;
    border-left-color: #22c55e;
    color: #14532d;
}
.zl-upload-notice a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* ── Mobile: larger tap area on upload zone ──────────────── */
@media (max-width: 600px) {
    .zl-image-upload-area {
        padding: 28px 16px;
    }
    .zl-upload-notice {
        font-size: 14px;
        padding: 12px 14px;
    }
}

/* ============================================================
   Wave 3 — AJAX filters + infinite scroll
   ============================================================ */

/* Grid loading overlay */
.zl-grid-loading {
    opacity: .45;
    pointer-events: none;
    transition: opacity .25s;
}

/* Infinite scroll sentinel (invisible) */
.zl-infinite-sentinel {
    height: 1px;
    visibility: hidden;
}

/* End-of-results message */
.zl-end-of-results {
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
    padding: 24px 0 12px;
    letter-spacing: .3px;
}

/* AJAX error message */
.zl-ajax-error {
    grid-column: 1 / -1;
    text-align: center;
    color: #dc2626;
    font-size: 14px;
    padding: 32px;
}

/* Hide classic pagination when JS is active */
.js .zl-pagination-noscript {
    display: none;
}

/* Animate newly appended cards in */
@keyframes zl-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.zl-listing-card {
    animation: zl-card-in .3s ease both;
}

/* ============================================================
   Wave 2 — Upload progress bar
   ============================================================ */

.zl-upload-progress {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s;
}
.zl-upload-progress--active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}
.zl-upload-progress-track {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}
.zl-upload-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 999px;
    transition: width .25s ease;
    position: relative;
}

/* Indeterminate shimmer after 100% upload while server processes */
.zl-upload-bar--indeterminate {
    width: 100% !important;
    transition: none;
    background-size: 200% 100%;
    background-image: linear-gradient(
        90deg,
        #2563eb 0%,
        #93c5fd 40%,
        #2563eb 80%
    );
    animation: zl-bar-shimmer 1.2s ease-in-out infinite;
}
@keyframes zl-bar-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.zl-upload-progress-label {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Mobile */
@media (max-width: 600px) {
    .zl-upload-progress-track {
        height: 8px;
    }
    .zl-upload-progress-label {
        font-size: 13px;
    }
}

/* ============================================================
   Wave 4 — Seller trust indicators on listing cards
   ============================================================ */

.zl-trust-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid #f3f4f6;
}

/* Verified badge */
.zl-trust-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #2563eb;
    padding: 2px 7px 2px 5px;
    border-radius: 20px;
    letter-spacing: .2px;
    white-space: nowrap;
}
.zl-trust-verified svg {
    stroke: #fff;
    flex-shrink: 0;
}

/* Star score */
.zl-trust-score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #374151;
    white-space: nowrap;
}
.zl-trust-stars {
    display: inline-flex;
    gap: 1px;
    line-height: 1;
}
.zl-star {
    font-size: 11px;
    line-height: 1;
}
.zl-star--full  { color: #f59e0b; }
.zl-star--half  { color: #fbbf24; opacity: .7; }
.zl-star--empty { color: #d1d5db; }
.zl-trust-score-num {
    font-weight: 600;
    font-size: 10px;
    color: #6b7280;
}

/* Active seller dot */
.zl-trust-active {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #059669;
    font-weight: 600;
    white-space: nowrap;
}
.zl-trust-active svg {
    fill: #10b981;
    flex-shrink: 0;
}

/* ── Social Share ────────────────────────────────────────────── */
.zl-social-share {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
    margin-bottom: 4px;
}
.zl-share-label {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 2px;
}
.zl-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity .15s;
}
.zl-share-btn:hover { opacity: .85; }
.zl-share-fb  { background: #1877f2; color: #fff !important; }
.zl-share-x   { background: #000;    color: #fff !important; }
.zl-share-wa  { background: #25d366; color: #fff !important; }
.zl-share-btn svg { flex-shrink: 0; }

/* ── Settings Log Out button ─────────────────────────────────── */
.zl-settings-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #dc2626 !important;
    border-color: #dc2626 !important;
    margin-top: 0;
}
.zl-settings-logout-btn:hover {
    background: #fef2f2 !important;
}
.zl-settings-logout-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* ── Log Out confirmation dialog ─────────────────────────────── */
body.zl-logout-modal-open { overflow: hidden; }
.zl-logout-modal[hidden] { display: none !important; }
.zl-logout-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.zl-logout-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}
.zl-logout-dialog {
    position: relative;
    width: min(100%, 430px);
    box-sizing: border-box;
    padding: 28px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
    text-align: center;
}
.zl-logout-dialog-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
}
.zl-logout-dialog-icon .dashicons { font-size: 22px; width: 22px; height: 22px; }
.zl-logout-dialog h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.3;
    color: #111827;
}
.zl-logout-dialog p {
    margin: 0 auto;
    max-width: 350px;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
}
.zl-logout-dialog-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}
.zl-logout-dialog-actions .zl-dash-btn { min-width: 105px; }
.zl-logout-confirm {
    color: #fff !important;
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}
.zl-logout-confirm:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}
.zl-logout-confirm:disabled { opacity: .7; cursor: wait; }
@media (max-width: 480px) {
    .zl-logout-dialog { padding: 24px 20px; }
    .zl-logout-dialog-actions { flex-direction: column-reverse; }
    .zl-logout-dialog-actions .zl-dash-btn { width: 100%; }
}

/* ===== Locked/embedded [zl_listings category=...] feed instances ===== */
.zl-embedded-feed {
    margin-bottom: 8px;
}
.zl-embedded-feed .zl-listings-grid {
    margin-bottom: 20px;
}
.zl-embedded-feed-more {
    display: flex;
    justify-content: center;
    margin: 4px 0 28px;
}
.zl-load-more-btn {
    display: none; /* revealed by JS only as a fallback when IntersectionObserver isn't supported */
    padding: 10px 28px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #444;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.zl-load-more-btn:hover:not(:disabled) { border-color: #7b68ee; color: #7b68ee; }
.zl-load-more-btn:disabled { opacity: .6; cursor: default; }
.zl-embedded-feed-empty {
    padding: 40px 20px;
}
.zl-embedded-feed-error {
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
    font-size: 14px;
}

/* Browse: "In stock only" toggle */
.zl-instock-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; white-space: nowrap; cursor: pointer; }

/* Owner/editor preview banner (single listing, non-public) */
.zl-preview-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
    margin: 0 0 18px; padding: 12px 16px;
    background: #fff7ed; border: 1.5px solid #fdba74; border-radius: 10px;
    color: #7c2d12; font-size: 14px; line-height: 1.5;
}
.zl-preview-banner__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 320px; min-width: 0; }
.zl-preview-banner__text strong { font-size: 15px; }
.zl-preview-banner__hint { opacity: .8; font-size: 13px; }
.zl-preview-banner__cta {
    display: inline-block; padding: 8px 14px; border-radius: 8px; white-space: nowrap;
    background: #c2410c; color: #fff !important; font-weight: 600; text-decoration: none;
}
.zl-preview-banner__cta:hover { background: #9a3412; }
.zl-listing-wrap button[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Service packages (submit form + listing page) ───────────────── */
.zl-packages { margin-top: 14px; padding: 12px; border: 1px dashed var(--zl-border, #d1d5db); border-radius: 8px; }
.zl-packages-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.zl-packages-hint { font-size: 12px; color: #6b7280; }
.zl-package-row { border: 1px solid var(--zl-border, #e5e7eb); border-radius: 8px; padding: 8px 12px 4px; margin: 0 0 10px; }
.zl-package-row legend { font-size: 12px; font-weight: 600; color: #374151; padding: 0 6px; }
.zl-packages-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.zl-package { border: 1px solid var(--zl-border, #e5e7eb); border-radius: 8px; padding: 10px 12px; background: #fff; }
.zl-package-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.zl-package-name { font-weight: 600; font-size: 14px; }
.zl-package-price { font-weight: 700; font-size: 15px; }
.zl-package-details { margin-top: 4px; font-size: 13px; color: #4b5563; line-height: 1.45; }
.zl-package-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: #6b7280; }
/* Phase 1 structured service requests */
.zl-package-request-trigger{margin-top:10px;border:1px solid #d1d5db;background:#fff;border-radius:8px;padding:7px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.zl-package-request-trigger:hover{background:#f9fafb}

/* Product variations / option-level inventory */
.zl-variations{margin-top:18px;padding:16px;border:1px solid #e5e7eb;border-radius:12px;background:#fafafa}
.zl-variations legend{padding:0 6px;font-weight:700;font-size:14px}
.zl-variation-group{margin-bottom:10px}
.zl-variation-generate{margin:4px 0 12px;padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;font-weight:600}
.zl-variation-table-wrap{overflow:auto}
.zl-variation-table{width:100%;border-collapse:collapse;font-size:12px;background:#fff}
.zl-variation-table th,.zl-variation-table td{padding:8px;border:1px solid #e5e7eb;text-align:left;vertical-align:middle}
.zl-variation-table th{font-weight:700;white-space:nowrap;background:#f9fafb}
.zl-variation-table input{width:100%;box-sizing:border-box;min-width:80px}
.zl-variation-total{margin:8px 0 0;font-size:12px;font-weight:600;color:#374151}

/* Buyer variant picker */
.zl-buy-variants{margin:10px 0 12px}
.zl-buy-box .zl-buy-variant-group{display:flex;align-items:center;gap:10px;margin:10px 0 0}
.zl-buy-box .zl-buy-variant-group label{margin:0!important;white-space:nowrap}
.zl-buy-box .zl-buy-variant-group select{width:auto;min-width:84px;max-width:220px;box-sizing:border-box;padding:9px 10px;border:1px solid #d1d5db;border-radius:8px;font:inherit;background:#fff}

/* ==== Commerce UI (owned by ZL_Commerce_UI; themes must not fork) ==== */
.zl-buy-box label{display:block;font-size:12.5px;font-weight:600;margin:8px 0 3px}
.zl-buy-box input,.zl-buy-box textarea,.zl-buy-box select{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid #d1d5db;border-radius:8px;font:inherit}
.zl-buy-box .zl-buy-submit{display:block;width:100%;margin-top:12px;padding:12px;border:0;border-radius:10px;background:#16a34a;color:#fff;font-weight:700;font-size:15px;text-align:center;text-decoration:none;cursor:pointer}
.zl-buy-box .zl-buy-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:8px;padding:8px 10px;font-size:13px;margin-bottom:6px}
.zl-buy-box .zl-buy-note{margin:8px 0 0;font-size:12px;color:#6b7280}
/* Buy box v2: [variants] Quantity + Buy now (eBay / Amazon / Etsy pattern) */
.zl-buy-box .zl-buy-qty-row{display:flex;align-items:center;gap:10px;margin:10px 0 0}
.zl-buy-box .zl-buy-qty-row label{margin:0;white-space:nowrap}
.zl-buy-box .zl-buy-qty-row select,.zl-buy-box .zl-buy-qty-row input{width:auto;min-width:84px;max-width:140px}
.zl-buy-box .zl-buy-submit.is-disabled,.zl-buy-box .zl-buy-submit:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.zl-buy-box .zl-buy-variant-group{flex-wrap:wrap}
.zl-buy-box .zl-buy-variant-group.has-error select{border-color:#dc2626;background:#fef2f2}
.zl-buy-box .zl-buy-variant-group.has-error label{color:#dc2626}
.zl-buy-box .zl-buy-variant-error{flex:0 0 100%;display:flex;align-items:center;gap:6px;color:#b91c1c;font-size:13px;line-height:1.3}
.zl-buy-box .zl-buy-variant-error[hidden]{display:none}
.zl-buy-box .zl-buy-variant-error::before{content:"!";flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:#dc2626;color:#fff;font-size:11px;font-weight:700;line-height:16px;text-align:center}
.zl-buy-dialog{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.zl-buy-dialog[hidden]{display:none}
.zl-buy-dialog__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.zl-buy-dialog__panel{position:relative;width:min(480px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.zl-buy-dialog__panel h2{margin:0 36px 10px 0;font-size:18px}
.zl-buy-dialog__close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:#6b7280}
.zl-buy-dialog .zl-buy-dialog__submit{margin-top:16px}
body.zl-buy-dialog-open{overflow:hidden}
@media(max-width:520px){.zl-buy-dialog{padding:10px}.zl-buy-dialog__panel{padding:20px}}
.zl-buy-custom-fields{margin:12px 0;padding:10px;border:1px solid #e5e7eb;border-radius:10px;background:#fafafa}.zl-buy-custom-fields h4{margin:0;font-size:14px}.zl-buy-custom-field{margin-top:9px}.zl-buy-custom-field label{display:block;font-size:12.5px;font-weight:600;margin:8px 0 3px}.zl-buy-custom-field input,.zl-buy-custom-field textarea,.zl-buy-custom-field select{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid #d1d5db;border-radius:8px;font:inherit;background:#fff}.zl-buy-custom-field .zl-checkbox-inline{font-weight:500}
.zl-request-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}.zl-request-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}.zl-request-modal-dialog{position:relative;width:min(560px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.25)}.zl-request-modal-close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:28px;cursor:pointer;color:#6b7280}.zl-request-modal-dialog h2{margin:0 35px 6px 0}.zl-request-subtitle{color:#6b7280;font-size:14px;line-height:1.5;margin:0 0 18px}.zl-request-modal-dialog label{display:block;font-size:13px;font-weight:600;color:#374151;margin:0 0 13px}.zl-request-modal-dialog textarea,.zl-request-modal-dialog input,.zl-request-modal-dialog select{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:10px 11px;border:1px solid #d1d5db;border-radius:9px;font:inherit;background:#fff}.zl-request-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.zl-request-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;padding:9px;border-radius:8px;margin:8px 0;font-size:13px}.zl-request-submit{width:100%;border:0;border-radius:10px;padding:12px;background:#111827;color:#fff;font-weight:700;cursor:pointer}.zl-request-submit:disabled{opacity:.6;cursor:wait}@media(max-width:520px){.zl-request-two-col{grid-template-columns:1fr}.zl-request-modal{padding:10px}.zl-request-modal-dialog{padding:20px}}
.zl-outofstock-notice{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:6px;padding:10px 12px;font-size:13px;line-height:1.5;margin-bottom:14px}
.zl-request-standalone .zl-contact-btn{width:100%}

/* Buyer questions editor (seller form). Matches the Product options box. */
.zl-buyer-inputs{display:block;margin:18px 0 0;padding:16px;border:1px solid #e5e7eb;border-radius:12px;background:#fafafa;min-width:0;box-sizing:border-box}
.zl-buyer-inputs legend{padding:0 6px;font-weight:700;font-size:14px;float:none;width:auto}
.zl-buyer-inputs .zl-section-hint{margin:0 0 14px}
.zl-buyer-input-row{margin:0 0 12px;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;align-items:end}
.zl-buyer-input-row .zl-field{margin-bottom:0}
.zl-buyer-input-row input[type="text"],.zl-buyer-input-row input[type="number"],.zl-buyer-input-row select{width:100%;box-sizing:border-box}
.zl-buyer-input-add,.zl-buyer-input-remove{padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;font:inherit;font-weight:600;color:#111827}
.zl-buyer-input-add:hover,.zl-buyer-input-remove:hover{background:#f9fafb}
.zl-buyer-input-add:disabled{opacity:.5;cursor:not-allowed}
.zl-buyer-input-remove{color:#b91c1c;border-color:#fecaca}


/* ── Mobile sticky buy / contact bar (single listing) ─────────────── */
.zl-sticky-bar { display: none; }
@media (max-width: 780px) {
    .zl-sticky-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900; /* below modals (99999) */
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
        transition: transform .2s ease, visibility .2s;
    }
    .zl-sticky-bar--hidden { transform: translateY(100%); visibility: hidden; }
    .zl-sticky-bar__price {
        min-width: 0;
        font-size: 17px;
        font-weight: 700;
        color: #111827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .zl-sticky-bar__btn {
        flex: 0 0 auto;
        border: 0;
        border-radius: 10px;
        padding: 12px 22px;
        background: #2563eb;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }
    /* Keep the footer and last section clear of the fixed bar. */
    .zl-listing-wrap--has-sticky { padding-bottom: 84px; }
}

/* ── Category-specific filters (browse) ─────────────────────────── */
.zl-field-filters { display: contents; }

/* ── Product card extras: price drop, rating, shop ─────────────── */
.zl-card-thumb { position: relative; }
.zl-card-drop-badge {
    position: absolute; top: 8px; left: 8px;
    background: #dc2626; color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1;
    padding: 4px 7px; border-radius: 6px;
}
.zl-card-price-was { font-size: 12px; font-weight: 400; color: #9ca3af; }
.zl-card-rating { font-size: 12px; font-weight: 600; color: #b45309; margin: 0 0 4px; }
.zl-card-rating-count { font-weight: 400; color: #6b7280; }
.zl-card-shop {
    font-size: 12px; color: #4b5563; margin: 0 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Gallery zoom view (single listing) ─────────────────────────── */
body.zl-lightbox-open { overflow: hidden; }
.zl-lightbox {
    position: fixed; inset: 0; z-index: 100001;
    background: rgba(0, 0, 0, .92);
    display: flex; align-items: center; justify-content: center;
}
.zl-lightbox-stage {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: auto;
}
.zl-lightbox-img {
    max-width: 100%; max-height: 100%;
    object-fit: contain; cursor: zoom-in;
    touch-action: pan-x pan-y pinch-zoom;
}
.zl-lightbox--zoomed .zl-lightbox-stage { align-items: flex-start; justify-content: flex-start; }
.zl-lightbox--zoomed .zl-lightbox-img { max-width: none; max-height: none; width: 220%; cursor: zoom-out; }
.zl-lightbox-close, .zl-lightbox-nav {
    position: absolute; z-index: 2;
    background: rgba(255, 255, 255, .15); color: #fff;
    border: 0; border-radius: 50%; cursor: pointer;
    width: 44px; height: 44px; font-size: 28px; line-height: 1;
}
.zl-lightbox-close { top: 12px; right: 12px; }
.zl-lightbox-nav { top: 50%; transform: translateY(-50%); }
.zl-lightbox-prev { left: 12px; }
.zl-lightbox-next { right: 12px; }
.zl-lightbox-count {
    position: absolute; top: 20px; left: 16px; z-index: 2;
    color: #fff; font-size: 14px;
}

/* ── Option picker (seller form) ─────────────────────────────── */
.zl-vg{margin:0 0 14px;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.zl-vg-head{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zl-vg-head .zl-field select,.zl-vg-head .zl-field input{width:100%}
.zl-vg-label{margin:10px 0 6px;font-size:12px;color:#6b7280}
.zl-vg-chips{display:flex;flex-wrap:wrap;gap:6px}
.zl-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #d1d5db;border-radius:999px;background:#fff;font-size:13px;line-height:1.2;cursor:pointer}
.zl-chip:hover{border-color:#9ca3af}
.zl-chip.is-on{border-color:#111;background:#111;color:#fff}
.zl-chip-dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.25);flex:none}
.zl-vg-add{display:flex;gap:6px;align-items:center;margin-top:10px}
.zl-vg-add-input{flex:1;min-width:0}
.zl-vg-add-color{width:38px;height:34px;padding:2px;border:1px solid #d1d5db;border-radius:6px;background:#fff}
.zl-vg-add-btn{padding:7px 14px;border:1px solid #111;border-radius:8px;background:#fff;cursor:pointer}
.zl-vg-photo-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.zl-vg-photo-label{display:inline-flex;align-items:center;gap:6px;min-width:90px;font-size:13px;font-weight:600}
.zl-vg-thumbs{display:flex;flex-wrap:wrap;gap:6px}
.zl-vg-thumb{width:44px;height:44px;padding:0;border:2px solid transparent;border-radius:8px;background:#f3f4f6;overflow:hidden;cursor:pointer}
.zl-vg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.zl-vg-thumb--none{width:auto;padding:0 10px;font-size:12px;color:#374151}
.zl-vg-thumb.is-on{border-color:#111}
@media (max-width:560px){.zl-vg-head{grid-template-columns:1fr}}

/* ── Buy box helpers ─────────────────────────────────────────── */
.zl-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
.zl-buy-box .zl-buy-variant-group .zl-dd{position:relative;flex:1 1 220px;min-width:0;max-width:360px}
.zl-dd__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#111;font:inherit;text-align:left;cursor:pointer}
.zl-dd__trigger:hover{border-color:#6b7280}
.zl-dd__trigger:focus-visible,.zl-dd__list:focus-visible{outline:2px solid #111;outline-offset:2px}
.zl-dd:not(.has-value) .zl-dd__text{color:#6b7280}
.zl-dd__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zl-dd__caret{flex:0 0 auto;width:8px;height:8px;border-right:2px solid #374151;border-bottom:2px solid #374151;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.zl-dd.is-open .zl-dd__caret{transform:rotate(-135deg) translateY(-2px)}
.zl-dd__list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px 0;list-style:none;max-height:340px;overflow-y:auto;background:#fff;border:1px solid #d1d5db;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.16)}
.zl-dd__list[hidden]{display:none}
.zl-dd__opt{display:flex;align-items:center;gap:12px;padding:8px 12px;cursor:pointer;color:#111}
.zl-dd__opt.is-active{background:#f3f4f6}
.zl-dd__thumb{flex:0 0 auto;width:44px;height:44px;border-radius:6px;object-fit:cover;background:#f3f4f6;border:1px solid #e5e7eb}
.zl-dd__dot{flex:0 0 auto;width:28px;height:28px;margin:0 8px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.zl-dd__label{flex:1;min-width:0;font-size:14px;line-height:1.35}
.zl-dd__note{color:#b91c1c;font-size:13px}
.zl-dd__badge{display:block;margin-top:2px;color:#b91c1c;font-size:12px;font-weight:700;line-height:1.3}
.zl-dd__badge[hidden]{display:none}
.zl-dd__tick{flex:0 0 auto;width:14px;height:14px}
.zl-dd__opt.is-on .zl-dd__tick::after{content:"";display:block;width:6px;height:11px;margin:0 auto;border-right:2px solid #111;border-bottom:2px solid #111;transform:rotate(45deg) translate(-1px,-3px)}
.zl-dd__opt.is-on .zl-dd__label{font-weight:600}
.zl-dd__opt.is-out{cursor:not-allowed;color:#9ca3af}
.zl-dd__opt.is-out .zl-dd__thumb,.zl-dd__opt.is-out .zl-dd__dot{opacity:.45}
.zl-buy-box .zl-buy-variant-group.has-error .zl-dd__trigger{border-color:#dc2626;background:#fef2f2}

/* Colour swatches and option filters in the browse filter bar */
.zl-ofs-group{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;padding:4px 6px}
.zl-ofs-label{font-size:12px;color:#6b7280;margin-right:2px}
.zl-ofs{position:relative;display:inline-flex;cursor:pointer}
.zl-ofs input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.zl-ofs-dot{width:26px;height:26px;border-radius:50%;background:var(--zl-swatch,#d1d5db);border:1px solid rgba(0,0,0,.25);box-sizing:border-box}
.zl-ofs-any{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid #d1d5db;border-radius:999px;font-size:12px;background:#fff}
.zl-ofs input:checked + .zl-ofs-dot{box-shadow:0 0 0 2px #fff,0 0 0 4px #111}
.zl-ofs input:checked + .zl-ofs-any{border-color:#111;background:#111;color:#fff}
.zl-ofs input:focus-visible + .zl-ofs-dot,.zl-ofs input:focus-visible + .zl-ofs-any{outline:2px solid #2563eb;outline-offset:2px}
.zl-stage-attention { animation: zl-stage-pulse .8s ease; border-color:#f97316 !important; background:#fffaf5; }
@keyframes zl-stage-pulse { 0%,100% { box-shadow:none; } 50% { box-shadow:0 0 0 4px rgba(249,115,22,.12); } }

/* ============================================================
   Modern listing builder — clean, minimal ecommerce interface
   ============================================================ */
.zl-submit-wrap.zl-jiji-form { max-width: 820px; margin-left:auto; margin-right:auto; }
.zl-listing-builder-grid { display:block; }
.zl-listing-builder-main { min-width:0; }
.zl-builder-progress { margin:0 0 22px; padding:0 0 12px; background:transparent; border:0; border-bottom:1px solid #eceff1; }
.zl-builder-progress-track { display:flex; align-items:center; gap:8px; }
.zl-progress-step { display:inline-flex; align-items:center; gap:7px; min-width:0; padding:4px 2px; border:0; background:transparent; color:#a0a7ad; font:600 12px/1.2 inherit; cursor:default; white-space:nowrap; }
.zl-progress-step.is-active { color:#20252b; }
.zl-progress-step.is-complete { color:#16803c; cursor:pointer; }
.zl-progress-step.is-complete:hover { color:#126b32; }
.zl-progress-dot { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#f1f3f4; color:#6b7280; font-size:10px; font-weight:800; flex:0 0 22px; }
.zl-progress-step.is-active .zl-progress-dot { background:#f97316; color:#fff; box-shadow:none; }
.zl-progress-step.is-complete .zl-progress-dot { background:#ecfdf3; color:#16803c; }
.zl-progress-line { height:1px; flex:1; min-width:8px; background:#e5e7eb; }
.zl-listing-stage:not(.zl-stage-collapsed) > .zl-form-section { box-shadow:none; }
.zl-listing-stage.zl-stage-collapsed > .zl-form-section { border-color:#edf0f2; box-shadow:none; }
.zl-stage-collapsed .zl-stage-heading { align-items:center; }
.zl-stage-collapsed .zl-stage-kicker { margin-bottom:1px; }
.zl-stage-collapsed .zl-section-title { font-size:14px; }
.zl-stage-collapsed .zl-stage-status { margin-left:auto; }
.zl-selected-cat-bar { background:#f8fafc; border-color:#e5e7eb; }
.zl-change-cat { color:#f97316; }
@media (max-width: 900px) {
  .zl-submit-wrap.zl-jiji-form { max-width:760px; }
}
@media (max-width: 620px) {
  .zl-builder-progress { top:0; margin-left:-2px; margin-right:-2px; border-radius:0 0 12px 12px; }
  .zl-builder-progress-track { gap:3px; }
  .zl-progress-step { flex:1; justify-content:center; gap:4px; font-size:0; }
  .zl-progress-dot { width:26px; height:26px; flex-basis:26px; font-size:11px; }
  .zl-progress-line { min-width:4px; }
  .zl-form-section { padding:20px; }
}

/* ============================================================
   Listing wizard — one stage at a time (matches category steps)
   Clean surface, generous spacing, readable type.
   ============================================================ */
.zl-submit-wrap.zl-jiji-form { max-width: 680px; }

/* Progress: quiet, clickable once a stage has been reached */
.zl-builder-progress { margin: 0 0 32px; padding: 0 0 16px; }
.zl-progress-step { cursor: default; opacity: 1; }
.zl-progress-step.is-reachable { cursor: pointer; }
.zl-progress-step.is-reachable:not(.is-active):hover { color: #20252b; }

/* Stage panel = bare surface, no card chrome */
.zl-wizard .zl-listing-stage,
.zl-listing-stage { margin-bottom: 0; }
.zl-listing-stage > .zl-form-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
.zl-listing-stage.zl-stage-current,
.zl-wizard .zl-listing-stage:not(.zl-stage-locked) { animation: zlStageReveal .2s ease both; }

/* Heading — same rhythm as .zl-step-heading / .zl-step-sub */
.zl-stage-heading { display: block; margin-bottom: 28px; }
.zl-stage-kicker {
    display: block; margin: 0 0 8px;
    font-size: 12px; line-height: 1.3; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: #9ca3af;
}
.zl-stage-heading .zl-section-title {
    margin: 0 0 8px; padding: 0; border: 0;
    font-size: 22px; line-height: 1.3; font-weight: 700; color: #1a1a1a;
}
.zl-stage-heading .zl-section-hint {
    margin: 0; max-width: none;
    font-size: 14px; line-height: 1.6; color: #6b7280;
}
.zl-stage-status, .zl-stage-edit { display: none !important; }

/* Fields: label above, comfortable gap, roomy inputs */
.zl-listing-stage .zl-field { gap: 8px; margin-bottom: 24px; }
.zl-listing-stage .zl-field:last-child { margin-bottom: 0; }
.zl-listing-stage .zl-field > label {
    font-size: 14px; line-height: 1.4; font-weight: 600; color: #1f2937;
}
.zl-listing-stage .zl-field input[type="text"],
.zl-listing-stage .zl-field input[type="email"],
.zl-listing-stage .zl-field input[type="tel"],
.zl-listing-stage .zl-field input[type="number"],
.zl-listing-stage .zl-field input[type="url"],
.zl-listing-stage .zl-field select,
.zl-listing-stage .zl-field textarea {
    padding: 12px 14px; min-height: 46px;
    font-size: 15px; line-height: 1.5;
    background: #fff; border: 1px solid #d1d5db; border-radius: 10px;
}
.zl-listing-stage .zl-field textarea { min-height: 150px; }
.zl-listing-stage .zl-field input:focus,
.zl-listing-stage .zl-field select:focus,
.zl-listing-stage .zl-field textarea:focus {
    border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.14);
}
.zl-listing-stage .zl-field small,
.zl-price-offer-hint { display: block; font-size: 13px; line-height: 1.5; color: #6b7280; }
.zl-listing-stage .zl-checkbox-inline { margin-top: 4px !important; gap: 10px; font-size: 14px; color: #374151; }
.zl-dynamic-fields-wrap { margin: 0 0 24px; }
.zl-dynamic-field { margin-bottom: 24px; }
.zl-char-count { align-self: flex-end; font-size: 12px; color: #9ca3af; }

/* Photos */
.zl-listing-stage .zl-image-upload-area { padding: 40px 24px; border-radius: 12px; background: #fafafa; }
.zl-listing-stage .zl-image-upload-area:hover,
.zl-listing-stage .zl-image-upload-area.zl-drag-over { border-color: #f97316; background: #fff7ed; }
.zl-upload-placeholder p { margin: 8px 0 6px; font-size: 15px; font-weight: 600; color: #374151; }
.zl-upload-placeholder span { font-size: 13px; color: #6b7280; }
.zl-listing-stage .zl-image-previews { gap: 12px; }

/* Location */
.zl-location-region { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.zl-region-badge { font-size: 14px; font-weight: 600; color: #1f2937; }

/* Optional sub-sections */
.zl-optional-subsection { padding: 24px 0 0; margin-top: 24px; border-top: 1px solid #f0f1f3; }
.zl-optional-subsection:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.zl-optional-subsection h4 { margin: 0 0 6px; font-size: 16px; line-height: 1.4; font-weight: 700; color: #1a1a1a; }
.zl-optional-subsection .zl-section-hint { margin: 0 0 18px; font-size: 14px; line-height: 1.6; }
.zl-grid-2 { gap: 20px; }

/* Post-as identity block, shown on the first stage only */
.zl-form-context.zl-form-section {
    background: #f9fafb; border: 1px solid #eceff1; border-radius: 12px;
    padding: 16px 18px; margin: 0 0 28px;
}
.zl-form-context .zl-section-title { margin: 0 0 4px; padding: 0; border: 0; font-size: 14px; }
.zl-form-context .zl-section-hint { margin: 0 0 12px; }

/* Navigation row: Back (quiet) · Continue (primary) */
.zl-stage-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 36px; padding-top: 20px; border-top: 1px solid #f0f1f3;
}
.zl-stage-back {
    background: none; border: 0; padding: 8px 0; cursor: pointer;
    font: 600 14px/1.2 inherit; color: #f97316;
}
.zl-stage-back:hover { text-decoration: underline; }
.zl-listing-stage .zl-stage-continue {
    margin: 0; padding: 13px 26px; border: 0; border-radius: 10px;
    background: #f97316; color: #fff;
    font: 700 15px/1.2 inherit; gap: 10px;
}
.zl-listing-stage .zl-stage-continue span { color: #fff; font-size: 17px; }
.zl-listing-stage .zl-stage-continue:hover { background: #ea6c0a; border: 0; transform: translateY(-1px); }

/* Review stage */
.zl-review-list { margin: 0 0 28px; border: 1px solid #eceff1; border-radius: 12px; background: #fff; }
.zl-review-row {
    display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: baseline;
    padding: 16px 18px; border-bottom: 1px solid #f0f1f3;
}
.zl-review-row:last-child { border-bottom: 0; }
.zl-review-row dt { margin: 0; font-size: 13px; font-weight: 600; color: #6b7280; }
.zl-review-row dd {
    margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-size: 15px; line-height: 1.5; color: #1a1a1a; word-break: break-word;
}
.zl-review-row dd .is-empty { color: #9ca3af; }
.zl-review-change { background: none; border: 0; padding: 0; cursor: pointer; font: 600 13px/1.2 inherit; color: #f97316; flex: 0 0 auto; }
.zl-review-change:hover { text-decoration: underline; }
.zl-review-section.zl-form-section { margin-bottom: 0; }
.zl-wizard #zl-stage-submit .zl-form-submit { text-align: left; padding: 0; }
.zl-wizard #zl-stage-submit .zl-form-submit .zl-btn-preview,
.zl-wizard #zl-stage-submit .zl-form-submit .zl-btn-submit { margin: 0 10px 0 0; }
.zl-submit-note { margin-top: 16px; font-size: 13px; line-height: 1.6; color: #6b7280; text-align: left; }
.zl-stage-nav-final { margin-top: 24px; justify-content: flex-start; }

@media (max-width: 620px) {
    .zl-builder-progress { margin-bottom: 24px; }
    .zl-stage-heading { margin-bottom: 22px; }
    .zl-stage-heading .zl-section-title { font-size: 20px; }
    .zl-listing-stage .zl-field input[type="text"],
    .zl-listing-stage .zl-field input[type="email"],
    .zl-listing-stage .zl-field input[type="tel"],
    .zl-listing-stage .zl-field input[type="number"],
    .zl-listing-stage .zl-field input[type="url"],
    .zl-listing-stage .zl-field select,
    .zl-listing-stage .zl-field textarea { font-size: 16px; } /* stops iOS zoom-on-focus */
    .zl-stage-nav { margin-top: 28px; }
    .zl-listing-stage .zl-stage-continue { flex: 1; }
    .zl-review-row { grid-template-columns: 1fr; gap: 4px; }
    .zl-wizard #zl-stage-submit .zl-form-submit .zl-btn-preview,
    .zl-wizard #zl-stage-submit .zl-form-submit .zl-btn-submit { width: 100%; justify-content: center; margin: 0 0 10px; }
}

/* Hard rule: in the wizard only the current stage is ever visible. */
.zl-wizard .zl-listing-stage { display: none !important; }
.zl-wizard .zl-listing-stage.zl-stage-current { display: block !important; }

/* ── Buy-now modal: fix clipping / wrong positioning ──────────────────
   The dialog lives inside .zl-buy-box, which is also a .zl-listing-card.
   That class has `animation: zl-card-in ... both` (leaves a transform
   applied → becomes the containing block for position:fixed children)
   and `overflow:hidden` (clips them). Either one traps the modal inside
   the card instead of the viewport, so neutralise both on the buy box. */
.zl-buy-box.zl-listing-card,
.zl-buy-box.zl-listing-card:hover {
    animation: none;
    transform: none;
    filter: none;
    overflow: visible;
}
.zl-buy-dialog {
    overscroll-behavior: contain;
    align-items: center;
}
.zl-buy-dialog__panel {
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    -webkit-overflow-scrolling: touch;
}
.zl-buy-dialog__panel input,
.zl-buy-dialog__panel select,
.zl-buy-dialog__panel textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 44px;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background-color: #fff;
    font: inherit;
    font-size: 16px; /* prevents iOS zoom on focus */
    line-height: 1.3;
}
.zl-buy-dialog__panel textarea { min-height: 88px; resize: vertical; }
.zl-buy-dialog__panel label { display: block; margin: 10px 0 4px; }
.zl-buy-dialog__panel .zl-buy-dialog__submit { margin-top: 8px; }
@media (max-width: 520px) {
    .zl-buy-dialog { padding: 10px; }
    .zl-buy-dialog__panel { padding: 18px 16px; border-radius: 14px; }
}

/* ============================================================
   Zilideon mobile seller product creation
   App-like form treatment: single-column, no preview sidebar,
   touch-friendly controls and a compact sticky action area.
   ============================================================ */
@media (max-width: 767px) {
  .zl-submit-wrap.zl-jiji-form {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 14px 92px;
    box-sizing: border-box;
  }
  .zl-submit-wrap.zl-jiji-form .zl-builder-progress {
    margin: 0 -14px 22px;
    padding: 10px 14px 12px;
    background: #fff;
    border-bottom: 1px solid #eceff1;
  }
  .zl-submit-wrap.zl-jiji-form .zl-progress-step { min-height: 30px; }
  .zl-submit-wrap.zl-jiji-form .zl-stage-heading { margin-bottom: 20px; }
  .zl-submit-wrap.zl-jiji-form .zl-stage-kicker { font-size: 11px; }
  .zl-submit-wrap.zl-jiji-form .zl-stage-heading .zl-section-title { font-size: 21px; }
  .zl-submit-wrap.zl-jiji-form .zl-stage-heading .zl-section-hint { font-size: 13px; line-height: 1.55; }
  .zl-submit-wrap.zl-jiji-form .zl-listing-stage .zl-field { margin-bottom: 20px; }
  .zl-submit-wrap.zl-jiji-form .zl-listing-stage .zl-field > label { font-size: 14px; }
  .zl-submit-wrap.zl-jiji-form .zl-cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .zl-submit-wrap.zl-jiji-form .zl-cat-card {
    min-height: 92px;
    padding: 14px 8px;
    border-width: 1px;
    border-radius: 12px;
  }
  .zl-submit-wrap.zl-jiji-form .zl-cat-icon { font-size: 27px; }
  .zl-submit-wrap.zl-jiji-form .zl-cat-name { font-size: 12px; }
  .zl-submit-wrap.zl-jiji-form .zl-selected-cat-bar { margin-bottom: 18px; }
  .zl-submit-wrap.zl-jiji-form .zl-listing-stage .zl-image-upload-area {
    padding: 30px 16px;
    min-height: 150px;
    box-sizing: border-box;
  }
  .zl-submit-wrap.zl-jiji-form .zl-stage-nav {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 24px -14px -92px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    border-top: 1px solid #e9ecef;
    box-shadow: 0 -8px 22px rgba(17,24,39,.06);
    backdrop-filter: blur(10px);
  }
  .zl-submit-wrap.zl-jiji-form .zl-stage-nav .zl-stage-continue {
    min-height: 48px;
    border-radius: 11px;
  }
  .zl-submit-wrap.zl-jiji-form .zl-stage-back { min-height: 44px; }
  .zl-submit-wrap.zl-jiji-form .zl-review-list { border-radius: 11px; }
}