/* PPL Custom Picker — matching official PPL design */

/* Overlay */
.ppl-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;padding:12px}
.ppl-overlay.is-open{display:flex}

/* Frame */
.ppl-frame{position:relative;width:min(96vw,1280px);height:min(92vh,750px);background:#fff;border-radius:10px;box-shadow:0 16px 48px rgba(0,0,0,0.2);overflow:hidden;display:flex;flex-direction:column}
.ppl-close{position:absolute;top:8px;right:8px;z-index:5;width:30px;height:30px;border:none;background:#f3f4f6;color:#333;font-size:18px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* Layout */
.ppl-layout{display:flex;flex:1;min-height:0}

/* === LEFT SIDEBAR — filters === */
.ppl-sidebar{width:180px;border-right:1px solid #eee;padding:14px;flex-shrink:0;overflow-y:auto;background:#fafafa;font-size:13px}
.ppl-sidebar-title{font-size:15px;font-weight:700;margin:0 0 12px;color:#111}
.ppl-filter-group{margin-bottom:14px}
.ppl-filter-group h4{font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.ppl-check,.ppl-radio{display:flex;align-items:center;gap:7px;padding:4px 0;cursor:pointer;font-size:13px;color:#111}
.ppl-check input,.ppl-radio input{accent-color:#003087;margin:0}

/* === CENTER — list === */
.ppl-list-panel{width:380px;display:flex;flex-direction:column;border-right:1px solid #eee;flex-shrink:0}
.ppl-search{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid #eee}
.ppl-search-input{flex:1;height:36px;padding:0 10px;border:1px solid #ddd;border-radius:6px;font-size:13px;font-family:inherit;outline:none}
.ppl-search-input:focus{border-color:#003087}
.ppl-search-gps{width:36px;height:36px;border:1px solid #ddd;border-radius:6px;background:#fff;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}
.ppl-list-head{padding:6px 12px;font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between}
.ppl-count{font-weight:400;color:#bbb}
.ppl-list{flex:1;overflow-y:auto}
.ppl-empty{padding:24px;text-align:center;color:#999;font-size:13px}

/* === LIST ITEMS === */
.ppl-item{padding:12px;border-bottom:1px solid #f0f0f0;cursor:pointer;position:relative;transition:background .12s}
.ppl-item:hover{background:#f9f9f9}
.ppl-item.is-active{background:#FFF9EC;border-left:3px solid #FFD700}
.ppl-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.ppl-item-badges{display:flex;gap:5px;flex-wrap:wrap}
.ppl-badge-blue{background:#003087;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:3px;text-transform:uppercase;letter-spacing:.02em}
.ppl-badge-gray{background:#f3f4f6;color:#666;font-size:10px;font-weight:500;padding:2px 7px;border-radius:3px;border:1px solid #e5e7eb}
.ppl-item-price{font-size:14px;font-weight:700;color:#111;white-space:nowrap}
.ppl-item-name{font-size:13px;font-weight:600;color:#111;margin-bottom:3px}
.ppl-item-meta{font-size:11px;color:#888;margin-bottom:2px}
.ppl-item-btn{position:absolute;top:50%;right:12px;transform:translateY(-50%);background:#111;color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.ppl-item-btn:hover{background:#333}

/* === RIGHT — map === */
.ppl-map-panel{flex:1;position:relative;min-width:0}

/* Map pins */
.ppl-pin{background:none!important;border:none!important}
.ppl-pin-dot{width:30px;height:30px;background:#003087;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 2px 6px rgba(0,0,0,0.2);border:2px solid #fff}

/* Clusters */
.ppl-cl-wrap{background:none!important;border:none!important}
.ppl-cl{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.ppl-cl-sm{background:#003087}
.ppl-cl-md{background:#0050c8;width:46px;height:46px;font-size:14px}
.ppl-cl-lg{background:#0070ff;width:52px;height:52px;font-size:15px}

/* Tooltip */
.ppl-tip{background:#fff!important;color:#111!important;border:1px solid #e5e7eb!important;border-radius:5px!important;padding:3px 8px!important;font-size:11px!important;font-weight:600!important;box-shadow:0 2px 6px rgba(0,0,0,0.08)!important}

/* === DETAIL CARD === */
.ppl-detail{position:absolute;bottom:12px;right:12px;width:320px;max-height:calc(100% - 24px);overflow-y:auto;background:#fff;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,0.12);padding:14px;z-index:5;border:1px solid #eee}
.ppl-det-close{position:absolute;top:8px;right:8px;width:26px;height:26px;border:none;background:#f3f4f6;color:#333;font-size:14px;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ppl-det-name{font-size:14px;font-weight:700;color:#111;margin:8px 0 2px}
.ppl-det-price{font-size:14px;font-weight:700;color:#111;margin-bottom:4px}
.ppl-det-hrs{margin:10px 0;padding-top:8px;border-top:1px solid #eee;font-size:11px;color:#111}
.ppl-det-hrs strong{display:block;margin-bottom:4px;font-size:12px}
.ppl-hr{display:flex;justify-content:space-between;padding:1px 0;gap:8px}
.ppl-det-id{font-size:11px;color:#999;margin:8px 0;padding-top:8px;border-top:1px solid #eee}
.ppl-det-btn{width:100%;height:42px;background:#111;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;text-transform:uppercase;letter-spacing:.03em}
.ppl-det-btn:hover{background:#333}

/* === MOBILE === */
@media(max-width:767px){
  .ppl-overlay{padding:0}
  .ppl-frame{width:100%;height:100dvh;border-radius:0}
  .ppl-layout{flex-direction:column}
  .ppl-sidebar{display:none}
  .ppl-list-panel{width:100%;flex:1;max-height:none;border-right:none;border-bottom:none}
  .ppl-map-panel{display:none}
  .ppl-detail{position:fixed;bottom:0;right:0;left:0;width:100%;border-radius:14px 14px 0 0;max-height:70vh;z-index:10001}
  .ppl-item{padding:14px 12px}
  .ppl-item-btn{position:static;transform:none;margin-top:10px;width:100%;height:40px;font-size:13px;border-radius:8px}
  .ppl-search-input{height:40px;font-size:14px}
  .ppl-search-gps{width:40px;height:40px}
  .ppl-close{width:36px;height:36px;font-size:20px}
}
@media(min-width:768px) and (max-width:1023px){
  .ppl-sidebar{width:150px}
  .ppl-list-panel{width:300px}
}