:root{
  --podw-accent:#1f5fbf;
  --podw-accent-2:#1b4ea0;
  --podw-bg:#ffffff;
  --podw-muted:#5a6677;
  --podw-border:rgba(16,24,40,.12);
  --podw-soft:rgba(31,95,191,.08);
  --podw-danger:#b42318;
  --podw-danger-bg:rgba(180,35,24,.08);
}

.peptideorders-dose-widget{
  max-width:720px;
}

.podw-card{
  border:1px solid var(--podw-border);
  border-radius:16px;
  background:var(--podw-bg);
  box-shadow:0 8px 22px rgba(16,24,40,.06);
  overflow:hidden;
}

.podw-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  background:linear-gradient(0deg,var(--podw-soft),var(--podw-soft));
  border-bottom:1px solid var(--podw-border);
}

.podw-header h3{
  margin:0;
  font-size:16px;
  font-weight:800;
  letter-spacing:.2px;
  color:#0b1220;
}

.podw-body{
  padding:16px 18px 18px;
}

.podw-section{ margin-top:14px; }
.podw-section:first-child{ margin-top:0; }

.podw-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  border-top:1px solid rgba(16,24,40,.06);
}
.podw-row:first-child{ border-top:0; padding-top:0; }

.podw-label{
  font-size:13px;
  font-weight:700;
  color:#0b1220;
}

.podw-sub{
  margin-top:2px;
  font-size:12px;
  color:var(--podw-muted);
}

.podw-value{
  font-size:14px;
  font-weight:800;
  color:#0b1220;
  text-align:right;
  white-space:nowrap;
}

.podw-inline{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.podw-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.podw-chip{
  appearance:none;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  color:#111;
  border-radius:999px;
  padding:9px 13px;
  font-size:13px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .05s ease;
}

.podw-chip:hover{ border-color:rgba(0,0,0,.35); }
.podw-chip:active{ transform:translateY(1px); }

.podw-chip.is-selected{
  background:var(--podw-accent);
  color:#fff;
  border-color:var(--podw-accent);
  box-shadow:0 0 0 3px rgba(31,95,191,.18);
}

.podw-syringes{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.podw-syringe{
  appearance:none;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  color:#111;
  border-radius:999px;
  padding:9px 13px;
  font-size:13px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .05s ease;
}

.podw-syringe:hover{ border-color:rgba(0,0,0,.35); }
.podw-syringe:active{ transform:translateY(1px); }

.podw-syringe.is-selected{
  background:var(--podw-accent);
  color:#fff;
  border-color:var(--podw-accent);
  box-shadow:0 0 0 3px rgba(31,95,191,.18);
}

.podw-toggle{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  color:var(--podw-muted);
  cursor:pointer;
  user-select:none;
}

.podw-toggle-below{
  justify-content:flex-end;
}

.podw-dose-controls{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.podw-toggle input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(1px, 1px, 1px, 1px);
  clip-path:inset(50%);
  white-space:nowrap;
}

.podw-switch{
  width:42px;
  height:24px;
  border-radius:999px;
  background:rgba(16,24,40,.20);
  border:1px solid rgba(16,24,40,.18);
  position:relative;
  flex:0 0 auto;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.podw-switch::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 2px 10px rgba(16,24,40,.20);
  transition:transform .15s ease;
}

.podw-toggle input:focus-visible + .podw-switch{
  box-shadow:0 0 0 3px rgba(31,95,191,.18);
  border-color:var(--podw-accent);
}

.podw-toggle input:checked + .podw-switch{
  background:var(--podw-accent);
  border-color:var(--podw-accent);
}

.podw-toggle input:checked + .podw-switch::after{
  transform:translateX(18px);
}

.podw-toggle-text{
  color:var(--podw-muted);
}

.podw-input{
  width:140px;
  border:1px solid rgba(16,24,40,.18);
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  font-weight:800;
  outline:none;
}

.podw-input:focus{ border-color:var(--podw-accent); box-shadow:0 0 0 3px rgba(31,95,191,.18); }

.podw-error{
  margin-top:10px;
  border:1px solid rgba(180,35,24,.25);
  background:var(--podw-danger-bg);
  color:var(--podw-danger);
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
}

.podw-visual{
  margin-top:12px;
  border:1px solid rgba(16,24,40,.10);
  background:#f8fafc;
  border-radius:14px;
  padding:12px;
}

.podw-visual-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.podw-visual-title{
  font-size:13px;
  font-weight:900;
  color:#0b1220;
}

.podw-visual-label{
  font-size:12px;
  font-weight:900;
  color:var(--podw-muted);
}


.podw-bar-wrap{
  position:relative;
  height:22px; /* match graduations */
}

.podw-bar{
  position:absolute;
  inset:0;
  height:100%;
  border-radius:5px;
  background:rgba(16,24,40,.08);
  overflow:hidden;
}

.podw-bar-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:linear-gradient(90deg,var(--podw-accent),var(--podw-accent-2));
  border-radius:5px;
}

.podw-scale{
  position:absolute;
  inset:0;
  height:100%;
  margin-top:0;
  pointer-events:none;
  /* Improve contrast of graduations against the liquid fill */
  mix-blend-mode:difference;
}

.podw-tick{
  position:absolute;
  bottom:0;
  width:1px;
  background:rgba(255,255,255,.78);
  transform:translateX(-0.5px);
}

.podw-tick.is-major{ height:18px; background:rgba(255,255,255,.92); }
.podw-tick.is-mid{ height:12px; }
.podw-tick.is-minor{ height:7px; opacity:.6; }

.podw-tick-label{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  font-weight:800;
  color:rgba(255,255,255,.92);
  white-space:nowrap;
}

@media (max-width:520px){
  .podw-row{ flex-direction:column; }
  .podw-value{ text-align:left; }
  .podw-inline{ justify-content:flex-start; }
  .podw-dose-controls{ align-items:flex-start; }
  .podw-toggle-below{ justify-content:flex-start; }
}