/* ================================================================
   TicketMaster Pro — Attendee Form CSS
   AcoWebs Product Addons quality with conditional logic
   ================================================================ */
:root {
  --f-primary:    #6366f1;
  --f-primary-r:  99, 102, 241;
  --f-bg:         #ffffff;
  --f-surface:    #f9fafb;
  --f-border:     #e5e7eb;
  --f-border-2:   #d1d5db;
  --f-text:       #111827;
  --f-text-2:     #6b7280;
  --f-text-3:     #9ca3af;
  --f-error:      #ef4444;
  --f-success:    #22c55e;
  --f-radius:     12px;
  --f-radius-sm:  8px;
  --f-font:       'DM Sans', -apple-system, sans-serif;
  --f-ease:       cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ── */
.tmp-form-wrapper {
  font-family: var(--f-font);
  border: 1.5px solid var(--f-border);
  border-radius: var(--f-radius);
  overflow: hidden; background: var(--f-bg);
  margin: 24px 0;
}
.tmp-form-header {
  padding: 14px 20px;
  background: var(--f-surface);
  border-bottom: 1.5px solid var(--f-border);
  display: flex; align-items: center; justify-content: space-between;
}
.tmp-form-title {
  font-size: 13.5px; font-weight: 700; color: var(--f-text);
  display: flex; align-items: center; gap: 8px;
}
.tmp-form-title::before {
  content: ''; width: 3px; height: 16px; border-radius: 2px;
  background: var(--f-primary); display: block;
}
.tmp-form-required-note { font-size: 11.5px; color: var(--f-text-3); }

/* ── Attendees container ── */
.tmp-attendees-container { padding: 16px 20px; display: flex; flex-direction: column; gap: 18px; }

/* ── Attendee block ── */
.tmp-attendee-block {
  border: 1.5px solid var(--f-border);
  border-radius: var(--f-radius-sm);
  overflow: hidden;
  transition: border-color .15s var(--f-ease);
}
.tmp-attendee-block:focus-within { border-color: rgba(var(--f-primary-r),.4); }

.tmp-attendee-label {
  padding: 9px 14px;
  background: var(--f-surface);
  border-bottom: 1px solid var(--f-border);
  display: flex; align-items: center; justify-content: space-between;
}
.tmp-attendee-name {
  font-size: 12.5px; font-weight: 700;
  color: var(--f-primary);
  display: flex; align-items: center; gap: 6px;
}
.tmp-attendee-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--f-primary); color: #fff;
  font-size: 11px; font-weight: 800;
}
.tmp-attendee-remove {
  border: none; background: none; cursor: pointer;
  color: var(--f-text-3); font-size: 12px;
  padding: 2px 6px; border-radius: 4px; font-family: var(--f-font);
  transition: color .12s, background .12s;
}
.tmp-attendee-remove:hover { color: var(--f-error); background: #fef2f2; }

/* ── Fields grid ── */
.tmp-fields-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; padding: 16px;
}
.tmp-field-wrap  { display: flex; flex-direction: column; gap: 5px; }
.tmp-field-full  { grid-column: 1 / -1; }
.tmp-field-half  { grid-column: span 1; }
.tmp-field-third { grid-column: span 1; }
.tmp-field-hidden { display: none !important; }

/* ── Labels ── */
.tmp-label {
  font-size: 12px; font-weight: 700;
  color: var(--f-text-2); line-height: 1;
  display: flex; align-items: center; gap: 4px;
}
.tmp-required { color: var(--f-error); font-size: 10px; }

/* ── Inputs ── */
.tmp-input,
.tmp-select,
.tmp-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--f-border);
  border-radius: var(--f-radius-sm);
  font-size: 14px; font-family: var(--f-font);
  color: var(--f-text); background: var(--f-bg);
  transition: border-color .15s var(--f-ease), box-shadow .15s var(--f-ease);
  outline: none; appearance: none; -webkit-appearance: none;
  line-height: 1.4;
}
.tmp-input:focus,
.tmp-select:focus,
.tmp-textarea:focus {
  border-color: var(--f-primary);
  box-shadow: 0 0 0 3px rgba(var(--f-primary-r), .1);
}
.tmp-input.error, .tmp-select.error, .tmp-textarea.error {
  border-color: var(--f-error);
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.tmp-input.valid { border-color: var(--f-success); }

.tmp-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px; cursor: pointer;
}
.tmp-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.tmp-file { width: 100%; font-size: 13px; cursor: pointer; }

