/* ============================================================
   Sapor Web Editor — redesigned to mirror the Flutter app
   Drop-in replacement for sapor_firebase/public/post_form/css/post_form.css
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Brand — pulled from ColorConstants + variables.css */
  --primary:        #8610FF;
  --primary-hover:  #6B0DD4;
  --primary-25:     #F7F4FF;   /* focused row tint */
  --primary-50:     #EFE9FF;
  --primary-bg:     #F5F0FF;
  --secondary:      #FFFF70;
  --warning:        #FF153F;   /* required star, errors */

  /* Greys — ColorConstants.font / fontSub* */
  --text:           #2E323B;
  --text-sub:       #656565;
  --text-sub-2:     #7C7C7C;
  --text-sub-3:     #A9A9A9;
  --text-sub-4:     #999999;

  /* Surfaces */
  --bg:             #FFFFFF;
  --card:           #FFFFFF;
  --section-bg:     #FAFAFA;
  --divider:        #F2F2F7;   /* ColorConstants.buttonSub */
  --image-placeholder: #F0F0F0;
  --pill-bg:        #F2F2F7;

  /* Type */
  --font-body:    'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Montserrat', 'Noto Sans KR', -apple-system, sans-serif;

  /* Radius */
  --r-sm:  8px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-pill: 9999px;

  /* Shadow */
  --shadow-card: 0 1px 0 rgba(0,0,0,0.04);
  --shadow-elev: 0 8px 28px rgba(134, 16, 255, 0.10);
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* ============================================================
   Layout: app-bar + scrollable body, like SaporScaffold
   ============================================================ */
.container {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
  border-left: 1px solid var(--divider);
  border-right: 1px solid var(--divider);
}

/* ============================================================
   PIN page
   ============================================================ */
.pin-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 48px 24px;
  text-align: center;
}

.pin-page .pin-mark {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
}
.pin-page .pin-mark img {
  width: 76px;
  height: 76px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(134, 16, 255, 0.22));
}

.pin-page h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 10px;
}

.pin-page > p {
  color: var(--text-sub);
  font-size: 14.5px;
  margin-bottom: 36px;
  max-width: 360px;
}

.pin-inputs {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}

.pin-inputs input {
  width: 48px;
  height: 60px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--primary);
  border: 1.5px solid var(--divider);
  border-radius: var(--r-md);
  outline: none;
  background: var(--card);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  caret-color: transparent;
}

.pin-inputs input:focus {
  border-color: var(--primary);
  background: var(--primary-25);
}

.pin-inputs input:not(:placeholder-shown) {
  border-color: var(--primary-50);
}

/* ============================================================
   Buttons — mirror Flutter elevatedButtonTheme (88×50 min)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 50px;
  padding: 0 28px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
  user-select: none;
}

.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled {
  background: var(--divider);
  color: var(--text-sub-3);
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--pill-bg);
  color: var(--text);
}
.btn-secondary:hover { background: #E8E8E8; }

.btn-danger { background: var(--warning); color: white; }
.btn-danger:hover { background: #D60E36; }

.btn-sm {
  min-width: 0;
  min-height: 0;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: var(--r-pill);
}

.error-message {
  color: var(--warning);
  font-size: 13px;
  margin-top: 14px;
  min-height: 18px;
  font-weight: 500;
}

/* ============================================================
   Spinner
   ============================================================ */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 8px;
  vertical-align: -3px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   App bar — matches SaporScaffold title style
   ============================================================ */
.form-page { display: none; }
.form-page.active { display: block; }

.form-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--divider);
}

.form-header h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}

.form-header .header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Post-type pill — Sapor uses primary purple on filled chips */
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #FFF;
}

.save-status {
  font-size: 12px;
  color: var(--text-sub-3);
  transition: color 0.2s;
}
.save-status.saving { color: var(--primary); }
.save-status.saved  { color: #22c55e; }

/* ============================================================
   Form rows — iOS-style horizontal layout w/ left label + right value
   This is THE Sapor app pattern.
   ============================================================ */
.form-group {
  position: relative;
  border-bottom: 1px solid var(--divider);
  transition: background 0.15s;
}
.form-group:focus-within { background: var(--primary-25); }

/* Inline validation error — red text below the label. Used by setupSubmit's
   collectValidationErrors() in form_base.js. Cleared as soon as the user
   edits the offending field. */
.form-group.invalid {
  background: rgba(255, 21, 63, 0.04);
}
.form-group .field-error,
.image-gallery .field-error {
  color: #FF153F;
  font-size: 12.5px;
  line-height: 1.3;
  padding: 4px 20px 8px;
}
.image-gallery.invalid .field-error {
  padding-left: 0;
  padding-right: 0;
}

/* Base row */
.form-group > label,
.form-group > .field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub);
  padding: 14px 20px 0;
  letter-spacing: -0.003em;
}

