/* ================================================================
   Collective Orders — Public Form Styles
   ================================================================ */

:root {
  --cop-primary:   #2E4057;
  --cop-accent:    #E8A838;
  --cop-success:   #2ECC71;
  --cop-danger:    #E74C3C;
  --cop-bg:        #F7F8FA;
  --cop-surface:   #FFFFFF;
  --cop-border:    #E2E8F0;
  --cop-text:      #1A2332;
  --cop-muted:     #7A8A9A;
  --cop-radius:    10px;
  --cop-shadow:    0 4px 16px rgba(0,0,0,0.08);
}

.co-public {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  color: var(--cop-text);
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* Loading & Error */
.cop-loading, .cop-error, .cop-success {
  text-align: center;
  padding: 60px 24px;
}
.cop-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--cop-border);
  border-top-color: var(--cop-primary);
  border-radius: 50%;
  animation: cop-spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes cop-spin { to { transform: rotate(360deg); } }
.cop-error-icon, .cop-success-icon { font-size: 48px; margin-bottom: 16px; }
.cop-error h2   { color: var(--cop-danger); }
.cop-success h2 { color: var(--cop-success); }
.cop-success-note { color: var(--cop-muted); font-size: 14px; margin-top: 8px; }

/* Compact variant for the "Pickup booked!" confirmation screen.
   The default .cop-success has 60px vertical padding and inherits a
   massive H2 size from the theme — too much for what's essentially a
   short "all done" acknowledgment shown right after a single tap. We
   tighten everything so the three lines of feedback sit close to the
   check icon and read at a comfortable, in-context rhythm. */
.cop-success--pickup {
  padding: 24px 24px;
}
.cop-success--pickup .cop-success-icon {
  font-size: 36px;
  margin-bottom: 10px;
}
.cop-success--pickup h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.2;
}
.cop-success--pickup p {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cop-text);
}

/* Header */
.cop-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--cop-border);
}
.cop-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--cop-primary);
  margin: 0 0 8px;
}
.cop-header p { color: var(--cop-text); margin: 0; }

/* Compact pickup header — less vertical space than the order form
   header, since the pickup page is a single-purpose screen. */
.cop-header--pickup {
  margin-bottom: 16px;
  padding-bottom: 14px;
}
.cop-header--pickup h1 {
  font-size: 24px;
  margin: 0 0 6px;
}
.cop-modify-notice {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 12px;
  padding: 10px 16px;
  background: #FEF3C7;
  color: #92400E;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}
.cop-modify-notice-title {
  font-weight: 700;
}
.cop-modify-notice-label {
  font-size: 13px;
}
.cop-modify-notice-code {
  font-size: 16px;
  letter-spacing: 0.5px;
}
/* Success-screen payment_ref reminder. Bigger and more prominent than
   the inline pill so the colleague spots the code easily when they've
   just finished placing the order — they often need to copy it for
   the bank transfer right away. */
.cop-success-paymentref {
  display: inline-block;
  margin: 16px auto;
  padding: 12px 20px;
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #6EE7B7;
  border-radius: 8px;
  font-size: 16px;
  letter-spacing: 0.02em;
}

/* Sections */
.cop-section { margin-bottom: 32px; }
.cop-section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--cop-primary);
  margin: 0 0 20px;
}
.cop-step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.cop-step-header .cop-section-title { margin: 0; }
.cop-back {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cop-muted);
  font-size: 14px;
  padding: 4px 0;
  white-space: nowrap;
}
.cop-back:hover { color: var(--cop-primary); }

/* Form fields */
.cop-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  flex: 1;
}
.cop-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cop-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cop-field input {
  padding: 12px 14px;
  border: 2px solid var(--cop-border);
  border-radius: var(--cop-radius);
  font-size: 15px;
  color: var(--cop-text);
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
}
.cop-field input:focus { border-color: var(--cop-primary); }
.cop-field input:disabled { background: var(--cop-bg); color: var(--cop-muted); }
.cop-field-row { display: flex; gap: 16px; }
@media (max-width: 480px) { .cop-field-row { flex-direction: column; } }

