/* ========== LOGIN ========== */
.admin-body { min-height: 100vh; }

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse at center, rgba(201, 168, 76, 0.08), transparent 60%),
    var(--bg-primary);
}
.login-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.login-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--gold);
  padding: 4px;
  object-fit: cover;
}
.login-title {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 2rem;
  letter-spacing: 4px;
  font-weight: 300;
  margin-bottom: 0.3rem;
}
.login-sub { color: var(--text-muted); margin-bottom: 2rem; font-size: 0.9rem; }
.login-btn { width: 100%; margin-top: 1rem; }
.login-error { color: #e85c5c; font-size: 0.85rem; margin-top: 1rem; min-height: 1.2rem; }
/* Stack email + password vertically with a small gap; matches the existing
   single-input layout. The form is column-flex so margin between inputs
   provides visual separation. */
#login-form .input { display: block; width: 100%; box-sizing: border-box; margin-bottom: 0.7rem; }
#login-form .input:last-of-type { margin-bottom: 0; }
/* "Forgot password?" — sits below the error message, low-key link styling.
   Not a primary action so it's a text-button, not a btn. */
.login-forgot-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.4rem 0;
  margin-top: 0.4rem;
  text-decoration: underline;
  font-family: inherit;
}
.login-forgot-link:hover { color: var(--gold); }
.login-back {
  display: inline-block;
  margin-top: 2rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: color 0.3s;
}
.login-back:hover { color: var(--gold); }
/* Change-password card in Settings — 3 fields stacked then a button. */
.change-pw-row {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 360px;
}
.change-pw-row .btn { align-self: flex-start; }

/* ========== INPUTS ========== */
.input {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 0.95rem;
  transition: border-color 0.2s;
}
.input:focus {
  outline: none;
  border-color: var(--gold);
}
textarea.input { resize: vertical; min-height: 80px; font-family: var(--sans); }

.field { display: block; margin-bottom: 1rem; }
.field-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

/* ========== ADMIN APP SHELL ========== */
.admin-app { min-height: 100vh; padding-bottom: 4rem; }

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gold);
  letter-spacing: 2px;
}
.admin-brand em { color: var(--text-muted); font-style: normal; font-size: 0.85rem; letter-spacing: 1px; }
.admin-brand-logo {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  object-fit: cover;
}
.admin-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 0.5rem 1rem;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-ghost-sm {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-ghost-sm:hover { border-color: var(--gold); color: var(--gold); }

/* ========== TABS ========== */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  overflow-x: auto;
  background: var(--bg-primary);
  position: sticky;
  top: 73px;
  z-index: 40;
}
.tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 1rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}
.tab:hover { color: var(--gold-light); }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }

.tab-panel {
  display: none;
  padding: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.tab-panel.active { display: block; animation: fadeUp 0.3s ease-out; }

/* ===== SUBTABS — used inside parent panels that group related sub-sections
   (currently the Voices panel = Reviews + Inquiries + future Feedback).
   Visually de-emphasized vs the main tabs: smaller, lighter underline,
   no all-caps, sit at the top of the panel content. */
.subtabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border);
  margin: -0.5rem 0 1.5rem;
  flex-wrap: wrap;
}
.subtab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.6rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  margin-bottom: -1px;
}
.subtab:hover { color: var(--gold-light); }
.subtab.active { color: var(--gold); border-bottom-color: var(--gold); }
.subpanel { display: none; animation: fadeUp 0.25s ease-out; }
.subpanel.active { display: block; }

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.panel-head h2 {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--gold);
  font-weight: 300;
  letter-spacing: 2px;
}
.panel-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.btn-sm { padding: 0.5rem 1rem !important; font-size: 0.78rem !important; letter-spacing: 1.5px !important; }

/* Delete button on product cards */
.product-edit-card { position: relative; }
.product-delete-btn {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: all 0.2s;
  z-index: 2;
}
.product-delete-btn:hover {
  background: #c33;
  border-color: #c33;
  color: #fff;
}

/* Reorder arrows for each product card. Stacked vertically in the top-left
   corner (mirroring the delete button in the top-right). Disabled state for
   the first/last cards in the list. Works on desktop and mobile/touch. */
.product-reorder-arrows {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
}
.product-arrow-btn {
  width: 28px;
  height: 22px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}
.product-arrow-btn:hover:not(:disabled) {
  background: rgba(201, 168, 76, 0.15);
  border-color: var(--gold);
  color: var(--gold);
}
.product-arrow-btn:active:not(:disabled) {
  transform: scale(0.92);
}
.product-arrow-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* Upload progress overlay */
.product-edit-image .overlay.uploading,
.product-edit-image .overlay:not(:empty) { opacity: 1; }
.panel-hint {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
  font-style: italic;
}

.sub-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--gold);
  letter-spacing: 1.5px;
  margin: 2rem 0 1rem;
}

/* ========== PRODUCTS ========== */
.products-editor { display: grid; gap: 1.5rem; }

.product-edit-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.product-edit-image {
  aspect-ratio: 4/3;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.product-edit-image img {
  width: 100%; height: 100%; object-fit: cover;
}
.product-edit-image .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s;
}
.product-edit-image:hover .overlay { opacity: 1; }

/* Reset-to-default button — only rendered when an admin upload exists. Sits on top of
   the product image in the bottom-right corner; visible at all times so the user can
   tell at a glance which products are running on a custom upload vs the default. */
.product-image-reset {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 0.32rem 0.7rem;
  background: rgba(0, 0, 0, 0.78);
  color: #e8c97a;
  border: 1px solid rgba(232, 201, 122, 0.5);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 3;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.product-image-reset:hover { background: #e8c97a; color: #0a0a0a; border-color: #e8c97a; }
.product-image-reset:disabled { opacity: 0.5; cursor: default; }

/* Download-hero button — always visible (works for both default + admin-uploaded
   images). Compact icon-only pill at bottom-left so it can't collide with the
   wider RESET button on the right, even on narrow cards. Tooltip + aria-label
   carry the meaning. */
.product-image-download {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(0, 0, 0, 0.78);
  color: #e8c97a;
  border: 1px solid rgba(232, 201, 122, 0.5);
  border-radius: 50%;
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.product-image-download:hover { background: #e8c97a; color: #0a0a0a; border-color: #e8c97a; }
.product-image-download:disabled { opacity: 0.5; cursor: default; }

/* Additional images — stacked below the primary image in the first column */
.product-edit-media { display: flex; flex-direction: column; gap: 0.75rem; }
.product-extra-images { }
.extra-images-label {
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.extra-images-hint {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  font-style: italic;
  opacity: 0.85;
  margin-left: 0.3rem;
}
.extra-images-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}
.extra-image-tile .extra-image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  cursor: pointer;
}
.extra-image-tile:hover .extra-image-overlay { opacity: 1; }
.extra-image-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-primary);
}
.extra-image-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.extra-image-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: var(--gold);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid rgba(201, 168, 76, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.extra-image-remove:hover { background: rgba(0, 0, 0, 0.9); color: #fff; }

/* Download button on the extra-image tile — top-left corner so it doesn't
   collide with the remove button (top-right) or reorder arrows (bottom-left).
   Same dark-glass + gold treatment as the other tile controls. */
.extra-image-download {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: var(--gold);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid rgba(201, 168, 76, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.extra-image-download:hover { background: #e8c97a; color: #0a0a0a; border-color: #e8c97a; }
.extra-image-download:disabled { opacity: 0.5; cursor: default; }

/* Reorder arrows on the extra-image tile — sit at the bottom corners,
   horizontal layout to match the row direction of the extras grid.
   Same dark glass treatment as the remove button so they read as one
   set of tile controls. */
.extra-image-reorder {
  position: absolute;
  left: 2px;
  bottom: 2px;
  display: flex;
  gap: 3px;
  z-index: 2;
}
.extra-image-arrow {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--gold);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid rgba(201, 168, 76, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.extra-image-arrow:hover:not(:disabled) { background: rgba(0, 0, 0, 0.9); color: #fff; }
.extra-image-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.extra-image-add {
  aspect-ratio: 1 / 1;
  background: var(--bg-primary);
  border: 1px dashed var(--border);
  border-radius: 3px;
  color: var(--gold);
  font-size: 1.5rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.extra-image-add:hover { border-color: var(--gold); color: var(--gold-light); }
.extra-image-add:disabled { cursor: wait; opacity: 0.5; }

.product-edit-fields { display: grid; gap: 0.8rem; }
.field-row { display: grid; grid-template-columns: 1fr 120px; gap: 0.8rem; }

/* ========== GALLERY ========== */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: 6px;
  padding: 3rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-secondary);
}
.upload-zone:hover, .upload-zone.drag {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.05);
}
.upload-icon { font-size: 2.5rem; margin-bottom: 0.8rem; }
.upload-text { color: var(--text-primary); font-size: 1rem; margin-bottom: 0.3rem; }
.upload-sub { color: var(--text-muted); font-size: 0.85rem; }

.gallery-admin-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.gallery-admin-item {
  aspect-ratio: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.gallery-admin-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-admin-item .remove-btn {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  background: rgba(0,0,0,0.8);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.2s;
}
.gallery-admin-item .remove-btn:hover { background: #c33; }

/* Gallery image badges (uploaded / default / hidden) */
.gallery-admin-item .gallery-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: 3px 7px;
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
}
.badge-upload {
  background: rgba(126, 200, 160, 0.25);
  color: #7ec8a0;
  border: 1px solid rgba(126, 200, 160, 0.5);
}
.badge-default {
  background: rgba(201, 168, 76, 0.25);
  color: var(--gold-light);
  border: 1px solid rgba(201, 168, 76, 0.5);
}
.badge-hidden {
  background: rgba(232, 92, 92, 0.25);
  color: #e85c5c;
  border: 1px solid rgba(232, 92, 92, 0.5);
}

/* Hidden default shows dimmed so you know it's not visible on public site */
.gallery-admin-item.hidden-default img { opacity: 0.3; filter: grayscale(50%); }
.gallery-admin-item.hidden-default .remove-btn {
  background: rgba(201, 168, 76, 0.9);
  color: #000;
  font-size: 1.2rem;
}
.gallery-admin-item.hidden-default .remove-btn:hover { background: var(--gold); }

.empty-state {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: 2rem;
  grid-column: 1 / -1;
}

/* ========== PROMPT BUILDER ========== */
.prompt-builder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.prompt-fields { display: grid; gap: 0.8rem; margin: 1rem 0; }

/* Product multiselect checkbox list */
.checkbox-list {
  display: grid;
  gap: 0.3rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  max-height: 280px;
  overflow-y: auto;
}
.checkbox-row {
  display: grid;
  grid-template-columns: 22px 1fr auto auto auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}
.checkbox-row:hover { background: var(--bg-tertiary); }
.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}
.check-name { color: var(--text-primary); font-size: 0.92rem; }
.check-price {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  min-width: 50px;
  text-align: right;
}
.check-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.badge-ok {
  background: rgba(76, 175, 80, 0.15);
  color: #7ec8a0;
  border: 1px solid rgba(76, 175, 80, 0.4);
}
.badge-warn {
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold-light);
  border: 1px solid rgba(201, 168, 76, 0.3);
}

/* Promo price input — sits inline in each Flyers-tab product row. Numeric
   field with a dim "Promo $" prefix; lights up gold when a value is set. */
.check-promo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-muted, rgba(245, 240, 232, 0.55));
}
.check-promo-label {
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.check-promo-input {
  width: 56px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--serif);
  font-size: 0.95rem;
  padding: 3px 6px;
  border-radius: 3px;
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
}
.check-promo-input::-webkit-outer-spin-button,
.check-promo-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.check-promo-input:focus { border-color: var(--gold); }
.checkbox-row.has-promo .check-promo-label,
.checkbox-row.has-promo .check-promo-input { color: var(--gold); }
.checkbox-row.has-promo .check-promo-input { border-color: var(--gold); }
.checkbox-row.has-promo .check-price { text-decoration: line-through; opacity: 0.55; }
/* Click on the input shouldn't toggle the checkbox (label wraps the row). */
.check-promo-wrap, .check-promo-input { cursor: text; }

/* Inline toggle field */
.field-inline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
}
.field-inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}
.field-label-inline {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.prompt-rules {
  background: rgba(201, 168, 76, 0.05);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.2rem;
  border-radius: 0 4px 4px 0;
  margin: 1rem 0;
  font-size: 0.85rem;
}
.prompt-rules strong { color: var(--gold); display: block; margin-bottom: 0.5rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
.prompt-rules ul { list-style: none; padding: 0; }
.prompt-rules li {
  color: var(--text-muted);
  padding: 0.2rem 0 0.2rem 1rem;
  position: relative;
  line-height: 1.5;
}
.prompt-rules li::before {
  content: '·';
  color: var(--gold);
  position: absolute;
  left: 0;
  font-weight: bold;
}

.prompt-actions { display: flex; gap: 0.8rem; align-items: center; }

.prompt-output {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prompt-output-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}
.copy-status { color: var(--gold-light); font-size: 0.75rem; font-style: italic; transition: opacity 0.3s; }

/* Copy button "copied" state */
#btn-copy-prompt { transition: all 0.3s; }
#btn-copy-prompt.copied {
  background: #4caf50 !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4) !important;
  transform: scale(1.02);
}
.prompt-output pre {
  padding: 1.2rem;
  color: var(--text-primary);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1;
  overflow: auto;
  max-height: 600px;
}
/* Status caption block — sits below the prompt output, only shown for
   templates that provide a buildCaption function. Visually distinct from
   the prompt block (lighter bg, gold-tinted border) so admin sees it as
   a separate copyable artifact, not part of the prompt itself. */
.prompt-caption-block {
  margin-top: 1rem;
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 6px;
  background: rgba(201, 168, 76, 0.06);
}
.prompt-caption-block .prompt-output-head {
  border-bottom: 1px solid rgba(201, 168, 76, 0.25);
}
.prompt-caption-block pre {
  padding: 1rem 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-primary);
  max-height: 280px;
  overflow: auto;
}
.btn.btn-sm {
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
}

/* Toast shown after Share-to-WhatsApp tells the user the caption is in their clipboard */
.share-hint-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  background: rgba(15, 15, 15, 0.96);
  color: #f5f0e8;
  border: 1px solid #c9a84c;
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 90vw;
  width: 380px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.2s, transform 0.2s;
  cursor: pointer;
}
.share-hint-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* ========== SHARE TAB ========== */
.share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.share-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.5rem 1.8rem;
}
.share-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.share-card h3 {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.3rem;
  letter-spacing: 1.5px;
}
.share-char-count {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 1px;
}
.share-card-hint {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.share-textarea {
  width: 100%;
  background: #0e0e0e;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  padding: 0.85rem 1rem;
  resize: vertical;
  min-height: 130px;
  margin-bottom: 0.9rem;
  transition: border-color 0.2s;
}
.share-textarea:focus { outline: none; border-color: var(--gold); }
.share-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.share-status {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-left: auto;
  min-height: 1em;
  transition: color 0.2s;
}
.share-status.success { color: #6abf6a; }
.share-status.error { color: #e85c5c; }

/* ========== SETTINGS ========== */
.settings-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.5rem 1.8rem;
  margin-bottom: 1.5rem;
}
.settings-card h3 {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.3rem;
  letter-spacing: 1.5px;
  margin-bottom: 0.5rem;
}
.settings-card .input { margin-bottom: 1rem; }
.settings-section-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--gold);
  margin: 1.4rem 0 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.settings-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem 1rem;
  margin-bottom: 0.5rem;
}
.settings-grid-2 .field { margin: 0; display: flex; flex-direction: column; }
.settings-grid-2 .field-full { grid-column: 1 / -1; }
.settings-grid-2 .field-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.settings-grid-2 .field-hint {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  opacity: 0.75;
  margin-left: 0.3rem;
}
.settings-grid-2 .input { margin-bottom: 0; }
.settings-actions {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.settings-status {
  font-size: 0.9rem;
  color: var(--text-muted);
}
.settings-status.success { color: #7ec8a0; }
.settings-status.error { color: #e85c5c; }
@media (max-width: 768px) {
  .settings-grid-2 { grid-template-columns: 1fr; }
}
.settings-card code {
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--gold-light);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.85rem;
}
.hash-output {
  margin-top: 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  color: var(--gold-light);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.85rem;
  word-break: break-all;
  min-height: 1.2rem;
}
.storage-stats {
  background: var(--bg-primary);
  padding: 0.8rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}

/* ========== FLYER BUILDER ========== */
.flyer-builder {
  display: grid;
  /* Left column widened to 460px because each product row now carries the
     promo-price input + label + status badge in addition to name and price.
     360px (the original) was about 100px short, which made the rows visually
     overflow into the preview area. minmax(0, 1fr) on the right column lets
     it shrink without being forced wide by the 1080px layout-box of the
     transform-scaled stage. */
  grid-template-columns: 460px minmax(0, 1fr);
  gap: 2rem;
}
/* `overflow: hidden` is a defensive backstop: even if a future row gets a bit
   wider than the column, content stays clipped instead of bleeding right. */
.flyer-controls { display: grid; gap: 1rem; align-content: start; min-width: 0; overflow: hidden; }
.flyer-preview-wrap {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 600px;
  /* min-width: 0 belt-and-suspenders the grid override above so the wrap
     itself can also collapse cleanly; overflow:hidden then clips anything
     the (scaled) stage projects beyond the wrap's visible bounds. */
  min-width: 0;
  overflow: hidden;
}
.flyer-preview-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 0.8rem;
}
.flyer-stage {
  transform: scale(0.28);
  transform-origin: top center;
  width: 1080px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.pp-page-label {
  color: #c9a84c;
  font-size: 42px;
  letter-spacing: 10px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}
/* Cover-page label is informational, not a flyer-number — render it smaller
   and softer so admin understands this page is auto-handled, not an export. */
.pp-page-label-cover {
  font-size: 26px;
  letter-spacing: 4px;
  font-weight: 400;
  font-style: italic;
  color: rgba(201, 168, 76, 0.7);
  text-transform: none;
}
.flyer-empty {
  color: var(--text-muted);
  padding: 4rem 2rem;
  text-align: center;
  font-style: italic;
  font-size: 3rem;
}

/* ========== COVER PAGE (catalog mode — first page of multi-product PDFs) ========== */
.pp-cover {
  background: #000000;
  color: #f5f0e8;
  font-family: 'Inter', sans-serif;
  display: flex;
  /* Top-anchor — logo sits near the top of the canvas, brand stack flows
     beneath it. Tighter padding-top so the logo is unmistakably high on the page. */
  align-items: flex-start;
  justify-content: center;
  padding: 60px 80px 80px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.pp-cover-inner {
  text-align: center;
  width: 100%;
}
.pp-cover-logo-wrap {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 3px solid #c9a84c;
  margin: 0 auto 40px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
}
.pp-cover-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
}
.pp-cover-brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 110px;
  letter-spacing: 12px;
  color: #c9a84c;
  line-height: 1;
  margin-bottom: 16px;
}
.pp-cover-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 42px;
  letter-spacing: 3px;
  color: #e8c97a;
  margin-bottom: 60px;
}
.pp-cover-divider {
  width: 250px;
  height: 1px;
  background: #c9a84c;
  opacity: 0.6;
  margin: 0 auto 40px;
}
.pp-cover-section {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 44px;
  letter-spacing: 4px;
  font-weight: 400;
  font-style: italic;
  color: #f5f0e8;
}