/* Required star marker — matches assets/icons/required_field_accent_star.svg */
.required-star {
  display: inline-block;
  width: 8px;
  height: 7px;
  margin-right: 6px;
  vertical-align: 2px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%207%22%3E%3Cpath%20d%3D%22M3.79877%205.50815C3.92315%205.43574%204.07685%205.43574%204.20123%205.50815L5.66149%206.35819C5.966%206.53545%206.33435%206.26092%206.25152%205.91846L5.87444%204.35951C5.83865%204.21156%205.88995%204.05612%206.00676%203.95852L7.25077%202.91912C7.52538%202.68967%207.38358%202.24268%207.02692%202.21349L5.36165%202.07723C5.21524%202.06525%205.08717%201.97398%205.02807%201.83949L4.3662%200.333331C4.22612%200.0145642%203.77388%200.0145631%203.6338%200.33333L2.97193%201.83949C2.91283%201.97398%202.78476%202.06525%202.63835%202.07723L0.973082%202.21349C0.61642%202.24268%200.474618%202.68967%200.749232%202.91912L1.99324%203.95852C2.11005%204.05612%202.16135%204.21156%202.12556%204.35951L1.74848%205.91846C1.66565%206.26092%202.034%206.53545%202.33851%206.35819L3.79877%205.50815Z%22%20fill%3D%22%238610FF%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

.form-group.required > label::before,
.form-group.required > .field-label::before,
.image-gallery.required > label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 7px;
  margin-right: 6px;
  vertical-align: 2px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%207%22%3E%3Cpath%20d%3D%22M3.79877%205.50815C3.92315%205.43574%204.07685%205.43574%204.20123%205.50815L5.66149%206.35819C5.966%206.53545%206.33435%206.26092%206.25152%205.91846L5.87444%204.35951C5.83865%204.21156%205.88995%204.05612%206.00676%203.95852L7.25077%202.91912C7.52538%202.68967%207.38358%202.24268%207.02692%202.21349L5.36165%202.07723C5.21524%202.06525%205.08717%201.97398%205.02807%201.83949L4.3662%200.333331C4.22612%200.0145642%203.77388%200.0145631%203.6338%200.33333L2.97193%201.83949C2.91283%201.97398%202.78476%202.06525%202.63835%202.07723L0.973082%202.21349C0.61642%202.24268%200.474618%202.68967%200.749232%202.91912L1.99324%203.95852C2.11005%204.05612%202.16135%204.21156%202.12556%204.35951L1.74848%205.91846C1.66565%206.26092%202.034%206.53545%202.33851%206.35819L3.79877%205.50815Z%22%20fill%3D%22%238610FF%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

/* Required marker on an empty image-add tile (Help cover, Versus option) */
.image-add.required::before,
.option-image-btn.required::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 8px;
  height: 7px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%207%22%3E%3Cpath%20d%3D%22M3.79877%205.50815C3.92315%205.43574%204.07685%205.43574%204.20123%205.50815L5.66149%206.35819C5.966%206.53545%206.33435%206.26092%206.25152%205.91846L5.87444%204.35951C5.83865%204.21156%205.88995%204.05612%206.00676%203.95852L7.25077%202.91912C7.52538%202.68967%207.38358%202.24268%207.02692%202.21349L5.36165%202.07723C5.21524%202.06525%205.08717%201.97398%205.02807%201.83949L4.3662%200.333331C4.22612%200.0145642%203.77388%200.0145631%203.6338%200.33333L2.97193%201.83949C2.91283%201.97398%202.78476%202.06525%202.63835%202.07723L0.973082%202.21349C0.61642%202.24268%200.474618%202.68967%200.749232%202.91912L1.99324%203.95852C2.11005%204.05612%202.16135%204.21156%202.12556%204.35951L1.74848%205.91846C1.66565%206.26092%202.034%206.53545%202.33851%206.35819L3.79877%205.50815Z%22%20fill%3D%22%238610FF%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  z-index: 1;
}
.image-add, .option-image-btn { position: relative; }