/* ── Radio & Checkbox — custom styled ── */
.tmp-radio-group, .tmp-checkbox-group { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.tmp-radio-group.inline, .tmp-checkbox-group.inline { flex-direction: row; flex-wrap: wrap; gap: 8px; }

.tmp-radio-label, .tmp-checkbox-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; cursor: pointer; color: var(--f-text);
  padding: 9px 12px;
  border: 1.5px solid var(--f-border);
  border-radius: var(--f-radius-sm);
  transition: border-color .12s, background .12s;
  user-select: none;
}
.tmp-radio-label:hover, .tmp-checkbox-label:hover {
  border-color: rgba(var(--f-primary-r),.3);
  background: rgba(var(--f-primary-r),.03);
}
.tmp-radio-label input, .tmp-checkbox-label input {
  width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--f-primary); cursor: pointer; margin: 0;
}
.tmp-radio-label.selected, .tmp-checkbox-label.selected {
  border-color: var(--f-primary);
  background: rgba(var(--f-primary-r),.05);
}

/* ── Special field types ── */
.tmp-field-heading h4 {
  font-size: 15px; font-weight: 800; margin: 4px 0 0;
  color: var(--f-text); border-bottom: 2px solid var(--f-border);
  padding-bottom: 8px;
}
.tmp-field-paragraph p {
  font-size: 13.5px; color: var(--f-text-2); margin: 0; line-height: 1.55;
}
.tmp-divider { border: none; border-top: 1.5px solid var(--f-border); margin: 4px 0; }

/* ── Errors & hints ── */
.tmp-field-error {
  font-size: 11.5px; color: var(--f-error);
  display: flex; align-items: center; gap: 4px;
  min-height: 0; max-height: 0; overflow: hidden;
  transition: max-height .2s var(--f-ease), opacity .2s;
  opacity: 0;
}
.tmp-field-error.visible {
  max-height: 30px; opacity: 1;
}
.tmp-field-error::before { content: '⚠'; font-size: 10px; }
.tmp-field-hint { font-size: 11.5px; color: var(--f-text-3); margin-top: 3px; }

/* ── Add attendee button ── */
.tmp-add-attendee {
  margin: 0 20px 18px;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1.5px dashed var(--f-border);
  border-radius: var(--f-radius-sm);
  background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 600;
  color: var(--f-primary); font-family: var(--f-font);
  transition: border-color .12s, background .12s;
  width: calc(100% - 40px);
}
.tmp-add-attendee:hover {
  border-color: var(--f-primary);
  background: rgba(var(--f-primary-r),.04);
}
.tmp-add-attendee-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--f-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; flex-shrink: 0;
}

/* ── Checkout summary ── */
.tmp-checkout-summary {
  font-family: var(--f-font);
  border: 1.5px solid var(--f-border); border-radius: var(--f-radius);
  overflow: hidden; margin-bottom: 20px;
}
.tmp-checkout-summary-header {
  padding: 12px 16px; background: var(--f-surface);
  border-bottom: 1px solid var(--f-border);
  font-size: 13px; font-weight: 700; color: var(--f-text);
}
.tmp-checkout-attendee {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--f-border);
}
.tmp-checkout-attendee:last-child { border-bottom: none; }
.tmp-checkout-att-title {
  grid-column: 1 / -1; font-size: 12.5px; font-weight: 700;
  color: var(--f-primary); margin-bottom: 2px;
}
.tmp-checkout-att-row { font-size: 12.5px; }
.tmp-checkout-att-key { color: var(--f-text-3); font-weight: 600; }
.tmp-checkout-att-val { color: var(--f-text); }

