/*
 * Service Marketplace – Main Stylesheet v1.0.3
 * Single source of truth – no duplicate rules.
 */

/* ═══════════════════════════════════════════════════════════════════
   CSS VARIABLES
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --sm-primary:        #1e6b4a;
  --sm-primary-dark:   #155238;
  --sm-accent:         #27ae60;
  --sm-accent-hover:   #219653;
  --sm-accent-light:   #eaf7ef;
  --sm-surface:        #ffffff;
  --sm-surface-2:      #f4fbf7;
  --sm-border:         #d4edd9;
  --sm-text:           #1a2e22;
  --sm-text-muted:     #5a7a65;
  --sm-text-light:     #9cbfaa;
  --sm-success:        #10b981;
  --sm-warning:        #f59e0b;
  --sm-error:          #ef4444;
  --sm-radius:         12px;
  --sm-radius-sm:      8px;
  --sm-radius-lg:      16px;
  --sm-shadow:         0 4px 20px rgba(30,107,74,0.10);
  --sm-shadow-hover:   0 8px 32px rgba(30,107,74,0.18);
  --sm-transition:     0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   ARCHIVE PAGE LAYOUT — sidebar left, cards right
   ═══════════════════════════════════════════════════════════════════ */
.sm-marketplace-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px;
}

@media (max-width: 900px) {
  .sm-marketplace-layout {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════ */
.sm-sidebar {
  grid-column: 1;
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 24px;
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.sm-main {
  grid-column: 2;
  min-width: 0; /* prevent overflow */
}

@media (max-width: 900px) {
  .sm-sidebar {
    position: fixed;
    top: 0; left: -320px;
    width: 300px;
    height: 100vh;
    z-index: 9998;
    border-radius: 0;
    max-height: 100vh;
    transition: left 0.3s ease;
    grid-column: 1;
  }
  .sm-sidebar.is-open { left: 0; }
  .sm-sidebar__close { display: block !important; }
  .sm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9997;
  }
  .sm-overlay.is-visible { display: block; }
  .sm-main { grid-column: 1; }
}

.sm-sidebar__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--sm-primary);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--sm-accent);
}

.sm-sidebar__close {
  display: none;
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sm-text-muted);
}

/* ─── Filter groups ─── */
.sm-filter {
  margin-bottom: 18px;
  border-bottom: 1px solid var(--sm-border);
  padding-bottom: 14px;
}
.sm-filter:last-child { border-bottom: none; margin-bottom: 0; }

.sm-filter__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--sm-text);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 0 0 8px;
  text-align: left;
}

.sm-filter__chevron { transition: transform var(--sm-transition); flex-shrink: 0; }
.sm-filter--closed .sm-filter__chevron { transform: rotate(-90deg); }

.sm-filter__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.sm-filter--closed .sm-filter__body { display: none; }

/* ─── Checkboxes ─── */
.sm-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--sm-text);
}
.sm-checkbox input[type="checkbox"] { display: none; }
.sm-checkbox__mark {
  width: 18px; height: 18px;
  border: 2px solid var(--sm-border);
  border-radius: 4px;
  background: var(--sm-surface);
  flex-shrink: 0;
  position: relative;
  transition: all var(--sm-transition);
}
.sm-checkbox input:checked + .sm-checkbox__mark {
  background: var(--sm-accent);
  border-color: var(--sm-accent);
}
.sm-checkbox input:checked + .sm-checkbox__mark::after {
  content: '';
  position: absolute;
  top: 2px; left: 5px;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.sm-checkbox__label { flex: 1; }
.sm-checkbox__count { color: var(--sm-text-muted); font-size: 12px; }

/* ─── Distance filter ─── */
.sm-distance-wrap { display: flex; gap: 8px; align-items: center; }
.sm-distance-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  font-size: 14px;
  color: var(--sm-text);
}
.sm-locate-btn {
  width: 36px; height: 36px;
  background: var(--sm-primary);
  color: #fff;
  border: none;
  border-radius: var(--sm-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--sm-transition);
}
.sm-locate-btn:hover { background: var(--sm-accent); }
.sm-location-note { font-size: 12px; color: var(--sm-text-muted); margin: 4px 0 0; }