/* Inputs / textareas / selects — flush with row, right-aligned value */
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 6px 20px 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--primary);
  background: transparent;
  border: none;
  outline: none;
  text-align: right;
  appearance: none;
  -webkit-appearance: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-sub-3);
  font-weight: 400;
}

/* When focused, text becomes dark + left-aligned for typing comfort */
.form-group:focus-within input[type="text"],
.form-group:focus-within input[type="url"],
.form-group:focus-within input[type="number"],
.form-group:focus-within textarea {
  color: var(--text);
  text-align: left;
}

.form-group textarea {
  resize: vertical;
  min-height: 92px;
  line-height: 1.55;
  text-align: left;
  color: var(--text);
}

/* ============================================================
   Success / status page (showSuccess, session-expired)
   ============================================================ */
.success-page {
  min-height: 70vh;
}

.success-mark {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  animation: pop-in 0.45s cubic-bezier(.2,.9,.3,1.4);
}
.success-mark svg {
  display: block;
  filter: drop-shadow(0 10px 26px rgba(134, 16, 255, 0.30));
}
.success-mark-warn svg {
  filter: drop-shadow(0 10px 26px rgba(255, 21, 63, 0.28));
}
.success-mark-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px solid var(--primary-50);
  pointer-events: none;
  animation: ring-pulse 1.8s ease-in-out infinite;
}
@keyframes pop-in {
  0%   { transform: scale(0.55); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes ring-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.12); opacity: 0.4; }
}

.success-page h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 12px;
  white-space: nowrap;
}
.success-page > p {
  color: var(--text-sub);
  font-size: 15px;
  margin-bottom: 32px;
  max-width: 380px;
  line-height: 1.6;
}

.success-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.success-actions .btn-primary { box-shadow: var(--shadow-elev); padding: 0 36px; }

.success-secondary {
  font-size: 13.5px;
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  transition: background 0.15s;
  white-space: nowrap;
}
.success-secondary:hover { background: var(--primary-25); }

/* ============================================================
   Bordered textarea container (Help description)
   Matches the 1px box from _HelpDescriptionForm in the Flutter app
   ============================================================ */
.textarea-bordered {
  margin: 0 20px 14px;
  border: 1px solid var(--divider);
  border-radius: var(--r-sm);
  background: var(--card);
  transition: border-color 0.15s;
}
.textarea-bordered:focus-within { border-color: var(--primary); }
.textarea-bordered textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
  min-height: 180px;
}
.textarea-bordered textarea::placeholder { color: var(--text-sub-3); }

/* Block-layout form groups: label sits on its own line above the field */
.form-group-block > label,
.form-group-block > .field-label { padding-bottom: 8px; }

/* ============================================================
   Toggle — pill-style switch, purple when active
   ============================================================ */
.toggle-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--divider);
  gap: 12px;
}
.toggle-group .toggle-label {
  font-size: 14.5px;
  color: var(--text);
  font-weight: 500;
}
.toggle-group .toggle-hint {
  font-size: 12.5px;
  color: var(--text-sub-3);
  margin-top: 2px;
}

.toggle {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 28px;
  background: #E8E8E8;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle.active { background: var(--primary); }
.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 0.2s;
}
.toggle.active::after { transform: translateX(18px); }

/* ============================================================
   Radio group — used for Owned (purple) vs Wish item (yellow)
   ============================================================ */
.radio-group {
  display: flex;
  gap: 28px;
  padding: 6px 20px 14px;
  align-items: center;
}
.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14.5px;
  color: var(--text);
  user-select: none;
}
.radio-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.7px solid var(--text-sub-3);
  border-radius: 50%;
  background: white;
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s;
}
.radio-option input[type="radio"]:focus-visible {
  outline: 2px solid var(--primary-50);
  outline-offset: 1px;
}
.radio-option.primary input[type="radio"]:checked { border-color: var(--primary); }
.radio-option.primary input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--primary);
}
.radio-option.secondary input[type="radio"]:checked { border-color: #C7B900; }
.radio-option.secondary input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--secondary);
}

/* ============================================================
   Tags — purple-tinted chips, matches InputChipWrapper
   ============================================================ */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 20px 12px;
  background: transparent;
  min-height: 36px;
  align-items: center;
  cursor: text;
  justify-content: flex-end;
}
.form-group:focus-within .tags-container { justify-content: flex-start; }

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 6px 0 12px;
  font-size: 13px;
  font-weight: 500;
  background: var(--primary-25);
  color: var(--primary);
  border-radius: var(--r-pill);
  border: 1px solid var(--primary-50);
  white-space: nowrap;
  flex-shrink: 0;
}

