/* ============================================================
   KCdesi Business Directory — Stylesheet v1.0.5
   Scoped under .kcd-* prefix. All colors via CSS variables.
   ============================================================ */

:root {
  --kcd-primary:       #B22222;
  --kcd-primary-dark:  #8B0000;
  --kcd-secondary:     #1A1A2E;
  --kcd-accent:        #FF8C00;
  --kcd-accent-light:  #FFF3E0;
  --kcd-bg:            #FDFDFD;
  --kcd-bg-alt:        #F5F5F0;
  --kcd-text:          #2C2C2C;
  --kcd-text-muted:    #757575;
  --kcd-border:        #E0E0E0;
  --kcd-star:          #F1C40F;
  --kcd-card-radius:   10px;
  --kcd-card-shadow:   0 2px 10px rgba(0,0,0,0.08);
  --kcd-prime:         #B22222;
  --kcd-premium:       #6A0DAD;
  --kcd-community:     #2E7D32;
  --kcd-font:          inherit;
}

/* ── Reset / base ─────────────────────────────────────────── */
.kcd-directory-wrap *,
.kcd-submit-wrap *,
.kcd-single-wrap * { box-sizing: border-box; }

.kcd-directory-wrap,
.kcd-submit-wrap,
.kcd-single-wrap { font-family: var(--kcd-font); color: var(--kcd-text); }

