/* ========================= Solar Directory – CSS (No Blues / No Greens) ========================= */
/* Cleaned & organized — duplicates removed, structure improved. NO design color changes. */

/* -------------------------
   Design tokens
   ------------------------- */
:root{
  --sd-page:#f8fafb;
  --sd-surface:#ffffff;
  --sd-border:#e7edf1;
  --sd-ink:#15222b;
  --sd-muted:#6b818f;
  /* BRAND: amber */
  --sd-brand:#FFB618;
  /* links, accents, icons */
  --sd-brand-600:#cc8f00;
  /* hover/darker */
  --sd-focus:rgba(255,182,24,.25);
  /* Buttons */
  --sd-btn-primary:#eae4ce;
  /* default/active */
  --sd-btn-hover:#FFB618;
  /* hover */
  --sd-btn-text:#15222b;
  /* Misc */
  --sd-star:#ffb400;
  --sd-r:14px;
  --sd-gap:22px;
  --sd-pad:18px;
  --sd-shadow:0 8px 24px rgba(23,43,77,.06), 0 2px 6px rgba(23,43,77,.04);
  --sd-font:system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  /* responsive helpers */
  --bp-xl:1400px;
  --bp-lg:1200px;
  --bp-md:992px;
  --bp-sm:768px;
  --bp-xs:480px;
}

/* -------------------------
   Base / Resets
   ------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--sd-page); color:var(--sd-ink); font-family:var(--sd-font); line-height:1.55}
img{max-width:100%; height:auto}
a{color:var(--sd-brand); text-decoration:none}
a:hover{color:var(--sd-brand-600)}

/* -------------------------
   Layout container
   ------------------------- */
.container{max-width:1280px; margin:0 auto; padding:24px}

/* -------------------------
   Shared card surface
   ------------------------- */
.sd-card{
  background:var(--sd-surface);
  border:1px solid var(--sd-border);
  border-radius:var(--sd-r);
  box-shadow:var(--sd-shadow);
  padding:var(--sd-pad);
}

/* -------------------------
   Archive layout (filters + results)
   ------------------------- */
.sd-wrap{
  display:grid;
  grid-template-columns:270px 1fr;
  gap:20px;
}

/* Filters (left column) */
.sd-filters .sd-card{position:sticky; top:24px; padding:16px 16px 18px}
.sd-filters h3{margin:0 0 10px; font-size:22px}
.sd-label{display:block; font-weight:700; color:var(--sd-muted); margin:14px 0 6px}
.sd-input,.sd-select select{
  width:100%;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--sd-border);
  border-radius:10px;
  outline:0;
}
.sd-input:focus,.sd-select select:focus{border-color:var(--sd-brand); box-shadow:0 0 0 3px var(--sd-focus)}
.sd-check{display:flex; align-items:center; gap:10px; margin:10px 0}
.sd-check input{width:18px; height:18px}

/* Results head */
.sd-results-head{display:flex; align-items:center; justify-content:space-between; margin:0 0 12px}
.sd-results-head h2{margin:0; font-size:28px; font-weight:800}
.sd-sort{display:flex; align-items:center; gap:10px; color:var(--sd-muted); margin-right:8px}
.sd-sort select{padding:9px 36px 9px 14px; border:1px solid var(--sd-border); border-radius:10px; background:#fff}
.sd-sort select:focus{border-color:var(--sd-brand); box-shadow:0 0 0 3px var(--sd-focus)}

/* -------------------------
   Results grid
   ------------------------- */
.sd-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; align-items:stretch}

/* -------------------------
   Company card (list item)
   ------------------------- */
