/* =============================================
   Pawa Search – Directory Frontend CSS
   ============================================= */
:root {
  --pws-primary:   #2563eb;
  --pws-secondary: #f59e0b;
  --pws-dark:      #111827;
  --pws-gray:      #6b7280;
  --pws-light:     #f9fafb;
  --pws-border:    #e5e7eb;
  --pws-radius:    10px;
  --pws-shadow:    0 2px 12px rgba(0,0,0,.1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.pws-canvas-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--pws-light); color: var(--pws-dark); }

/* ---- App shell ---- */
.pws-app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Header ---- */
.pws-header { background: var(--pws-primary); color: #fff; padding: 0 20px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.pws-header-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 60px; }
.pws-logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; }
.pws-logo img { height: 36px; border-radius: 4px; }
.pws-nav { display: flex; gap: 6px; }
.pws-nav a { color: rgba(255,255,255,.85); text-decoration: none; padding: 6px 14px; border-radius: 6px; font-size: 14px; transition: background .2s; }
.pws-nav a:hover, .pws-nav a.active { background: rgba(255,255,255,.18); color: #fff; }

/* ---- Search bar ---- */
.pws-search-bar { background: #fff; border-bottom: 1px solid var(--pws-border); padding: 14px 20px; }
.pws-search-inner { max-width: 1400px; margin: 0 auto 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.pws-search-inner input[type=text] { flex: 1; min-width: 200px; padding: 10px 16px; border: 1px solid var(--pws-border); border-radius: 8px; font-size: 15px; outline: none; }
.pws-search-inner input:focus { border-color: var(--pws-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.pws-btn { padding: 10px 18px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .2s; white-space: nowrap; }
.pws-btn:hover { opacity: .88; }
.pws-btn-primary { background: var(--pws-primary); color: #fff; }
.pws-btn-geo     { background: #10b981; color: #fff; }
.pws-btn-link    { background: none; border: none; color: var(--pws-gray); font-size: 13px; cursor: pointer; text-decoration: underline; }

.pws-filters { max-width: 1400px; margin: 0 auto; display: flex; gap: 10px; flex-wrap: wrap; }
.pws-filters select,
.pws-filters input  { padding: 8px 12px; border: 1px solid var(--pws-border); border-radius: 8px; font-size: 13px; background: #fff; color: var(--pws-dark); }

/* ---- Main layout ---- */
.pws-main { flex: 1; display: flex; overflow: hidden; max-height: calc(100vh - 170px); }
.pws-results-panel { width: 420px; flex-shrink: 0; overflow-y: auto; padding: 16px; border-right: 1px solid var(--pws-border); background: #fff; display: flex; flex-direction: column; gap: 12px; }
.pws-map-panel { flex: 1; }
#pws-map { width: 100%; height: 100%; min-height: 400px; }

.pws-results-header { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--pws-gray); }
.pws-geo-info { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pws-geo-info select { border: 1px solid #bfdbfe; border-radius: 6px; padding: 3px 8px; }
.pws-loading { text-align: center; padding: 30px; color: var(--pws-gray); font-size: 14px; }

/* ---- Org cards ---- */
.pws-org-cards { display: flex; flex-direction: column; gap: 12px; }
.pws-org-card { background: #fff; border: 1px solid var(--pws-border); border-radius: var(--pws-radius); padding: 14px; cursor: pointer; transition: box-shadow .2s, transform .1s; display: flex; gap: 12px; }
.pws-org-card:hover { box-shadow: var(--pws-shadow); transform: translateY(-1px); border-color: var(--pws-primary); }
.pws-org-card.active { border-color: var(--pws-primary); box-shadow: 0 0 0 2px rgba(37,99,235,.2); }
.pws-card-photo { width: 70px; height: 70px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--pws-light); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.pws-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.pws-card-photo-placeholder { font-size: 30px; }
.pws-card-body { flex: 1; min-width: 0; }
.pws-card-body h3 { font-size: 14px; font-weight: 700; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pws-type-badge { display: inline-block; background: #eff6ff; color: var(--pws-primary); font-size: 11px; padding: 1px 8px; border-radius: 20px; font-weight: 600; margin-bottom: 4px; }
.pws-leader, .pws-location, .pws-phone { font-size: 12px; color: var(--pws-gray); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pws-distance { font-size: 11px; background: #d1fae5; color: #065f46; padding: 2px 7px; border-radius: 20px; font-weight: 600; }

/* ---- List page ---- */
.pws-list-container { max-width: 1200px; margin: 0 auto; padding: 30px 20px; }
.pws-list-top { margin-bottom: 30px; }
.pws-list-top h1 { font-size: 28px; margin-bottom: 8px; }
.pws-alpha-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pws-alpha-nav a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--pws-primary); color: #fff; border-radius: 6px; font-weight: 700; text-decoration: none; transition: opacity .2s; }
.pws-alpha-nav a:hover { opacity: .8; }
.pws-alpha-section { margin-bottom: 36px; }
.pws-alpha-title { font-size: 22px; font-weight: 800; color: var(--pws-primary); border-bottom: 2px solid var(--pws-primary); padding-bottom: 6px; margin-bottom: 16px; }
.pws-list-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* ---- Org detail modal ---- */
.pws-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.pws-modal-box { background: #fff; border-radius: 14px; width: 90%; max-width: 700px; max-height: 92vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); position: relative; }
.pws-org-detail-box { }
.pws-modal-close-float { position: sticky; top: 12px; float: right; margin: 12px 12px 0; background: rgba(0,0,0,.5); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; cursor: pointer; z-index: 10; }

/* Org detail inside modal */
.pws-detail-hero { position: relative; height: 200px; overflow: hidden; background: var(--pws-primary); border-radius: 14px 14px 0 0; }
.pws-detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.pws-detail-hero-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 60px; color: rgba(255,255,255,.5); }
.pws-detail-body { padding: 20px 24px; }
.pws-detail-body h2 { font-size: 22px; margin-bottom: 4px; }
.pws-detail-type { display: inline-block; background: #eff6ff; color: var(--pws-primary); font-size: 13px; padding: 2px 12px; border-radius: 20px; font-weight: 600; margin-bottom: 12px; }
.pws-detail-leader { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pws-detail-leader-photo { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pws-border); }
.pws-detail-leader-info strong { display: block; font-size: 15px; }
.pws-detail-leader-info span { font-size: 13px; color: var(--pws-gray); }
.pws-detail-section { margin-bottom: 16px; }
.pws-detail-section h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--pws-gray); margin-bottom: 8px; }
.pws-contact-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pws-cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity .2s; border: none; cursor: pointer; }
.pws-cta-btn:hover { opacity: .87; }
.pws-btn-call { background: var(--pws-primary); color: #fff; }
.pws-btn-wa   { background: #25d366; color: #fff; }
.pws-btn-mail { background: #6b7280; color: #fff; }
.pws-social-links { display: flex; gap: 10px; }
.pws-social-link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: 1px solid var(--pws-border); border-radius: 8px; font-size: 13px; text-decoration: none; color: var(--pws-dark); transition: border-color .2s; }
.pws-social-link:hover { border-color: var(--pws-primary); color: var(--pws-primary); }
.pws-detail-map { height: 200px; border-radius: 8px; overflow: hidden; margin-top: 12px; border: 1px solid var(--pws-border); }
.pws-gallery-strip { display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; }
.pws-gallery-strip img { height: 80px; width: 80px; object-fit: cover; border-radius: 6px; cursor: pointer; flex-shrink: 0; }

/* ---- Empty state ---- */
.pws-empty { text-align: center; padding: 60px 20px; color: var(--pws-gray); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .pws-main { flex-direction: column; max-height: none; overflow: visible; }
  .pws-results-panel { width: 100%; max-height: 50vh; border-right: none; border-bottom: 1px solid var(--pws-border); }
  .pws-map-panel { height: 40vh; }
  .pws-nav span { display: none; }
  .pws-list-cards { grid-template-columns: 1fr; }
}