/* ═══════════════════════════════════════════════════════════════════
   TOOLBAR
   ═══════════════════════════════════════════════════════════════════ */
.sm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.sm-toolbar__left, .sm-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sm-filter-toggle-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--sm-text);
  transition: all var(--sm-transition);
}
@media (max-width: 900px) { .sm-filter-toggle-btn { display: flex; } }
.sm-filter-toggle-btn:hover { border-color: var(--sm-accent); color: var(--sm-accent); }
.sm-result-count { font-size: 14px; color: var(--sm-text-muted); }
.sm-sort-label { font-size: 14px; color: var(--sm-text-muted); }
.sm-sort-select {
  padding: 8px 28px 8px 12px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  font-size: 14px;
  color: var(--sm-text);
  background: var(--sm-surface);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a7a65' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* ─── Active filter pills ─── */
.sm-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--sm-primary);
  color: #fff;
  border-radius: 20px;
  font-size: 13px;
}
.sm-pill__remove {
  background: none; border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE CARD GRID
   ═══════════════════════════════════════════════════════════════════ */
.sm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.sm-no-results {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 20px;
  color: var(--sm-text-muted);
  font-size: 15px;
}

/* ─── Service card ─── */
.sm-card {
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  overflow: hidden;
  transition: transform var(--sm-transition), box-shadow var(--sm-transition), border-color var(--sm-transition);
  display: flex;
  flex-direction: column;
}
.sm-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sm-shadow-hover);
  border-color: var(--sm-accent);
}
.sm-card__image-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--sm-accent-light);
}
.sm-card__image {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.sm-card:hover .sm-card__image { transform: scale(1.04); }
.sm-card__category-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--sm-accent);
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.sm-card__category-badge a { color: #fff; text-decoration: none; }
.sm-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}
.sm-card__vendor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.sm-card__vendor-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--sm-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.sm-card__vendor-name { font-weight: 600; color: var(--sm-text); flex: 1; }
.sm-card__distance {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--sm-text-muted);
  font-size: 12px;
}
.sm-card__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}
.sm-card__title a { color: var(--sm-text); text-decoration: none; transition: color var(--sm-transition); }
.sm-card__title a:hover { color: var(--sm-accent); }
.sm-card__excerpt {
  font-size: 13px;
  color: var(--sm-text-muted);
  margin: 0;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sm-card__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--sm-text-muted);
}
.sm-card__rating { display: flex; align-items: center; gap: 6px; }
.sm-stars { display: flex; gap: 2px; }
.sm-star polygon { fill: #d1d5db; stroke: #d1d5db; }
.sm-star--filled polygon { fill: #f59e0b; stroke: #f59e0b; }
.sm-star--half polygon { fill: url(#sm-half-grad); stroke: #f59e0b; }
.sm-no-reviews { font-size: 12px; color: var(--sm-text-light); }
.sm-card__footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--sm-border);
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.sm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--sm-radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--sm-transition);
  border: 2px solid transparent;
  line-height: 1;
  white-space: nowrap;
}
.sm-btn--primary { background: var(--sm-accent); color: #fff !important; border-color: var(--sm-accent); }
.sm-btn--primary:hover {
  background: var(--sm-accent-hover); border-color: var(--sm-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(39,174,96,0.35);
}
.sm-btn--outline { background: transparent; color: var(--sm-primary) !important; border-color: var(--sm-border); }
.sm-btn--outline:hover { border-color: var(--sm-primary); background: var(--sm-surface-2); }
.sm-btn--danger { background: var(--sm-error); color: #fff !important; border-color: var(--sm-error); }
.sm-btn--danger:hover { background: #dc2626; border-color: #dc2626; }
.sm-btn--secondary { background: var(--sm-primary); color: #fff !important; border-color: var(--sm-primary); }
.sm-btn--secondary:hover { background: var(--sm-primary-dark); border-color: var(--sm-primary-dark); }
.sm-btn--lg { padding: 13px 26px; font-size: 15px; }
.sm-btn--sm { padding: 6px 12px; font-size: 13px; }
.sm-btn--full { width: 100%; }

/* Loading */
.sm-loading { text-align: center; padding: 40px; }
.sm-spinner {
  width: 38px; height: 38px;
  border: 3px solid var(--sm-border);
  border-top-color: var(--sm-accent);
  border-radius: 50%;
  animation: sm-spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes sm-spin { to { transform: rotate(360deg); } }
.sm-pagination { margin-top: 28px; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════
   SERVICE DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════ */
.sm-detail-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
}
.sm-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sm-text-muted);
  margin-bottom: 24px;
}
.sm-breadcrumb a { color: var(--sm-accent); text-decoration: none; }
.sm-detail-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 36px;
  align-items: start;
}
@media (max-width: 900px) { .sm-detail-layout { grid-template-columns: 1fr; } }

.sm-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--sm-border);
  flex-wrap: wrap;
  gap: 12px;
}

/* Gallery */
.sm-gallery__main {
  border-radius: var(--sm-radius);
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--sm-accent-light);
}
.sm-gallery__main-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
.sm-gallery__thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sm-gallery__thumb {
  width: 70px; height: 56px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--sm-transition);
}
.sm-gallery__thumb:hover, .sm-gallery__thumb.is-active { border-color: var(--sm-accent); }