/* Kashrus block on the menu-PDF cover page — CRC mark + 2-line text,
   centered below the "This Week's Menu" section header. Sits visually
   detached from the rest with margin so it reads as a separate brand
   trust signal (not as part of the menu intro). */
.pp-cover-kashrus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 70px;
}
.pp-cover-kashrus-img {
  width: 130px;
  height: auto;
  flex-shrink: 0;
}
.pp-cover-kashrus-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  line-height: 1.45;
  color: #f5f0e8;
  text-align: left;
  letter-spacing: 0.5px;
  font-style: italic;
}
.pp-cover-kashrus-text strong {
  color: #c9a84c;
  font-weight: 500;
  font-style: normal;
}

/* ========== FLYER ITSELF (1080px wide intrinsic) ========== */
.pp-flyer {
  background: #000000; /* pure black to blend with product image studio backgrounds */
  /* Subtle lighter frame around each flyer — implemented as a border (which
     stays visually outside the content area thanks to box-sizing: border-box),
     so the inner area where the product photo sits stays #000 and matches the
     hero images' studio backgrounds. The frame helps separate one catalog page
     from the next when scrolling the multi-page menu PDF on a phone, without
     introducing a visible mismatch around the platter shot. */
  border: 24px solid #1a1a1a;
  color: #f5f0e8;
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  padding: 60px 80px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden; /* clip anything that tries to escape the flyer */
}
.pp-header, .pp-footer { flex-shrink: 0; }

.pp-header { text-align: center; }
/* Circular mask that clips off the square white corners of Logo.jpeg */
.pp-logo-wrap {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid #c9a84c;
  overflow: hidden;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-sizing: content-box;
}
.pp-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.18); /* uniform zoom — no elongation, clips white corners */
}
.pp-brand {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  color: #c9a84c;
  font-size: 84px;
  letter-spacing: 8px;
  margin-bottom: 8px;
}
.pp-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  color: #e8c97a;
  font-size: 32px;
  letter-spacing: 2px;
  margin-bottom: 24px;
}
.pp-divider {
  width: 220px;
  height: 1px;
  background: #c9a84c;
  opacity: 0.55;
  margin: 0 auto 18px;
}
.pp-section-heading {
  color: #f5f0e8;
  font-size: 26px;
  letter-spacing: 6px;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.pp-products {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap, 20px);
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

.pp-card {
  display: grid;
  grid-template-columns: 380px 1fr; /* FIXED image column so text always aligns */
  gap: 40px;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 300px;
}
.pp-card-image {
  /* Uniform frame — height from card, width auto via aspect-ratio */
  height: 100%;
  aspect-ratio: 4 / 3;
  max-width: 380px;
  border: 1px solid #c9a84c;
  background: #000000; /* pure black matches product image studio backgrounds */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 18px; /* breathing room so edge-to-edge platter photos (e.g. Reserve) aren't clipped */
}
.pp-card-image img {
  /* Image INSIDE the frame scales with platter size */
  width: calc(var(--scale, 1) * 100%);
  height: calc(var(--scale, 1) * 100%);
  object-fit: contain; /* show whole platter; the padding + aspect-ratio frame keep it consistent */
  display: block;
}
.pp-card-info {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--text-scale, 1));
}
.pp-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  color: #c9a84c;
  font-size: calc(48px * var(--text-scale, 1));
  letter-spacing: 3px;
  line-height: 1.1;
}
.pp-card-fish {
  color: #e8c97a;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: calc(20px * var(--text-scale, 1));
  letter-spacing: 2.5px;
  opacity: 0.92;
  text-transform: uppercase;
}
.pp-card-size {
  color: #f5f0e8;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: calc(22px * var(--text-scale, 1));
  letter-spacing: 2px;
  opacity: 0.85;
}
.pp-card-price {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  color: #c9a84c;
  font-size: calc(44px * var(--text-scale, 1));
  letter-spacing: 1px;
}

/* ---------- Promo styling — multi-product card ---------- */
.pp-card-price-block {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--text-scale, 1));
}
.pp-card-promo-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: calc(14px * var(--text-scale, 1));
  color: #0a0a0a;
  background: #e8c97a;
  padding: calc(4px * var(--text-scale, 1)) calc(10px * var(--text-scale, 1));
  border-radius: 2px;
  text-transform: uppercase;
  margin-bottom: calc(4px * var(--text-scale, 1));
}
.pp-card-price-row {
  display: flex;
  align-items: baseline;
  gap: calc(12px * var(--text-scale, 1));
}
.pp-card-price-original {
  position: relative;
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  color: rgba(245, 240, 232, 0.5);
  font-size: calc(28px * var(--text-scale, 1));
  letter-spacing: 1px;
}
/* Strikethrough as a real <span> for the same html2canvas reason as the
   single-product flyer (pseudo-elements positioned absolutely don't render
   reliably). The calc tracks --text-scale so the line stays proportional
   when the flyer scales card content for a tighter or looser layout. */
.pp-card-price-strike {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  top: calc(13px * var(--text-scale, 1));
  height: calc(2px * var(--text-scale, 1));
  background: rgba(245, 240, 232, 0.5);
  pointer-events: none;
}
.pp-card-price-promo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  color: #e8c97a;
  font-size: calc(44px * var(--text-scale, 1));
  letter-spacing: 1px;
}
.pp-group .pp-card-price-original { font-size: 22px; }
.pp-group .pp-card-price-promo { font-size: 36px; }
.pp-group .pp-card-promo-badge { font-size: 12px; letter-spacing: 1.6px; }

.pp-footer { text-align: center; margin-top: 30px; }
.pp-cta {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  color: #c9a84c;
  font-size: 44px;
  letter-spacing: 4px;
  margin: 20px 0 12px;
}
.pp-phone {
  color: #f5f0e8;
  font-size: 26px;
  letter-spacing: 4px;
  opacity: 0.85;
}

/* 4:5 format tweaks (tighter vertical spacing) */
.pp-group { padding: 50px 70px; }
.pp-group .pp-logo-wrap { width: 160px; height: 160px; margin-bottom: 18px; }
.pp-group .pp-brand { font-size: 68px; letter-spacing: 7px; }
.pp-group .pp-tagline { font-size: 28px; margin-bottom: 18px; }
.pp-group .pp-section-heading { font-size: 22px; letter-spacing: 5px; margin-bottom: 28px; }
.pp-group .pp-products { gap: 24px; }
.pp-group .pp-card-name { font-size: 38px; letter-spacing: 2px; }
.pp-group .pp-card-fish { font-size: 16px; letter-spacing: 2px; }
.pp-group .pp-card-size { font-size: 18px; }
.pp-group .pp-card-price { font-size: 36px; }
.pp-group .pp-cta { font-size: 36px; letter-spacing: 3px; margin-top: 14px; }
.pp-group .pp-phone { font-size: 22px; }

/* QR code block — shared styles for inline-in-footer and floating-corner variants */
.pp-qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.pp-qr-floating {
  position: absolute;
  right: 60px;
  bottom: 60px;
  z-index: 5;
}
.pp-qr-frame {
  width: 180px;
  height: 180px;
  background: #ffffff;
  border: 3px solid #c9a84c;
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-qr-img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.pp-qr-label {
  color: #c9a84c;
  font-size: 16px;
  letter-spacing: 3px;
  font-weight: 600;
  text-align: center;
}

/* Footer row: when QR is inline, text sits on the left and QR on the right */
.pp-footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.pp-footer-text {
  flex: 1 1 auto;
  min-width: 0;
}
.pp-footer-with-qr .pp-footer-row {
  justify-content: space-between;
}
.pp-footer-with-qr .pp-footer-text {
  text-align: left;
}
.pp-footer-with-qr .pp-cta,
.pp-footer-with-qr .pp-phone {
  text-align: left;
}

.pp-group .pp-qr-floating { right: 50px; bottom: 50px; }
.pp-group .pp-qr-frame { width: 150px; height: 150px; }
.pp-group .pp-qr-label { font-size: 14px; letter-spacing: 2px; }
.pp-group .pp-footer-row { gap: 30px; }

/* Flyer product-list bulk actions (Select All / Deselect All) */
.flyer-bulk-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.flyer-bulk-actions .btn-ghost-sm {
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
}

/* ========== SINGLE-PRODUCT FLYER (one product per flyer, 1080×1920) ========== */
.pp-single {
  padding: 80px 90px;
  display: flex;
  flex-direction: column;
  position: relative;  /* anchor for the floating QR block */
}
/* Clean centered header — wordmark + tagline only by default (4:5 and 1:1 formats).
   The 9:16 status format restores the standalone circular logo above the wordmark
   since there's room (see .pp-single-status overrides below). */
.pp-single-header {
  text-align: center;
  flex-shrink: 0;
  margin-bottom: 32px;
}
/* Status (9:16) only — bring back the prominent circular logo at top.
   Negative top margin pulls the logo upward so it sits closer to the top edge. */
.pp-single-status { padding-top: 50px; }
.pp-single-status .pp-single-logo-wrap {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid #c9a84c;
  overflow: hidden;
  margin: 0 auto 22px;
}
.pp-single-status .pp-single-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-single-brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 60px;
  letter-spacing: 6px;
  color: #c9a84c;
  line-height: 1;
}
.pp-single-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 36px;
  color: #e8c97a;
  letter-spacing: 1px;
  margin-top: 20px;
  line-height: 1.1;
}

.pp-single-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 92px;
  letter-spacing: 4px;
  color: #e8c97a;
  text-align: center;
  /* line-height bumped from 1.05 to 1.18 so the descenders of letters like
     J, Y, and P have room inside the line-box. At 1.05 the descenders extended
     past the line-box and visually overlapped the .pp-single-fish line below
     (most noticeable on "SALMON JEWELS" / "TUNA JEWELS"). */
  line-height: 1.18;
  margin-top: 28px;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.pp-single-fish {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: 4px;
  color: #c9a84c;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 38px;  /* breathing room before the hero image */
  flex-shrink: 0;
  opacity: 0.95;
}

.pp-single-image-wrap {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 32px;
  background: #000;
}
.pp-single-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pp-single-description {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.55;
  color: #f5f0e8;
  text-align: center;
  margin-bottom: 30px;
  flex-shrink: 0;
}

.pp-single-meta {
  text-align: center;
  flex-shrink: 0;
  margin-bottom: 30px;
}
.pp-single-meta-row {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  color: #c9a84c;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.92;
}
.pp-single-price {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 88px;
  font-weight: 500;
  color: #e8c97a;
  margin-top: 18px;
  margin-bottom: 18px;  /* extra spacing before the divider */
  line-height: 1;
}

