/* Dose pillbox — shared base styles for the PDP dose picker.
 *
 * Functional layout + neutral defaults. Each brand layout includes
 * this AFTER its own CSS so brand-specific overrides
 * (`.glam-pdp__dose-pill`, `.peprally-pdp__dose-pill`, ...) win on
 * specificity tie. Palette tokens live in the brand sheets — this
 * file only defines geometry, spacing, and state semantics.
 *
 * Selector contract (kept stable for the JS in
 * app/assets/javascripts/brand_chrome.js → bindDosePillbox):
 *   .dose-pill                  base button
 *   .dose-pill--selected        currently-chosen pill
 *   .dose-pill--unavailable     out-of-stock variant
 *   .dose-pillbox__pills        flex container
 *   .dose-pillbox__notify       hidden-by-default email-capture form
 */

.dose-pillbox__wrap {
  margin: 16px 0 24px;
}

.dose-pillbox__legend {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.75;
}

.dose-pillbox__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dose-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 20px;
  min-width: 80px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out, opacity 120ms ease-out;
  user-select: none;
}

.dose-pill__presentation {
  font-weight: 600;
  font-size: 14px;
}

.dose-pill__price {
  font-size: 12px;
  opacity: 0.75;
}

.dose-pill__oos {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}

.dose-pill:hover:not(.dose-pill--unavailable) {
  background: currentColor;
}

.dose-pill:hover:not(.dose-pill--unavailable) .dose-pill__presentation,
.dose-pill:hover:not(.dose-pill--unavailable) .dose-pill__price {
  color: var(--dose-pill-hover-text, #fff);
}

.dose-pill--selected {
  background: currentColor;
}

.dose-pill--selected .dose-pill__presentation,
.dose-pill--selected .dose-pill__price {
  color: var(--dose-pill-hover-text, #fff);
}

.dose-pill--unavailable {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
}

.dose-pill--unavailable:hover {
  /* Defeat the hover-fill — OOS pills should not look pressable. */
  background: transparent;
}

/* Back-in-stock notify form — sibling of cart form, hidden by default,
 * revealed by JS when an OOS pill is selected. */
.dose-pillbox__notify {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02);
}

.dose-pillbox__notify[hidden] {
  display: none;
}

.dose-pillbox__notify-heading {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}

.dose-pillbox__notify-body {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 12px;
  opacity: 0.8;
}

.dose-pillbox__notify-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dose-pillbox__notify-label {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
}

.dose-pillbox__notify-label-text {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.7;
}

.dose-pillbox__notify-email {
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  background: #fff;
  color: inherit;
}

.dose-pillbox__notify-submit {
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: currentColor;
  color: var(--dose-pill-hover-text, #fff);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

[data-dose-cart-action][hidden] {
  display: none;
}