/* Membership selector */
.cop-membership { margin: 20px 0; }
.cop-membership-label {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}
.cop-membership-options { display: flex; gap: 12px; }
@media (max-width: 480px) { .cop-membership-options { flex-direction: column; } }
.cop-radio { cursor: pointer; flex: 1; }
.cop-radio input { display: none; }
.cop-radio-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 2px solid var(--cop-border);
  border-radius: var(--cop-radius);
  transition: all 0.15s;
}
.cop-radio-box strong { font-size: 14px; }
.cop-radio-box span   { font-size: 12px; color: var(--cop-muted); }
.cop-radio--active .cop-radio-box {
  border-color: var(--cop-primary);
  background: #EBF0F7;
}

/* Price notice */
.cop-price-notice {
  background: #EBF0F7;
  border-left: 4px solid var(--cop-primary);
  padding: 10px 14px;
  border-radius: 0 var(--cop-radius) var(--cop-radius) 0;
  font-size: 14px;
  margin-bottom: 24px;
  color: var(--cop-primary);
}

/* Product groups */
.cop-group { margin-bottom: 28px; }
.cop-group-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--cop-primary);
  padding: 8px 0;
  border-bottom: 2px solid var(--cop-primary);
  margin-bottom: 12px;
}

/* Products */
.cop-product {
  background: var(--cop-surface);
  border: 1px solid var(--cop-border);
  border-radius: var(--cop-radius);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--cop-shadow);
}
.cop-product-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--cop-bg);
}
.cop-product-name {
  font-weight: 700;
  font-size: 16px;
}
.cop-product-desc {
  font-size: 13px;
  color: var(--cop-muted);
  margin-top: 3px;
}

/* Variants */
.cop-variant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cop-bg);
  gap: 12px;
}
.cop-variant:last-child { border-bottom: none; }
.cop-variant-info { flex: 1; min-width: 0; }
.cop-variant-name  { font-weight: 500; font-size: 14px; display: block; }
.cop-variant-price { font-size: 13px; color: var(--cop-accent); font-weight: 600; display: block; margin-top: 2px; }
.cop-variant-desc  { font-size: 12px; color: var(--cop-muted); font-style: italic; display: block; margin-top: 2px; }

