/* ==========================================================================
   Shiny Kiwi: Price Per Pack calculator (Resources page, third tab)
   Shared tokens, buttons, and the tab bar live in main.css and resources.css.
   Visitor-entered only, no product database or pricing data.
   ========================================================================== */

.pv-note{font-size:.82rem; color:#8a8877; margin-top:-14px; margin-bottom:22px; max-width:70ch;}

.pv-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}

.pv-card{
  position:relative;
  background:var(--cream-panel); border:1px solid #E4DFC8; border-radius:18px;
  padding:20px; display:flex; flex-direction:column; gap:12px;
}
.pv-card.pv-best{
  border:2px solid var(--gold);
  box-shadow:0 10px 24px -14px rgba(166,135,63,.45);
}

.pv-badge{
  position:absolute; top:-12px; right:16px;
  background:var(--gold); color:var(--seed);
  font-family:'Space Mono', monospace; font-size:.64rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.pv-badge[hidden]{display:none;}

.pv-remove{
  position:absolute; top:10px; right:10px;
  width:22px; height:22px; border-radius:50%; border:none;
  background:transparent; color:#9a977f; font-size:1rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.pv-remove:hover{background:rgba(176,74,58,.12); color:var(--bad);}
.pv-remove[hidden]{display:none;}

.pv-card-body{display:flex; flex-direction:column; gap:12px; padding-right:18px;}

.pv-label,
.pv-type{
  width:100%; padding:10px 12px; border:1px solid #C9C2A4; border-radius:10px;
  font-family:'Work Sans'; font-size:.9rem; color:var(--charcoal); background:var(--cream);
}
.pv-type{cursor:pointer;}

.pv-row{display:flex; gap:10px;}
.pv-field{flex:1; min-width:0;}
.pv-field label{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#7a7864; margin-bottom:5px;
}
.pv-field input{
  width:100%; padding:10px 12px; border:1px solid #C9C2A4; border-radius:10px;
  font-family:'Work Sans'; font-size:.9rem; color:var(--charcoal); background:var(--cream);
}

.pv-divider{height:1px; background:#E4DFC8;}

.pv-result-label{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--green);
}
.pv-result-value{
  font-family:'Baloo 2'; font-weight:800; font-size:1.7rem; color:var(--green-deep);
  margin-top:2px; min-height:2.05rem; line-height:1.2;
}

.pv-add-tile{
  background:transparent; border:2px dashed #C9C2A4; border-radius:18px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:260px; cursor:pointer; color:var(--green);
  transition:border-color .15s, background .15s;
}
.pv-add-tile:hover{border-color:var(--green-light); background:rgba(143,174,76,.08);}
.pv-add-tile[hidden]{display:none;}
.pv-add-icon{
  width:40px; height:40px; border-radius:50%; border:2px solid var(--green);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; line-height:1;
}
.pv-add-label{font-family:'Baloo 2'; font-weight:700; font-size:.92rem;}

.pv-actions{margin-top:26px; text-align:center;}
.pv-clear-btn{
  background:none; border:none; color:#8a8877; font-family:'Work Sans'; font-size:.86rem;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.pv-clear-btn:hover{color:var(--bad);}

@media (max-width:640px){
  .pv-grid{grid-template-columns:1fr;}
  .pv-add-tile{min-height:180px;}
}