.pp-single-divider {
  width: 38%;  /* short enough to never reach the floating QR in the corner */
  height: 1px;
  background: #c9a84c;
  margin: 30px auto 32px;
  opacity: 0.5;
  flex-shrink: 0;
}
.pp-single-footer {
  text-align: center;
  flex-shrink: 0;
}
.pp-single-cta {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 38px;
  font-style: italic;
  color: #e8c97a;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.pp-single-phone {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  color: #c9a84c;
  letter-spacing: 1px;
}
/* 3-column bottom row layout (status + group):
   [description in gold-bordered box | size/serves/price | QR + label]
   Replaces the stacked footer to free up the vertical center for a big hero image. */
.pp-single-bottom {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 32px;
  align-items: center;
  flex-shrink: 0;
  margin-top: 36px;
  padding: 4px 0;
}
.pp-single-bottom.pp-single-bottom-noqr { grid-template-columns: 1.4fr 1fr; }

.pp-single-desc-box {
  border: 1px solid #c9a84c;
  border-radius: 8px;
  padding: 22px 26px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  color: #f5f0e8;
  background: rgba(201, 168, 76, 0.04);
}

.pp-single-specs {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pp-single-spec-row {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  color: #c9a84c;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.9;
}
.pp-single-bottom .pp-single-price {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 80px;
  font-weight: 500;
  color: #e8c97a;
  margin-top: 10px;
  line-height: 1;
}

/* ---------- Promo styling — single-product flyer ---------- */
.pp-single-price-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  line-height: 1;
}
.pp-single-promo-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 3px;
  color: #0a0a0a;
  background: #e8c97a;
  padding: 6px 14px;
  border-radius: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  white-space: nowrap;
}
.pp-single-price-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.pp-single-price-original {
  position: relative;
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: rgba(245, 240, 232, 0.45);
  letter-spacing: 1px;
  line-height: 1;
}
/* Manual strikethrough drawn as a real <span> child rather than a ::after
   pseudo-element. html2canvas v1.4.1 silently mispositions absolutely-placed
   pseudo-elements (the line consistently rendered at the top of the parent
   instead of where CSS placed it), but real DOM elements with absolute
   positioning render in exactly the right spot. Per-format `top` values are
   set below so the line sits at the visual midline of the caps. The explicit
   `display: block` and `width: 100%` keep the empty span from collapsing
   to zero size in any rendering pipeline. */
.pp-single-price-strike {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(245, 240, 232, 0.55);
  pointer-events: none;
}
.pp-single-price-promo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  color: #e8c97a;
  letter-spacing: 1px;
  line-height: 1;
}
/* Per-format sizing — keep promo price ~the same prominence as the regular price was.
   The strikethrough `top` value is set per-format because the pseudo-element's
   position is in pixels (html2canvas-safe), and each format has a different
   original-price font-size. Target: visual midline of the caps glyphs, which
   for Cormorant Garamond at line-height:1 sits at roughly font-size/2 from top. */
.pp-single-status .pp-single-promo-badge { font-size: 22px; padding: 8px 16px; }
.pp-single-status .pp-single-price-original { font-size: 44px; }
.pp-single-status .pp-single-price-strike { top: 20px; height: 4px; }
.pp-single-status .pp-single-price-promo { font-size: 92px; }

.pp-single-group .pp-single-promo-badge { font-size: 18px; padding: 6px 12px; letter-spacing: 2.4px; }
.pp-single-group .pp-single-price-original { font-size: 36px; }
.pp-single-group .pp-single-price-strike { top: 16px; height: 3px; }
.pp-single-group .pp-single-price-promo { font-size: 72px; }

.pp-single-square .pp-single-promo-badge { font-size: 14px; padding: 4px 10px; letter-spacing: 2px; }
.pp-single-square .pp-single-price-original { font-size: 26px; }
.pp-single-square .pp-single-price-strike { top: 12px; height: 2px; }
.pp-single-square .pp-single-price-promo { font-size: 54px; }

/* The 4:5 single-product flyer is always used as a catalog page — the
   wordmark + tagline already live on the catalog cover, so it would just
   repeat on every page. Suppress it permanently for 4:5; Status 9:16 and
   Square 1:1 keep their headers since those formats are typically shared
   stand-alone. The flyer is flex-column with image-wrap as flex:1, so the
   freed vertical space is absorbed by the product image — layout stays clean. */
.pp-single-group .pp-single-header { display: none; }
/* Drop the name's top margin since there's nothing above it to space from. */
.pp-single-group .pp-single-name { margin-top: 0; }

/* Catalog mode — kept for 9:16 use case if ever generated as a multi-page PDF.
   For 4:5 this is a no-op since the header is already hidden by the rule above. */
.pp-catalog-mode .pp-single-header { display: none; }

/* ---------- Promo top banner (single-product flyer) ---------- */
/* Sits at the very top of the flyer, full-width, attention-grabbing.
   Vertical centering uses line-height tuned to ~0.81 × container height.
   This is empirical: html2canvas renders flex+align-items+padding centering
   differently than the live browser, so we avoid those entirely. With pure
   line-height centering, Inter's baseline at ~80% of the line-box means the
   caps glyphs land at the optical midline of the band when line-height is
   ~81% of height (rather than = height, which pushes caps below center). */
