/* modals.css — /p/my modal shells (Edit Profile, Edit Ticket, Verify, Force
   Password). Reuses .auth-modal / .auth-input / .auth-btn / .auth-emoji /
   .auth-swatch etc. from auth.css (linked alongside this file) for visual
   consistency; only adds what auth.css doesn't have.
   Design source: MEMBERSHIP_REQUIREMENTS §15.13–§15.16. */

.my-modal__card--wide { max-width: 400px; }

/* Groups a field/button with its directly-related hint text at a tighter gap
   than the modal card's default inter-section gap (14px) — keeps related
   items visually attached instead of every line reading as its own section. */
.my-modal-group { display: flex; flex-direction: column; gap: 6px; }
/* A class-based `display` always beats the UA [hidden] rule's specificity
   (same issue fixed for .auth-error) — without this, a hidden tab panel
   using this class stays visible, stacking on top of the active tab. */
.my-modal-group[hidden] { display: none; }

/* Section header (Edit Profile "ข้อมูลส่วนตัว" tab) — separates the tab's
   fields into Account / About you / Privacy so unrelated field types (locked
   text, input+button, picker, chips, toggle) don't read as one long list. */
.my-modal-section {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 14px; border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.my-modal-section:first-child { padding-top: 0; border-top: none; }
.my-modal-section__label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--text-secondary);
}

/* Tab bar (Edit Profile) */
.my-tabbar {
  display: flex; gap: 6px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}
.my-tabbar__btn {
  flex: 1;
  padding: 9px 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font: 600 12px var(--font-thai);
  cursor: pointer;
}
.my-tabbar__btn.is-active {
  background: rgba(244, 161, 64, 0.14);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Toggle switch (Privacy Mode / Primary ticket) */
.my-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.my-toggle-row--gold { border-color: rgba(244, 161, 64, 0.5); }
.my-toggle-row__txt { display: flex; flex-direction: column; gap: 2px; }
.my-toggle-row__title { font-size: 12px; font-weight: 600; }
.my-toggle-row__desc { font-size: 10px; color: var(--text-secondary); }
.my-switch {
  position: relative; flex-shrink: 0;
  width: 40px; height: 22px;
  border: none; border-radius: 11px;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
}
.my-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: left 0.15s ease;
}
.my-switch.is-on { background: var(--accent-gold); }
.my-switch.is-on::after { left: 20px; }

/* Avatar preview row (Emoji tab) */
.my-modal-preview {
  display: flex; align-items: center; gap: 10px;
}
.my-modal-preview__avatar {
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--accent-teal);
  background: var(--bg-elevated);
  font-size: 20px;
}
.my-modal-preview__txt { display: flex; flex-direction: column; gap: 2px; }
.my-modal-preview__title { font-size: 12px; font-weight: 600; }
.my-modal-preview__sub { font-size: 10px; color: var(--text-secondary); }

/* Select fields */
.my-select {
  width: 100%; min-width: 0;
  height: 44px; padding: 0 12px;
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-primary);
  font: 400 13px var(--font-thai);
}
/* min-width:0 lets flex children shrink below their content size — without
   it a <select> with a long option (e.g. a zone name) can overflow past the
   modal's edge instead of wrapping/ellipsis-ing inside its own column. */
.my-inline-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.my-field-row { display: flex; gap: 10px; }
.my-field-row .auth-field { flex: 1; min-width: 0; }
.my-field-row .auth-field .my-select,
.my-field-row .auth-field .auth-input { width: 100%; min-width: 0; }