.tag-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--primary);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  border-radius: 50%;
  transition: background 0.15s;
}
.tag-chip button:hover { background: var(--primary-50); }

/* Tags input — needs higher specificity to override .form-group input[type=text] */
.form-group input.tags-input,
.form-group:focus-within input.tags-input {
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  flex: 1;
  min-width: 80px;
  padding: 4px 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-weight: 400;
}
.tags-input::placeholder { color: var(--text-sub-3); }

/* Versus / Help option-row inputs — left-aligned, dark text */
.form-group .option-row input,
.form-group:focus-within .option-row input {
  flex: 1;
  padding: 6px 4px;
  font-size: 15px;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  font-weight: 400;
}

/* ============================================================
   Versus / Help options list
   ============================================================ */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 20px 14px;
}

.option-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--section-bg);
  border-radius: var(--r-md);
  border: 1px solid var(--divider);
  transition: border-color 0.15s, background 0.15s;
}
.option-row:focus-within {
  border-color: var(--primary-50);
  background: var(--primary-25);
}

.option-row .remove-option {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-sub-3);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.option-row .remove-option:hover {
  background: rgba(255, 21, 63, 0.08);
  color: var(--warning);
}

.add-option-btn {
  align-self: stretch;
  margin: 4px 20px 14px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border: 1.5px dashed #D7D7E0;
  background: transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--text-sub);
  transition: all 0.15s;
}
.add-option-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-25);
}

/* Option image (Versus) — small thumb to the left of label */
.option-image-btn {
  width: 44px;
  height: 44px;
  border: 1.5px dashed #D7D7E0;
  border-radius: var(--r-md);
  background: var(--image-placeholder);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub-3);
  font-size: 18px;
  flex-shrink: 0;
  overflow: hidden;
  transition: border-color 0.15s;
}
.option-image-btn:hover,
.option-image-btn.drop-active { border-color: var(--primary); color: var(--primary); }
.option-image-btn img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Image gallery — horizontal strip, 10px-radius tiles
   First image highlighted with 1.7px purple border, matching Flutter
   ============================================================ */
.image-gallery {
  padding: 16px 0;
  border-bottom: 1px solid var(--divider);
}

.image-gallery > label,
.image-gallery > .field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub);
  padding: 0 20px 10px;
}

.image-grid {
  display: flex;
  gap: 8px;
  padding: 0 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.image-grid::-webkit-scrollbar { height: 6px; }
.image-grid::-webkit-scrollbar-thumb {
  background: var(--divider);
  border-radius: 3px;
}

.image-add,
.image-item {
  width: 132px;
  height: 132px;
  flex-shrink: 0;
  scroll-snap-align: start;
  border-radius: var(--r-md);
}

.image-add {
  background: var(--image-placeholder);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-sub-2);
  gap: 6px;
  transition: background 0.15s;
  border: none;
}
.image-add:hover { background: #E8E8E8; }

.image-add .camera-icon {
  width: 26px;
  height: 26px;
  display: block;
  color: #B5B5BC;
}

.image-add .count {
  font-size: 15px;
  font-weight: 500;
  color: #080808;
}
.image-add .count .total {
  color: #A9A9A9;
}

.image-item {
  position: relative;
  overflow: hidden;
  background: var(--image-placeholder);
  cursor: grab;
}
.image-item:active { cursor: grabbing; }
.image-item.dragging { opacity: 0.5; }
.image-item.drag-over { box-shadow: 0 0 0 2px var(--primary); }

/* OS file drag hovering the gallery (drop-to-add) */
.image-gallery.drop-active .image-grid {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  border-radius: var(--r-md);
  background: rgba(134, 16, 255, 0.05);
}
.image-hint {
  margin: 8px 20px 0;
  font-size: 12px;
  color: var(--text-sub-2);
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* First (main) image — 1.7px purple ring */
.image-item.is-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  border: 1.7px solid var(--primary);
  pointer-events: none;
}
/* If post is "not owned" (wish), ring becomes secondary yellow */
.image-grid[data-owned="false"] .image-item.is-primary::after {
  border-color: var(--secondary);
}

.image-item .delete-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(0,0,0,0.55);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s;
}
.image-item .delete-btn:hover { background: rgba(0,0,0,0.75); }