/* Quantity controls */
.cop-variant-qty {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cop-qty-btn {
  width: 34px; height: 34px;
  border: 2px solid var(--cop-border);
  border-radius: 50%;
  background: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  color: var(--cop-primary);
}
.cop-qty-btn:hover:not(:disabled) {
  border-color: var(--cop-primary);
  background: var(--cop-primary);
  color: #fff;
}
.cop-qty-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.cop-qty-value {
  font-size: 18px;
  font-weight: 700;
  width: 54px;
  text-align: center;
  color: var(--cop-primary);
  background: #fff;
  border: 2px solid var(--cop-border);
  border-radius: 8px;
  padding: 4px 2px;
  appearance: textfield;
  -moz-appearance: textfield;
}
/* The -/+ buttons already step the value: the native spinners would clash. */
.cop-qty-value::-webkit-outer-spin-button,
.cop-qty-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cop-qty-value:focus { outline: none; border-color: var(--cop-primary); }
.cop-qty-value:disabled { opacity: 0.5; background: #f7f7f7; }

/* Actions */
.cop-actions { margin-top: 24px; }
.cop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: none;
  border-radius: var(--cop-radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.cop-btn--primary {
  background: var(--cop-primary);
  color: #fff;
  width: 100%;
}
.cop-btn--primary:hover:not(:disabled) { background: #1a2d45; }
.cop-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Busy state — applied while waiting for a server response.
   Overrides the default "not-allowed" cursor with a "wait" (hourglass)
   one so the disabled state communicates "working" instead of "forbidden". */
.cop-btn.is-busy,
.cop-btn.is-busy:disabled {
  cursor: wait;
  opacity: 0.85;
}

/* Inline spinner shown next to the label inside a busy button.
   Uses currentColor so it matches the button's text colour automatically. */
.cop-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cop-spin 0.7s linear infinite;
  margin-right: 10px;
  vertical-align: -2px;
  opacity: 0.9;
}

/* OTP */
.cop-card {
  background: var(--cop-surface);
  border: 1px solid var(--cop-border);
  border-radius: 12px;
  padding: 32px;
  max-width: 400px;
  margin: 40px auto;
  text-align: center;
  box-shadow: var(--cop-shadow);
}
.cop-card h2 { margin: 0 0 12px; color: var(--cop-primary); }
.cop-card p  { color: var(--cop-muted); font-size: 14px; margin-bottom: 20px; }
.cop-otp-input {
  width: 100%;
  padding: 16px;
  font-size: 28px;
  letter-spacing: 8px;
  text-align: center;
  border: 2px solid var(--cop-border);
  border-radius: var(--cop-radius);
  outline: none;
  font-family: monospace;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.cop-otp-input:focus { border-color: var(--cop-primary); }
.cop-note { font-size: 12px; color: var(--cop-muted); margin-top: 12px; }

/* Summary */
.cop-summary-person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--cop-bg);
  border-radius: var(--cop-radius);
  margin-bottom: 20px;
  font-size: 14px;
}
.cop-summary-person strong { font-size: 16px; width: 100%; }
.cop-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.cop-badge--member    { background: #D1FAE5; color: #065F46; }
.cop-badge--nonmember { background: #FEE2E2; color: #991B1B; }

.cop-summary-items { margin-bottom: 16px; }
.cop-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--cop-border);
  gap: 12px;
}
.cop-summary-item:last-child { border-bottom: none; }
.cop-summary-item-info { display: flex; flex-direction: column; gap: 3px; }
.cop-summary-item-info strong { font-size: 14px; }
.cop-summary-item-info span   { font-size: 12px; color: var(--cop-muted); }
.cop-summary-item-info .cop-summary-item-qty {
  font-size: 14px;
  font-weight: 600;
  color: var(--cop-text);
}
.cop-summary-item-price { font-weight: 600; font-size: 15px; white-space: nowrap; }
.cop-summary-total {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 2px solid var(--cop-primary);
  font-size: 16px;
}
.cop-summary-total strong { font-size: 18px; color: var(--cop-primary); }

/* Email validation */
.cop-field-error {
  display: block;
  font-size: 12px;
  color: var(--cop-danger);
  margin-top: 4px;
}
.cop-email-notice {
  font-size: 13px;
  color: #92400E;
  background: #FEF3C7;
  border-left: 3px solid #F59E0B;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  margin-top: 4px;
  margin-bottom: 8px;
}
/* Duplicate-email warning: full error colours, impossible to miss. */
.cop-email-exists {
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--cop-danger);
  border-left: 4px solid #A93226;
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
  margin-top: 4px;
  margin-bottom: 8px;
}

/* Pickup booking */
.cop-pickup { max-width: 500px; margin: 0 auto; }
.cop-pickup-date {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  /* Surface (white) so each slot reads as a distinct card on the
     light-grey page background. Hover/selected states swap to the
     soft-azure tint defined below. */
  background: var(--cop-surface);
  border: 2px solid var(--cop-border);
  border-radius: var(--cop-radius);
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.15s;
  /* Match the textarea below (which uses width:100% + border-box):
     without this, the slot card's content-box default makes it visually
     wider than the textarea by ~12px due to padding+border being added
     outside the declared width. */
  box-sizing: border-box;
}
.cop-pickup-date:hover { border-color: var(--cop-primary); background: #EBF0F7; }
.cop-pickup-date--selected { border-color: var(--cop-primary); background: #EBF0F7; }
/* Card whose slot is the original booking but is no longer selected
   (colleague has picked a different slot). Subtle dashed border so
   it's still recognizable as "this was yours" without competing
   with the newly selected card. */
.cop-pickup-date--current { border-style: dashed; border-color: #94A3B8; }

/* Contextual label inside the card: small uppercase text that tells
   the colleague which card is their current booking and which is
   the new one they've just selected. */
.cop-pickup-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 4px;
  line-height: 1;
}
.cop-pickup-card-label--current {
  color: #1D9E75;
}
.cop-pickup-card-label--new {
  color: #378ADD;
}

/* Primary row: weekday/date AND start→end time on the same row, sharing
   the same typography weight so the slot reads as one cohesive unit
   instead of two competing lines. Wraps gracefully on narrow viewports
   (time slips onto its own line if the date is long). */
.cop-pickup-date-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cop-primary);
}
.cop-pickup-date-time {
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.cop-pickup-date-time strong {
  font-weight: 700;
}
.cop-pickup-date-arrow {
  color: var(--cop-muted);
  font-weight: 400;
}

/* Secondary metadata: location and (when present) the organizer note.
   Both styled identically as quiet muted text — "additional info about
   this slot" without competing with the date+time row above. The
   organizer note keeps its prominent amber styling inside the
   confirmation modal — that's where it actually needs to demand a
   re-read before the booking is finalized. */
.cop-pickup-date .cop-pickup-note {
  margin-top: 2px;
  font-size: 13px;
  color: var(--cop-text);
  font-weight: normal;
  background: none;
  border-left: none;
  border-radius: 0;
  padding: 0;
  display: block;
  white-space: pre-wrap;
  line-height: 1.4;
}
.cop-pickup-date-loc-inline {
  font-weight: normal;
  margin-left: 4px;
}

/* Notes textarea for the pickup screen: matches the slot card's width
   exactly (both use box-sizing:border-box on 100%-width parents) so the
   two controls line up visually. */
.cop-pickup-notes-field {
  /* Override the inherited flex:1 from .cop-field; here the field is on
     its own row and should take full width like the cards above. */
  flex: none;
  width: 100%;
}
.cop-pickup-notes-field label {
  padding-left: 12px;
}
.cop-pickup-notes-textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid var(--cop-border);
  border-radius: var(--cop-radius);
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
  color: var(--cop-text);
  resize: vertical;
}
.cop-pickup-notes-textarea:focus { border-color: var(--cop-primary); }

/* "None of these dates" card — same visual as date cards. */
.cop-pickup-date--nodates .cop-pickup-date-main {
  font-weight: 600;
}

/* Organizer note shown inside each pickup slot card. Styled as a soft
   amber callout so it stands out from the neutral metadata above without
   feeling alarming. */
.cop-pickup-note {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  background: #FEF3C7;
  border-left: 3px solid #F59E0B;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: #92400E;
  white-space: pre-wrap;
  font-weight: normal;
  line-height: 1.4;
}

/* Confirmation modal shown only when the selected slot has an organizer
   note — re-displays the note so the colleague cannot miss it. */
.cop-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 35, 50, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.cop-confirm-card {
  background: var(--cop-surface);
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
}
.cop-confirm-note {
  padding: 12px 14px;
  background: #FEF3C7;
  border-left: 4px solid #F59E0B;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: #92400E;
}
.cop-btn--ghost {
  background: transparent;
  color: var(--cop-text);
  border: 2px solid var(--cop-border);
}
.cop-btn--ghost:hover:not(:disabled) { border-color: var(--cop-primary); }

/* Danger ghost: soft-red border and text for reversible destructive
   actions (e.g. "Cancel my booking"). Not a full red fill — that's
   reserved for truly irreversible operations. */
.cop-btn--danger-ghost {
  color: #C0392B;
  border-color: #E6A9A4;
}
.cop-btn--danger-ghost:hover:not(:disabled) {
  border-color: #C0392B;
  background: #FDF2F1;
}

/* ===== Mobile: make the most of the narrow width ===== */
@media (max-width: 480px) {
  /* Trim the side padding of the whole form and of the cards. */
  .co-public { padding: 16px 6px; }
  .cop-product-header { padding: 12px 12px 8px; }
  .cop-variant { padding: 12px; }

  /* Variant info takes the full width; the stepper wraps to its own
     row underneath instead of squeezing the text from the right. */
  .cop-variant { flex-wrap: wrap; row-gap: 10px; }
  .cop-variant-info { flex: 1 1 100%; }
  .cop-variant-qty { width: 100%; justify-content: center; }

  /* Everything inside the card reads centred. */
  .cop-product-header { text-align: center; }
  .cop-variant-info { text-align: center; }
}