/* ========== DETAIL PANEL - Premium & Modern ========== */
.overlay{
  position:fixed; inset:0; background:rgba(10,20,15,0.65); z-index:40;
  opacity:0; pointer-events:none; transition:all .3s var(--ease);
  overscroll-behavior:contain; touch-action:none; backdrop-filter:blur(4px);
  /* Performance optimization */
  will-change: opacity;
}

.overlay.show{ opacity:1; pointer-events:auto; }

.panel{
  position:fixed; right:0; top:0; bottom:0; width:min(480px,100%);
  background:var(--glass-bg-strong);
  backdrop-filter:var(--blur-lg) saturate(1.2);
  -webkit-backdrop-filter:var(--blur-lg) saturate(1.2);
  z-index:50;
  box-shadow:-20px 0 60px rgba(0,0,0,0.25);
  border-left:1px solid var(--glass-border);
  transform:translateX(100%); transition:transform .35s var(--ease); overflow-y:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  /* Performance optimizations */
  will-change: transform;
  contain: layout style paint;
}

.panel.show{ transform:translateX(0); }

.panel-head{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(165deg, var(--primary-800), var(--primary-700));
  color:#fff; padding:28px 24px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}

.panel-head .badge{ margin-bottom:12px; display:inline-block; }

.panel-head h2{
  margin:0; font-size:21px; font-weight:800; line-height:1.4;
  text-shadow:0 2px 8px rgba(0,0,0,0.15);
}

.panel-close{
  flex:none; width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.16); color:#fff; cursor:pointer; font-size:18px;
  transition:all .2s var(--ease);
  display:flex; align-items:center; justify-content:center;
}

.panel-close:hover{
  background:rgba(255,255,255,0.28);
  transform:rotate(90deg) scale(1.05);
}

.panel-body{ padding:24px 24px 40px; }

.panel-img{
  width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius-md);
  margin-bottom:22px; display:block; background:var(--neutral-100);
  box-shadow:var(--shadow-sm);
  border:2px solid var(--line-soft);
}

.fields{
  background:var(--glass-bg);
  backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);
  border-radius:var(--radius-md); padding:8px 20px;
  border:1px solid var(--glass-border);
  box-shadow:inset 0 2px 8px rgba(40,112,47,0.04);
}

.field-row{
  display:flex; justify-content:space-between; gap:16px; padding:14px 0;
  border-bottom:1.5px dashed var(--line); font-size:14.5px;
  transition:background .2s var(--ease);
}

.field-row:last-child{ border-bottom:none; }

.field-row:hover{
  background:rgba(39,96,47,0.02);
  margin:0 -8px;
  padding-left:8px;
  padding-right:8px;
  border-radius:8px;
}

.field-label{
  color:var(--ink-600); flex:none; font-weight:700; min-width:120px;
  font-size:13.5px;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:12px;
  opacity:0.85;
}

.field-val{
  color:var(--ink-900); text-align:right; word-break:break-word; font-weight:600;
}

.panel-actions{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }

.btn-primary{
  flex:1; display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  color:#fff; border:none; padding:16px 20px; border-radius:var(--radius-md);
  font-family:'Noto Sans Thai',sans-serif; font-weight:800; font-size:15px; cursor:pointer; text-decoration:none;
  transition:all .25s var(--ease);
  box-shadow:0 8px 20px rgba(34,181,97,0.32), inset 0 1px 0 rgba(255,255,255,0.2);
  min-width:200px;
  position:relative;
  overflow:hidden;
  /* Mobile optimizations */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 48px; /* Better touch target */
}

.btn-primary::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
  opacity:0;
  transition:opacity .25s var(--ease);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(34,181,97,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

.btn-primary:hover::before{ opacity:1; }
.btn-primary:active{ transform:translateY(0); }

.btn-secondary{
  flex:none; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--neutral-100); color:var(--ink-700); border:2px solid var(--line);
  padding:16px 20px; border-radius:var(--radius-md);
  font-family:'Noto Sans Thai',sans-serif; font-weight:700; font-size:14px; cursor:pointer;
  transition:all .22s var(--ease);
  box-shadow:var(--shadow-xs);
  /* Mobile optimizations */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 48px; /* Better touch target */
}

.btn-secondary:hover{
  background:#fff;
  border-color:var(--primary-500);
  color:var(--primary-700);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

.map-embed{
  width:100%; height:220px; border:0; border-radius:var(--radius-md); margin-top:22px;
  box-shadow:var(--shadow-sm);
  border:2px solid var(--line-soft);
}

.add-to-plan-btn{
  flex:none; display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
  color:#fff; border:none; padding:16px 20px; border-radius:var(--radius-md);
  font-family:'Noto Sans Thai',sans-serif; font-weight:800; font-size:14px; cursor:pointer;
  transition:all .25s var(--ease);
  box-shadow:0 8px 20px rgba(151,180,94,0.38), inset 0 1px 0 rgba(255,255,255,0.4);
  position:relative;
  overflow:hidden;
}

.add-to-plan-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
  opacity:0;
  transition:opacity .25s var(--ease);
}

.add-to-plan-btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 12px 28px rgba(151,180,94,0.45), inset 0 1px 0 rgba(255,255,255,0.5);
}

.add-to-plan-btn:hover::before{ opacity:1; }
.add-to-plan-btn:active{ transform:translateY(0) scale(1); }

.picker-list{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }

.picker-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm); padding:14px 16px;
  cursor:pointer;
  background:var(--glass-bg);
  backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);
  transition:all .2s var(--ease);
  box-shadow:var(--glass-shadow);
}

.picker-item:hover{
  transform:translateX(4px);
  border-color:rgba(34,181,97,0.3);
  background:var(--glass-bg-strong);
  backdrop-filter:var(--blur-md);
  -webkit-backdrop-filter:var(--blur-md);
  box-shadow:0 8px 24px rgba(40,112,47,0.12);
}

.picker-item .pname{ font-size:15px; font-weight:700; color:var(--ink-900); }
.picker-item .pcount{ font-size:12.5px; color:var(--ink-500); font-weight:600; }

.picker-new{
  margin-top:8px; width:100%; border:2px dashed var(--line); background:transparent;
  color:var(--primary-700);
  font-family:'Noto Sans Thai',sans-serif; font-weight:700; font-size:14px;
  padding:12px; border-radius:var(--radius-sm); cursor:pointer;
  transition:all .2s var(--ease);
}

.picker-new:hover{
  border-color:var(--primary-500);
  background:var(--neutral-100);
  border-style:solid;
  transform:translateY(-1px);
}