.pp-single-promo-banner {
  position: absolute;
  /* `top: 30px` (instead of 0) leaves a small black strip above the gold band
     so each catalog page visibly *opens* with the banner — not continues into
     it. Without that strip, when scrolling a multi-page PDF on a phone, the
     full-bleed banner reads as a continuation of the previous page rather
     than the top of a new one. The 30 px is just enough to break the visual
     run-together while keeping the banner punchy and prominent. */
  top: 30px; left: 0; right: 0;
  background: linear-gradient(90deg, #c9a84c 0%, #e8c97a 50%, #c9a84c 100%);
  color: #0a0a0a;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  text-align: center;
  letter-spacing: 8px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  z-index: 5;
}
/* Per-format sizing. Height is the gold band; line-height controls where the
   caps land. Adjust line-height ±2 px if future testing shows the caps still
   off — smaller line-height moves caps up, larger moves them down. */
.pp-single-status .pp-single-promo-banner { font-size: 36px; height: 80px; line-height: 60px; letter-spacing: 10px; }
.pp-single-group  .pp-single-promo-banner { font-size: 30px; height: 70px; line-height: 52px; letter-spacing: 8px; }
.pp-single-square .pp-single-promo-banner { font-size: 22px; height: 50px; line-height: 38px; letter-spacing: 5px; }
/* When the banner is present, push the rest of the flyer down so it doesn't
   slide under the absolute banner. Each format has its own padding-top above;
   add a banner-aware override that wins via specificity. */
/* +30 px each compared to the original numbers — accounts for the black
   strip we added above the banner (banner top: 30 px instead of 0). */
.pp-single-status.has-promo-banner { padding-top: 160px; }
.pp-single-group.has-promo-banner  { padding-top: 160px; }
.pp-single-square.has-promo-banner { padding-top: 130px; }

.pp-single-bottom-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pp-single-bottom-qr .pp-single-qr-frame {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
}
.pp-single-bottom-qr .pp-single-qr-img { width: 100%; height: 100%; display: block; }
.pp-single-bottom-qr .pp-single-qr-label {
  font-family: 'Inter', sans-serif;
  letter-spacing: 2.5px;
  color: #c9a84c;
}

/* Per-format sizing inside the bottom row */
.pp-single-status .pp-single-bottom { gap: 36px; margin-top: 40px; }
.pp-single-status .pp-single-desc-box { font-size: 24px; padding: 26px 30px; }
.pp-single-status .pp-single-spec-row { font-size: 26px; }
.pp-single-status .pp-single-bottom .pp-single-price { font-size: 92px; }
.pp-single-status .pp-single-bottom-qr .pp-single-qr-frame { width: 220px; height: 220px; }
.pp-single-status .pp-single-bottom-qr .pp-single-qr-label { font-size: 18px; }

.pp-single-group .pp-single-bottom { gap: 24px; margin-top: 28px; }
.pp-single-group .pp-single-desc-box { font-size: 20px; padding: 18px 22px; line-height: 1.45; }
.pp-single-group .pp-single-spec-row { font-size: 20px; }
.pp-single-group .pp-single-bottom .pp-single-price { font-size: 72px; }
.pp-single-group .pp-single-bottom-qr .pp-single-qr-frame { width: 180px; height: 180px; }
.pp-single-group .pp-single-bottom-qr .pp-single-qr-label { font-size: 14px; letter-spacing: 2px; }

.pp-single-square .pp-single-bottom { gap: 18px; }
.pp-single-square .pp-single-desc-box { font-size: 16px; padding: 14px 18px; line-height: 1.4; }
.pp-single-square .pp-single-spec-row { font-size: 16px; letter-spacing: 1.2px; }
.pp-single-square .pp-single-bottom .pp-single-price { font-size: 54px; }
.pp-single-square .pp-single-bottom-qr .pp-single-qr-frame { width: 140px; height: 140px; padding: 8px; }
.pp-single-square .pp-single-bottom-qr .pp-single-qr-label { font-size: 12px; letter-spacing: 1.6px; }

/* QR inline (centered) — used in the Status 9:16 footer where there's plenty of room
   and a centered layout reads more elegantly than a corner-pinned QR. */
.pp-single-qr-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.pp-single-qr-inline .pp-single-qr-frame {
  width: 200px;
  height: 200px;
}
.pp-single-qr-inline .pp-single-qr-label {
  font-size: 16px;
  letter-spacing: 2.5px;
}

/* QR pinned to bottom-right of the flyer canvas. Big and unmissable. */
.pp-single-qr-floating {
  position: absolute;
  bottom: 80px;
  right: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 5;
}
.pp-single-qr-frame {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  box-sizing: border-box;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.pp-single-qr-img { width: 100%; height: 100%; display: block; }
.pp-single-qr-label {
  font-family: 'Inter', sans-serif;
  letter-spacing: 3px;
  color: #c9a84c;
  text-align: center;
}

/* Per-format floating-QR sizes (group + square only — status uses inline placement) */
.pp-single-group .pp-single-qr-floating .pp-single-qr-frame { width: 200px; height: 200px; padding: 10px; }
.pp-single-group .pp-single-qr-floating .pp-single-qr-label { font-size: 16px; letter-spacing: 2.5px; }
.pp-single-group .pp-single-qr-floating { bottom: 40px; right: 60px; }
.pp-single-square .pp-single-qr-floating .pp-single-qr-frame { width: 200px; height: 200px; padding: 10px; }
.pp-single-square .pp-single-qr-floating .pp-single-qr-label { font-size: 14px; letter-spacing: 2px; }
.pp-single-square .pp-single-qr-floating { bottom: 32px; right: 50px; }

/* 4:5 (Group/Feed, 1080×1350) — slightly compressed for shorter canvas */
.pp-single-group { padding: 60px 75px; }
.pp-single-group .pp-single-logo-wrap { width: 150px; height: 150px; margin-bottom: 16px; }
.pp-single-group .pp-single-brand { font-size: 46px; letter-spacing: 5px; margin-bottom: 4px; }
.pp-single-group .pp-single-tagline { font-size: 30px; margin-bottom: 26px; }
.pp-single-group .pp-single-name { font-size: 76px; margin-bottom: 22px; }
.pp-single-group .pp-single-fish { font-size: 24px; letter-spacing: 3px; margin-bottom: 24px; }
/* No max-height cap on 4:5 — the header is hidden so the image absorbs the
   freed space and the content stays vertically balanced. (Earlier 540px cap
   was sized assuming the header took ~150px above; without it, the cap left
   empty slack at the bottom and made content look shifted upward.) */
.pp-single-group .pp-single-image-wrap { margin-bottom: 24px; }
.pp-single-group .pp-single-description { font-size: 24px; margin-bottom: 22px; }
.pp-single-group .pp-single-meta-row { font-size: 22px; margin-bottom: 6px; }
.pp-single-group .pp-single-price { font-size: 72px; margin-top: 14px; margin-bottom: 14px; }
.pp-single-group .pp-single-divider { margin: 22px auto 22px; }
.pp-single-group .pp-single-cta { font-size: 32px; }
.pp-single-group .pp-single-phone { font-size: 22px; }

/* 1:1 (Square, 1080×1080) — most compact, for DMs / inline chat preview */
.pp-single-square { padding: 50px 60px; }
.pp-single-square .pp-single-logo-wrap { width: 110px; height: 110px; margin-bottom: 10px; border-width: 1px; }
.pp-single-square .pp-single-brand { font-size: 36px; letter-spacing: 4px; margin-bottom: 2px; }
.pp-single-square .pp-single-tagline { font-size: 24px; margin-bottom: 16px; }
.pp-single-square .pp-single-name { font-size: 56px; margin-bottom: 16px; letter-spacing: 3px; }
.pp-single-square .pp-single-fish { font-size: 18px; letter-spacing: 2.5px; margin-bottom: 16px; }
.pp-single-square .pp-single-image-wrap { max-height: 380px; margin-bottom: 18px; }
.pp-single-square .pp-single-description { font-size: 20px; margin-bottom: 16px; line-height: 1.4; }
.pp-single-square .pp-single-meta-row { font-size: 18px; margin-bottom: 4px; }
.pp-single-square .pp-single-price { font-size: 48px; margin-top: 8px; margin-bottom: 8px; }
.pp-single-square .pp-single-divider { margin: 14px auto 14px; }
.pp-single-square .pp-single-cta { font-size: 26px; }
.pp-single-square .pp-single-phone { font-size: 20px; }

/* ========== REVIEWS ADMIN ========== */
.tab-badge {
  display: inline-block;
  background: #e85c5c;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0;
}
.reviews-filter {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.reviews-filter-btn,
.orders-filter-btn,
.inquiry-filter-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.55rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
}
.reviews-filter-btn:hover,
.orders-filter-btn:hover,
.inquiry-filter-btn:hover { border-color: var(--gold-dark); color: var(--text-primary); }
.reviews-filter-btn.active,
.orders-filter-btn.active,
.inquiry-filter-btn.active {
  background: var(--bg-tertiary);
  border-color: var(--gold);
  color: var(--gold);
}
.filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  background: var(--bg-tertiary);
  border-radius: 11px;
  font-size: 0.7rem;
  padding: 0 6px;
  color: var(--text-muted);
}
.reviews-filter-btn.active .filter-count,
.orders-filter-btn.active .filter-count,
.inquiry-filter-btn.active .filter-count { background: var(--gold); color: #000; }

.reviews-admin-list { display: grid; gap: 1rem; }

.admin-review-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 4px;
  padding: 1.3rem 1.5rem;
  transition: border-color 0.3s;
}
.admin-review-card.status-pending { border-left-color: #e8c97a; }
.admin-review-card.status-approved { border-left-color: #7ec8a0; }
.admin-review-card.status-rejected { border-left-color: #e85c5c; }

.admin-review-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; margin-bottom: 0.8rem; flex-wrap: wrap;
}
.admin-review-head-left { flex: 1; min-width: 200px; }
.admin-review-stars { color: var(--gold); font-size: 1rem; letter-spacing: 2px; margin-bottom: 0.3rem; }
.admin-review-name {
  font-family: var(--serif);
  color: var(--gold-light);
  font-size: 1.2rem;
  letter-spacing: 1px;
  margin-bottom: 0.3rem;
}
.admin-review-meta { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.admin-review-product {
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold);
  border: 1px solid rgba(201, 168, 76, 0.3);
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.admin-review-product.muted {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
  font-style: italic;
}
.admin-review-occasion {
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.7;
}

.admin-review-status-wrap { text-align: right; }
.admin-review-status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1.5px;
}
.admin-review-status-pill.status-pending { background: rgba(232, 201, 122, 0.15); color: #e8c97a; border: 1px solid rgba(232, 201, 122, 0.4); }
.admin-review-status-pill.status-approved { background: rgba(126, 200, 160, 0.15); color: #7ec8a0; border: 1px solid rgba(126, 200, 160, 0.4); }
.admin-review-status-pill.status-rejected { background: rgba(232, 92, 92, 0.15); color: #e85c5c; border: 1px solid rgba(232, 92, 92, 0.4); }
.admin-review-status-pill.status-sample { background: rgba(201, 168, 76, 0.12); color: var(--gold); border: 1px solid rgba(201, 168, 76, 0.4); }
.admin-review-date { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.3rem; }

.admin-review-text {
  color: var(--text-primary);
  line-height: 1.7;
  font-size: 0.95rem;
  font-style: italic;
  margin: 0.8rem 0;
}
.admin-review-email {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}
.admin-review-email .label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.7rem;
  margin-right: 0.3rem;
}
.admin-review-email a { color: var(--gold-light); text-decoration: none; }
.admin-review-email a:hover { text-decoration: underline; }

.admin-review-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.btn-review {
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--sans);
}
.btn-review:hover { transform: translateY(-1px); }
.btn-approve { border-color: rgba(126, 200, 160, 0.4); color: #7ec8a0; }
.btn-approve:hover { background: #7ec8a0; color: #000; border-color: #7ec8a0; }
.btn-reject { border-color: rgba(232, 92, 92, 0.4); color: #e85c5c; }
.btn-reject:hover { background: #e85c5c; color: #fff; border-color: #e85c5c; }
.btn-pending { border-color: rgba(232, 201, 122, 0.4); color: #e8c97a; }
.btn-pending:hover { background: #e8c97a; color: #000; border-color: #e8c97a; }
.btn-delete { border-color: var(--border); color: var(--text-muted); margin-left: auto; }
.btn-delete:hover { background: #c33; color: #fff; border-color: #c33; }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .admin-header { padding: 0.8rem 1rem; flex-wrap: wrap; gap: 0.8rem; }
  .admin-brand { font-size: 1rem; }
  .tabs { padding: 0 1rem; top: auto; }
  .tab { padding: 0.8rem 1rem; font-size: 0.8rem; }
  .tab-panel { padding: 1.5rem 1rem; }
  .product-edit-card { grid-template-columns: 1fr; }
  .product-edit-image { aspect-ratio: 4/3; max-width: 280px; }
  .field-row { grid-template-columns: 1fr; }
  .prompt-builder { grid-template-columns: 1fr; }
  .panel-head h2 { font-size: 1.5rem; }
}

/* ========== HIDDEN PRODUCT (out of stock) ========== */
.product-edit-card.product-edit-card-hidden {
  border-color: rgba(232, 92, 92, 0.4);
  opacity: 0.65;
}
.product-edit-card.product-edit-card-hidden .product-edit-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.55);
  pointer-events: none;
}
.product-hidden-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  background: rgba(232, 92, 92, 0.18);
  color: #e85c5c;
  border: 1px solid rgba(232, 92, 92, 0.5);
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 0.68rem;
  letter-spacing: 1.4px;
  font-weight: 600;
  text-transform: uppercase;
}
/* Admin-only badge sits to the right of the HIDDEN badge (or top-left if
 * not also hidden) so both can coexist. Brand gold to distinguish from the
 * red HIDDEN badge — admin-only is a status flag, not an "out of stock" warning. */
.product-adminonly-badge {
  left: auto;
  right: 0.6rem;
  background: rgba(201, 168, 76, 0.18);
  color: #c9a84c;
  border-color: rgba(201, 168, 76, 0.5);
}
.product-hidden-toggle {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
  font-size: 0.92rem;
}
.product-hidden-toggle .hidden-hint {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 300;
}

/* ========== ORDER CARDS (admin) ========== */
.orders-admin-list { display: grid; gap: 0.7rem; }

/* Weekly grouping in the Completed orders view. Header sits flush with the
   card stack and visually separates one week's worth of orders from the
   next. Other filter views use a flat list — no week header. */
.orders-week-group { display: grid; gap: 0.7rem; }
.orders-week-group + .orders-week-group { margin-top: 0.6rem; }
.orders-week-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 0.7rem 0.95rem;
  background: rgba(201, 168, 76, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-left: 3px solid var(--gold, #c9a84c);
  border-radius: 4px;
}
.orders-week-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--gold, #c9a84c);
}
.orders-week-summary {
  font-size: 0.82rem;
  color: rgba(245, 240, 232, 0.7);
  letter-spacing: 0.3px;
}
.orders-week-body { display: grid; gap: 0.7rem; }

.admin-order-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 4px;
  transition: all 0.2s;
  overflow: hidden;
}
.admin-order-card.status-needs_review { border-left-color: #ffb454; }
.admin-order-card.status-placed { border-left-color: #e8c97a; }
.admin-order-card.status-confirmed { border-left-color: #7ec8a0; }
.admin-order-card.status-ready_for_pickup,
.admin-order-card.status-ready_to_dispatch { border-left-color: var(--gold); }
.admin-order-card.status-dispatched,
.admin-order-card.status-en_route { border-left-color: #6da5d4; }
.admin-order-card.status-picked_up,
.admin-order-card.status-delivered { border-left-color: #7ec8a0; opacity: 0.85; }
.admin-order-card.status-rejected,
.admin-order-card.status-cancelled,
.admin-order-card.status-refunded { border-left-color: #e85c5c; opacity: 0.7; }

.admin-order-head {
  display: grid;
  grid-template-columns: 1fr auto 32px;
  gap: 1.2rem;
  align-items: center;
  padding: 1rem 1.4rem;
  cursor: pointer;
  transition: background 0.15s;
}
.admin-order-head:hover { background: rgba(255, 255, 255, 0.02); }
.admin-order-head-left { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.admin-order-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }

.admin-order-number {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 0.92rem;
  letter-spacing: 1.5px;
  font-weight: 500;
}
.admin-order-customer {
  font-family: var(--serif);
  color: var(--ivory);
  font-size: 1.2rem;
  letter-spacing: 0.4px;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.admin-order-customer-name { display: inline; }
/* Small gold-text "View all" link — one-click filter to this customer's full
   history. Restrained styling so it doesn't visually compete with the
   customer name itself; reads as a quiet utility action. */
.admin-order-customer-history-btn {
  background: transparent;
  border: none;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s;
}
.admin-order-customer-history-btn:hover {
  opacity: 1;
  background: rgba(201, 168, 76, 0.12);
}
/* Audit-trail badge on combined orders — links the survivor and consumed
   orders visually. Subtle violet so it doesn't compete with PAID / MULTI-DEST
   / DELIVERY-FEE-TBD which are the active operational flags. */
.admin-order-combined-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 1px 7px;
  font-size: 0.6rem;
  letter-spacing: 1px;
  background: rgba(168, 130, 220, 0.12);
  color: #c5a8e8;
  border: 1px solid rgba(168, 130, 220, 0.4);
  border-radius: 2px;
  vertical-align: middle;
  font-weight: 500;
}
.admin-order-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.admin-order-mode {
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold);
  border: 1px solid rgba(201, 168, 76, 0.3);
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 0.7rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.admin-order-mode.mode-gift {
  background: rgba(168, 130, 220, 0.12);
  color: #c5a8e8;
  border-color: rgba(168, 130, 220, 0.3);
}
.admin-order-mode.mode-delivery {
  background: rgba(109, 165, 212, 0.12);
  color: #6da5d4;
  border-color: rgba(109, 165, 212, 0.3);
}
.admin-order-items {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.admin-order-flag {
  background: rgba(255, 180, 84, 0.18);
  color: #ffb454;
  border: 1px solid rgba(255, 180, 84, 0.5);
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 0.7rem;
  letter-spacing: 1.2px;
  font-weight: 600;
}
.admin-order-flag.flag-out-of-area {
  background: rgba(109, 165, 212, 0.18);
  color: #6da5d4;
  border-color: rgba(109, 165, 212, 0.5);
}
.admin-order-flag.flag-multi-dest {
  background: rgba(201, 168, 76, 0.18);
  color: var(--gold-light);
  border-color: rgba(201, 168, 76, 0.5);
}
/* DELIVERY FEE TBD pill — soft amber so it reads as "needs follow-up"
   without alarming. Same shape as the other meta-row flags. */
.admin-order-flag.flag-fee-pending {
  background: rgba(212, 161, 88, 0.18);
  color: #d4a158;
  border-color: rgba(212, 161, 88, 0.5);
}
/* PAID pill — green so admin instantly sees "settled" across the orders
   list. Future "gentle reminder" feature uses the absence of this pill
   (plus age of the order) to surface unpaid orders. */
.admin-order-flag.flag-paid {
  background: rgba(74, 165, 87, 0.18);
  color: #6fc983;
  border-color: rgba(74, 165, 87, 0.5);
  font-weight: 600;
}
.admin-order-total .total-pending-tag {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #d4a158;
  font-weight: 500;
  margin-top: 2px;
}
.totals-row.totals-row-pending {
  color: #d4a158;
  font-style: italic;
}
.admin-order-detail-row .items-note {
  color: var(--gold-light);
  font-style: italic;
  line-height: 1.45;
}
/* ============================================================
   FEEDBACK ADMIN CARDS — Voices → Feedback subtab
   Inherits .reviews-admin-card visual base; adds feedback-specific
   structure (stars row, share/promoted tags, action buttons).
   ============================================================ */
.feedback-card { display: flex; flex-direction: column; gap: 0.7rem; }
.feedback-card-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.feedback-card-name {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.feedback-card-product {
  font-family: var(--serif);
  color: var(--gold-light);
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.feedback-card-phone {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
}
.feedback-card-phone:hover { color: var(--gold); text-decoration: underline; }
.feedback-card-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.feedback-card-stars {
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 1px;
  line-height: 1;
}
.feedback-card-date {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.feedback-card-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 0.7rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
}
.feedback-card-status.status-new {
  background: rgba(201, 168, 76, 0.18);
  color: var(--gold-light);
  border-color: rgba(201, 168, 76, 0.5);
}
.feedback-card-status.status-won_raffle {
  background: rgba(120, 200, 130, 0.15);
  color: #87cf90;
  border-color: rgba(120, 200, 130, 0.45);
}
.feedback-card-comment {
  margin: 0;
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--gold);
  background: rgba(201, 168, 76, 0.05);
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 0.95rem;
}
.feedback-card-no-comment {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}
.feedback-card-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.feedback-share-tag,
.feedback-promoted-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
}
.feedback-share-tag {
  background: rgba(120, 200, 130, 0.15);
  color: #87cf90;
  border: 1px solid rgba(120, 200, 130, 0.4);
}
.feedback-promoted-tag {
  background: rgba(109, 165, 212, 0.18);
  color: #6da5d4;
  border: 1px solid rgba(109, 165, 212, 0.45);
}
.feedback-promoted-tag.promoted-approved {
  background: rgba(120, 200, 130, 0.18);
  color: #87cf90;
  border-color: rgba(120, 200, 130, 0.5);
}
.feedback-promoted-tag.promoted-rejected {
  background: rgba(232, 92, 92, 0.15);
  color: #e85c5c;
  border-color: rgba(232, 92, 92, 0.45);
}
.feedback-promoted-tag.promoted-removed {
  background: rgba(170, 170, 170, 0.15);
  color: #aaa;
  border-color: rgba(170, 170, 170, 0.4);
}
.feedback-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.btn-review.btn-danger {
  border-color: rgba(232, 92, 92, 0.5);
  color: #e85c5c;
}
.btn-review.btn-danger:hover { background: rgba(232, 92, 92, 0.15); }

/* Modal "Delivery fee TBD" checkbox row — full-width inside the pricing
   grid; checkbox + label sit on one line. */
.mo-field-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0 0;
}
.mo-field-checkbox input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.mo-field-checkbox .mo-field-label {
  font-weight: 500;
  line-height: 1.4;
}
/* WhatsApp receipt PNG — italic note under totals when fee is pending. */
.wa-r-totals-note {
  margin-top: 6px;
  font-size: 0.78rem;
  font-style: italic;
  color: #b8895a;
  line-height: 1.4;
}

/* TEST badge — sits next to the order number when admin has flagged the
   order as a test (not a real customer order). The whole card also gets a
   muted treatment via .is-test-order so it visually de-emphasizes itself
   in the order list. */
.admin-order-test-badge {
  display: inline-block;
  margin-left: 0.5rem;
  background: rgba(170, 170, 170, 0.18);
  color: #aaaaaa;
  border: 1px solid rgba(170, 170, 170, 0.45);
  padding: 1px 7px;
  border-radius: 2px;
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  font-weight: 600;
  vertical-align: middle;
}
.admin-order-card.is-test-order {
  opacity: 0.55;
}
.admin-order-card.is-test-order:hover {
  opacity: 0.85;
}

/* ===== Prep Sheet (collapsible section above the orders list) =====
   Aggregates items across confirmed orders so admin knows total quantities
   to prepare on Friday. Each product line has a checkbox; checked state
   persists in localStorage. */
.prep-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

/* ========== PAYMENTS TO REVIEW (auto-detected payment inbox) ========== */
.payment-inbox-section {
  background: rgba(126, 200, 160, 0.06);
  border: 1px solid rgba(126, 200, 160, 0.35);
  border-radius: 6px;
  padding: 1rem 1.2rem 1.2rem;
  margin-top: 1.75rem;
  margin-bottom: 1.5rem;
}
.payment-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.payment-inbox-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ivory);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.payment-inbox-badge {
  background: #7ec8a0;
  color: #0a0a0a;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
}
.payment-inbox-hint {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0.4rem 0 1rem;
}
.payment-inbox-list { display: flex; flex-direction: column; gap: 0.8rem; }
.payment-inbox-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.8rem 1rem;
}
.pi-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.pi-source {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  background: #555;
  color: #fff;
}
.pi-source-zelle { background: #6a4c93; }
.pi-source-card, .pi-source-merchpay { background: #1a5b8e; }
.pi-amount {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.pi-name { color: var(--ivory); font-size: 0.95rem; }
.pi-date { color: var(--text-muted); font-size: 0.8rem; margin-left: auto; }
.pi-candidates {
  border-top: 1px dashed var(--border);
  padding-top: 0.6rem;
  margin-bottom: 0.6rem;
}
.pi-candidates-label {
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.pi-candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pi-candidate:last-child { border-bottom: none; }
.pi-candidate-info {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-width: 0;
}
.pi-candidate-num { font-weight: 700; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.pi-candidate-name { color: var(--ivory); font-size: 0.9rem; }
.pi-candidate-meta { color: var(--text-muted); font-size: 0.8rem; }
.pi-no-candidates {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
  padding: 0.4rem 0 0.6rem;
}
.pi-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px dashed var(--border);
  padding-top: 0.6rem;
}
/* Customer-search panel inside a payment-inbox card (the "Find by customer"
   assign flow). */
.pi-search-panel {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border);
}
.pi-search-input { width: 100%; margin-bottom: 0.6rem; }
.pi-search-results { display: flex; flex-direction: column; gap: 0.35rem; max-height: 280px; overflow-y: auto; }
.pi-search-hint { color: var(--text-muted); font-size: 0.85rem; font-style: italic; padding: 0.3rem 0; }
.pi-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.45rem 0.55rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.pi-result-info {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
  min-width: 0;
}
.pi-result-num { font-weight: 700; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.pi-result-name { color: var(--ivory); font-size: 0.9rem; }
.pi-result-meta { color: var(--text-muted); font-size: 0.8rem; }
.pi-result-paid {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #7ec8a0;
  border: 1px solid rgba(126, 200, 160, 0.5);
  border-radius: 3px;
  padding: 1px 5px;
}
.prep-section-summary {
  cursor: pointer;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  list-style: none;
  user-select: none;
}
.prep-section-summary::-webkit-details-marker { display: none; }
.prep-section-title::before {
  content: '▸ ';
  color: var(--gold);
  margin-right: 0.3rem;
}
details[open] .prep-section-title::before { content: '▾ '; }
.prep-section-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.5px;
}
.prep-section-body {
  padding: 0.5rem 1.2rem 1rem;
  border-top: 1px solid var(--border);
}
.prep-section-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0.6rem 0 1rem;
  line-height: 1.5;
}
.prep-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.prep-item {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  transition: opacity 0.15s;
}
.prep-item:last-child { border-bottom: none; }
.prep-item label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
}
.prep-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}
.prep-qty {
  color: var(--gold-light);
  font-weight: 600;
  font-family: var(--serif);
  font-size: 1.25rem;
  min-width: 44px;
  text-align: right;
}
.prep-name {
  color: var(--text-primary);
  font-size: 0.95rem;
}
.prep-item.prepped .prep-name {
  text-decoration: line-through;
  opacity: 0.45;
}
.prep-item.prepped .prep-qty {
  opacity: 0.45;
}
.prep-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 0.8rem 0;
  text-align: center;
}

/* Divider between the standard aggregated pool and the special-instruction
   rows. Gold-tinted so it reads as a real section header, all caps for
   weight, with a thin gold rule above to visually break the list. */
.prep-special-divider {
  list-style: none;
  margin-top: 1rem;
  padding: 0.7rem 0 0.4rem;
  border-top: 1px solid rgba(201, 168, 76, 0.4);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Special-instruction line. Subtle gold-left accent so it visually pops
   against the standard rows above it. The note itself renders italic gold
   below the product line to make it impossible to miss while prepping. */
.prep-item-special {
  border-left: 3px solid var(--gold);
  padding-left: 0.7rem;
  background: rgba(201, 168, 76, 0.04);
  margin: 0 -0.5rem;
  padding-right: 0.5rem;
}
.prep-item-special label { align-items: flex-start; }
.prep-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}
.prep-name-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.prep-order-ref {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.prep-note {
  font-size: 0.92rem;
  color: var(--gold-light);
  font-style: italic;
  line-height: 1.45;
  word-break: break-word;
}
.prep-item-special.prepped .prep-note {
  opacity: 0.45;
}

.prep-section-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}

.admin-order-status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 2px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.admin-order-status-pill.status-needs_review { background: rgba(255, 180, 84, 0.15); color: #ffb454; border: 1px solid rgba(255, 180, 84, 0.4); }
.admin-order-status-pill.status-placed { background: rgba(232, 201, 122, 0.15); color: #e8c97a; border: 1px solid rgba(232, 201, 122, 0.4); }
.admin-order-status-pill.status-confirmed { background: rgba(126, 200, 160, 0.15); color: #7ec8a0; border: 1px solid rgba(126, 200, 160, 0.4); }
.admin-order-status-pill.status-ready_for_pickup,
.admin-order-status-pill.status-ready_to_dispatch { background: rgba(201, 168, 76, 0.18); color: var(--gold-light); border: 1px solid rgba(201, 168, 76, 0.5); }
.admin-order-status-pill.status-dispatched,
.admin-order-status-pill.status-en_route { background: rgba(109, 165, 212, 0.15); color: #6da5d4; border: 1px solid rgba(109, 165, 212, 0.4); }
.admin-order-status-pill.status-picked_up,
.admin-order-status-pill.status-delivered { background: rgba(126, 200, 160, 0.18); color: #7ec8a0; border: 1px solid rgba(126, 200, 160, 0.5); }
.admin-order-status-pill.status-rejected,
.admin-order-status-pill.status-cancelled,
.admin-order-status-pill.status-refunded { background: rgba(232, 92, 92, 0.15); color: #e85c5c; border: 1px solid rgba(232, 92, 92, 0.4); }

.admin-order-total {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gold-light);
}
.admin-order-placed { font-size: 0.72rem; color: var(--text-muted); }

.admin-order-expand-icon {
  color: var(--text-muted);
  font-size: 1rem;
  text-align: center;
}

/* Expanded body */
.admin-order-body {
  padding: 0 1.4rem 1.4rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.admin-order-detail-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  padding-top: 0.7rem;
  align-items: baseline;
}
.detail-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--text-muted);
}
.detail-value {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.55;
}
.detail-value a { color: var(--gold); border-bottom: 1px solid transparent; }
.detail-value a:hover { border-bottom-color: var(--gold); }
.detail-value.gift-note {
  font-style: italic;
  color: var(--ivory);
  background: rgba(0, 0, 0, 0.25);
  padding: 0.6rem 0.8rem;
  border-radius: 3px;
  border-left: 2px solid var(--gold-dark);
}

.admin-order-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.admin-order-items-list .qty {
  color: var(--gold);
  font-weight: 500;
  margin-right: 0.4rem;
}
.admin-order-items-list .line-price {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

.admin-order-totals-block {
  margin-top: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
}
.totals-row-final {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--gold-light);
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
  margin-top: 0.2rem;
}

/* ============================================================
   TEMPLATE BUILDER (BETA, 2026-06-09) — parallel flyer flow.
   2-col layout on desktop (controls left, canvas preview right),
   stacks on mobile. Lives under Marketing → Template Builder subtab.
   ============================================================ */
.subtab-badge {
  display: inline-block;
  background: rgba(201, 168, 76, 0.18);
  color: #c9a84c;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.15em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 0.5em;
  vertical-align: middle;
}
.cm-beta-pill {
  display: inline-block;
  background: rgba(201, 168, 76, 0.18);
  color: #c9a84c;
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding: 3px 8px;
  border-radius: 3px;
  margin-left: 0.6em;
  vertical-align: middle;
  font-family: 'Inter', sans-serif;
}
.tb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 2rem;
  margin-top: 1.4rem;
}
@media (max-width: 960px) {
  .tb-layout { grid-template-columns: 1fr; }
}
.tb-controls {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.tb-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.1rem 1.2rem;
}
.tb-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: #c9a84c;
  margin: 0 0 0.7rem;
  letter-spacing: 0.04em;
}
.tb-hint {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0 0 0.7rem;
}
.tb-hint em {
  color: var(--text-primary);
  font-style: italic;
  background: rgba(201, 168, 76, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
}
.tb-hero-preview {
  margin-top: 0.7rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.tb-hero-preview img {
  display: block;
  max-width: 100%;
  max-height: 200px;
  margin: 0 auto;
  border-radius: 3px;
}
.tb-checkbox {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0;
  color: var(--text-primary);
  font-size: 0.92rem;
  cursor: pointer;
}
.tb-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #c9a84c;
}
.tb-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.tb-status {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}
.tb-status-ok {
  color: #4ade80;
  font-style: normal;
}
.tb-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.tb-preview-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.tb-preview-canvas {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  background: #0a0a0a;
  border: 1px solid var(--border);
  border-radius: 4px;
  /* Native 1080×1920 — scales down via max-width above */
  touch-action: none;  /* prevent page scroll while dragging the band */
}
/* Drag-to-reposition hint shown only when a flyer has been built and the
   band can actually be dragged. */
.tb-drag-hint {
  max-width: 460px;
  margin: 10px auto 0;
  font-size: 0.78rem;
  color: var(--muted, #888);
  line-height: 1.4;
  text-align: center;
}
/* Prompt + caption output boxes — wrap long lines, scroll vertically if
   tall, stay inside the parent section. Without this <pre> overflows the
   page width since it preserves whitespace and never wraps by default. */
.tb-prompt-output {
  margin: 0.8rem 0 0;
  padding: 0.9rem 1rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Settings — collapsible accordion groups so the panel doesn't read as
   a 9-card junk drawer. Native <details> + <summary> for zero-JS toggling.
   First accordion ("Delivery & Payment") defaults to open since it's the
   most-touched. Others stay collapsed until admin needs them. */
.settings-accordion {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 1rem;
}
.settings-accordion-summary {
  cursor: pointer;
  padding: 0.95rem 1.4rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 500;
  color: #c9a84c;
  list-style: none;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.settings-accordion-summary::-webkit-details-marker { display: none; }
.settings-accordion-summary::after {
  content: '▸';
  font-size: 0.95rem;
  color: rgba(201, 168, 76, 0.6);
  transition: transform 0.15s;
  margin-left: 0.6rem;
}
.settings-accordion[open] > .settings-accordion-summary::after {
  transform: rotate(90deg);
}
.settings-accordion[open] > .settings-accordion-summary {
  border-bottom: 1px solid var(--border);
}
.settings-accordion-body {
  padding: 1rem 1.2rem 0.4rem;
}
.settings-accordion-body > .settings-card {
  margin-bottom: 1rem;
  border: 0;
  background: transparent;
  padding: 0.4rem 0 1rem;
}
.settings-accordion-body > .settings-card:not(:last-child) {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}

.admin-order-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.admin-order-actions .action-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
/* Primary — customer comms (Send Receipt / Notify / Payment Reminder /
   Cancel Uber). The first thing admin reaches for in the order workflow,
   so visually most prominent. */
.admin-order-actions .action-row-primary .btn-review {
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
}
/* Secondary — status transition (Ready for Pickup / Dispatch / Delivered /
   Cancel Order). The status flip itself — secondary because comms come first.
   Uses the existing btn-review baseline. */
.admin-order-actions .action-row-secondary { /* baseline */ }
/* Tertiary — admin / audit actions (Mark Paid / Revise / Combine / Test / Delete).
   Smaller, dimmer, sits below a dashed separator so it visually steps back. */
.admin-order-actions .action-row-tertiary {
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 0.55rem;
  margin-top: 0.2rem;
}
.admin-order-actions .action-row-tertiary .btn-review {
  padding: 0.38rem 0.75rem;
  font-size: 0.72rem;
  opacity: 0.78;
}
.admin-order-actions .action-row-tertiary .btn-review:hover {
  opacity: 1;
}
.admin-order-actions .no-actions {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-style: italic;
}
.admin-order-receipt-status {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}
/* Notify button state — when admin has already sent a notification, the
   button gets a green-tinted "✓ Sent" look so admin can see at a glance
   what's already been done for this customer. Button still clickable for
   resend; just visually demoted from "primary call to action." */
.btn-review.notify-sent {
  background: rgba(120, 200, 130, 0.10);
  color: #87cf90;
  border-color: rgba(120, 200, 130, 0.45);
}
.btn-review.notify-sent:hover {
  background: rgba(120, 200, 130, 0.18);
}
/* Notification audit trail — small grey-italic lines under the action row
   listing every notify-step that's been completed with its timestamp.
   Lets admin verify what's been sent without expanding any modal. */
.admin-order-notify-trail {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.55;
}
.admin-order-notify-trail > div { padding: 1px 0; }

/* Customer-search row above the orders filter pills — text input + Clear
   button. Live filter; Esc clears. */
.orders-search-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 0.5rem 0 1rem;
}
.orders-search-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 480px;
}
.orders-search-input::-webkit-search-cancel-button { cursor: pointer; }

/* ============================================================
   WEEKLY TOTALS — collapsible historical summary below Prep Sheet.
   Each card represents one Friday's delivery batch with revenue,
   order count, and per-product breakdown.
   ============================================================ */
.weekly-totals-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.weekly-totals-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}
.weekly-totals-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.weekly-totals-friday {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.4px;
}
.weekly-totals-stats {
  color: var(--text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}
.weekly-totals-products {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.3rem 1rem;
}
.weekly-totals-products li {
  font-size: 0.88rem;
  color: var(--text-primary);
}
.weekly-product-qty {
  display: inline-block;
  min-width: 1.8em;
  color: var(--gold-light);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Order-number references inside each weekly card — shows which specific
   orders are in the bucket so admin can spot any unexpected entries
   (e.g. forgotten manual orders, wrong deliveryDate). */
.weekly-totals-refs {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.weekly-order-ref em {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.7rem;
  color: var(--gold-light);
  margin-left: 4px;
}

@media (max-width: 768px) {
  .admin-order-head {
    grid-template-columns: 1fr 24px;
    gap: 0.6rem;
  }
  .admin-order-head-right {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
  }
  .admin-order-detail-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* ========== INQUIRY CARDS (admin) ========== */
.admin-inquiry-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 4px;
  padding: 1.3rem 1.5rem;
  transition: border-color 0.3s;
}
.admin-inquiry-card.status-new { border-left-color: #e8c97a; }
.admin-inquiry-card.status-contacted { border-left-color: #7ec8a0; }
.admin-inquiry-card.status-won { border-left-color: var(--gold); }
.admin-inquiry-card.status-lost { border-left-color: #e85c5c; }
.admin-inquiry-card.status-archived { border-left-color: #555; opacity: 0.65; }

.admin-inquiry-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; margin-bottom: 0.8rem; flex-wrap: wrap;
}
.admin-inquiry-head-left { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 0.3rem; }
.admin-inquiry-name {
  font-family: var(--serif);
  color: var(--gold-light);
  font-size: 1.25rem;
  letter-spacing: 0.5px;
}
.admin-inquiry-type {
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold);
  border: 1px solid rgba(201, 168, 76, 0.3);
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  align-self: flex-start;
}
.admin-inquiry-guests, .admin-inquiry-eventdate {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.admin-inquiry-status-wrap { text-align: right; }
.admin-inquiry-status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1.5px;
}
.admin-inquiry-status-pill.status-new { background: rgba(232, 201, 122, 0.15); color: #e8c97a; border: 1px solid rgba(232, 201, 122, 0.4); }
.admin-inquiry-status-pill.status-contacted { background: rgba(126, 200, 160, 0.15); color: #7ec8a0; border: 1px solid rgba(126, 200, 160, 0.4); }
.admin-inquiry-status-pill.status-won { background: rgba(201, 168, 76, 0.18); color: var(--gold-light); border: 1px solid rgba(201, 168, 76, 0.5); }
.admin-inquiry-status-pill.status-lost { background: rgba(232, 92, 92, 0.15); color: #e85c5c; border: 1px solid rgba(232, 92, 92, 0.4); }
.admin-inquiry-status-pill.status-archived { background: rgba(120, 120, 120, 0.15); color: #aaa; border: 1px solid rgba(120, 120, 120, 0.4); }
.admin-inquiry-submitted { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.3rem; }

.admin-inquiry-message {
  color: var(--text-primary);
  line-height: 1.7;
  font-size: 0.95rem;
  margin: 0.8rem 0;
  padding: 0.8rem 1rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  border-left: 2px solid var(--border);
  white-space: pre-wrap;
}
.admin-inquiry-contact {
  display: flex; gap: 0.8rem; flex-wrap: wrap;
  margin: 0.6rem 0 1rem;
}
.admin-inquiry-link {
  color: var(--gold);
  font-size: 0.88rem;
  padding: 5px 10px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 3px;
  transition: all 0.2s;
}
.admin-inquiry-link:hover {
  background: rgba(201, 168, 76, 0.12);
  border-color: var(--gold);
}

/* ===== INQUIRY CARDS — MODERNIZED to match Orders tab visual language
   (2026-05-11). The .admin-inquiry-card class now layers on top of
   .admin-order-card so cards share the same border-left status accent,
   padding, hover behavior, and head structure. These rules only add the
   inquiry-specific tweaks (looser detail-block padding for the message
   block; cleaner contact-link layout). */
.admin-inquiry-card .admin-order-customer {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 0.92rem;
  letter-spacing: 0.4px;
}
/* Inquiry cards don't expand on click (no detail-block to reveal), so
   drop the expand-caret column from the head grid + the pointer cursor.
   Detail block is always visible below the head. */
.admin-inquiry-card .admin-order-head {
  grid-template-columns: 1fr auto;
  cursor: default;
}
.admin-inquiry-card .admin-order-head:hover { background: transparent; }
.admin-inquiry-detail-block {
  padding: 0 1.5rem 1.3rem;
}
.admin-inquiry-message-modern {
  white-space: pre-wrap;
  line-height: 1.6;
  padding: 0.7rem 0.9rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  border-left: 2px solid rgba(201, 168, 76, 0.3);
}
.admin-inquiry-contact-modern {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.admin-inquiry-contact-link {
  color: var(--gold);
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.2s;
}
.admin-inquiry-contact-link:hover {
  background: rgba(201, 168, 76, 0.12);
  border-color: var(--gold);
}
.admin-inquiry-no-contact {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}


/* ============================================================
   MANUAL ORDER MODAL — admin enters orders on behalf of customers
   ============================================================ */
.admin-order-manual-badge {
  display: inline-block;
  background: rgba(201, 168, 76, 0.18);
  color: #c9a84c;
  border: 1px solid rgba(201, 168, 76, 0.5);
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  padding: 1px 6px;
  border-radius: 2px;
  margin-left: 0.4rem;
  vertical-align: middle;
  font-weight: 600;
}

.manual-order-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.manual-order-modal.open { display: flex; }
.manual-order-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.manual-order-inner {
  position: relative;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 1.6rem 1.6rem 1.4rem;
  color: #e8e8e8;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.manual-order-close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
}
.manual-order-close:hover { color: #fff; }
.manual-order-title {
  margin: 0 0 0.4rem;
  font-size: 1.4rem;
  color: #c9a84c;
}
.manual-order-sub {
  margin: 0 0 1.2rem;
  font-size: 0.85rem;
  color: #aaa;
  line-height: 1.5;
}

.manual-order-form .mo-fieldset {
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 0.8rem 1rem 1rem;
  margin-bottom: 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.manual-order-form .mo-fieldset legend {
  padding: 0 0.4rem;
  color: #c9a84c;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ===== Additional destinations (manual-order modal) ===== */
.mo-destinations { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 0.8rem; }
.mo-destination-card {
  border: 1px solid #2a2a2a;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 0.7rem 0.8rem 0.6rem;
  background: rgba(201, 168, 76, 0.04);
}
.mo-destination-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.mo-destination-label {
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.mo-destination-remove {
  background: transparent;
  border: none;
  color: #e85c5c;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.mo-destination-remove:hover { text-decoration: underline; }

/* ===== Custom-item row in the manual-order modal =====
   When admin picks "+ Custom item / surcharge" from the picker, the row
   swaps the dropdown for a stacked layout: small picker above + free-text
   name input below. Admin can switch back to a real product anytime via
   the picker. */
.mo-item-custom-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.mo-item-product-custom {
  font-size: 0.78rem !important;
  padding: 0.35rem 0.5rem !important;
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  background: rgba(201, 168, 76, 0.06) !important;
}
.mo-item-custom-name {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  color: var(--text-primary);
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border-radius: 3px;
  outline: none;
}
.mo-item-custom-name:focus { border-color: var(--gold); border-left-color: var(--gold); }

/* ===== Extra destinations on the admin order card ===== */
.admin-order-extra-dests .extra-dest-card {
  border-left: 2px solid var(--gold);
  padding: 0.4rem 0.7rem;
  background: rgba(201, 168, 76, 0.05);
  border-radius: 0 3px 3px 0;
  margin-bottom: 0.5rem;
}
.admin-order-extra-dests .extra-dest-card:last-child { margin-bottom: 0; }
.extra-dest-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.extra-dest-recip {
  color: var(--text-primary);
  font-size: 0.88rem;
  margin-bottom: 0.15rem;
}
.extra-dest-addr {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}
.extra-dest-items {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--gold-light);
  font-style: italic;
  line-height: 1.45;
}
.manual-order-form .mo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.8rem;
}
.manual-order-form .mo-field { display: flex; flex-direction: column; gap: 0.25rem; }
.manual-order-form .mo-field-full { grid-column: 1 / -1; }
.manual-order-form .mo-field-label {
  font-size: 0.72rem;
  letter-spacing: 0.4px;
  color: #c9a84c;
  text-transform: uppercase;
}
.manual-order-form .mo-field-hint {
  color: #888;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.7rem;
}
.manual-order-form .mo-req { color: #e85c5c; }
.manual-order-form input[type="text"],
.manual-order-form input[type="tel"],
.manual-order-form input[type="email"],
.manual-order-form input[type="number"],
.manual-order-form textarea,
.manual-order-form select {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  color: #e8e8e8;
  padding: 0.5rem 0.65rem;
  font-size: 0.92rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.manual-order-form input:focus,
.manual-order-form textarea:focus,
.manual-order-form select:focus {
  outline: none;
  border-color: #c9a84c;
}
.manual-order-form textarea { resize: vertical; }

.mo-mode-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
.mo-mode-tab {
  flex: 1;
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #aaa;
  padding: 0.5rem 0.7rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}
.mo-mode-tab.active {
  border-color: #c9a84c;
  color: #c9a84c;
  background: rgba(201, 168, 76, 0.08);
}

.mo-items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.mo-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px auto 80px auto auto;
  align-items: center;
  gap: 0.4rem;
}
.mo-item-product { min-width: 0; }
.mo-item-qty, .mo-item-price { text-align: right; }
.mo-item-at { color: #777; }
.mo-item-line-total {
  color: #c9a84c;
  font-weight: 600;
  font-size: 0.92rem;
  text-align: right;
  min-width: 60px;
}
.mo-item-remove {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #aaa;
  width: 28px; height: 28px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.mo-item-remove:hover { border-color: #e85c5c; color: #e85c5c; }

/* When a row has options (e.g. sourdough's topping/inclusion), the option
   dropdowns appear as a second row below the main item row. */
.mo-item-row-with-options {
  grid-template-rows: auto auto;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid #2a2a2a;
  border-radius: 3px;
}
.mo-item-options {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed #2a2a2a;
}
.mo-item-option {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 160px;
  min-width: 140px;
}
.mo-item-option-label {
  font-size: 0.68rem;
  letter-spacing: 0.6px;
  color: #c9a84c;
  text-transform: uppercase;
}
.mo-item-option select {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  color: #e8e8e8;
  padding: 0.4rem 0.55rem;
  border-radius: 3px;
  font-size: 0.88rem;
  font-family: inherit;
}

/* Per-line options summary on the order card detail (e.g. "Plain · Rosemary Garlic"). */
.admin-order-item-options {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  padding-left: 1.4rem;  /* align under the productName, after the qty */
  font-style: italic;
}

/* Audit badge under an order card showing when it was last revised. Subtle —
   not a flag like MANUAL, just a timestamp note. */
.admin-order-revised-status {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed #2a2a2a;
}

/* ============================================================
   WHATSAPP RECEIPT CARD — rendered to PNG via html2canvas and
   shared with the customer over WhatsApp. Lives off-screen
   inside #wa-receipt-stage; only visible to html2canvas.
   1080px wide so the resulting image looks good in WhatsApp.
   All styles here use absolute pixel sizes / explicit colors
   (no CSS variables) so the PNG is self-contained and brand
   colors are predictable across browsers + devices.
   ============================================================ */
.wa-receipt-card {
  width: 1080px;
  background: #ffffff;
  color: #1a1a1a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 60px 70px 50px;
  box-sizing: border-box;
}
.wa-r-header {
  text-align: center;
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 30px;
  margin-bottom: 36px;
}
.wa-r-logo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: block;
  object-fit: cover;
}
.wa-r-title {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.wa-r-orderno {
  color: #666;
  font-size: 16px;
  letter-spacing: 0.3px;
}
.wa-r-greeting {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}
.wa-r-intro {
  font-size: 16px;
  line-height: 1.55;
  color: #444;
  margin-bottom: 28px;
}
.wa-r-items { margin-bottom: 8px; }
.wa-r-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
  font-size: 17px;
}
.wa-r-item-name { padding-right: 16px; line-height: 1.4; }
.wa-r-item-options {
  font-size: 14px;
  color: #888;
  font-style: italic;
  margin-top: 4px;
}
.wa-r-item-price {
  white-space: nowrap;
  font-weight: 500;
  color: #1a1a1a;
}
.wa-r-totals { margin-top: 14px; margin-bottom: 28px; }
.wa-r-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  padding: 6px 0;
  color: #555;
}
.wa-r-totals-final {
  border-top: 2px solid #1a1a1a;
  padding-top: 10px;
  margin-top: 6px;
  font-weight: 600;
  font-size: 19px;
  color: #1a1a1a;
}
.wa-r-mode {
  font-size: 16px;
  color: #444;
  padding: 16px 18px;
  background: #f9f6ed;
  border-left: 3px solid #c9a84c;
  border-radius: 3px;
  margin-bottom: 28px;
  line-height: 1.45;
}
/* Multi-destination block — same gold-accented panel as .wa-r-mode but
   internally structured: title at top, then one card per destination
   showing head/recipient/address/items-note. */
.wa-r-dests-title {
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.wa-r-dest {
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #ebe4cc;
  border-radius: 3px;
  margin-bottom: 8px;
}
.wa-r-dest:last-child { margin-bottom: 0; }
.wa-r-dest-head {
  font-size: 13px;
  font-weight: 600;
  color: #c9a84c;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.wa-r-dest-recip {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 2px;
}
.wa-r-dest-addr {
  font-size: 14px;
  color: #444;
  line-height: 1.4;
}
.wa-r-dest-items {
  font-size: 13px;
  font-style: italic;
  color: #b8895a;
  margin-top: 4px;
}
.wa-r-payment {
  border-top: 1px solid #eee;
  padding-top: 24px;
  text-align: center;
  margin-bottom: 28px;
}
.wa-r-payment-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #1a1a1a;
}
.wa-r-payment-subtitle {
  font-size: 12px;
  color: #888;
  margin-bottom: 12px;
}
.wa-r-payment-email {
  font-size: 16px;
  font-weight: 500;
  color: #c9a84c;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}
.wa-r-payment-row {
  font-size: 14px;
  color: #444;
  margin: 8px 0 12px;
}
.wa-r-payment-row strong {
  color: #c9a84c;
  font-weight: 600;
}
.wa-r-payment-note {
  font-size: 11px;
  color: #999;
  font-style: italic;
}
.wa-r-payment-cards {
  font-size: 10.5px;
  color: #888;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-top: 6px;
}
.wa-r-payment-cardlogos {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wa-r-payment-cardlogos img {
  height: 18px;
  width: auto;
  object-fit: contain;
}
.wa-r-payment-qrgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}
.wa-r-payment-qrcell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 6px;
}
.wa-r-payment-qrcell > img:first-child {
  width: 150px;
  height: 150px;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
}
.wa-r-payment-qrlabel {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.wa-r-payment-qrsub {
  font-size: 12px;
  color: #c9a84c;
  letter-spacing: 0.3px;
}
.wa-r-payment-qrsub strong {
  font-weight: 600;
  font-size: 13px;
}
/* Zelle® tag logo — sits between the QR and the handle text in the
   Zelle cell. People aren't always familiar with what a "Zelle tag" is;
   the brand logo + the help line below make the flow obvious. */
.wa-r-payment-zelletag {
  /* IMPORTANT: this overrides the `.wa-r-payment-qrcell img:first-child`
     (which only matches direct first-child) — but the broader
     `.wa-r-payment-qrcell img` doesn't have a width rule, so we set
     this explicitly to keep the logo nicely sized. */
  width: 110px !important;
  height: auto !important;
  margin: 8px 0 4px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  object-fit: contain;
}
/* Per-cell help text below the QR + handle/logos — small italic muted
   instructions so customers who aren't Zelle-fluent know how to send. */
.wa-r-payment-help {
  font-size: 10.5px;
  color: #777;
  line-height: 1.4;
  margin-top: 8px;
  padding: 0 4px;
}
.wa-r-payment-help strong {
  font-weight: 600;
  color: #555;
}
.wa-r-payment-qr-placeholder {
  width: 150px;
  height: 150px;
  background: #f0f0f0;
  border: 1px dashed #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #999;
  margin-bottom: 10px;
}
.wa-r-payment-qr {
  width: 200px;
  height: 200px;
  border: 1px solid #eee;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  background: #fff;
}
.wa-r-footer {
  border-top: 1px solid #eee;
  padding-top: 20px;
  text-align: center;
  font-size: 13px;
  color: #888;
  line-height: 1.6;
}

.mo-totals {
  margin-top: 0.8rem;
  border-top: 1px solid #2a2a2a;
  padding-top: 0.6rem;
}
.mo-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 0.2rem 0;
  color: #ccc;
}
.mo-totals-final {
  font-weight: 600;
  color: #c9a84c;
  border-top: 1px solid #2a2a2a;
  margin-top: 0.3rem;
  padding-top: 0.4rem;
  font-size: 1rem;
}

.mo-error {
  color: #e85c5c;
  font-size: 0.85rem;
  min-height: 1.2rem;
  margin: 0.4rem 0 0.6rem;
}
.mo-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

@media (max-width: 600px) {
  .manual-order-inner { padding: 1.2rem 1rem; }
  .manual-order-form .mo-grid { grid-template-columns: 1fr; }
  .mo-item-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 0.5rem;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
  }
  .mo-item-at { display: none; }
  .mo-item-line-total { text-align: left; }
  .mo-item-remove { justify-self: end; }
}

/* ==========================================================================
   CONTENT MACHINE — Marketing > Content Machine subtab
   ========================================================================== */
.cm-section {
  margin-bottom: 1.6rem;
}
.cm-section-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #c9a84c;
  margin: 0 0 0.6rem;
  font-weight: 600;
  display: block;
}
.cm-section-hint {
  font-size: 0.78rem;
  color: #888;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.cm-field-full { grid-column: 1 / -1; }
.cm-field-hint {
  font-size: 0.72rem;
  color: #777;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Content Machine — Standard vs Reshare mode toggle. Sits at the top of the
   panel above the source-image picker. Mirrors the cm-source-tab pattern but
   slightly bigger since it's a top-level mode switch, not a sub-filter. */
.cm-mode-row {
  margin-bottom: 1.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid #2a2a2a;
}
.cm-mode-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cm-mode-tab {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #aaa;
  padding: 0.55rem 1.05rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.92rem;
  font-family: inherit;
  font-weight: 500;
  transition: all 0.15s;
}
.cm-mode-tab:hover { border-color: #444; color: #ccc; }
.cm-mode-tab.active {
  background: rgba(201, 168, 76, 0.14);
  border-color: #c9a84c;
  color: #c9a84c;
}
.cm-mode-hint {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  color: #999;
  line-height: 1.45;
}

/* Reshare-mode controls — style picker + menu QR thumbnail in a 2-col grid. */
.cm-reshare-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.2rem;
  align-items: start;
}
.cm-reshare-qr-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.cm-reshare-qr-thumb {
  width: 130px;
  height: 130px;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
  background: #fff;
  padding: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.cm-reshare-qr-thumb:hover { border-color: #c9a84c; }
.cm-reshare-qr-caption {
  font-size: 0.72rem;
  color: #888;
  line-height: 1.3;
}
@media (max-width: 720px) {
  .cm-reshare-grid {
    grid-template-columns: 1fr;
  }
  .cm-reshare-qr-wrap { align-self: center; }
}

.cm-source-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid #2a2a2a;
  padding-bottom: 0.5rem;
}
.cm-source-tab {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #aaa;
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all 0.15s;
}
.cm-source-tab:hover { border-color: #444; color: #ccc; }
.cm-source-tab.active {
  background: rgba(201, 168, 76, 0.12);
  border-color: #c9a84c;
  color: #c9a84c;
}
.cm-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
  max-height: 560px;
  overflow-y: auto;
  padding: 0.4rem;
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  /* Custom scrollbar so admin sees there's more to scroll through. The
     default dark-on-dark scrollbar is nearly invisible on this surface. */
  scrollbar-width: thin;
  scrollbar-color: #c9a84c #1a1a1a;
}
.cm-source-grid::-webkit-scrollbar {
  width: 10px;
}
.cm-source-grid::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-radius: 4px;
}
.cm-source-grid::-webkit-scrollbar-thumb {
  background: #c9a84c;
  border-radius: 4px;
  border: 2px solid #1a1a1a;
}
.cm-source-grid::-webkit-scrollbar-thumb:hover {
  background: #e8c97a;
}
.cm-source-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #777;
  font-size: 0.85rem;
  padding: 1.5rem;
  font-style: italic;
}
.cm-source-tile {
  background: #1a1a1a;
  border: 2px solid #2a2a2a;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: all 0.12s;
  display: flex;
  flex-direction: column;
}
.cm-source-tile:hover { border-color: #555; transform: translateY(-1px); }
.cm-source-tile.is-selected {
  border-color: #c9a84c;
  box-shadow: 0 0 0 1px #c9a84c inset;
}
.cm-source-tile.is-selected::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 4px;
  background: #c9a84c;
  color: #000;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  z-index: 2;
}
.cm-source-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #000;
}
.cm-tile-label {
  font-size: 0.7rem;
  color: #bbb;
  padding: 0.3rem 0.4rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #0a0a0a;
}
.cm-upload-zone {
  grid-column: 1 / -1;
  border: 2px dashed #2a2a2a;
  border-radius: 6px;
  padding: 2.2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  background: #0a0a0a;
}
.cm-upload-zone:hover {
  border-color: #c9a84c;
  background: rgba(201, 168, 76, 0.04);
}
.cm-upload-icon {
  font-size: 2.4rem;
  color: #c9a84c;
  font-weight: 200;
  line-height: 1;
  margin-bottom: 0.6rem;
}
.cm-upload-text {
  color: #ccc;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.cm-upload-hint {
  color: #777;
  font-size: 0.78rem;
  line-height: 1.4;
}

.cm-selected-tray {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
  min-height: 60px;
}
.cm-selected-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #777;
  font-size: 0.85rem;
  padding: 1rem;
  font-style: italic;
  background: #0a0a0a;
  border: 1px dashed #2a2a2a;
  border-radius: 4px;
}
.cm-selected-card {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
}
.cm-selected-card img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 3px;
  background: #000;
}
.cm-selected-meta { min-width: 0; }
.cm-selected-num {
  font-size: 0.7rem;
  color: #c9a84c;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.cm-selected-label {
  font-size: 0.82rem;
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}
.cm-selected-macro {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: #999;
  cursor: pointer;
  user-select: none;
}
.cm-selected-macro input { accent-color: #c9a84c; cursor: pointer; }
.cm-selected-lid {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cm-selected-lid-label {
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cm-selected-lid select {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  color: #ddd;
  padding: 0.3rem 0.4rem;
  border-radius: 3px;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
}
.cm-selected-lid select:focus { outline: none; border-color: #c9a84c; }
/* Surprise Me button — same solid-gold treatment as the rest of the
   .btn-gold buttons (legibility wins over decoration). The 🎲 emoji +
   label make it stand out without needing a different background. */
.cm-selected-actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cm-btn-icon {
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  color: #ccc;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.12s;
}
.cm-btn-icon:hover { border-color: #c9a84c; color: #c9a84c; }
.cm-btn-icon.cm-btn-remove:hover { border-color: #e85c5c; color: #e85c5c; }

.cm-compose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.cm-compose-field { display: flex; flex-direction: column; gap: 0.3rem; }
.cm-compose-field label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
  font-weight: 600;
}
.cm-compose-field select,
.cm-compose-field input[type="text"],
.cm-compose-field textarea {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  color: #ddd;
  padding: 0.5rem 0.6rem;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.88rem;
}
.cm-compose-field select:focus,
.cm-compose-field input:focus,
.cm-compose-field textarea:focus {
  outline: none;
  border-color: #c9a84c;
}
.cm-compose-field textarea { resize: vertical; min-height: 50px; }
.cm-compose-field-wide { grid-column: 1 / -1; }

.cm-output-block {
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 0.8rem;
  margin-bottom: 0.6rem;
}
.cm-output-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #c9a84c;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.cm-output-text {
  background: #0f0f0f;
  color: #d8d8d8;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 0.7rem;
  border: 1px solid #1f1f1f;
  border-radius: 3px;
  max-height: 280px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.cm-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.cm-btn {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #ddd;
  padding: 0.5rem 0.9rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
  transition: all 0.12s;
}
.cm-btn:hover { border-color: #c9a84c; color: #c9a84c; }
.cm-btn-primary {
  background: rgba(201, 168, 76, 0.14);
  border-color: #c9a84c;
  color: #c9a84c;
  font-weight: 600;
}
.cm-btn-primary:hover { background: rgba(201, 168, 76, 0.22); }

@media (max-width: 600px) {
  .cm-source-grid { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); }
  .cm-selected-tray { grid-template-columns: 1fr; }
  .cm-compose-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MANUAL ORDER — Find existing customer search
   Sits at the top of the Customer fieldset in the manual-order modal.
   Type to live-filter past customers; click a result to pre-fill name +
   phone + email + last-known address. Saves admin from re-typing for
   repeat customers.
   ========================================================================== */
.mo-customer-search {
  position: relative;
  margin-bottom: 0.8rem;
}
.mo-customer-search-input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  color: #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.92rem;
  box-sizing: border-box;
}
.mo-customer-search-input:focus {
  outline: none;
  border-color: #c9a84c;
}
.mo-customer-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1a1a1a;
  border: 1px solid #c9a84c;
  border-radius: 4px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.mo-customer-search-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid #2a2a2a;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  color: #ddd;
  font-family: inherit;
  transition: background 0.12s;
}
.mo-customer-search-row:last-child { border-bottom: none; }
.mo-customer-search-row:hover { background: rgba(201, 168, 76, 0.1); }
.mo-cs-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ededed;
  margin-bottom: 0.15rem;
}
.mo-cs-line {
  font-size: 0.78rem;
  color: #999;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.mo-cs-phone { color: #c9a84c; }
.mo-cs-email { color: #888; font-style: italic; }
.mo-cs-meta { color: #666; font-size: 0.72rem; margin-left: auto; }
.mo-customer-search-empty {
  padding: 0.8rem;
  text-align: center;
  color: #777;
  font-size: 0.85rem;
  font-style: italic;
}

/* ==========================================================================
   COMBINE-ORDERS MODAL — pick another order from the same customer and
   merge it into the one admin opened. Visual pattern mirrors the manual-
   order modal so admin doesn't have to learn a new layout.
   ========================================================================== */
.combine-orders-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.combine-orders-modal[hidden] { display: none; }
.combine-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.combine-modal-inner {
  position: relative;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 1.6rem 1.6rem 1.4rem;
  color: #e8e8e8;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.combine-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
}
.combine-modal-close:hover { color: #fff; }
.combine-modal-title {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
  color: #c9a84c;
}
.combine-modal-title #combine-modal-customer { color: #e8e8e8; }
.combine-modal-sub {
  margin: 0 0 1.2rem;
  font-size: 0.85rem;
  color: #aaa;
  line-height: 1.5;
}
.combine-modal-section { margin-bottom: 1.1rem; }
.combine-modal-section-label {
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 0.45rem;
}
.combine-modal-survivor {
  background: rgba(201, 168, 76, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  color: #d4c5a4;
}
.combine-candidates {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
}
.combine-candidate {
  background: #222;
  border: 1px solid #2f2f2f;
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.combine-candidate:hover {
  border-color: rgba(201, 168, 76, 0.4);
  background: #262626;
}
.combine-candidate.selected {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
}
.combine-candidate-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}
.combine-candidate-num {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}
.combine-candidate-status {
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 2px;
  background: rgba(232, 232, 232, 0.08);
  border: 1px solid rgba(232, 232, 232, 0.15);
  color: #ccc;
}
.combine-candidate-meta {
  font-size: 0.75rem;
  color: #888;
  margin-left: auto;
}
.combine-candidate-items {
  font-size: 0.8rem;
  color: #bbb;
  line-height: 1.4;
}
.combine-empty {
  padding: 1.2rem;
  text-align: center;
  color: #888;
  background: #1f1f1f;
  border: 1px dashed #333;
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.combine-empty-hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-style: italic;
  color: #666;
}

.combine-modal-preview {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background: #1f1f1f;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 4px;
}
.combine-preview-title {
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.combine-preview-items {
  list-style: none;
  padding: 0;
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
}
.combine-preview-items li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 3px 0;
  color: #ddd;
  border-bottom: 1px dashed #2a2a2a;
}
.combine-preview-items li:last-child { border-bottom: none; }
.combine-preview-opt {
  color: #888;
  font-size: 0.78rem;
  font-style: italic;
}
.combine-preview-price {
  color: #c9a84c;
  font-variant-numeric: tabular-nums;
}
.combine-preview-totals {
  font-size: 0.85rem;
  border-top: 1px solid #2a2a2a;
  padding-top: 0.5rem;
}
.combine-preview-totals > div {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: #bbb;
}
.combine-preview-final {
  border-top: 1px solid #333;
  padding-top: 0.4rem !important;
  margin-top: 0.3rem;
  font-weight: 600;
  color: #f0e0b8 !important;
  font-size: 0.95rem;
}
.combine-preview-warnings { margin-top: 0.7rem; }
.combine-preview-warn {
  background: rgba(255, 180, 84, 0.1);
  border-left: 3px solid #ffb454;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #e0c590;
}
.combine-preview-effect {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: #999;
  line-height: 1.45;
}
.combine-preview-effect em { color: #aaa; }

.combine-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.3rem;
  padding-top: 0.9rem;
  border-top: 1px solid #2a2a2a;
}

@media (max-width: 600px) {
  .combine-modal-inner { padding: 1.2rem 1rem; }
  .combine-candidate-meta { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   RAFFLE WHEEL — full-screen spinner for picking the weekly feedback winner.
   Dark stage with brand-gold accents; designed to look great on phone video.
   ========================================================================== */
.raffle-wheel-modal {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow-y: auto;
}
.raffle-wheel-modal[hidden] { display: none; }
.raffle-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(201, 168, 76, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, #1a1410 0%, #000 80%);
  pointer-events: none;
}
.raffle-stage {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 24px 16px 40px;
  max-width: 1280px;
  width: 100%;
}
/* Two-column layout: wheel on the left, winner card on the right. Both
   visible simultaneously — admin sees the wheel land + the winner reveal
   without scrolling. On narrow screens (< 900px) we stack to single column. */
.raffle-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  /* Top-align: wheel and winner card start at the same vertical position
     so the gold "WINNER" label sits roughly even with the top of the
     wheel. Visually balanced without forcing equal heights. */
  align-items: start;
  justify-items: center;
  margin-top: 12px;
}
.raffle-left-col, .raffle-right-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
}
.raffle-right-col {
  min-height: 1px;  /* keep grid cell present even when winner is hidden */
}
@media (max-width: 900px) {
  .raffle-main {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.raffle-top-controls {
  position: absolute;
  top: 12px; right: 14px;
  display: flex;
  gap: 6px;
  z-index: 5;
}
.raffle-icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 12px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.raffle-icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
.raffle-close { font-size: 28px; padding: 4px 12px; }
/* Fullscreen button has a text label so it stays legible even when the
   ⛶ glyph isn't in the user's system font. */
.raffle-fs-btn {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 8px 14px;
}
/* When the modal is fullscreen-by-API, the OS treats it as a top-level
   surface — make sure our internal layout still uses the full viewport. */
.raffle-wheel-modal:fullscreen,
.raffle-wheel-modal:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
}
/* Confetti canvas — full-stage overlay that sits above the wheel + winner
   card so bursts shower visibly across the whole celebration area. Pointer
   events disabled so clicks pass through to buttons underneath. */
.raffle-confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}
.raffle-header {
  margin-bottom: 18px;
}
.raffle-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 30px;
  font-weight: 400;
  color: #c9a84c;
  margin: 0 0 6px;
  letter-spacing: 1px;
  text-shadow: 0 0 24px rgba(201, 168, 76, 0.6), 0 0 8px rgba(201, 168, 76, 0.4);
}
.raffle-sub {
  color: #aaa;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.raffle-wheel-wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}
.raffle-glow {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.25) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
/* The pointer/arrow at the top of the wheel — red triangle for that classic
   "this is the slice that won" gameshow look. */
.raffle-pointer {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-top: 38px solid #e63946;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
  z-index: 4;
}
.raffle-pointer::after {
  /* Small inner highlight on the pointer tip */
  content: '';
  position: absolute;
  top: -38px;
  left: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid #ff6b6b;
}
#raffle-wheel-canvas {
  position: relative;
  display: block;
  z-index: 1;
  filter: drop-shadow(0 16px 50px rgba(0, 0, 0, 0.6));
  /* Internal resolution is 720×720; CSS sizing leaves room for the
     winner card next to it in the two-column layout. 48vw cap so it
     stops at the column gutter; 70vh so it stays in viewport. */
  width: min(560px, 48vw, 70vh);
  height: auto;
  max-width: 100%;
}
@media (max-width: 900px) {
  /* Single-column mobile/tablet — wheel can take more width since the
     winner card sits below it instead of beside. */
  #raffle-wheel-canvas { width: min(560px, 88vw, 62vh); }
}
.raffle-controls {
  margin-top: 24px;
}
.raffle-spin-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 16px 40px;
  background: linear-gradient(180deg, #d6b75a 0%, #b89236 100%);
  color: #0a0a0a;
  border: 2px solid #e8c97a;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow:
    0 8px 24px rgba(201, 168, 76, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.1s, box-shadow 0.15s;
}
.raffle-spin-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px rgba(201, 168, 76, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.raffle-spin-btn:active:not(:disabled) { transform: translateY(0); }
.raffle-spin-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.raffle-winner-card {
  margin-top: 28px;
  padding: 28px 32px 24px;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.18), rgba(201, 168, 76, 0.04));
  border: 2px solid #c9a84c;
  border-radius: 10px;
  animation: raffleWinnerReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 60px rgba(201, 168, 76, 0.3);
}
@keyframes raffleWinnerReveal {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.raffle-winner-label {
  font-size: 13px;
  letter-spacing: 5px;
  color: #c9a84c;
  margin-bottom: 10px;
  font-weight: 700;
}
.raffle-winner-name {
  font-family: var(--serif, Georgia, serif);
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-shadow: 0 0 30px rgba(201, 168, 76, 0.4);
}
.raffle-winner-phone {
  color: #d4c5a4;
  font-size: 17px;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
.raffle-winner-thanks {
  color: #c9a84c;
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-size: 20px;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
}
/* Prize block — system-picked platter shown with its hero image + name.
   The visual "reveal" beat after the wheel lands. Starts hidden so the
   JS-driven timer can dramatically pop it in ~1.1s after the winner reveal.
   Bounce easing (cubic-bezier with overshoot) gives that "pop" feel.
   Once revealed, the image pulses with a gold glow for ongoing flair. */
.raffle-prize-block {
  margin: 14px 0 16px;
  padding: 16px 14px 14px;
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.55s ease-out, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.raffle-prize-block.revealed {
  opacity: 1;
  transform: scale(1);
}
.raffle-prize-label {
  font-size: 11px;
  letter-spacing: 4px;
  color: #c9a84c;
  font-weight: 700;
  margin-bottom: 10px;
}
/* Slot-machine viewport — fixed-width window that shows 3 cells side-by-side
   (left/center/right). A gold-bordered frame highlights the center cell —
   that's the "winner position." Cells scroll left through this frame; the
   strip lands with the winner centered in the frame. */
.raffle-prize-viewport {
  position: relative;
  width: 540px;            /* 3 × 180px cellWidth */
  height: 180px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: #0a0a0a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.raffle-prize-strip {
  display: flex;
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  will-change: transform;
}
.raffle-prize-cell {
  /* width set inline by JS so desktop/mobile cell widths can differ */
  height: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  box-sizing: border-box;
  text-align: center;
}
.raffle-prize-cell img {
  width: 90%;
  height: 116px;
  object-fit: cover;
  border-radius: 4px;
  background: #1a1a1a;
}
.raffle-prize-cell-name {
  margin-top: 6px;
  font-family: var(--serif, Georgia, serif);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Center frame highlight — pulses with a gold glow so the user's eye is
   drawn to the "winning position" while cells fly through it. */
@keyframes rafflePrizeFrameGlow {
  0%, 100% {
    box-shadow:
      inset 0 0 0 3px #c9a84c,
      0 0 12px rgba(201, 168, 76, 0.4);
  }
  50% {
    box-shadow:
      inset 0 0 0 3px #e8c97a,
      0 0 28px rgba(201, 168, 76, 0.8);
  }
}
.raffle-prize-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;            /* matches one cell */
  border-radius: 8px;
  pointer-events: none;
  z-index: 3;
  animation: rafflePrizeFrameGlow 1.6s ease-in-out infinite;
}
/* Soft edge fades on the left/right of the viewport — makes cells feel
   like they "fly in" and "fly out" rather than abruptly appearing. */
.raffle-prize-viewport::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(to right,
      rgba(10, 10, 10, 0.85) 0%,
      rgba(10, 10, 10, 0) 18%,
      rgba(10, 10, 10, 0) 82%,
      rgba(10, 10, 10, 0.85) 100%);
}
@media (max-width: 600px) {
  .raffle-prize-viewport { width: 360px; height: 130px; }
  .raffle-prize-cell { height: 130px; padding: 4px; }
  .raffle-prize-cell img { height: 82px; }
  .raffle-prize-cell-name { font-size: 12px; margin-top: 4px; }
  .raffle-prize-viewport::after { width: 120px; }
}
.raffle-winner-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.raffle-winner-actions .btn-gold {
  font-weight: 700;
  letter-spacing: 1px;
  padding: 12px 24px;
}

@media (max-width: 600px) {
  .raffle-title { font-size: 24px; }
  .raffle-sub { font-size: 13px; }
  .raffle-spin-btn { font-size: 15px; padding: 14px 28px; letter-spacing: 2px; }
  .raffle-winner-name { font-size: 30px; }
  .raffle-winner-card { padding: 22px 18px 18px; }
}

/* ===========================================================================
   Voices → Feedback inner subtabs (Feedback vs Reshare) + Reshare Campaign card
   ========================================================================== */
.fbtabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border);
  margin: 0 0 1.4rem;
  flex-wrap: wrap;
}
.fbtab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.55rem 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.fbtab:hover { color: var(--gold-light); }
.fbtab.active { color: var(--gold); border-bottom-color: var(--gold); }
.fbtab .tab-badge {
  background: var(--gold);
  color: #0a0a0a;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  letter-spacing: 0;
}

.fbsubpanel { animation: fadeUp 0.25s ease-out; }

/* 🎟 N tickets badge — appears next to the customer name on reshare-raffle
   group cards when the same phone has entered more than once. */
.reshare-ticket-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.12rem 0.55rem;
  background: rgba(201, 168, 76, 0.18);
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--gold, #c9a84c);
  vertical-align: middle;
}

/* Content Machine: raffle CTA toggle row */
.cm-field-toggle { display: block; }
.cm-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.cm-toggle-row input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}

/* "Raffle CTA on" pill in the prompt-output header — surfaces when the
   Content Machine raffle CTA toggle is active so admin doesn't forget. */
.cm-raffle-active-pill {
  display: inline-block;
  background: rgba(201, 168, 76, 0.15);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  margin-left: 0.6rem;
  white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════════════════
 *  Google Places Autocomplete dropdown (.pac-container)
 *  Without an explicit z-index it renders at z=1000 — UNDER the manual-order
 *  modal (z=10000) so the suggestion list appears to "not work." Bump above
 *  the modal. !important is required because Google injects inline styles.
 * ════════════════════════════════════════════════════════════════════════ */
.pac-container {
  z-index: 100000 !important;
  font-family: 'Inter', sans-serif !important;
}
.pac-item {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.95rem !important;
}
.pac-item:hover {
  background: rgba(201, 168, 76, 0.08) !important;
}

/* ════════════════════════════════════════════════════════════════════════
 *  Raffle wheel alias badge — shows what name the wheel will display for
 *  this entry. Admin-side only (never appears on the wheel canvas itself).
 *  Subtle gold so it reads as a status flag, not a warning.
 * ════════════════════════════════════════════════════════════════════════ */
.feedback-card-alias-badge {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.18rem 0.55rem;
  font-size: 0.78rem;
  background: rgba(201, 168, 76, 0.13);
  color: #c9a84c;
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 4px;
  font-style: italic;
  letter-spacing: 0.2px;
}

/* ════════════════════════════════════════════════════════════════════════
 *  Raffle wheel — admin-only controls (force winner + record toggle)
 *  Sits BELOW the wheel, separated from it visually so it never lands in
 *  the recording frame. Compact + dim so the wheel stays the visual hero.
 * ════════════════════════════════════════════════════════════════════════ */
.raffle-admin-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.4rem 0 1rem;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(201, 168, 76, 0.3);
  border-radius: 6px;
}
.raffle-admin-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.raffle-admin-label {
  color: rgba(245, 240, 232, 0.65);
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}
.raffle-admin-select {
  flex: 1;
  min-width: 160px;
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
}
.raffle-admin-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #c9a84c;
  cursor: pointer;
}
.raffle-admin-download {
  align-self: flex-start;
  margin-top: 0.2rem;
  padding: 0.35rem 0.8rem;
  background: rgba(201, 168, 76, 0.15);
  color: #c9a84c;
  border: 1px solid rgba(201, 168, 76, 0.5);
  border-radius: 4px;
  font-size: 0.85rem;
  text-decoration: none;
}
.raffle-admin-download:hover {
  background: rgba(201, 168, 76, 0.22);
}

/* ════════════════════════════════════════════════════════════════════════
 *  Delivery-label arrangement modal — pre-print step that lets admin mark
 *  already-used positions on a partial Avery 5163 sheet so the printer
 *  skips those positions and lets the unused stickers carry over to the
 *  next print job. localStorage remembers state across sessions.
 * ════════════════════════════════════════════════════════════════════════ */
.label-arrange-backdrop {
  position: fixed;
  inset: 0;
  z-index: 11000;  /* above the manual-order modal at 10000 */
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}
.label-arrange-card {
  background: #1a1a1a;
  color: #f5f0e8;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 10px;
  max-width: 540px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 1.2rem 1.1rem 1rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.label-arrange-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
}
.label-arrange-head h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  color: #c9a84c;
  letter-spacing: 0.5px;
}
.label-arrange-close {
  background: transparent;
  border: 0;
  color: rgba(245, 240, 232, 0.7);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  line-height: 1;
}
.label-arrange-close:hover { color: #f5f0e8; }
.label-arrange-hint {
  font-size: 0.85rem;
  color: rgba(245, 240, 232, 0.65);
  margin: 0 0 0.8rem;
  line-height: 1.45;
}
.label-arrange-summary {
  margin: 0.4rem 0 0.7rem;
  padding: 0.55rem 0.7rem;
  background: rgba(201, 168, 76, 0.08);
  border-left: 3px solid #c9a84c;
  border-radius: 4px;
  font-size: 0.92rem;
}
.label-arrange-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin: 0.5rem 0 0.9rem;
}
.label-arrange-cell {
  display: block;
  position: relative;
  min-height: 84px;
  padding: 0.4rem 0.5rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(245, 240, 232, 0.15);
  border-radius: 5px;
  color: #f5f0e8;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.label-arrange-cell:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(201, 168, 76, 0.5);
}
.label-arrange-cell.is-used {
  background: rgba(255, 255, 255, 0.02);
  border-style: dashed;
  border-color: rgba(245, 240, 232, 0.15);
  opacity: 0.55;
}
.label-arrange-cell-pos {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(201, 168, 76, 0.7);
}
.label-arrange-cell-customer {
  padding: 1rem 0 0.1rem 0;
}
.label-arrange-cell-name {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.label-arrange-cell-order {
  font-size: 0.78rem;
  color: rgba(245, 240, 232, 0.6);
  margin-top: 1px;
}
.label-arrange-cell-zone {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 2px;
  background: rgba(245, 240, 232, 0.1);
  color: rgba(245, 240, 232, 0.85);
}
.label-arrange-cell-zone.zone-brooklyn { background: rgba(74, 144, 226, 0.25); color: #6bb0ff; }
.label-arrange-cell-zone.zone-lakewood { background: rgba(201, 168, 76, 0.3); color: #e8c97a; }
.label-arrange-cell-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  font-size: 0.82rem;
  color: rgba(245, 240, 232, 0.4);
  font-style: italic;
}
.label-arrange-cell-blank {
  color: rgba(245, 240, 232, 0.3);
}
.label-arrange-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(245, 240, 232, 0.1);
  flex-wrap: wrap;
}
.label-arrange-actions-right {
  display: flex;
  gap: 0.5rem;
}

/* ════════════════════════════════════════════════════════════════════════
 *  Hide discontinued products — Products editor toggle
 *  Collapses hidden + admin-only products into a strip at the bottom so
 *  the active catalog reads cleanly. Tap the strip to expand them inline.
 * ════════════════════════════════════════════════════════════════════════ */
#btn-toggle-hide-discontinued.is-active {
  background: rgba(201, 168, 76, 0.18);
  color: #c9a84c;
  border-color: rgba(201, 168, 76, 0.55);
}
.products-discontinued-strip {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(245, 240, 232, 0.18);
  border-radius: 6px;
  color: rgba(245, 240, 232, 0.55);
  font-size: 0.9rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.products-discontinued-strip:hover {
  background: rgba(201, 168, 76, 0.08);
  color: #c9a84c;
  border-color: rgba(201, 168, 76, 0.45);
}

/* ════════════════════════════════════════════════════════════════════════
 *  Reject / Cancel reason picker modal — opens when admin taps Reject or
 *  Cancel Order on a card. Three reasons + custom; picking one flips the
 *  status AND opens WhatsApp with a pre-filled apology message.
 * ════════════════════════════════════════════════════════════════════════ */
.reject-reason-backdrop {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}
.reject-reason-card {
  background: #1a1a1a;
  color: #f5f0e8;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 10px;
  max-width: 480px;
  width: 100%;
  padding: 1.2rem 1.1rem 1rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.reject-reason-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
}
.reject-reason-head h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  color: #e85c5c;
  letter-spacing: 0.5px;
}
.reject-reason-close {
  background: transparent;
  border: 0;
  color: rgba(245, 240, 232, 0.7);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  line-height: 1;
}
.reject-reason-close:hover { color: #f5f0e8; }
.reject-reason-hint {
  font-size: 0.85rem;
  color: rgba(245, 240, 232, 0.6);
  margin: 0 0 1rem;
  line-height: 1.45;
}
.reject-reason-choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.reject-reason-choice {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(245, 240, 232, 0.15);
  border-radius: 6px;
  color: #f5f0e8;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.reject-reason-choice:hover {
  background: rgba(232, 92, 92, 0.08);
  border-color: rgba(232, 92, 92, 0.4);
}
.reject-reason-emoji {
  font-size: 1.4rem;
  flex: 0 0 1.4rem;
}
.reject-reason-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.reject-reason-text strong {
  font-size: 0.95rem;
}
.reject-reason-text small {
  font-size: 0.8rem;
  color: rgba(245, 240, 232, 0.55);
  line-height: 1.35;
}
.reject-reason-actions {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(245, 240, 232, 0.1);
  display: flex;
  justify-content: flex-end;
}