.sd-company{
  display:grid;
  grid-template-columns:50px 1fr;
  grid-template-areas:
    "avatar head"
    "excerpt excerpt"
    "badge badge"
    "actions actions";
  column-gap:14px;
  padding:18px;
  border-radius:14px;
  border:1px solid var(--sd-border);
  background:#fff;
  box-shadow:var(--sd-shadow);
  align-items:center;
}
.sd-company .sd-avatar{grid-area:avatar; width:50px; height:50px; margin-top:-20px; border-radius:12px; background:var(--sd-brand); color:#fff; display:grid; place-items:center; font-weight:800; letter-spacing:.3px; box-shadow:0 6px 18px rgba(255,182,24,.25)}

/* Title / meta */
.sd-title{margin:0 0 6px; font-size:18px; font-weight:800; line-height:1.25}
.sd-title a{color:var(--sd-ink)}
.sd-title a:hover{color:var(--sd-brand)}
.sd-meta{margin:0 0 6px; color:var(--sd-muted); font-size:14px}

/* Stars / rating */
.sd-stars{display:inline-flex; align-items:center; gap:2px}
.sd-stars .star{color:var(--sd-star); font-size:14px}
.sd-stars .star.half{color:#e0e6eb; position:relative}
.sd-stars .star.half::before{content:'★'; position:absolute; left:0; top:0; width:50%; overflow:hidden; color:var(--sd-star)}
.sd-rating{margin-left:6px}
.sd-reviews{margin-left:4px; color:var(--sd-muted)}

/* Excerpt */
.sd-company .sd-excerpt{grid-area:excerpt; margin:12px 0 12px; color:#2d3d48; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* Badge / chips */
.sd-company .sd-badge{grid-area:badge; display:flex; align-items:center; gap:6px; background:#fff3d1; color:#7a5200; border:1px solid #f1e3bf; padding:6px 11px; border-radius:999px; font-size:12px; font-weight:700; margin:2px 0 12px; justify-self:start; width:max-content; white-space:nowrap}
.sd-chip{display:flex; align-items:center; gap:6px; background:#fff3d1; color:#7a5200; border:1px solid #f1e3bf; padding:6px 11px; border-radius:999px; font-size:12px; font-weight:700; margin:2px 0 12px; width:max-content; white-space:nowrap}

/* Actions / buttons */
.sd-company .sd-actions{grid-area:actions; display:flex; gap:12px; flex-wrap:nowrap; margin-top:0}
.sd-btn{display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--sd-border); background:#fff; color:var(--sd-ink); font-weight:700; transition:.18s; white-space:nowrap; flex:0 1 auto}
.sd-btn:hover{transform:translateY(-1px); box-shadow:var(--sd-shadow)}
.sd-btn.sd-primary{background:var(--sd-btn-primary); border-color:var(--sd-btn-primary); color:var(--sd-btn-text)}
.sd-btn.sd-primary:hover,.sd-btn.sd-primary:focus{background:var(--sd-btn-hover); border-color:var(--sd-btn-hover); color:var(--sd-btn-text); box-shadow:0 0 0 3px var(--sd-focus)}
.sd-btn.sd-primary:active{background:var(--sd-btn-primary); border-color:var(--sd-btn-primary)}

/* -------------------------
   Pagination
   ------------------------- */
.sd-pager{margin-top:22px}
.sd-pager ul{list-style:none; display:flex; gap:8px; padding:0; margin:0}
.sd-pager a,.sd-pager span{display:inline-block; padding:9px 12px; border:1px solid var(--sd-border); background:#fff; border-radius:10px; min-width:38px; text-align:center}
.sd-pager .current{background:var(--sd-btn-primary); border-color:var(--sd-btn-primary); color:var(--sd-btn-text)}

/* -------------------------
   Single/company page header
   ------------------------- */
.sd-single-hero{background:linear-gradient(180deg,#f7f2e5 0%, #efe4c7 100%); border:1px solid var(--sd-border); border-radius:16px; padding:22px; display:flex; gap:16px; align-items:flex-start; margin-bottom:20px}
.sd-avatar.lg{width:66px; height:66px; border-radius:14px; font-size:24px; color:#fff; background:var(--sd-brand); display:grid; place-items:center; font-weight:800; box-shadow:0 6px 18px rgba(255,182,24,.25)}
.sd-hero-meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px; color:#6b818f}
.sd-chip{background:#fff3d1; color:#8a5a00; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700}
.sd-location{margin-left:10px}
.sd-single-grid{display:grid; grid-template-columns:1fr 360px; gap:20px}
.sd-quote{position:sticky; top:24px; height:max-content}

/* Pills (services) */
.sd-pills{display:flex; gap:10px; flex-wrap:wrap}
.sd-pill{background:var(--sd-btn-hover); color:#15222b; padding:8px 12px; border-radius:999px; font-weight:700}
.sd-pill.hollow{background:#fff6dc; color:#8a5a00; border:1px solid #f1e3bf}

/* Reviews quick stats */
.sd-review-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.sd-review-stats>div{background:#fff8e6; border:1px solid #f1e3bf; border-radius:12px; padding:16px; text-align:center; font-weight:700}
.sd-review-stats span{display:block; margin-top:4px; color:#6b818f; font-weight:600}

/* Empty / status boxes */
.sd-empty-box{border:2px dashed var(--sd-border); background:#fff; border-radius:12px; padding:18px; text-align:center; color:#6b818f}
.sd-success{background:#fff6dc; color:#7a5200; border:1px solid #f1e3bf; padding:10px 12px; border-radius:10px; margin-bottom:10px; font-weight:700}
.sd-error{background:#ffecec; color:#9b1c1c; border:1px solid #ffd1d1; padding:10px 12px; border-radius:10px; margin-bottom:10px; font-weight:700}
.sd-form-note{font-size:12px; color:#6b818f; margin:8px 0 0}

/* Sidebar form inputs (quote box) */
.sd-quote label{color:#000; font-weight:600; margin-bottom:4px; display:block}
.sd-quote input, .sd-quote select, .sd-quote textarea{width:100%; padding:10px 12px; border:1px solid #000; border-radius:10px; background:#fff; transition:border-color .2s; outline:none}
.sd-quote input:focus, .sd-quote select:focus, .sd-quote textarea:focus{border-color:#FFB618}
.sd-quote:has(input:focus), .sd-quote:has(select:focus), .sd-quote:has(textarea:focus){box-shadow:0 0 0 3px var(--sd-focus); border-radius:14px; transition:box-shadow .2s ease}
.sd-quote .sd-btn{width:100%}

/* Reviews UI */
.sd-reviews .sd-rev-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.sd-reviews .sd-review-form{border:1px solid var(--sd-border); border-radius:12px; padding:14px; background:#fffaf0; margin-bottom:12px}
.sd-reviews .sd-stars-input{display:flex; gap:6px; align-items:center}
.sd-reviews .sd-star{font-size:22px; line-height:1; background:transparent; border:0; cursor:pointer; color:#fff; -webkit-text-stroke:1.25px #cfd8e3; text-shadow:0 1px 0 #cfd8e3, 1px 0 0 #cfd8e3, 0 -1px 0 #cfd8e3, -1px 0 0 #cfd8e3; opacity:1; transition:color .15s ease, transform .08s ease}
.sd-reviews .sd-star:hover{transform:scale(1.03)}
.sd-reviews .sd-star.on{color:var(--sd-star); -webkit-text-stroke:0; text-shadow:none}
.sd-reviews .sd-row{display:flex; gap:10px; margin-top:10px}
.sd-reviews textarea{width:100%; padding:10px 12px; border:1px solid var(--sd-border); border-radius:10px; background:#fff}
.sd-reviews .sd-msg{margin-top:8px; font-weight:600}
.sd-reviews .sd-msg.ok{color:#7a5200}
.sd-reviews .sd-msg.err{color:#b42318}
.sd-reviews .sd-busy{opacity:.6; pointer-events:none}

/* Tabs */
.sd-tabbar{display:flex; gap:8px; background:#f9f4e6; border:1px solid #f1e3bf; border-radius:12px; padding:4px; margin:10px 0}
.sd-tab{flex:1; border:0; background:transparent; padding:8px 10px; border-radius:10px; font-weight:700; color:#765a22; cursor:pointer}
.sd-tab.active{background:#fff; box-shadow:var(--sd-shadow); color:var(--sd-ink)}
.sd-tabpane{display:none}
.sd-tabpane.active{display:block}
.sd-review-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.sd-review{border:1px solid var(--sd-border); border-radius:12px; padding:12px; background:#fff}
.sd-review-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.sd-review-stars .star{color:var(--sd-star); font-size:16px}
.sd-review-meta{color:var(--sd-muted); font-size:13px}

/* Location & areas served rows */
.sd-card p > strong{display:inline-block; min-width:120px; font-weight:800; color:#7a5200}
.sd-card p:has(> strong){display:flex; align-items:flex-start; gap:10px; background:#fff8e6; border:1px solid #f1e3bf; border-radius:10px; padding:10px 12px; margin:8px 0}

/* Company map */
.company-map{margin-top:30px; background:#fff; border:1px solid #eaeaea; border-radius:12px; padding:20px; box-shadow:0 4px 14px rgba(0,0,0,0.08)}
.company-map-title{font-size:28px; font-weight:800; color:#1c1c1c; margin-bottom:14px}

/* -------------------------
   Responsiveness (merged & ordered)
   ------------------------- */
/* large -> medium -> small -> xsmall */
@media (max-width: var(--bp-lg)){
  .sd-wrap{grid-template-columns:260px 1fr; gap:18px}
  .sd-single-grid{grid-template-columns:1fr 320px}
}

@media (max-width: var(--bp-md)){
  .sd-wrap{grid-template-columns:240px 1fr}
  .sd-results-head h2{font-size:26px}
}

@media (max-width: var(--bp-sm)){
  .container{padding:0 14px !important; margin:0 auto !important;}
  .sd-wrap{display:flex; flex-direction:column; align-items:center; gap:20px}
  .sd-single-grid{grid-template-columns:1fr; max-width:600px; margin:0 auto; padding:0 14px !important; align-items:center;}
  .sd-single-hero{margin:0 auto !important;}
}

.sd-quote{position:sticky}
}

.sd-quote{position:sticky}
}

.sd-quote{position:sticky}
}
  .sd-quote{position:sticky}
}

@media (max-width: var(--bp-xs)){
  .container{padding:16px}
  .sd-results-head{flex-direction:column; align-items:flex-start; gap:8px}
  .sd-company{grid-template-columns:44px 1fr; column-gap:10px}
  .sd-company .sd-avatar{width:44px; height:44px; border-radius:10px}
  .sd-title{font-size:17px}
  .sd-company .sd-actions .sd-btn{flex:1 1 100%}
}

/* Additional final mobile fixes (kept as important rules to preserve behavior) */
@media (max-width: 768px){
  .sd-wrap{display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:20px !important}
  .sd-filters{order:1 !important; width:100% !important}
  .sd-results{order:2 !important; width:100% !important}
  .sd-filters .sd-card{position:static !important; margin:0 auto !important}
  .sd-grid{display:grid !important; grid-template-columns:1fr !important; gap:18px !important}
  .sd-company{margin:0 4px !important}
  .keydesign-container.e-con{padding-left:0px !important; padding-right:12px !important}
  .sd-single-grid{display:flex !important; flex-direction:column !important; gap:20px !important; margin:0 auto !important; align-items:center !important; align-items:static !important; justify-content:center !important; max-width:600px !important}
  .sd-avatar.lg{width:40px; height:40px; border-radius:10px}
  .sd-single-hero .sd-card{margin:0 auto !important}
  .sd-single-grid > *{width:100% !important}
  .sd-quote{order:2 !important; position:static !important; margin-top:10px !important}
}

/* Logo container styles (cards + single) */
.sd-logo-box{width:70px; height:70px; border-radius:50%; overflow:hidden; display:flex; justify-content:center; align-items:center; background:#fff}
.sd-logo-box img.sd-logo{width:100%; height:100%; object-fit:contain}
.sd-single-hero .sd-logo-box{width:110px; height:110px}
.sd-avatar-fallback, .sd-avatar-fallback.lg{display:flex; justify-content:center; align-items:center; background:#ddd; color:#333; font-weight:bold; text-transform:uppercase}
@media (max-width:480px){
  .sd-company .sd-logo-box{width:55px; height:55px}
  .sd-single-hero .sd-logo-box{width:85px; height:55px}
  .sd-avatar-fallback.lg{font-size:28px}
}

/* Final polish: ensure layout helpers and hover state preserved */
.sd-company .sd-head{display:flex !important; flex-direction:column !important; gap:6px !important}
.sd-company .sd-avatar{align-self:center !important; margin-bottom:6px !important}
.sd-card p:has(> strong){flex-direction:column !important; background:#fff8e6 !important}
.sd-card p > strong{margin-bottom:6px !important; display:block !important}

/* Card hover */
.sd-card.sd-company:hover{border-color:#FFB618; box-shadow:0 10px 15px -5px rgba(0,0,0,0.3); transform:translateY(-3px)}

/* End of cleaned stylesheet */