/* ── Buttons ──────────────────────────────────────────────── */
.kcd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 22px; border-radius: 6px; font-size: 15px; font-weight: 600;
  cursor: pointer; border: 2px solid transparent; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s; gap: 6px;
  line-height: 1.2;
}
.kcd-btn-primary   { background: var(--kcd-primary); color: #fff; border-color: var(--kcd-primary); }
.kcd-btn-primary:hover { background: var(--kcd-primary-dark); border-color: var(--kcd-primary-dark); color: #fff; }
.kcd-btn-outline   { background: transparent; color: var(--kcd-primary); border-color: var(--kcd-primary); }
.kcd-btn-outline:hover { background: var(--kcd-accent-light); }
.kcd-btn-lg        { padding: 14px 30px; font-size: 16px; }
.kcd-btn-sm        { padding: 6px 14px; font-size: 13px; }

/* ── Section ──────────────────────────────────────────────── */
.kcd-section { padding: 36px 0; }
.kcd-section-title {
  font-size: 22px; font-weight: 700; color: var(--kcd-secondary);
  margin: 0 0 20px; padding-bottom: 10px;
  border-bottom: 3px solid var(--kcd-primary);
  display: inline-block;
}


/* ── Directory Section Header Bar ────────────────────────── */
.kcd-dir-header {
  background: var(--kcd-secondary);
  border-bottom: 3px solid var(--kcd-primary);
  margin-bottom: 0;
  padding: 0;
}
.kcd-dir-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; gap: 16px; flex-wrap: wrap;
}
.kcd-dir-header-brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; text-decoration: none; font-size: 15px; font-weight: 700;
  letter-spacing: .3px; white-space: nowrap;
  transition: color .2s;
}
.kcd-dir-header-brand:hover { color: var(--kcd-accent); text-decoration: none; }
.kcd-dir-header-right {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.kcd-dir-header-social { display: flex; align-items: center; gap: 10px; }
.kcd-dir-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.75); transition: color .2s; text-decoration: none;
}
.kcd-dir-social-icon:hover { color: #fff; }
.kcd-dir-header-cta {
  display: inline-flex; align-items: center;
  background: var(--kcd-primary); color: #fff;
  padding: 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: background .2s;
}
.kcd-dir-header-cta:hover { background: var(--kcd-primary-dark); color: #fff; text-decoration: none; }

@media (max-width: 600px) {
  .kcd-dir-header-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .kcd-dir-header-right { width: 100%; justify-content: space-between; }
}

/* ── Hero ─────────────────────────────────────────────────── */
.kcd-hero {
  background: url('../images/hero-banner.svg') center center / cover no-repeat, linear-gradient(135deg, #1A1A2E 0%, #2d2250 100%);
  color: #fff; padding: 50px 24px 80px; text-align: center; border-radius: 12px;
  margin-bottom: 30px;
  position: relative; overflow: hidden;
  min-height: 280px;
}
.kcd-hero-inner { position: relative; z-index: 1; }
.kcd-hero-title { font-size: 32px; font-weight: 800; margin: 0 0 12px; }
.kcd-hero-subtext { font-size: 16px; opacity: .85; max-width: 640px; margin: 0 auto 24px; line-height: 1.6; }

/* ── Search bar ───────────────────────────────────────────── */
.kcd-search-bar {
  background: #fff; border: 1px solid var(--kcd-border);
  border-radius: 10px; padding: 20px; margin-bottom: 10px;
  box-shadow: var(--kcd-card-shadow);
}
.kcd-search-inner {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.kcd-search-field {
  flex: 1 1 220px; padding: 10px 14px; border: 1px solid var(--kcd-border);
  border-radius: 6px; font-size: 15px; outline: none;
  transition: border-color .2s;
}
.kcd-search-field:focus { border-color: var(--kcd-primary); }
.kcd-select {
  flex: 0 1 180px; padding: 10px 14px; border: 1px solid var(--kcd-border);
  border-radius: 6px; font-size: 14px; background: #fff;
  outline: none; cursor: pointer;
}
.kcd-select:focus { border-color: var(--kcd-primary); }

/* ── Category grid ────────────────────────────────────────── */
.kcd-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.kcd-category-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--kcd-border); border-radius: var(--kcd-card-radius);
  padding: 20px 12px; text-decoration: none; color: var(--kcd-text);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  text-align: center; gap: 8px; cursor: pointer;
}
.kcd-category-tile:hover {
  transform: translateY(-3px); box-shadow: 0 6px 20px rgba(178,34,34,.15);
  border-color: var(--kcd-primary); color: var(--kcd-primary);
  text-decoration: none;
}
.kcd-cat-icon { width: 60px; height: 60px; }
.kcd-cat-icon svg { width: 60px; height: 60px; }
.kcd-cat-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.kcd-cat-count { font-size: 11px; color: var(--kcd-text-muted); }

/* ── Featured strip ───────────────────────────────────────── */
.kcd-featured-section { background: var(--kcd-accent-light); padding: 30px 20px; border-radius: 10px; }
.kcd-featured-strip {
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
}
.kcd-featured-strip .kcd-card { min-width: 260px; scroll-snap-align: start; flex-shrink: 0; }

/* ── Listing grid ─────────────────────────────────────────── */
.kcd-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.kcd-card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kcd-card-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kcd-results-count { color: var(--kcd-text-muted); font-size: 13px; margin-bottom: 16px; }

/* ── Listing card ─────────────────────────────────────────── */
.kcd-card {
  background: #fff; border: 1px solid var(--kcd-border); border-radius: var(--kcd-card-radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--kcd-card-shadow); transition: transform .2s, box-shadow .2s;
}
.kcd-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.kcd-card-prime   { border-left: 4px solid var(--kcd-prime);    box-shadow: 0 4px 18px rgba(178,34,34,0.14); }
.kcd-card-premium { border-left: 4px solid var(--kcd-premium);  box-shadow: 0 4px 18px rgba(106,13,173,0.13); }
.kcd-card-community { border-left: 3px solid var(--kcd-community); }
.kcd-card-image-link { display: block; overflow: hidden; }
.kcd-card-thumb { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform .3s; }
.kcd-card:hover .kcd-card-thumb { transform: scale(1.04); }
.kcd-card-no-thumb {
  height: 180px; background: var(--kcd-accent-light);
  display: flex; align-items: center; justify-content: center; font-size: 48px;
}
.kcd-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.kcd-card-title { font-size: 16px; font-weight: 700; margin: 0; }
.kcd-card-title a { color: var(--kcd-secondary); text-decoration: none; }
.kcd-card-title a:hover { color: var(--kcd-primary); }
.kcd-card-rating { display: flex; align-items: center; gap: 4px; }
.kcd-rating-count { font-size: 12px; color: var(--kcd-text-muted); }
.kcd-card-terms { display: flex; flex-wrap: wrap; gap: 4px; }
.kcd-card-contact { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.kcd-card-contact a { color: var(--kcd-primary); text-decoration: none; }
.kcd-card-contact a:hover { text-decoration: underline; }
.kcd-card-desc { font-size: 13px; color: var(--kcd-text-muted); margin: 0; line-height: 1.5; }
.kcd-read-more { color: var(--kcd-primary); font-weight: 600; white-space: nowrap; }

/* ── Tags / badges ────────────────────────────────────────── */
.kcd-tag {
  display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px;
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.kcd-tag-cat { background: var(--kcd-accent-light); color: var(--kcd-accent); }
.kcd-tag-cat:hover { background: var(--kcd-accent); color: #fff; text-decoration: none; }
.kcd-tag-loc { background: #E8F5E9; color: var(--kcd-community); }
.kcd-tag-loc:hover { background: var(--kcd-community); color: #fff; text-decoration: none; }

.kcd-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.kcd-badge-prime     { background: var(--kcd-prime);     color: #fff; }
.kcd-badge-premium   { background: var(--kcd-premium);   color: #fff; }
.kcd-badge-community { background: var(--kcd-community); color: #fff; }

/* ── Stars ────────────────────────────────────────────────── */
.kcd-star { color: var(--kcd-star); font-size: 16px; }
.kcd-star-empty { color: #ddd; }
.kcd-star-half  { color: var(--kcd-star); opacity: .6; }

/* ── Pagination ───────────────────────────────────────────── */
.kcd-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.kcd-page-btn {
  padding: 8px 14px; border: 1px solid var(--kcd-border); background: #fff;
  border-radius: 6px; cursor: pointer; font-size: 14px; transition: all .2s;
}
.kcd-page-btn:hover, .kcd-page-btn.active {
  background: var(--kcd-primary); color: #fff; border-color: var(--kcd-primary);
}
.kcd-no-results { text-align: center; padding: 40px; color: var(--kcd-text-muted); }

/* ══════════════════════════════════════════════════════
   SINGLE LISTING PAGE
   ══════════════════════════════════════════════════════ */
.kcd-single-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px 40px; }

.kcd-single-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--kcd-border); margin-bottom: 20px;
  flex-wrap: wrap; gap: 10px;
}
.kcd-back-link { color: var(--kcd-primary); text-decoration: none; font-weight: 600; }
.kcd-back-link:hover { text-decoration: underline; }
.kcd-single-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kcd-share-btns { display: flex; gap: 6px; }
.kcd-share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 4px; font-size: 12px; font-weight: 600;
  text-decoration: none; color: #fff; transition: opacity .2s;
}
.kcd-share-btn:hover { opacity: .85; color: #fff; text-decoration: none; }
.kcd-share-fb  { background: #1877f2; }
.kcd-share-ig  { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.kcd-share-wa  { background: #25d366; }
.kcd-share-tg  { background: #0088cc; }
.kcd-share-pin { background: #e60023; }

/* Slider */
.kcd-slider-wrap {
  position: relative; border-radius: 12px; overflow: hidden;
  margin-bottom: 24px; background: var(--kcd-bg-alt);
}
.kcd-slider { position: relative; }
.kcd-slider img { width: 100%; height: 420px; object-fit: cover; object-position: center center; display: none; }
.kcd-slider img.active { display: block; }
.kcd-slider-placeholder {
  height: 280px; display: flex; align-items: center; justify-content: center; font-size: 72px;
}
.kcd-slider-prev, .kcd-slider-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  background: rgba(0,0,0,.45); color: #fff; border: none; cursor: pointer;
  font-size: 28px; padding: 10px 16px; border-radius: 4px; line-height: 1;
  transition: background .2s;
}
.kcd-slider-prev { left: 10px; }
.kcd-slider-next { right: 10px; }
.kcd-slider-prev:hover, .kcd-slider-next:hover { background: rgba(0,0,0,.7); }

/* Title area */
.kcd-single-title-area { margin-bottom: 24px; }
.kcd-single-title { font-size: 30px; font-weight: 800; color: var(--kcd-secondary); margin: 8px 0; }
.kcd-single-tagline { font-size: 16px; color: var(--kcd-text-muted); margin: 0 0 12px; font-style: italic; }
.kcd-single-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.kcd-rating-label { font-size: 16px; font-weight: 700; color: var(--kcd-secondary); }
.kcd-rating-count { font-size: 14px; color: var(--kcd-primary); text-decoration: none; }
.kcd-single-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }

/* Two-column layout */
.kcd-single-body { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; margin-top: 24px; }
.kcd-single-main > * + * { margin-top: 28px; }
.kcd-single-description h3,
.kcd-single-hours h3,
.kcd-single-video h3 { font-size: 18px; color: var(--kcd-secondary); border-bottom: 2px solid var(--kcd-border); padding-bottom: 8px; margin-bottom: 14px; }
.kcd-content { line-height: 1.8; }
.kcd-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; }
.kcd-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; }

/* Contact card */
.kcd-contact-card {
  background: var(--kcd-bg-alt); border: 1px solid var(--kcd-border);
  border-radius: 10px; padding: 20px; margin-bottom: 20px;
}
.kcd-contact-card h4 { margin: 0 0 14px; font-size: 16px; color: var(--kcd-secondary); }
.kcd-contact-item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.kcd-contact-item a { color: var(--kcd-text); text-decoration: none; word-break: break-all; }
.kcd-contact-item a:hover { color: var(--kcd-primary); }
.kcd-social-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kcd-social-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--kcd-accent-light); color: var(--kcd-accent); text-decoration: none;
  transition: background .2s, color .2s;
}
.kcd-social-link:hover { background: var(--kcd-accent); color: #fff; text-decoration: none; }

/* Reviews */
.kcd-reviews-section { margin-top: 40px; border-top: 2px solid var(--kcd-border); padding-top: 30px; }
.kcd-reviews-section h3 { font-size: 22px; color: var(--kcd-secondary); margin-bottom: 20px; }
.kcd-rating-summary { display: flex; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.kcd-rating-big { text-align: center; }
.kcd-rating-number { font-size: 48px; font-weight: 800; color: var(--kcd-secondary); display: block; line-height: 1; }
.kcd-stars-row { font-size: 20px; }
.kcd-rating-total { font-size: 12px; color: var(--kcd-text-muted); }
.kcd-rating-breakdown { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 200px; }
.kcd-breakdown-row { display: flex; align-items: center; gap: 8px; }
.kcd-breakdown-label { font-size: 13px; width: 24px; flex-shrink: 0; }
.kcd-breakdown-bar { flex: 1; height: 8px; background: var(--kcd-border); border-radius: 4px; overflow: hidden; }
.kcd-breakdown-fill { height: 100%; background: var(--kcd-star); border-radius: 4px; }
.kcd-breakdown-count { font-size: 12px; color: var(--kcd-text-muted); width: 20px; }
.kcd-reviews-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.kcd-review-item { background: var(--kcd-bg-alt); border-radius: 8px; padding: 16px; }
.kcd-review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.kcd-reviewer-name { font-weight: 700; }
.kcd-review-stars .kcd-star { font-size: 14px; }
.kcd-review-date { font-size: 12px; color: var(--kcd-text-muted); margin-left: auto; }
.kcd-review-text { margin: 0; line-height: 1.7; font-size: 14px; }
.kcd-no-reviews { color: var(--kcd-text-muted); font-style: italic; margin-bottom: 20px; }

/* Related */
.kcd-related-section { margin-top: 40px; border-top: 2px solid var(--kcd-border); padding-top: 30px; }
.kcd-related-section h3 { font-size: 22px; color: var(--kcd-secondary); margin-bottom: 20px; }

/* ══════════════════════════════════════════════════════
   FORMS (review, contact, submit)
   ══════════════════════════════════════════════════════ */
.kcd-form { display: flex; flex-direction: column; gap: 0; }
.kcd-form-group { margin-bottom: 18px; }
.kcd-form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--kcd-secondary); }
.kcd-required { color: var(--kcd-primary); }
.kcd-input, .kcd-textarea, .kcd-select {
  width: 100%; padding: 10px 14px; border: 1px solid var(--kcd-border);
  border-radius: 6px; font-size: 14px; font-family: inherit;
  transition: border-color .2s, box-shadow .2s; background: #fff;
}
.kcd-input:focus, .kcd-textarea:focus, .kcd-select:focus {
  outline: none; border-color: var(--kcd-primary);
  box-shadow: 0 0 0 3px rgba(178,34,34,.12);
}
.kcd-textarea { resize: vertical; min-height: 100px; }
.kcd-form-message { padding: 12px 16px; border-radius: 6px; font-size: 14px; margin-bottom: 12px; }
.kcd-form-message.success { background: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7; }
.kcd-form-message.error   { background: #FFEBEE; color: #C62828; border: 1px solid #EF9A9A; }
.kcd-form-row { display: flex; gap: 16px; }
.kcd-form-row .kcd-half { flex: 1; }
.kcd-char-count { font-size: 11px; color: var(--kcd-text-muted); float: right; }

/* Star selector */
.kcd-star-selector { display: flex; gap: 4px; cursor: pointer; }
.kcd-star-pick { font-size: 28px; color: #ddd; transition: color .15s; }
.kcd-star-pick:hover, .kcd-star-pick.selected { color: var(--kcd-star); }

/* Review form */
.kcd-review-form-wrap {
  background: #fff; border: 1px solid var(--kcd-border); border-radius: 10px;
  padding: 24px; margin-top: 28px;
}
.kcd-review-form-wrap h4 { margin: 0 0 18px; font-size: 18px; color: var(--kcd-secondary); }
.kcd-contact-form-wrap {
  background: #fff; border: 1px solid var(--kcd-border); border-radius: 10px;
  padding: 20px;
}
.kcd-contact-form-wrap h4 { margin: 0 0 14px; font-size: 16px; color: var(--kcd-secondary); }

/* ══════════════════════════════════════════════════════
   SUBMISSION FORM
   ══════════════════════════════════════════════════════ */
.kcd-submit-wrap { max-width: 820px; margin: 0 auto; padding: 0 16px 40px; }
.kcd-progress-bar {
  display: flex; gap: 0; margin-bottom: 32px; border-radius: 10px;
  overflow: hidden; border: 1px solid var(--kcd-border); background: var(--kcd-bg-alt);
}
.kcd-progress-step {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 14px 8px; cursor: default; transition: background .3s;
  border-right: 1px solid var(--kcd-border);
}
.kcd-progress-step:last-child { border-right: none; }
.kcd-progress-step.active { background: var(--kcd-primary); color: #fff; }
.kcd-progress-step.completed { background: var(--kcd-bg-alt); color: var(--kcd-community); }
.kcd-step-num {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; margin-bottom: 4px;
}
.kcd-progress-step.active .kcd-step-num { background: rgba(255,255,255,.25); border-color: #fff; }
.kcd-step-label { font-size: 12px; font-weight: 600; text-align: center; }
.kcd-step h3 { font-size: 22px; color: var(--kcd-secondary); margin: 0 0 22px; border-bottom: 2px solid var(--kcd-border); padding-bottom: 10px; }
.kcd-step-nav { display: flex; justify-content: space-between; margin-top: 24px; }

/* Checkbox group */
.kcd-checkbox-group { display: flex; flex-direction: column; gap: 6px; }
.kcd-scrollable { max-height: 220px; overflow-y: auto; padding: 8px; border: 1px solid var(--kcd-border); border-radius: 6px; background: #fff; }
.kcd-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.kcd-checkbox-label:hover { background: var(--kcd-accent-light); }
.kcd-checkbox-label input[type=checkbox] { accent-color: var(--kcd-primary); width: 16px; height: 16px; flex-shrink: 0; }

/* Social rows */
.kcd-social-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.kcd-social-row .kcd-select { flex: 0 1 180px; }
.kcd-social-row .kcd-input  { flex: 1; }
.kcd-remove-social { flex-shrink: 0; }

/* Upload area */
.kcd-upload-area {
  position: relative; border: 2px dashed var(--kcd-border); border-radius: 8px;
  padding: 32px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s;
}
.kcd-upload-area:hover, .kcd-upload-area.dragover { border-color: var(--kcd-primary); background: var(--kcd-accent-light); }
.kcd-upload-icon { font-size: 32px; display: block; margin-bottom: 8px; }
.kcd-upload-hint { font-size: 12px; color: var(--kcd-text-muted); margin: 4px 0 0; }
.kcd-image-preview-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kcd-preview-img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid var(--kcd-border); }

/* Summary box */
.kcd-summary-box {
  background: var(--kcd-bg-alt); border: 1px solid var(--kcd-border);
  border-radius: 8px; padding: 20px; font-size: 14px; line-height: 1.8;
}
.kcd-summary-box strong { color: var(--kcd-secondary); }

/* ══════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════ */
.kcd-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9998;
}
.kcd-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 9999; background: #fff; border-radius: 12px; padding: 28px;
  width: 90%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.kcd-modal h4 { margin: 0 0 16px; font-size: 18px; color: var(--kcd-secondary); }
.kcd-modal .kcd-step-nav { gap: 10px; }

/* ══════════════════════════════════════════════════════
   ADMIN STYLES (admin pages only)
   ══════════════════════════════════════════════════════ */
.kcd-admin-wrap h1 { border-bottom: 2px solid var(--kcd-primary); padding-bottom: 10px; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .kcd-category-grid { grid-template-columns: repeat(3, 1fr); }
  .kcd-card-grid     { grid-template-columns: repeat(2, 1fr); }
  .kcd-card-grid-4   { grid-template-columns: repeat(2, 1fr); }
  .kcd-single-body   { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .kcd-category-grid { grid-template-columns: repeat(2, 1fr); }
  .kcd-card-grid, .kcd-card-grid-3, .kcd-card-grid-4 { grid-template-columns: 1fr; }
  .kcd-search-inner  { flex-direction: column; }
  .kcd-search-field, .kcd-select { flex: 1 1 100%; }
  .kcd-hero-title    { font-size: 22px; }
  .kcd-form-row      { flex-direction: column; }
  .kcd-slider img    { height: 240px; object-position: center center; }
  .kcd-single-title  { font-size: 22px; }
}
@media (max-width: 480px) {
  .kcd-category-grid { grid-template-columns: repeat(2, 1fr); }
  .kcd-progress-step { padding: 10px 4px; }
  .kcd-step-label    { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════
   FRONTEND EDIT LISTING FORM
   ══════════════════════════════════════════════════════ */
.kcd-edit-wrap {
  max-width: 820px; margin: 32px auto; padding: 0 16px;
  font-family: var(--kcd-font, inherit);
}
.kcd-edit-wrap h2 {
  font-size: 24px; color: var(--kcd-secondary); margin-bottom: 24px;
  border-bottom: 2px solid var(--kcd-primary); padding-bottom: 10px;
}
.kcd-edit-section {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
  padding: 24px 28px; margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.kcd-edit-section-title {
  font-size: 15px; font-weight: 700; color: var(--kcd-secondary);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 0 0 18px; padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.kcd-edit-heading {
  font-size: 13px; font-weight: 600; color: #444;
  display: block; margin-bottom: 5px;
}
.kcd-edit-wrap input[type="text"],
.kcd-edit-wrap input[type="email"],
.kcd-edit-wrap input[type="url"],
.kcd-edit-wrap input[type="tel"],
.kcd-edit-wrap textarea,
.kcd-edit-wrap select {
  width: 100%; padding: 9px 12px; border: 1px solid #d0d0d0;
  border-radius: 6px; font-size: 14px; box-sizing: border-box;
  transition: border-color .15s;
}
.kcd-edit-wrap input:focus,
.kcd-edit-wrap textarea:focus,
.kcd-edit-wrap select:focus {
  outline: none; border-color: var(--kcd-primary);
  box-shadow: 0 0 0 3px rgba(178,34,34,0.1);
}
.kcd-edit-wrap textarea { min-height: 100px; resize: vertical; }
.kcd-form-row {
  display: flex; gap: 16px; margin-bottom: 16px;
}
.kcd-form-row > * { flex: 1; }
.kcd-form-row.single { flex-direction: column; }
.kcd-form-col { display: flex; flex-direction: column; }

/* Featured image */
.kcd-feat-thumb {
  width: 120px; height: 90px; object-fit: cover;
  border-radius: 6px; border: 1px solid #ddd; display: block; margin-bottom: 8px;
}
.kcd-feat-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Slider grid */
.kcd-slider-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.kcd-slider-thumb {
  position: relative; border-radius: 6px; overflow: hidden;
  aspect-ratio: 4/3; background: #f5f5f5;
}
.kcd-slider-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.kcd-slider-thumb .kcd-rm-slide {
  position: absolute; top: 4px; right: 4px;
  background: rgba(178,34,34,0.85); color: #fff;
  border: none; border-radius: 50%; width: 22px; height: 22px;
  font-size: 13px; line-height: 22px; text-align: center;
  cursor: pointer; padding: 0;
}
.kcd-upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; background: #f5f5f5; border: 1px solid #ccc;
  border-radius: 6px; font-size: 13px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.kcd-upload-btn:hover { background: #eee; border-color: #999; }
.kcd-upload-progress {
  font-size: 12px; color: #666; margin-left: 8px; display: none;
}

/* Social rows */
.kcd-social-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.kcd-social-row  { display: flex; gap: 8px; align-items: center; }
.kcd-social-row select { flex: 0 0 160px; }
.kcd-social-row input  { flex: 1; }
.kcd-rm-social {
  background: none; border: none; color: #B22222; font-size: 20px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}

/* Edit actions */
.kcd-edit-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.kcd-edit-actions .kcd-btn-save {
  background: var(--kcd-primary); color: #fff;
  border: none; border-radius: 6px;
  padding: 11px 28px; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.kcd-edit-actions .kcd-btn-save:hover { background: #8b0000; }
.kcd-edit-actions .kcd-btn-save:disabled { background: #ccc; cursor: not-allowed; }
.kcd-btn-cancel-edit {
  color: #555; text-decoration: none; font-size: 14px;
}
.kcd-btn-cancel-edit:hover { color: #B22222; }

/* Notices */
.kcd-edit-notice {
  padding: 12px 16px; border-radius: 6px; font-size: 14px; margin-bottom: 16px;
}
.kcd-edit-notice.success {
  background: #e8f5e9; border: 1px solid #81c784; color: #2e7d32;
}
.kcd-edit-notice.error {
  background: #fdecea; border: 1px solid #ef9a9a; color: #b71c1c;
}

/* "Edit Your Listing" button on single page */
.kcd-edit-listing-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--kcd-secondary); color: #fff;
  padding: 7px 16px; border-radius: 6px; font-size: 13px;
  font-weight: 600; text-decoration: none;
  transition: background .15s;
}
.kcd-edit-listing-btn:hover { background: #0d2a52; color: #fff; }

@media (max-width: 600px) {
  .kcd-form-row { flex-direction: column; }
  .kcd-edit-section { padding: 16px; }
  .kcd-social-row { flex-wrap: wrap; }
  .kcd-social-row select { flex: 1 1 100%; }
}