/**
 * PST2026 Member Plugin – Custom CSS
 * Helper classes used across all templates (pair with Tailwind CSS 4 CDN).
 *
 * @package PST2026_Member
 */

/* ── Form control helpers ──────────────────────────────────────────────── */
.pst-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.375rem;
}

.pst-input,
.pst-select,
.pst-textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: #111827;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  line-height: 1.5;
}
.pst-input.pst-invalid,
.pst-select.pst-invalid,
.pst-textarea.pst-invalid {
  border-color: #fca5a5;
  background-color: #fff1f2;
}


.pst-input:focus,
.pst-select:focus,
.pst-textarea:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

.pst-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
  cursor: pointer;
}

.pst-textarea {
  min-height: 6rem;
  resize: vertical;
}

/* ── Alert styles ──────────────────────────────────────────────────────── */
.pst-alert {
  padding: 0.875rem 1rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
  border-width: 1px;
  border-style: solid;
}

.pst-alert-success { background: #f0fdf4; border-color: #86efac; color: #166534; }
.pst-alert-error   { background: #fff1f2; border-color: #fca5a5; color: #991b1b; }
.pst-alert-info    { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
.pst-alert-warning { background: #fffbeb; border-color: #fcd34d; color: #92400e; }

/* ── OTP digit inputs ──────────────────────────────────────────────────── */
.pst-otp-digit {
  width: 2.75rem;
  height: 3.25rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  border: 2px solid #d1d5db;
  border-radius: 0.5rem;
  color: #111827;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  caret-color: transparent;
}

.pst-otp-digit:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

.pst-otp-digit:not(:placeholder-shown) {
  border-color: #0d9488;
  background: #f0fdfa;
}

/* ── Step progress indicator ───────────────────────────────────────────── */
.pst-step-circle {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid #0d9488;
  transition: background-color 0.2s, color 0.2s;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.pst-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #0f766e, #059669);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 0.625rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  text-decoration: none;
}

.pst-btn-primary:hover { opacity: 0.92; }
.pst-btn-primary:active { transform: scale(0.98); }
.pst-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.pst-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #fff;
  color: #374151;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 0.625rem;
  border: 1px solid #d1d5db;
  cursor: pointer;
  transition: background-color 0.15s;
}

.pst-btn-secondary:hover { background: #f9fafb; }

/* ── Registration type cards ───────────────────────────────────────────── */
.pst-reg-card {
  position: relative;
  border: 2px solid #e5e7eb;
  border-radius: 0.875rem;
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.pst-reg-card:hover {
  border-color: #0d9488;
  background: #f0fdfa;
}

.pst-reg-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pst-reg-card.selected,
.pst-reg-card:has(input:checked) {
  border-color: #0d9488;
  background: #f0fdfa;
}

/* ── File dropzone ─────────────────────────────────────────────────────── */
.pst-dropzone {
  border: 2px dashed #d1d5db;
  border-radius: 0.875rem;
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.pst-dropzone:hover,
.pst-dropzone.drag-over {
  border-color: #0d9488;
  background: #f0fdfa;
}

/* ── Badge / pill ──────────────────────────────────────────────────────── */
.pst-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── Spinner ───────────────────────────────────────────────────────────── */
@keyframes pst-spin {
  to { transform: rotate(360deg); }
}

.pst-spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 9999px;
  animation: pst-spin 0.7s linear infinite;
}

/* ── Modal overlay ─────────────────────────────────────────────────────── */
.pst-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.pst-modal-box {
  background: #fff;
  border-radius: 1.25rem;
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: pst-modal-in 0.2s ease-out;
}

@keyframes pst-modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Scrollbar (Webkit) ────────────────────────────────────────────────── */
.pst-messages-area::-webkit-scrollbar { width: 4px; }
.pst-messages-area::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 99px; }
.pst-messages-area::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }

/* ── Utility: invisible (keep layout) ─────────────────────────────────── */
.invisible { 
  /* visibility: hidden; */ 
}