/* Kit Exchange Plugin Styles */

/* ===== Layout ===== */
.ke-wrap { max-width: var(--ke-max-width, 1200px); margin: 0 auto; padding: 20px; font-family: inherit; }
.ke-actions-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }

/* ===== Buttons ===== */
.ke-btn { display: inline-block; padding: 9px 18px; border-radius: 5px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: background .15s, opacity .15s; }
.ke-btn-primary  { background: #2271b1; color: #fff; }
.ke-btn-primary:hover { background: #135e96; color: #fff; }
.ke-btn-secondary { background: #f0f0f1; color: #2c3338; border: 1px solid #c3c4c7; }
.ke-btn-secondary:hover { background: #dcdcde; }
.ke-btn-warning  { background: #d63638; color: #fff; }
.ke-btn-warning:hover { background: #b32d2e; }
.ke-btn-ghost    { background: transparent; color: #2271b1; border: 1px solid #2271b1; }
.ke-btn-ghost:hover { background: #f0f6fc; }
.ke-btn-link     { background: none; border: none; color: #2271b1; cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0; }
.ke-unread-badge { background: #d63638; color: #fff; border-radius: 12px; padding: 3px 10px; font-size: 12px; font-weight: 700; }

/* ===== Filters ===== */
.ke-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; align-items: center; }
.ke-search-input, .ke-select { padding: 8px 12px; border: 1px solid #c3c4c7; border-radius: 4px; font-size: 14px; min-width: 160px; }
.ke-search-input { flex: 1; min-width: 220px; }

/* ===== Listings list ===== */
.ke-grid { display: block; margin-bottom: 24px; }
.ke-loading { text-align: center; padding: 40px; color: #787c82; }
.ke-no-results { text-align: center; padding: 40px; color: #787c82; }

/* ===== Card — horizontal 25/75 row ===== */
.ke-listing-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; margin-bottom: 12px; transition: box-shadow .2s; }
.ke-listing-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.ke-card-link { text-decoration: none; color: inherit; display: table; width: 100%; }
.ke-no-link { cursor: default; }
.ke-thumb-wrap { display: table-cell; width: 25%; position: relative; background: #f0f0f1; overflow: hidden; vertical-align: top; }
.ke-thumb { display: block; width: 100%; height: 100%; max-height: var(--ke-thumb-max-height, 120px); object-fit: cover; }
.ke-greyscale { filter: grayscale(100%); }
.ke-sold-badge { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 3px; letter-spacing: .05em; }
.ke-card-body { display: table-cell; width: 75%; padding: 14px 16px; vertical-align: top; }
.ke-card-title { font-size: 15px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; }
.ke-card-excerpt { font-size: 13px; color: #50575e; margin: 0 0 10px; line-height: 1.5; }
.ke-card-meta { font-size: 12px; color: #787c82; }
.ke-card-cat { display: inline-block; font-size: 11px; background: #f0f0f1; border-radius: 3px; padding: 2px 7px; margin-right: 6px; }
.ke-card-price { font-size: 14px; font-weight: 700; color: #2271b1; margin-right: 6px; }
.ke-card-date { font-size: 11px; color: #787c82; }
.ke-status-sold .ke-card-body { opacity: .75; }

@media (max-width: 540px) {
    .ke-card-link  { display: block; }
    .ke-thumb-wrap { display: block; width: 100%; height: 180px; }
    .ke-card-body  { display: block; width: 100%; box-sizing: border-box; }
}

/* ===== Pagination ===== */
.ke-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; }
.ke-page-info { font-size: 13px; color: #787c82; }

/* ===== Form ===== */
.ke-form-wrap { background: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; padding: 24px; margin-bottom: 32px; }
.ke-form-wrap h3 { margin-top: 0; }
.ke-field { margin-bottom: 18px; }
.ke-field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.ke-field input[type=text], .ke-field textarea, .ke-field select { width: 100%; padding: 8px 10px; border: 1px solid #c3c4c7; border-radius: 4px; font-size: 14px; box-sizing: border-box; }
.ke-field textarea { resize: vertical; }
.ke-field-hint { font-size: 12px; color: #787c82; }
.ke-required { color: #d63638; }
.ke-form-actions { display: flex; gap: 10px; margin-top: 20px; }
.ke-form-message { padding: 10px 14px; border-radius: 4px; font-size: 13px; margin-top: 12px; }
.ke-form-message.ke-success { background: #edfaef; border: 1px solid #4ab866; color: #1a7a30; }
.ke-form-message.ke-error   { background: #fef0f0; border: 1px solid #f87171; color: #b91c1c; }

/* ===== Photo grid ===== */
.ke-photo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ke-photo-thumb { position: relative; }
.ke-photo-thumb img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid #ddd; }
.ke-photo-delete { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; background: #d63638; color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 20px; text-align: center; padding: 0; }

/* ===== Single Listing ===== */
.ke-single-wrap .ke-breadcrumb { margin-bottom: 16px; font-size: 13px; }
.ke-single-wrap .ke-breadcrumb a { color: #2271b1; text-decoration: none; }
.ke-single-listing { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 768px) { .ke-single-listing { grid-template-columns: 1fr; } }

.ke-gallery-main img { width: 100%; border-radius: 8px; max-height: 420px; object-fit: cover; }
.ke-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ke-gallery-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; border: 2px solid transparent; cursor: pointer; }
.ke-gallery-thumb.active { border-color: #2271b1; }

.ke-single-title { font-size: 24px; margin-top: 0; }
.ke-status-banner { padding: 10px 16px; border-radius: 4px; font-weight: 600; margin-bottom: 14px; }
.ke-banner-sold     { background: #fef9e7; border: 1px solid #f0ad4e; color: #856404; }
.ke-banner-archived { background: #f0f0f1; border: 1px solid #c3c4c7; color: #50575e; }

.ke-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.ke-price { font-size: 22px; font-weight: 700; color: #2271b1; }
.ke-category { background: #f0f0f1; border-radius: 3px; padding: 3px 10px; font-size: 12px; }
.ke-date { font-size: 12px; color: #787c82; }

.ke-description { border-top: 1px solid #eee; padding-top: 16px; line-height: 1.7; font-size: 15px; }

/* ===== Owner Actions ===== */
.ke-owner-actions { background: #f9f9f9; border: 1px solid #ddd; border-radius: 6px; padding: 16px; margin-top: 24px; }
.ke-owner-actions h3 { margin-top: 0; font-size: 15px; }
.ke-status-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* ===== Messages ===== */
.ke-message-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid #eee; }
.ke-message-section h3 { margin-top: 0; }
.ke-thread-wrap { margin-bottom: 16px; }
.ke-message { background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 6px; padding: 12px 16px; margin-bottom: 10px; }
.ke-message.ke-mine { background: #eef6fb; border-color: #bee3f8; }
.ke-message.ke-unread { border-left: 3px solid #2271b1; }
.ke-msg-sender { font-weight: 700; font-size: 13px; }
.ke-msg-body { margin: 6px 0; font-size: 14px; }
.ke-msg-time { font-size: 11px; color: #787c82; }
.ke-message-form textarea { width: 100%; padding: 10px; border: 1px solid #c3c4c7; border-radius: 4px; font-size: 14px; resize: vertical; box-sizing: border-box; margin-bottom: 10px; }

/* ===== Login notice ===== */
.ke-login-notice { font-size: 14px; color: #50575e; padding: 14px; background: #f9f9f9; border-radius: 4px; border: 1px solid #ddd; }

/* ===== Card unread badge ===== */
.ke-card-unread-badge { display: inline-block; background: #d63638; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px; vertical-align: middle; margin-left: 6px; }

/* ===== Message thread ===== */
.ke-msg-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }

/* ===== Dashboard ===== */
.ke-dashboard-wrap { max-width: 1100px; }
.ke-dash-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #e0e0e0; }
.ke-dash-header .ke-dash-title { margin: 0 0 6px; font-size: 22px; }
.ke-dash-welcome { margin: 0; color: #50575e; font-size: 14px; }
.ke-dash-section { margin-bottom: 32px; }
.ke-dash-section h3 { font-size: 16px; margin-bottom: 12px; }
.ke-dash-count { font-size: 13px; font-weight: normal; color: #787c82; }
.ke-dash-table-wrap { overflow-x: auto; }
.ke-dash-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ke-dash-table th { background: #f0f0f1; text-align: left; padding: 10px 12px; border-bottom: 2px solid #ddd; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #50575e; }
.ke-dash-table td { padding: 10px 12px; border-bottom: 1px solid #eee; vertical-align: middle; }
.ke-dash-table tr:last-child td { border-bottom: none; }
.ke-dash-table tr:hover td { background: #fafafa; }
.ke-dash-status-archived td { opacity: .65; }
.ke-dash-th-thumb { width: 70px; }
.ke-dash-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; border: 1px solid #ddd; }
.ke-dash-no-thumb { font-size: 11px; color: #aaa; }
.ke-dash-title strong { display: block; margin-bottom: 2px; }
.ke-dash-title small { color: #787c82; }
.ke-dash-title .ke-dash-mobile-meta { display: none; }
.ke-dash-price { font-weight: 700; white-space: nowrap; }
.ke-dash-date { white-space: nowrap; color: #787c82; font-size: 12px; }
.ke-dash-empty { text-align: center; padding: 32px; color: #787c82; font-style: italic; }

@media (max-width: 700px) {
    .ke-dash-th-price,
    .ke-dash-th-status,
    .ke-dash-th-date,
    .ke-dash-price,
    .ke-dash-status,
    .ke-dash-date { display: none; }

    /* Stacked meta injected under the title cell */
    .ke-dash-title .ke-dash-mobile-meta { display: block; margin-top: 5px; }
    .ke-dash-title .ke-dash-mobile-meta .ke-dash-m-price { font-weight: 700; margin-right: 8px; }
    .ke-dash-title .ke-dash-mobile-meta .ke-dash-m-status { margin-right: 8px; }
    .ke-dash-title .ke-dash-mobile-meta .ke-dash-m-date { color: #787c82; font-size: 11px; display: block; margin-top: 3px; }
}
.ke-dash-actions { white-space: normal; min-width: 120px; }
.ke-dash-actions .ke-btn { font-size: 12px; padding: 6px 10px; margin: 2px 2px 2px 0; display: inline-block; }
.ke-btn-danger { background: transparent; color: #d63638; border: 1px solid #d63638; }
.ke-btn-danger:hover { background: #fef0f0; }
.ke-status-pill { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.ke-pill-active   { background: #edfaef; color: #1a7a30; border: 1px solid #4ab866; }
.ke-pill-sold     { background: #fef9e7; color: #856404; border: 1px solid #f0ad4e; }
.ke-pill-archived { background: #f0f0f1; color: #50575e; border: 1px solid #c3c4c7; }
.ke-form-message.ke-info { background: #f0f6fc; border: 1px solid #72aee6; color: #135e96; }