.sm-detail-description { margin-top: 28px; }
.sm-detail-description h2 {
  font-size: 18px; font-weight: 700;
  color: var(--sm-primary); margin-bottom: 14px;
}

/* Detail card */
.sm-detail-card {
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 24px;
  position: sticky;
  top: 24px;
}
.sm-detail-title {
  font-size: 22px; font-weight: 800;
  color: var(--sm-text); margin: 0 0 14px; line-height: 1.3;
}
.sm-detail-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sm-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.sm-badge--cat { background: var(--sm-accent-light); color: var(--sm-primary); }
.sm-badge--cat a { color: var(--sm-primary); text-decoration: none; }
.sm-badge--cat a:hover { text-decoration: underline; }
.sm-badge--sub { background: rgba(30,107,74,0.08); color: var(--sm-primary); }
.sm-badge--sub a { color: var(--sm-primary); text-decoration: none; }
.sm-detail-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.sm-muted { color: var(--sm-text-muted); font-size: 13px; }
.sm-detail-meta {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.sm-detail-meta li {
  display: flex; align-items: center;
  gap: 8px; font-size: 14px; color: var(--sm-text-muted);
}
.sm-vendor-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: var(--sm-surface-2);
  border-radius: var(--sm-radius-sm); margin-bottom: 18px;
}
.sm-vendor-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sm-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; flex-shrink: 0;
}
.sm-vendor-label { font-size: 11px; color: var(--sm-text-muted); margin: 0; }
.sm-vendor-name { font-size: 15px; font-weight: 700; color: var(--sm-primary); margin: 0; }
.sm-detail-actions { display: flex; flex-direction: column; gap: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   PRICING PANELS
   ═══════════════════════════════════════════════════════════════════ */
.sm-pricing-panel {
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 24px;
  margin-top: 28px;
}
.sm-pricing-panel__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 700; color: var(--sm-primary); margin: 0 0 18px;
}
.sm-pricing-panel__title svg { color: var(--sm-accent); flex-shrink: 0; }
.sm-pricing-panel__desc { font-size: 14px; color: var(--sm-text-muted); margin: 0 0 18px; line-height: 1.6; }

/* Hourly rate banner */
.sm-hourly-rate-display {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--sm-accent-light);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.sm-hourly-rate__label { font-size: 12px; color: var(--sm-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.sm-hourly-rate__price { font-size: 22px; font-weight: 800; color: var(--sm-primary); }
.sm-hourly-rate__price small { font-size: 13px; font-weight: 500; color: var(--sm-text-muted); }

/* Hour picker */
.sm-hourly-calculator {
  background: var(--sm-surface-2);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  padding: 18px;
  margin-bottom: 20px;
}
.sm-hour-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
}
.sm-hour-picker label { font-size: 14px; font-weight: 600; color: var(--sm-text); }
.sm-hour-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Native spinner-only input */
.sm-hour-input-wrap input[type="number"] {
  width: 88px;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--sm-primary);
  border: 2px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  padding: 8px 4px;
  background: var(--sm-surface);
}
.sm-hour-input-wrap input[type="number"]:focus {
  outline: none;
  border-color: var(--sm-accent);
}
.sm-hour-unit { font-size: 13px; color: var(--sm-text-muted); }
.sm-hourly-total {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--sm-border);
  font-size: 14px; color: var(--sm-text-muted);
}
.sm-hourly-total__amount { font-size: 20px; font-weight: 800; color: var(--sm-primary); }

