:root {
  --accent: #F43676;
  --bg: #fff;
  --card: #fff;
  --text: #222;
  --muted: #666;
}

body.dark #wedding-drink-calculator {
  --bg: #0f1113;
  --card: #1a1d21;
  --text: #eee;
  --muted: #aaa;
}

.wdc-container {
  background: var(--card);
  color: var(--text);
  max-width: 900px;
  margin: 16px auto;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

.wdc-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.wdc-header h2 { font-size:1.3rem; color:var(--accent); margin:0; }

.wdc-form { display:grid; gap:16px; }
.wdc-section { padding:8px 0; border-bottom:1px dashed rgba(0,0,0,0.05); }
.wdc-section:last-of-type { border-bottom:none; }

label { display:flex; align-items:center; gap:8px; margin:6px 0; }
label select, label input { padding:6px; border-radius:6px; border:1px solid #ccc; }

.wdc-section-head { display:flex; justify-content:space-between; align-items:center; }
.wdc-btn { border:1px solid #ccc; border-radius:6px; padding:6px 10px; cursor:pointer; background:#fff; }
.wdc-btn.small { font-size:0.85rem; }
.wdc-btn.primary { background:var(--accent); color:#fff; border:none; }
.wdc-btn:hover { opacity:0.9; }

.group-row { display:flex; gap:8px; flex-wrap:wrap; background:rgba(0,0,0,0.03); padding:8px; border-radius:8px; margin-bottom:8px; }
.group-row input { width:90px; }
.group-row .grp-name { width:120px; }

.wdc-hidden { display:none !important; }

.wdc-tooltip-btn {
  width:24px; height:24px; border-radius:50%;
  background:var(--accent); color:#fff; border:none;
  font-weight:bold; cursor:pointer;
}

.wdc-tip-pop {
  position:absolute; background:var(--card); color:var(--text);
  border:1px solid #ccc; padding:8px; border-radius:6px;
  max-width:220px; font-size:0.85rem;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.wdc-results { margin-top:16px; }
.wdc-summary p { margin:6px 0; }
.wdc-results-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

@media(max-width:720px){
  .group-row { flex-direction:column; align-items:stretch; }
}