/* ── My tickets frontend ── */
.tmp-my-tickets { font-family: var(--f-font); }
.tmp-my-tickets h3 { font-size: 18px; font-weight: 800; margin: 0 0 16px; letter-spacing: -.3px; }
.tmp-my-ticket-item {
  display: flex; align-items: center; gap: 16px;
  border: 1.5px solid var(--f-border); border-radius: var(--f-radius);
  padding: 16px; margin-bottom: 12px; background: var(--f-bg);
  transition: border-color .12s, box-shadow .12s;
}
.tmp-my-ticket-item:hover { border-color: var(--f-border-2); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.tmp-my-ticket-info { flex: 1; min-width: 0; }
.tmp-my-ticket-info strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.tmp-my-ticket-info code {
  display: inline-block; font-size: 11px; color: var(--f-primary);
  background: rgba(var(--f-primary-r),.08);
  padding: 2px 8px; border-radius: 4px; margin-bottom: 4px;
  font-family: 'SF Mono','Fira Code',monospace;
}
.tmp-ticket-status {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: var(--f-text-3);
  padding: 2px 8px; border-radius: 20px; background: var(--f-surface);
  display: inline-block;
}
.tmp-status-active .tmp-ticket-status  { color: #15803d; background: #f0fdf4; }
.tmp-status-used .tmp-ticket-status    { color: #6b7280; background: var(--f-surface); }
.tmp-status-cancelled .tmp-ticket-status { color: var(--f-error); background: #fef2f2; }
.tmp-my-qr { width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--f-border); }
.tmp-download-btn {
  padding: 9px 16px; background: var(--f-primary); color: #fff !important;
  border-radius: 8px; text-decoration: none; font-size: 12.5px; font-weight: 700;
  white-space: nowrap; transition: filter .12s; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-font);
}
.tmp-download-btn:hover { filter: brightness(.9); }

.tmp-no-tickets, .tmp-login-notice {
  font-family: var(--f-font); text-align: center;
  padding: 40px 20px; color: var(--f-text-2);
  border: 1.5px dashed var(--f-border); border-radius: var(--f-radius);
}
.tmp-login-notice a { color: var(--f-primary); font-weight: 700; }

/* ── Conditional field animation ── */
.tmp-field-wrap[data-hidden="true"] {
  display: none !important;
}
.tmp-field-wrap.revealing {
  animation: field-reveal .25s var(--f-ease);
}
@keyframes field-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .tmp-fields-grid { grid-template-columns: 1fr; }
  .tmp-field-half, .tmp-field-third { grid-column: span 1; }
  .tmp-radio-group, .tmp-checkbox-group { flex-direction: column; }
  .tmp-checkout-attendee { grid-template-columns: 1fr; }
}

/* ── Option price tags (AcoWebs-style) ── */
.tmp-opt-price-tag {
  font-size: 12px; font-weight: 700; color: var(--f-primary);
  margin-left: 4px;
}
.tmp-radio-label .tmp-opt-price-tag,
.tmp-checkbox-label .tmp-opt-price-tag {
  margin-left: auto;
}
.tmp-radio-label, .tmp-checkbox-label {
  justify-content: flex-start;
}
.tmp-radio-label span:first-of-type { flex: 1; }

/* ── Option password gate ── */
.tmp-opt-pass-gate {
  margin-top: 10px; padding: 12px 14px;
  background: #fffbeb; border: 1.5px solid #fde68a; border-radius: 10px;
}
.tmp-opt-pass-gate.verified { background: #ecfdf5; border-color: #a7f3d0; }
.tmp-opt-pass-gate-label { display: block; font-size: 13px; font-weight: 600; color: #92400e; margin-bottom: 8px; }
.tmp-opt-pass-gate.verified .tmp-opt-pass-gate-label { color: #059669; }
.tmp-opt-pass-gate-row { display: flex; gap: 8px; }
.tmp-opt-pass-input {
  flex: 1; padding: 10px 12px; border: 1.5px solid #e5e7eb; border-radius: 8px;
  font-size: 14px; font-family: inherit; box-sizing: border-box;
}
.tmp-opt-pass-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.tmp-opt-pass-input:disabled { background: #f3f4f6; }
.tmp-opt-pass-verify {
  padding: 10px 16px; border: none; border-radius: 8px;
  background: #6366f1; color: #fff; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap; transition: filter .15s;
}
.tmp-opt-pass-verify:hover { filter: brightness(1.08); }
.tmp-opt-pass-verify:disabled { opacity: .6; cursor: default; }
.tmp-opt-pass-status { margin-top: 7px; font-size: 12.5px; font-weight: 600; }
.tmp-opt-pass-status.ok { color: #059669; }
.tmp-opt-pass-status.err { color: #ef4444; }

@media (max-width: 560px) {
  .tmp-opt-pass-gate-row { flex-direction: column; }
  .tmp-opt-pass-verify { width: 100%; }
}

/* ── Content popups (image/text modal) ── */
.tmp-popup-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border: 1.5px solid #6366f1; border-radius: 9px;
  background: transparent; color: #6366f1; font-size: 13.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.tmp-popup-trigger:hover { background: #6366f1; color: #fff; }
.tmp-popup-overlay {
  display: none; position: fixed; inset: 0; z-index: 999999;
  background: rgba(0,0,0,.6); align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(2px);
}
.tmp-popup-overlay.open { display: flex; animation: tmp-popup-fade .18s ease; }
@keyframes tmp-popup-fade { from { opacity: 0; } }
.tmp-popup-box {
  position: relative; background: #fff; border-radius: 16px;
  max-width: 560px; width: 100%; max-height: 85vh; overflow: auto;
  padding: 28px; box-shadow: 0 24px 80px rgba(0,0,0,.3);
  animation: tmp-popup-pop .22s cubic-bezier(.4,0,.2,1);
}
@keyframes tmp-popup-pop { from { transform: translateY(12px) scale(.97); opacity: 0; } }
.tmp-popup-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: #f3f4f6; color: #555; font-size: 22px; line-height: 1;
  cursor: pointer; transition: background .15s;
}
.tmp-popup-close:hover { background: #e5e7eb; }
.tmp-popup-content { font-size: 14.5px; line-height: 1.6; color: #1a1a1a; }
.tmp-popup-content img { max-width: 100%; height: auto; border-radius: 10px; }
.tmp-popup-content h1, .tmp-popup-content h2, .tmp-popup-content h3 { margin: 0 0 10px; }
.tmp-popup-content p { margin: 0 0 12px; }

@media (max-width: 560px) {
  .tmp-popup-box { padding: 20px; border-radius: 14px; }
}

/* ── Content field (link/image button) ── */
.tmp-content-link-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border: 1.5px solid #6366f1; border-radius: 9px;
  background: transparent; color: #6366f1; font-size: 13.5px; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: all .15s;
}
.tmp-content-link-btn:hover { background: #6366f1; color: #fff; }
.tmp-field-content { margin: 8px 0; }
.tmp-field-content img { display: block; }

/* ── Option thumbnails / icons ── */
.tmp-opt-thumb {
  width: 38px; height: 38px; object-fit: cover; border-radius: 8px;
  border: 1px solid #e5e7eb; flex-shrink: 0; vertical-align: middle;
}
.tmp-radio-has-thumb, .tmp-checkbox-has-thumb {
  display: flex; align-items: center; gap: 10px;
}

/* ── Inline content trigger (checkbox/radio "Ver dresscode") ── */
.tmp-inline-trigger {
  background: none; border: none; padding: 0; margin-left: 4px;
  color: #6366f1; font-weight: 700; cursor: pointer; font-size: inherit;
  font-family: inherit; text-decoration: underline;
}
.tmp-inline-trigger:hover { color: #4f46e5; }
.tmp-inline-link { color: #6366f1; font-weight: 700; text-decoration: underline; }
.tmp-field-trigger { margin-top: 6px; }

/* ── Password show/hide ── */
.tmp-opt-pass-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.tmp-opt-pass-wrap .tmp-opt-pass-input { width: 100%; padding-right: 38px; }
.tmp-opt-pass-eye { position: absolute; right: 6px; background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px; line-height: 1; opacity: .6; }
.tmp-opt-pass-eye:hover { opacity: 1; }

/* ── Free option tag ── */
.tmp-opt-free { color: #059669 !important; font-weight: 700; }