/* Booking form */
.sm-booking-form { margin-top: 4px; }
.sm-booking-message { margin-top: 12px; padding: 12px; border-radius: var(--sm-radius-sm); font-size: 14px; }

/* Quote and fixed panels */
.sm-quote-actions, .sm-fixed-actions { display: flex; flex-direction: column; gap: 10px; }
.sm-fixed-price-display {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--sm-accent-light);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  padding: 14px 18px; margin-bottom: 18px;
}
.sm-fixed-price__label { font-size: 12px; color: var(--sm-text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.sm-fixed-price__amount { font-size: 26px; font-weight: 800; color: var(--sm-primary); }
.sm-sidebar-price {
  font-size: 26px; font-weight: 800; color: var(--sm-primary);
  text-align: center; padding: 12px;
  background: var(--sm-accent-light);
  border-radius: var(--sm-radius-sm);
  margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   CHECKOUT / BOOKING PAGE
   ═══════════════════════════════════════════════════════════════════ */
.sm-checkout-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 20px;
}
.sm-checkout-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 720px) { .sm-checkout-layout { grid-template-columns: 1fr; } }

.sm-checkout-title {
  font-size: 24px; font-weight: 800; color: var(--sm-text); margin: 0 0 24px;
}
.sm-checkout-section {
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 22px;
  margin-bottom: 20px;
}
.sm-checkout-section h3 {
  font-size: 16px; font-weight: 700; color: var(--sm-primary);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sm-border);
}

/* Order summary card */
.sm-order-summary {
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 22px;
  position: sticky;
  top: 24px;
}
.sm-order-summary h3 {
  font-size: 15px; font-weight: 700; color: var(--sm-primary);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sm-border);
}
.sm-order-line {
  display: flex; justify-content: space-between;
  font-size: 14px; color: var(--sm-text-muted);
  margin-bottom: 10px;
}
.sm-order-line strong { color: var(--sm-text); }
.sm-order-total {
  display: flex; justify-content: space-between;
  font-size: 18px; font-weight: 800; color: var(--sm-text);
  padding-top: 12px;
  border-top: 2px solid var(--sm-border);
  margin-top: 12px;
}
.sm-order-total span:last-child { color: var(--sm-primary); }

.sm-payment-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.sm-payment-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  cursor: pointer;
  transition: border-color var(--sm-transition);
}
.sm-payment-method input[type="radio"] { accent-color: var(--sm-accent); }
.sm-payment-method.is-selected { border-color: var(--sm-accent); background: var(--sm-accent-light); }
.sm-payment-method__label { font-size: 14px; font-weight: 600; color: var(--sm-text); }
.sm-payment-method__desc { font-size: 12px; color: var(--sm-text-muted); }

.sm-checkout-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════
   MY BOOKINGS PAGE
   ═══════════════════════════════════════════════════════════════════ */
.sm-bookings-wrap { max-width: 960px; margin: 0 auto; padding: 24px 20px; }
.sm-bookings-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.sm-bookings-header h2 { font-size: 22px; font-weight: 800; color: var(--sm-text); margin: 0; }

.sm-bookings-tabs {
  display: flex; gap: 4px;
  background: var(--sm-surface-2);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  padding: 4px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sm-tab-btn {
  padding: 7px 14px;
  border: none; border-radius: 6px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--sm-text-muted);
  transition: all var(--sm-transition);
}
.sm-tab-btn.is-active { background: var(--sm-surface); color: var(--sm-primary); box-shadow: var(--sm-shadow); }

.sm-booking-card {
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 20px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: center;
}
@media (max-width: 600px) { .sm-booking-card { grid-template-columns: 1fr; } }
.sm-booking-card__img {
  width: 80px; height: 64px;
  object-fit: cover;
  border-radius: var(--sm-radius-sm);
  background: var(--sm-accent-light);
}
.sm-booking-card__info h4 { font-size: 16px; font-weight: 700; color: var(--sm-text); margin: 0 0 4px; }
.sm-booking-card__meta { font-size: 13px; color: var(--sm-text-muted); }
.sm-booking-card__actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