/* Required current-password field (gold-tinted priority border) */
.auth-input--required { border-color: rgba(244, 161, 64, 0.5); }
.auth-label__req { color: #F06B6B; }

/* Gold info banner */
.my-modal-banner {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(244, 161, 64, 0.12);
  color: var(--accent-gold);
  font-size: 11px; font-weight: 600;
}
.my-modal-banner--teal { background: rgba(19, 205, 203, 0.12); color: var(--accent-teal); }

/* Teal link (masking example) */
.my-modal-link {
  background: none; border: none; padding: 0;
  color: var(--accent-teal);
  font: 600 11px var(--font-thai);
  cursor: pointer; text-align: left;
}
/* Masking example — toggled in/out of flow by the link above it (2026-07-08). */
.my-verify-example-img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* Upload dropzone */
.my-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 11px; text-align: center;
  cursor: pointer;
}
.my-dropzone.has-file { border-color: var(--accent-teal); color: var(--text-primary); }
.my-dropzone__icon { font-size: 22px; }
.my-dropzone__preview {
  max-width: 140px; max-height: 100px;
  border-radius: 8px;
  object-fit: cover;
}

/* Edit Ticket header status badge reuses .my-badge from my.css */
.my-modal-head-badges { display: flex; align-items: center; gap: 8px; }

/* List for Sale settings — receiving method (chips) + price (compact radio) */
.sale-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sale-chip {
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: var(--text-primary);
  font: 600 11px var(--font-thai);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.sale-chip.is-selected { border-color: var(--accent-teal); background: rgba(19, 205, 203, 0.14); color: var(--accent-teal); }

.sale-radio-list { display: flex; flex-direction: column; gap: 6px; }
.sale-radio-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.sale-radio-row input { width: 14px; height: 14px; accent-color: var(--accent-gold); cursor: pointer; flex-shrink: 0; }
.sale-radio-row__txt { flex: 1; font-size: 11px; }
.sale-radio-row__price { font-size: 12px; font-weight: 700; color: var(--accent-gold); white-space: nowrap; }
.sale-radio-row.is-selected { border-color: var(--accent-gold); background: rgba(244, 161, 64, 0.1); }

/* Force New Password — blocking (no close button) */
.auth-modal--blocking .auth-modal__close { display: none; }

/* Health Status Check-In popup + edit selector (openHealthCheckinPopup,
   modals.js) — 4 status rows + a lower-emphasis skip row (§3.2). */
.health-option-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.health-option-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: var(--text-primary);
  font: 600 13px var(--font-thai);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}
.health-option-row:hover { border-color: var(--accent-gold); }
.health-option-row:disabled { opacity: 0.5; cursor: default; }
.health-option-row__icon { font-size: 18px; flex-shrink: 0; }
.health-skip-row {
  /* No margin-top here (2026-07-26 fix) — .auth-modal__card is already a
     flex column with gap: 14px between every child, so this used to stack
     an extra 12px on top of that gap and left too much space above the
     skip row specifically, vs. every other gap in the card. */
  display: block; width: 100%;
  padding: 10px 0;
  background: none; border: none;
  color: var(--text-secondary);
  font: 500 12px var(--font-thai);
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
}
.health-skip-row:disabled { opacity: 0.5; cursor: default; }
/* Consent notice (2026-07-26 ask) — moved to the very bottom, merged with
   the "change anytime at myPPW" note into one block. Kept as a plain
   caption line (2026-07-26 follow-up: an earlier pass made this a tinted
   frosted-glass block, but that read as too prominent for what's really
   just informational fine print — the emphasis treatment was meant for the
   toast instead, see toast.js). No margin — both the popup card
   (.auth-modal__card) and the banner's own flex parent already apply a gap
   between children, so an extra margin here double-spaced it. Also used by
   my.js's banner (outside its own card) — my/index.html already links this
   stylesheet, so no duplicate rule needed there. */
.health-notice {
  color: var(--text-secondary);
  font-size: 10.35px;
  line-height: 1.6;
  text-align: center;
}

/* Admin-added health report popup (openHealthReportPopup, modals.js) */
.health-report__handle {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font: 700 14px var(--font-thai);
  color: var(--text-primary);
}
.health-report__handle svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Generic confirm modal (openConfirmModal, modals.js) */
.auth-modal__actions { display: flex; gap: 10px; margin-top: 18px; }
.auth-modal__actions .auth-btn { width: auto; flex: 1; padding: 13px; }
.auth-btn--danger { background: var(--like-red); color: #fff; padding: 15px; }