.image-item .order-badge {
  position: absolute;
  bottom: 7px;
  left: 7px;
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  background: rgba(0,0,0,0.55);
  color: white;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-uploading {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-uploading .spinner {
  border-color: rgba(0,0,0,0.12);
  border-top-color: var(--primary);
  margin: 0;
  width: 22px;
  height: 22px;
}

/* When .image-uploading is applied to the .image-item itself (no img child
   while uploading), keep the item in the grid flow and center the spinner. */
.image-item.image-uploading {
  position: relative;
  inset: auto;
  background: var(--image-placeholder);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Delete-in-progress overlay — semi-opaque white over the existing img,
   centered spinner. Reuses spinner sizing from .image-uploading .spinner. */
.image-item.image-deleting {
  cursor: default;
}
.image-item.image-deleting::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  pointer-events: none;
}
.image-item.image-deleting .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-color: rgba(0,0,0,0.12);
  border-top-color: var(--primary);
  margin: 0;
  width: 22px;
  height: 22px;
  z-index: 2;
}
.image-item.image-deleting .delete-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ============================================================
   Submit area — sticky at bottom like the Flutter Done button
   ============================================================ */
.submit-area {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--divider);
  background: var(--bg);
  position: sticky;
  bottom: 0;
}
.submit-area .btn-primary { box-shadow: var(--shadow-elev); }

/* ============================================================
   Loading overlay
   ============================================================ */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  gap: 14px;
}
.loading-overlay .spinner {
  width: 30px;
  height: 30px;
  border-color: var(--primary-50);
  border-top-color: var(--primary);
  margin: 0;
}
.loading-overlay p {
  color: var(--text-sub);
  font-size: 14px;
}

.hidden { display: none !important; }

/* Read-only field */
.readonly-field {
  padding: 6px 20px 14px;
  font-size: 15px;
  color: var(--text-sub-2);
  text-align: right;
  font-weight: 500;
}

/* ============================================================
   Price + currency row
   ============================================================ */
.price-currency-row {
  display: flex;
  gap: 8px;
  padding: 4px 20px 14px;
}
.price-currency-row input {
  flex: 2;
  padding: 8px 10px;
  font-size: 15px;
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  outline: none;
  background: var(--card);
  font-family: inherit;
  text-align: right;
  color: var(--text);
  font-weight: 500;
}
.price-currency-row input:focus { border-color: var(--primary); }
.price-currency-row select {
  flex: 1;
  padding: 8px 30px 8px 10px;
  font-size: 14px;
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  outline: none;
  background: var(--card);
  text-align: left;
  color: var(--text);
  font-weight: 500;
}

/* ============================================================
   Language switcher — top-right pills, minimal
   ============================================================ */
.lang-switcher {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
}

.lang-switcher button {
  padding: 5px 11px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--text-sub);
  transition: background 0.15s, color 0.15s;
}
.lang-switcher button:hover { color: var(--text); }
.lang-switcher button.active {
  background: var(--primary);
  color: white;
}

/* Once the form opens the switcher joins the sticky header's right-hand
   group. Fixed positioning is what made it cover the save status and type
   badge: pinned to the viewport it crosses the 720px-wide container's right
   edge at roughly 1080px and below, so this hit laptops, not just phones.
   In the flex row it cannot overlap. The card chrome comes off so it does
   not compete with the badge. */
.lang-switcher.in-header {
  position: static;
  padding: 2px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.lang-switcher.in-header button { padding: 4px 8px; }

/* ============================================================
   Responsive — phone widths
   ============================================================ */
@media (max-width: 480px) {
  .container { border: none; }
  .pin-page  { padding: 36px 20px; }
  .pin-inputs input { width: 42px; height: 54px; font-size: 22px; }

  .image-add, .image-item { width: 112px; height: 112px; }
  .form-header { padding: 12px 14px; }
  .form-group > label,
  .form-group > .field-label,
  .image-gallery > label { padding-left: 16px; padding-right: 16px; }
  .form-group input, .form-group textarea, .form-group select,
  .tags-container, .options-list, .add-option-btn,
  .price-currency-row { padding-left: 16px; padding-right: 16px; }
  .add-option-btn { margin-left: 16px; margin-right: 16px; }
  .image-grid { padding-left: 16px; padding-right: 16px; }
}