/* Status badges */
.sm-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sm-status--pending   { background: #fef3c7; color: #92400e; }
.sm-status--reserved  { background: #dbeafe; color: #1e40af; }
.sm-status--confirmed { background: #d1fae5; color: #065f46; }
.sm-status--completed { background: #e0e7ff; color: #3730a3; }
.sm-status--cancelled { background: #fee2e2; color: #991b1b; }
.sm-status--approved  { background: #d1fae5; color: #065f46; }
.sm-status--rejected  { background: #fee2e2; color: #991b1b; }
.sm-status--draft     { background: var(--sm-surface-2); color: var(--sm-text-muted); }

/* Review form */
.sm-review-form { margin-top: 10px; border-top: 1px solid var(--sm-border); padding-top: 14px; }
.sm-star-picker { display: flex; gap: 6px; margin-bottom: 10px; }
.sm-star-pick {
  font-size: 22px; cursor: pointer; color: #d1d5db;
  transition: color var(--sm-transition);
  user-select: none;
}
.sm-star-pick.is-active, .sm-star-pick:hover ~ .sm-star-pick { color: #d1d5db; }
.sm-star-pick.is-active { color: #f59e0b; }

/* ═══════════════════════════════════════════════════════════════════
   MODAL (ENQUIRY)
   ═══════════════════════════════════════════════════════════════════ */
.sm-modal {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
}
.sm-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(26,46,34,0.65);
  backdrop-filter: blur(4px);
}
.sm-modal__content {
  position: relative;
  background: var(--sm-surface);
  border-radius: var(--sm-radius-lg);
  padding: 32px;
  width: 90%; max-width: 620px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(30,107,74,0.2);
  border-top: 4px solid var(--sm-accent);
}
.sm-modal__close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; cursor: pointer;
  color: var(--sm-text-muted); transition: color var(--sm-transition);
}
.sm-modal__close:hover { color: var(--sm-accent); }
.sm-modal__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 700; color: var(--sm-text); margin: 0 0 6px;
}
.sm-modal__subtitle { font-size: 13px; color: var(--sm-text-muted); margin: 0 0 22px; }
.sm-modal__actions { display: flex; gap: 10px; margin-top: 20px; }
.sm-modal__message {
  margin-top: 14px; padding: 12px;
  border-radius: var(--sm-radius-sm); font-size: 14px; font-weight: 500;
}
.sm-modal__message--success { background: rgba(16,185,129,0.1); color: #065f46; border-left: 4px solid var(--sm-success); }
.sm-modal__message--error   { background: rgba(239,68,68,0.1); color: #991b1b; border-left: 4px solid var(--sm-error); }

/* ═══════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════ */
.sm-vendor-form-wrap, .sm-form-wrap { max-width: 820px; margin: 0 auto; padding: 24px 20px; }
.sm-form-title { font-size: 24px; font-weight: 800; color: var(--sm-text); margin-bottom: 24px; }
.sm-form-row { margin-bottom: 18px; }
.sm-form-row label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--sm-text); margin-bottom: 7px;
}
.sm-req { color: var(--sm-error); }

.sm-form-row input[type="text"],
.sm-form-row input[type="email"],
.sm-form-row input[type="tel"],
.sm-form-row input[type="number"],
.sm-form-row input[type="date"],
.sm-form-row textarea,
.sm-form-row select,
.sm-distance-input,
.sm-enquiry-form input,
.sm-enquiry-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  font-size: 14px;
  color: var(--sm-text);
  background: var(--sm-surface);
  transition: border-color var(--sm-transition), box-shadow var(--sm-transition);
  box-sizing: border-box;
}
.sm-form-row input:focus,
.sm-form-row textarea:focus,
.sm-form-row select:focus {
  outline: none;
  border-color: var(--sm-accent);
  box-shadow: 0 0 0 3px rgba(39,174,96,0.15);
}
.sm-form-row small { display: block; margin-top: 5px; font-size: 12px; color: var(--sm-text-muted); }
.sm-form-row--half { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) {
  .sm-form-row--half { grid-template-columns: 1fr; }
  .sm-modal__actions { flex-direction: column; }
}
.sm-form-section {
  background: var(--sm-surface-2);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  padding: 18px;
  margin-bottom: 18px;
}
.sm-form-section h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--sm-primary); }
.sm-help-text { font-size: 13px; color: var(--sm-text-muted); margin-bottom: 14px; }
.sm-form-actions { margin-top: 24px; }
.sm-form-message { margin-top: 14px; padding: 12px; border-radius: var(--sm-radius-sm); font-size: 14px; }
.sm-form-message--success { background: rgba(16,185,129,0.1); color: #065f46; border-left: 4px solid var(--sm-success); }
.sm-form-message--error   { background: rgba(239,68,68,0.1); color: #991b1b; border-left: 4px solid var(--sm-error); }

/* Back button / topbar */
.sm-form-topbar { margin-bottom: 18px; }
.sm-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sm-primary) !important;
  font-size: 13px; padding: 7px 14px;
}

/* Price field show/hide */
#sm-subcategory-row { transition: all 0.2s ease; }

/* ─── Gallery upload ─── */
.sm-gallery-manager {
  background: var(--sm-surface-2);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 18px;
}
.sm-gallery-manager__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.sm-gallery-manager__count { font-size: 13px; color: var(--sm-text-muted); }
.sm-gallery-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.sm-gallery-thumb {
  position: relative; border-radius: var(--sm-radius-sm);
  overflow: hidden; aspect-ratio: 1; background: var(--sm-border);
  box-shadow: var(--sm-shadow); transition: transform var(--sm-transition);
}
.sm-gallery-thumb:hover { transform: scale(1.03); }
.sm-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-gallery-thumb--primary::after {
  content: '★ Main';
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(30,107,74,0.85); color: #fff;
  font-size: 10px; font-weight: 700; text-align: center;
  padding: 3px 0; letter-spacing: 0.5px;
}
.sm-gallery-remove {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px;
  background: rgba(239,68,68,0.9); color: #fff;
  border: none; border-radius: 50%; cursor: pointer;
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--sm-transition); font-weight: bold; z-index: 2;
}
.sm-gallery-thumb:hover .sm-gallery-remove { opacity: 1; }
.sm-gallery-empty { grid-column: 1/-1; text-align: center; padding: 24px; color: var(--sm-text-muted); font-size: 13px; }

/* File upload area */
.sm-upload-area {
  position: relative; border: 2px dashed var(--sm-border);
  border-radius: var(--sm-radius-sm); padding: 22px; text-align: center;
  background: var(--sm-surface-2); cursor: pointer;
  transition: border-color var(--sm-transition), background var(--sm-transition);
}
.sm-upload-area:hover, .sm-upload-area.is-dragover { border-color: var(--sm-accent); background: var(--sm-accent-light); }
.sm-upload-icon { font-size: 30px; margin-bottom: 6px; }
.sm-upload-area p { margin: 4px 0; font-size: 14px; color: var(--sm-text-muted); }
.sm-upload-hint { font-size: 12px !important; }
.sm-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sm-file-list { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.sm-file-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; background: var(--sm-surface-2);
  border-radius: 6px; font-size: 13px; color: var(--sm-text);
}

/* ═══════════════════════════════════════════════════════════════════
   MY SERVICES (VENDOR)
   ═══════════════════════════════════════════════════════════════════ */
.sm-my-services-wrap {}
.sm-my-services-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
.sm-my-services-header h2 { font-size: 21px; font-weight: 800; color: var(--sm-text); margin: 0; }
.sm-empty-state {
  text-align: center; padding: 52px 36px;
  background: var(--sm-surface-2);
  border-radius: var(--sm-radius);
  border: 1px solid var(--sm-border);
}
.sm-empty-icon { font-size: 44px; margin-bottom: 14px; }
.sm-empty-state h3 { font-size: 19px; font-weight: 700; color: var(--sm-text); margin: 0 0 8px; }
.sm-empty-state p { color: var(--sm-text-muted); margin: 0 0 18px; }
.sm-services-table-wrap { overflow-x: auto; }
.sm-services-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sm-services-table th, .sm-services-table td {
  padding: 11px 14px; text-align: left;
  border-bottom: 1px solid var(--sm-border);
}
.sm-services-table thead th {
  background: var(--sm-primary); color: #fff;
  font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.sm-services-table tbody tr:hover { background: var(--sm-accent-light); }
.sm-table-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════
   ADMIN PANEL
   ═══════════════════════════════════════════════════════════════════ */
.sm-admin-wrap .sm-admin-stats {
  display: flex; gap: 18px; margin: 18px 0 28px; flex-wrap: wrap;
}
.sm-stat-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 18px 24px;
  display: flex; flex-direction: column;
  align-items: center; gap: 5px; min-width: 120px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.sm-stat-number { font-size: 32px; font-weight: 800; color: #1a2e22; }
.sm-stat--pending { color: #92400e; }
.sm-stat--live    { color: #065f46; }
.sm-stat-label { font-size: 12px; color: #6b7280; text-align: center; }
.sm-admin-table th { text-align: left; }
.sm-admin-no-items { padding: 18px; background: #f9f9f9; border: 1px solid #eee; border-radius: 6px; }
.sm-admin-status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.sm-admin-status--approved { background: #d1fae5; color: #065f46; }
.sm-admin-status--pending  { background: #fef3c7; color: #92400e; }
.sm-admin-status--rejected { background: #fee2e2; color: #991b1b; }

/* ═══════════════════════════════════════════════════════════════════
   AUCTION PREFILL BANNER
   ═══════════════════════════════════════════════════════════════════ */
.sm-auction-prefill-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  background: var(--sm-accent-light);
  border: 1px solid rgba(39,174,96,0.3);
  border-radius: var(--sm-radius-sm);
  margin-bottom: 20px; font-size: 14px;
}
.sm-prefill-icon { font-size: 22px; flex-shrink: 0; }
.sm-prefill-meta { color: var(--sm-text-muted); font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════ */
.sm-toast-container {
  position: fixed; bottom: 22px; right: 22px;
  z-index: 999999; display: flex; flex-direction: column;
  gap: 8px; max-width: 320px;
}
.sm-toast {
  background: #1a2e22; color: #fff;
  padding: 12px 16px; border-radius: 10px; font-size: 14px;
  font-weight: 500; box-shadow: 0 8px 24px rgba(30,107,74,0.25);
  display: flex; align-items: flex-start; gap: 10px;
  animation: sm-toast-in 0.3s ease;
}
.sm-toast--success { border-left: 4px solid var(--sm-success); }
.sm-toast--error   { border-left: 4px solid var(--sm-error); }
@keyframes sm-toast-in { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════════
   NOT AVAILABLE
   ═══════════════════════════════════════════════════════════════════ */
.sm-not-available { text-align: center; padding: 72px 36px; max-width: 480px; margin: 0 auto; }
.sm-not-available h2 { font-size: 26px; font-weight: 800; color: var(--sm-text); margin-bottom: 10px; }
.sm-not-available p { color: var(--sm-text-muted); margin-bottom: 20px; }

/* ═══════════════════════════════════════════════════════════════════
   WCFM MENU
   ═══════════════════════════════════════════════════════════════════ */
.wcfm_menu li.sm-wcfm-menu-item a {
  border-left: 3px solid var(--sm-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CHECKOUT EXTRAS
   ═══════════════════════════════════════════════════════════════════ */
.sm-bk-service-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--sm-surface-2);
  border-radius: var(--sm-radius-sm);
  margin-bottom: 16px;
}
.sm-bk-service-thumb {
  width: 72px; height: 56px;
  object-fit: cover;
  border-radius: var(--sm-radius-sm);
  flex-shrink: 0;
}
.sm-text-muted { color: var(--sm-text-muted); font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════
   BOOKING DETAIL FOOTER (back button area)
   ═══════════════════════════════════════════════════════════════════ */
.sm-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--sm-border);
  flex-wrap: wrap;
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   BOOKING PANEL CALL-TO-ACTION
   ═══════════════════════════════════════════════════════════════════ */
.sm-booking-cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}