/**
 * Local Services Directory SaaS — Public Stylesheet
 * Design inspired by Thumbtack · Yelp · UrbanClap · Fiverr Local
 */

:root {
  --lsd-primary:      #1a56db;
  --lsd-primary-dark: #1342ad;
  --lsd-accent:       #f59e0b;
  --lsd-success:      #10b981;
  --lsd-danger:       #ef4444;
  --lsd-verified:     #0ea5e9;
  --lsd-whatsapp:     #25d366;
  --lsd-text:         #111827;
  --lsd-text-muted:   #6b7280;
  --lsd-bg:           #f3f4f6;
  --lsd-card-bg:      #ffffff;
  --lsd-border:       #e5e7eb;
  --lsd-shadow:       0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
  --lsd-shadow-hover: 0 8px 30px rgba(0,0,0,.14);
  --lsd-radius:       14px;
  --lsd-radius-sm:    8px;
  --lsd-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lsd-transition:   all .22s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lsd-text: #f9fafb; --lsd-text-muted: #9ca3af;
    --lsd-bg: #0d1117; --lsd-card-bg: #161b22; --lsd-border: #30363d;
  }
}

/* Hero */
.lsd-hero { background: linear-gradient(135deg,#1a56db,#1e40af); color:#fff; padding:56px 24px; text-align:center; border-radius:var(--lsd-radius); margin-bottom:32px; }
.lsd-hero h1 { font-size:clamp(24px,4vw,42px); font-weight:800; margin:0 0 12px; }
.lsd-hero p  { font-size:16px; opacity:.85; margin:0 0 28px; }

/* Search */
.lsd-search-bar { display:flex; background:#fff; border-radius:50px; padding:6px 6px 6px 20px; box-shadow:0 4px 20px rgba(0,0,0,.2); gap:8px; max-width:600px; margin:0 auto; }
.lsd-search-input { flex:1; border:none; outline:none; font-size:15px; color:#111; background:transparent; }
.lsd-search-btn { padding:12px 24px; background:var(--lsd-primary); color:#fff; border:none; border-radius:50px; font-size:14px; font-weight:700; cursor:pointer; }
.lsd-search-btn:hover { background:var(--lsd-primary-dark); }

/* Category Pills */
.lsd-categories-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.lsd-cat-pill { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:var(--lsd-card-bg); border:1.5px solid var(--lsd-border); border-radius:50px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; color:var(--lsd-text-muted); transition:var(--lsd-transition); }
.lsd-cat-pill:hover,.lsd-cat-pill.active { background:var(--lsd-primary); border-color:var(--lsd-primary); color:#fff; }

/* Layout */
.lsd-directory-layout { display:grid; grid-template-columns:250px 1fr; gap:24px; align-items:start; }
.lsd-filters-sidebar { background:var(--lsd-card-bg); border-radius:var(--lsd-radius); padding:20px; box-shadow:var(--lsd-shadow); position:sticky; top:80px; }
.lsd-filter-section { margin-bottom:20px; }
.lsd-filter-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--lsd-text-muted); margin-bottom:10px; }
.lsd-filter-option { display:flex; align-items:center; gap:8px; padding:5px 0; cursor:pointer; font-size:14px; color:var(--lsd-text); }
.lsd-filter-select,.lsd-filter-input { width:100%; padding:8px 12px; border:1.5px solid var(--lsd-border); border-radius:var(--lsd-radius-sm); background:var(--lsd-card-bg); color:var(--lsd-text); font-size:13px; }

/* Grid */
.lsd-providers-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }

/* Provider Card */
.lsd-provider-card { background:var(--lsd-card-bg); border-radius:var(--lsd-radius); overflow:hidden; box-shadow:var(--lsd-shadow); transition:var(--lsd-transition); display:flex; flex-direction:column; border:1px solid var(--lsd-border); position:relative; }
.lsd-provider-card:hover { box-shadow:var(--lsd-shadow-hover); transform:translateY(-3px); }
.lsd-card-cover { height:90px; background:linear-gradient(135deg,#1a56db,#2563eb); position:relative; overflow:hidden; }
.lsd-card-cover img { width:100%; height:100%; object-fit:cover; }
.lsd-card-avatar-wrap { position:absolute; bottom:-24px; left:16px; }
.lsd-card-avatar { width:52px; height:52px; border-radius:50%; border:3px solid var(--lsd-card-bg); object-fit:cover; background:var(--lsd-bg); display:block; }
.lsd-card-badges-top { position:absolute; top:8px; right:8px; display:flex; gap:5px; }

/* Badges */
.lsd-badge { padding:3px 8px; border-radius:50px; font-size:11px; font-weight:700; text-transform:uppercase; }
.lsd-badge-featured { background:var(--lsd-accent); color:#000; }
.lsd-badge-verified { background:var(--lsd-verified); color:#fff; }
.lsd-badge-emergency { background:var(--lsd-danger); color:#fff; }

.lsd-card-body { padding:32px 16px 14px; flex:1; display:flex; flex-direction:column; gap:7px; }
.lsd-card-name { font-size:15px; font-weight:700; color:var(--lsd-text); text-decoration:none; }
.lsd-card-name:hover { color:var(--lsd-primary); }
.lsd-card-tagline { font-size:13px; color:var(--lsd-text-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lsd-card-rating { display:flex; align-items:center; gap:6px; font-size:13px; }
.lsd-stars-display { display:flex; gap:2px; color:var(--lsd-accent); font-size:13px; }
.lsd-rating-count { color:var(--lsd-text-muted); }
.lsd-card-meta { display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--lsd-text-muted); }
.lsd-card-meta-item { display:flex; align-items:center; gap:3px; }
.lsd-card-categories { display:flex; flex-wrap:wrap; gap:5px; }
.lsd-cat-tag { padding:3px 8px; background:rgba(26,86,219,.1); color:var(--lsd-primary); border-radius:50px; font-size:11px; font-weight:600; }

/* Card Footer */
.lsd-card-footer { padding:10px 16px; border-top:1px solid var(--lsd-border); display:flex; gap:7px; }
.lsd-btn-book { flex:1; padding:9px 12px; background:var(--lsd-primary); color:#fff; border:none; border-radius:var(--lsd-radius-sm); font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; text-align:center; display:flex; align-items:center; justify-content:center; gap:5px; transition:var(--lsd-transition); }
.lsd-btn-book:hover { background:var(--lsd-primary-dark); }
.lsd-btn-wa { padding:9px 12px; background:var(--lsd-whatsapp); color:#fff; border:none; border-radius:var(--lsd-radius-sm); font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; display:flex; align-items:center; gap:5px; transition:var(--lsd-transition); }
.lsd-btn-wa:hover { background:#1ebe57; }
.lsd-btn-profile { padding:9px 12px; background:transparent; border:1.5px solid var(--lsd-border); color:var(--lsd-text); border-radius:var(--lsd-radius-sm); font-size:13px; cursor:pointer; text-decoration:none; display:flex; align-items:center; justify-content:center; transition:var(--lsd-transition); }
.lsd-btn-profile:hover { border-color:var(--lsd-primary); color:var(--lsd-primary); }

/* Single Profile */
.lsd-profile-wrap { max-width:900px; margin:0 auto; }
.lsd-profile-header { background:var(--lsd-card-bg); border-radius:var(--lsd-radius); overflow:hidden; box-shadow:var(--lsd-shadow); margin-bottom:24px; }
.lsd-profile-cover { height:180px; background:linear-gradient(135deg,var(--lsd-primary),#2563eb); }
.lsd-profile-cover img { width:100%; height:100%; object-fit:cover; }
.lsd-profile-info { padding:20px 24px 24px; display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin-top:-36px; position:relative; }
.lsd-profile-avatar { width:80px; height:80px; border-radius:50%; border:4px solid var(--lsd-card-bg); object-fit:cover; flex-shrink:0; background:var(--lsd-bg); }
.lsd-profile-details { flex:1; min-width:200px; }
.lsd-profile-name { font-size:22px; font-weight:800; margin:0 0 4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lsd-verified-icon { color:var(--lsd-verified); }
.lsd-profile-tagline { font-size:14px; color:var(--lsd-text-muted); margin-bottom:12px; }
.lsd-profile-actions { display:flex; gap:10px; flex-wrap:wrap; }

.lsd-btn-lg { padding:12px 20px; border-radius:var(--lsd-radius-sm); font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:var(--lsd-transition); border:none; }
.lsd-btn-primary { background:var(--lsd-primary); color:#fff; }
.lsd-btn-primary:hover { background:var(--lsd-primary-dark); }
.lsd-btn-wa-lg { background:var(--lsd-whatsapp); color:#fff; }
.lsd-btn-wa-lg:hover { background:#1ebe57; }
.lsd-btn-call { background:var(--lsd-success); color:#fff; }

/* Booking Form */
.lsd-booking-form { background:var(--lsd-card-bg); border-radius:var(--lsd-radius); padding:24px; box-shadow:var(--lsd-shadow); }
.lsd-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lsd-form-group { display:flex; flex-direction:column; gap:5px; }
.lsd-form-group.full { grid-column:1/-1; }
.lsd-form-label { font-size:13px; font-weight:600; color:var(--lsd-text); }
.lsd-form-input,.lsd-form-select,.lsd-form-textarea { padding:10px 14px; border:2px solid var(--lsd-border); border-radius:var(--lsd-radius-sm); background:var(--lsd-card-bg); color:var(--lsd-text); font-size:14px; font-family:var(--lsd-font); transition:var(--lsd-transition); }
.lsd-form-input:focus,.lsd-form-select:focus,.lsd-form-textarea:focus { outline:none; border-color:var(--lsd-primary); box-shadow:0 0 0 3px rgba(26,86,219,.12); }
.lsd-form-textarea { resize:vertical; min-height:90px; }
.lsd-btn-submit { width:100%; padding:14px; background:var(--lsd-primary); color:#fff; border:none; border-radius:var(--lsd-radius-sm); font-size:15px; font-weight:700; cursor:pointer; transition:var(--lsd-transition); margin-top:8px; }
.lsd-btn-submit:hover { background:var(--lsd-primary-dark); }

/* Reviews */
.lsd-reviews-section { background:var(--lsd-card-bg); border-radius:var(--lsd-radius); padding:24px; box-shadow:var(--lsd-shadow); margin-bottom:24px; }
.lsd-review-card { padding:16px 0; border-bottom:1px solid var(--lsd-border); }
.lsd-review-card:last-child { border-bottom:none; padding-bottom:0; }
.lsd-review-header { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.lsd-reviewer-avatar { width:38px; height:38px; border-radius:50%; background:var(--lsd-bg); object-fit:cover; }
.lsd-reviewer-name { font-weight:700; font-size:14px; }
.lsd-review-date { font-size:12px; color:var(--lsd-text-muted); }
.lsd-review-stars { color:var(--lsd-accent); font-size:14px; }
.lsd-review-content { font-size:14px; line-height:1.6; }
.lsd-provider-reply { background:var(--lsd-bg); border-left:3px solid var(--lsd-primary); border-radius:0 var(--lsd-radius-sm) var(--lsd-radius-sm) 0; padding:10px 14px; margin-top:10px; font-size:13px; }

/* Dashboard */
.lsd-dashboard-wrap { max-width:1000px; margin:0 auto; }
.lsd-dashboard-header { background:linear-gradient(135deg,var(--lsd-primary),var(--lsd-primary-dark)); color:#fff; border-radius:var(--lsd-radius); padding:32px; margin-bottom:24px; }
.lsd-dashboard-nav { display:flex; gap:4px; background:var(--lsd-card-bg); border-radius:var(--lsd-radius); padding:8px; box-shadow:var(--lsd-shadow); margin-bottom:24px; overflow-x:auto; }
.lsd-dashboard-nav a { display:flex; align-items:center; gap:6px; padding:10px 16px; border-radius:var(--lsd-radius-sm); text-decoration:none; color:var(--lsd-text-muted); font-size:13px; font-weight:600; white-space:nowrap; transition:var(--lsd-transition); }
.lsd-dashboard-nav a:hover,.lsd-dashboard-nav a.active { background:var(--lsd-primary); color:#fff; }

/* Bookings Table */
.lsd-bookings-table { width:100%; border-collapse:collapse; font-size:14px; }
.lsd-bookings-table th { text-align:left; padding:10px 14px; background:var(--lsd-bg); font-weight:700; color:var(--lsd-text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.lsd-bookings-table td { padding:12px 14px; border-bottom:1px solid var(--lsd-border); vertical-align:middle; }
.lsd-status-badge { padding:3px 8px; border-radius:50px; font-size:11px; font-weight:700; text-transform:uppercase; }
.lsd-status-pending { background:#fef3c7; color:#92400e; }
.lsd-status-confirmed { background:#d1fae5; color:#065f46; }
.lsd-status-completed { background:#dbeafe; color:#1e40af; }
.lsd-status-cancelled,.lsd-status-rejected { background:#fee2e2; color:#991b1b; }

/* Plans */
.lsd-plans-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin:32px 0; }
.lsd-plan-card { background:var(--lsd-card-bg); border-radius:var(--lsd-radius); padding:32px 24px; text-align:center; border:2px solid var(--lsd-border); transition:var(--lsd-transition); position:relative; overflow:hidden; }
.lsd-plan-card.lsd-plan-popular { border-color:var(--lsd-primary); box-shadow:0 8px 40px rgba(26,86,219,.2); }
.lsd-plan-popular-badge { position:absolute; top:16px; right:-28px; background:var(--lsd-accent); color:#000; font-size:11px; font-weight:700; padding:4px 40px; transform:rotate(45deg); }
.lsd-plan-name { font-size:20px; font-weight:700; margin-bottom:8px; }
.lsd-plan-price { font-size:44px; font-weight:800; color:var(--lsd-primary); }
.lsd-plan-price span { font-size:15px; color:var(--lsd-text-muted); font-weight:400; }
.lsd-plan-features { list-style:none; padding:0; margin:20px 0 24px; text-align:left; }
.lsd-plan-features li { padding:7px 0; font-size:14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--lsd-border); }
.lsd-plan-features li:last-child { border-bottom:none; }
.lsd-plan-features li::before { content:'✓'; color:var(--lsd-success); font-weight:700; }
.lsd-btn-choose-plan { width:100%; padding:14px; background:var(--lsd-primary); color:#fff; border:none; border-radius:var(--lsd-radius-sm); font-size:15px; font-weight:700; cursor:pointer; transition:var(--lsd-transition); }
.lsd-btn-choose-plan:hover { background:var(--lsd-primary-dark); }

/* Locality */
.lsd-locality-wrap { background:var(--lsd-card-bg); border-radius:var(--lsd-radius); padding:20px 24px; box-shadow:var(--lsd-shadow); margin-bottom:24px; }
.lsd-locality-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.lsd-locality-select { flex:1; min-width:140px; }
.lsd-locality-select label { display:block; font-size:11px; font-weight:700; color:var(--lsd-text-muted); text-transform:uppercase; margin-bottom:6px; }
.lsd-locality-select select { width:100%; padding:10px 14px; border:2px solid var(--lsd-border); border-radius:var(--lsd-radius-sm); background:var(--lsd-card-bg); color:var(--lsd-text); font-size:14px; cursor:pointer; }
.lsd-locality-select select:focus { outline:none; border-color:var(--lsd-primary); }
.lsd-geo-btn { padding:10px 16px; background:var(--lsd-primary); color:#fff; border:none; border-radius:var(--lsd-radius-sm); cursor:pointer; font-size:14px; font-weight:600; }

/* Toast */
.lsd-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); padding:12px 24px; border-radius:50px; font-size:14px; font-weight:600; z-index:99999; white-space:nowrap; box-shadow:0 4px 20px rgba(0,0,0,.2); }
.lsd-toast-success { background:var(--lsd-success); color:#fff; }
.lsd-toast-error   { background:var(--lsd-danger); color:#fff; }
.lsd-toast-info    { background:var(--lsd-primary); color:#fff; }

/* WhatsApp Float */
.lsd-float-whatsapp { position:fixed; bottom:24px; right:24px; z-index:9999; width:56px; height:56px; background:var(--lsd-whatsapp); border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 4px 20px rgba(37,211,102,.5); transition:var(--lsd-transition); }
.lsd-float-whatsapp:hover { transform:scale(1.1); }
.lsd-float-whatsapp svg { width:28px; height:28px; fill:#fff; }

/* Skeleton */
.lsd-skeleton { background:linear-gradient(90deg,var(--lsd-bg) 25%,var(--lsd-border) 50%,var(--lsd-bg) 75%); background-size:200% 100%; animation:lsd-shimmer 1.4s infinite; border-radius:var(--lsd-radius-sm); }
@keyframes lsd-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Empty */
.lsd-empty { text-align:center; padding:60px 20px; color:var(--lsd-text-muted); }
.lsd-empty-icon { font-size:64px; margin-bottom:16px; }
.lsd-empty h3 { font-size:20px; color:var(--lsd-text); margin-bottom:8px; }

/* Sticky Mobile CTA */
@media (max-width:768px) {
  .lsd-mobile-cta { position:fixed; bottom:0; left:0; right:0; background:var(--lsd-card-bg); padding:12px 16px; display:flex; gap:10px; box-shadow:0 -4px 20px rgba(0,0,0,.1); z-index:1000; border-top:1px solid var(--lsd-border); }
  .lsd-mobile-cta .lsd-btn-lg { flex:1; justify-content:center; }
  .lsd-profile-wrap { padding-bottom:80px; }
  .lsd-directory-layout { grid-template-columns:1fr; }
  .lsd-filters-sidebar { position:static; display:none; }
  .lsd-filters-sidebar.open { display:block; }
}

@media (max-width:640px) {
  .lsd-providers-grid { grid-template-columns:1fr; }
  .lsd-form-grid { grid-template-columns:1fr; }
}