/* =============================================
   PlayMyStory Game Manager – Frontend Styles
   Colors from logo: Purple #7B4FE0, Deep #4E2DA8
   Teal #4ECDC4, Gold #F6B93B, Cream #F8F5FF
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --pms-purple:    #7B4FE0;
  --pms-deep:      #4E2DA8;
  --pms-teal:      #4ECDC4;
  --pms-gold:      #F6B93B;
  --pms-cream:     #F8F5FF;
  --pms-pink:      #FF6B9D;
  --pms-dark:      #1A1035;
  --pms-text:      #2D2047;
  --pms-muted:     #7A6A9A;
  --pms-border:    #E8E0F8;
  --pms-white:     #FFFFFF;
  --pms-success:   #22C55E;
  --pms-error:     #EF4444;
  --pms-radius:    16px;
  --pms-shadow:    0 8px 40px rgba(78,45,168,.12);
  --pms-shadow-lg: 0 20px 60px rgba(78,45,168,.18);
  --pms-font:      'Nunito', sans-serif;
}

/* ── APP CONTAINER ────────────────────────────── */
.pms-app,
.pms-dashboard {
  font-family: var(--pms-font);
  color: var(--pms-text);
  max-width: 780px;
  margin: 0 auto;
  padding: 0 16px 40px;
}

/* ── PROGRESS BAR ────────────────────────────── */
.pms-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 32px 0;
  padding: 0 8px;
}

.pms-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}

.pms-step-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pms-border);
  color: var(--pms-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  transition: all .3s ease;
  border: 3px solid transparent;
}

.pms-progress-step.active .pms-step-dot {
  background: var(--pms-purple);
  color: white;
  box-shadow: 0 0 0 4px rgba(123,79,224,.2);
}

.pms-progress-step.done .pms-step-dot {
  background: var(--pms-success);
  color: white;
}

.pms-step-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pms-muted);
  white-space: nowrap;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.pms-progress-step.active .pms-step-label {
  color: var(--pms-purple);
}

.pms-progress-line {
  flex: 1;
  height: 3px;
  background: var(--pms-border);
  margin: 0 4px;
  margin-bottom: 20px;
  border-radius: 2px;
  transition: background .4s;
  min-width: 20px;
}

.pms-progress-line.done {
  background: var(--pms-success);
}

/* ── CARDS ────────────────────────────────────── */
.pms-card {
  background: var(--pms-white);
  border-radius: var(--pms-radius);
  box-shadow: var(--pms-shadow);
  padding: 36px 40px;
  border: 1.5px solid var(--pms-border);
  position: relative;
  overflow: hidden;
}

.pms-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pms-purple), var(--pms-teal));
}

.pms-card-success::before {
  background: linear-gradient(90deg, var(--pms-success), var(--pms-teal));
}

.pms-card-header {
  text-align: center;
  margin-bottom: 32px;
}

.pms-card-icon {
  font-size: 48px;
  margin-bottom: 12px;
  display: block;
}

.pms-card-header h2 {
  font-family: var(--pms-font);
  font-size: 26px;
  font-weight: 900;
  color: var(--pms-dark);
  margin: 0 0 8px;
}

.pms-card-header p {
  color: var(--pms-muted);
  margin: 0;
  font-size: 15px;
}

/* ── FORM GRID ────────────────────────────────── */
.pms-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pms-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pms-field-full {
  grid-column: 1 / -1;
}

.pms-field label {
  font-weight: 700;
  font-size: 13px;
  color: var(--pms-text);
  letter-spacing: .3px;
}

.req {
  color: var(--pms-error);
}

.pms-optional {
  color: var(--pms-muted);
  font-weight: 400;
  font-size: 12px;
}

.pms-field input[type="text"],
.pms-field input[type="email"],
.pms-field input[type="tel"],
.pms-field input[type="url"],
.pms-field textarea,
.pms-field select {
  border: 2px solid var(--pms-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--pms-font);
  color: var(--pms-text);
  background: var(--pms-white);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.pms-field input:focus,
.pms-field textarea:focus,
.pms-field select:focus {
  border-color: var(--pms-purple);
  box-shadow: 0 0 0 3px rgba(123,79,224,.12);
}

.pms-select-wrap {
  position: relative;
}

.pms-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pms-muted);
  pointer-events: none;
}

.pms-select-wrap select {
  appearance: none;
  padding-right: 36px;
}

/* ── FILE UPLOAD ──────────────────────────────── */
.pms-file-upload {
  position: relative;
}

.pms-file-upload input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pms-file-label {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px dashed var(--pms-border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  font-size: 14px;
  color: var(--pms-muted);
}

.pms-file-label:hover {
  border-color: var(--pms-purple);
  background: var(--pms-cream);
}

.pms-file-icon { font-size: 20px; }

.pms-file-name {
  font-size: 12px;
  color: var(--pms-purple);
  margin-top: 4px;
  display: block;
}

/* ── ADD-ONS ──────────────────────────────────── */
.pms-addons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pms-addon-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 2px solid var(--pms-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.pms-addon-item:hover {
  border-color: var(--pms-purple);
  background: var(--pms-cream);
}

.pms-addon-item input[type="checkbox"] {
  display: none;
}

.pms-addon-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--pms-border);
  flex-shrink: 0;
  position: relative;
  transition: all .2s;
}

.pms-addon-item input:checked ~ .pms-addon-check {
  background: var(--pms-purple);
  border-color: var(--pms-purple);
}

.pms-addon-item input:checked ~ .pms-addon-check::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: white;
  font-size: 13px;
  font-weight: 800;
}

.pms-addon-item:has(input:checked) {
  border-color: var(--pms-purple);
  background: var(--pms-cream);
}

.pms-addon-info {
  flex: 1;
}

.pms-addon-info strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
}

.pms-addon-info em {
  font-style: normal;
  font-size: 12px;
  color: var(--pms-muted);
}

.pms-addon-price {
  font-weight: 800;
  font-size: 14px;
  color: var(--pms-purple);
}

/* ── COUPON ───────────────────────────────────── */
.pms-coupon-row {
  display: flex;
  gap: 10px;
}

.pms-coupon-row input {
  flex: 1;
  border: 2px solid var(--pms-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--pms-font);
  outline: none;
}

.pms-coupon-row input:focus {
  border-color: var(--pms-purple);
}

.pms-coupon-msg {
  font-size: 13px;
  margin-top: 6px;
  display: block;
}

/* ── BUTTONS ──────────────────────────────────── */
.pms-btn-primary {
  background: linear-gradient(135deg, var(--pms-purple), var(--pms-deep));
  color: white !important;
  border: none;
  border-radius: 50px;
  padding: 15px 36px;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--pms-font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(123,79,224,.3);
}

.pms-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(123,79,224,.4);
}

.pms-btn-secondary {
  background: var(--pms-cream);
  color: var(--pms-purple);
  border: 2px solid var(--pms-purple);
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--pms-font);
  cursor: pointer;
  transition: background .2s;
}

.pms-btn-secondary:hover {
  background: var(--pms-purple);
  color: white;
}

.pms-btn-ghost {
  background: transparent;
  color: var(--pms-muted);
  border: 2px solid var(--pms-border);
  border-radius: 50px;
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--pms-font);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.pms-btn-ghost:hover {
  border-color: var(--pms-purple);
  color: var(--pms-purple);
}

.pms-btn-pay {
  font-size: 17px;
  padding: 17px 40px;
}

.pms-arrow { font-size: 18px; }

.pms-actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.pms-actions-split {
  justify-content: space-between;
  align-items: center;
}

/* ── ORDER SUMMARY ────────────────────────────── */
.pms-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.pms-summary-section {
  background: var(--pms-cream);
  border-radius: 12px;
  padding: 20px;
}

.pms-summary-section h3 {
  font-size: 14px;
  font-weight: 800;
  color: var(--pms-text);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.pms-summary-table {
  width: 100%;
  border-collapse: collapse;
}

.pms-summary-table td {
  padding: 6px 0;
  font-size: 13px;
}

.pms-summary-table td:first-child {
  color: var(--pms-muted);
  width: 45%;
}

.pms-summary-table td:last-child {
  font-weight: 700;
  color: var(--pms-text);
}

/* ── PRICING BOX ──────────────────────────────── */
.pms-pricing-box {
  background: var(--pms-dark);
  border-radius: 16px;
  padding: 24px 28px;
  color: white;
}

.pms-pricing-box h3 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 16px;
  opacity: .7;
}

.pms-pricing-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pms-pricing-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  opacity: .85;
}

.pms-pricing-divider {
  height: 1px;
  background: rgba(255,255,255,.15);
  margin: 4px 0;
}

.pms-pricing-total {
  font-weight: 800;
  font-size: 18px;
  opacity: 1;
  color: white;
}

.pms-pricing-highlight {
  background: var(--pms-purple);
  margin: 8px -28px -8px;
  padding: 14px 28px;
  border-radius: 0 0 12px 12px;
  font-weight: 800;
  font-size: 16px;
  opacity: 1;
}

.pms-pricing-remaining {
  font-size: 13px;
  opacity: .6;
  margin-top: -4px;
}

.pms-green { color: #4ade80 !important; }

/* ── PAYMENT STEP ─────────────────────────────── */
.pms-payment-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--pms-cream);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
  border: 2px solid var(--pms-border);
}

.pms-payment-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pms-lock-icon { font-size: 28px; }

.pms-payment-badge strong {
  display: block;
  font-weight: 800;
  font-size: 15px;
}

.pms-payment-badge em {
  font-style: normal;
  font-size: 12px;
  color: var(--pms-muted);
}

.pms-payment-amount {
  text-align: right;
}

.pms-payment-amount span {
  display: block;
  font-size: 12px;
  color: var(--pms-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.pms-payment-amount strong {
  font-size: 24px;
  font-weight: 900;
  color: var(--pms-purple);
}

.pms-payment-methods {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.pms-method-badge {
  background: var(--pms-cream);
  border: 1.5px solid var(--pms-border);
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pms-text);
}

/* ── SUCCESS STEP ─────────────────────────────── */
.pms-card-success {
  text-align: center;
}

.pms-success-animation {
  margin-bottom: 20px;
}

.pms-success-circle {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--pms-success), var(--pms-teal));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: white;
  margin: 0 auto;
  animation: pms-pop .5s cubic-bezier(.34,1.56,.64,1);
  font-weight: 900;
}

@keyframes pms-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.pms-card-success h2 {
  font-size: 28px;
  font-weight: 900;
  color: var(--pms-dark);
  margin: 0 0 8px;
}

.pms-success-subtitle {
  color: var(--pms-muted);
  font-size: 15px;
  margin-bottom: 28px;
}

.pms-confirmed-details {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.pms-confirmed-item {
  background: var(--pms-cream);
  border-radius: 12px;
  padding: 16px 24px;
  min-width: 140px;
  border: 1.5px solid var(--pms-border);
}

.pms-confirmed-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--pms-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}

.pms-confirmed-item strong {
  font-size: 18px;
  font-weight: 900;
  color: var(--pms-text);
}

.pms-queue-highlight {
  background: linear-gradient(135deg, var(--pms-purple), var(--pms-deep));
  border-color: transparent;
}

.pms-queue-highlight .pms-confirmed-label { color: rgba(255,255,255,.7); }
.pms-queue-highlight strong { color: white; font-size: 28px; }

.pms-confirmation-note {
  background: var(--pms-cream);
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 14px;
  color: var(--pms-text);
  line-height: 1.6;
}

/* ── DASHBOARD ────────────────────────────────── */
.pms-lookup-card {
  background: var(--pms-white);
  border-radius: var(--pms-radius);
  box-shadow: var(--pms-shadow);
  padding: 40px;
  border: 1.5px solid var(--pms-border);
  overflow: hidden;
  position: relative;
  text-align: center;
}

.pms-lookup-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pms-purple), var(--pms-teal));
}

.pms-lookup-fields {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.pms-lookup-fields input {
  flex: 1;
  min-width: 240px;
  border: 2px solid var(--pms-border);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 15px;
  font-family: var(--pms-font);
  outline: none;
  transition: border-color .2s;
}

.pms-lookup-fields input:focus {
  border-color: var(--pms-purple);
}

.pms-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 16px;
}

.pms-dash-header h2 {
  font-size: 22px;
  font-weight: 900;
  color: var(--pms-dark);
  margin: 0;
}

.pms-btn-ghost-sm {
  background: transparent;
  border: 2px solid var(--pms-border);
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--pms-font);
  cursor: pointer;
  color: var(--pms-muted);
  transition: border-color .2s, color .2s;
}

.pms-btn-ghost-sm:hover {
  border-color: var(--pms-purple);
  color: var(--pms-purple);
}

/* Order Cards */
.pms-order-card {
  background: var(--pms-white);
  border-radius: var(--pms-radius);
  border: 1.5px solid var(--pms-border);
  box-shadow: var(--pms-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

.pms-order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--pms-cream);
  border-bottom: 1px solid var(--pms-border);
  flex-wrap: wrap;
  gap: 10px;
}

.pms-order-title { font-weight: 900; font-size: 17px; color: var(--pms-dark); }
.pms-order-id    { font-size: 12px; color: var(--pms-muted); font-weight: 600; margin-top: 2px; }

.pms-status-pill {
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.pms-status-pending              { background: #FEF3C7; color: #D97706; }
.pms-status-in-progress          { background: #DBEAFE; color: #1D4ED8; }
.pms-status-completed            { background: #D1FAE5; color: #059669; }
.pms-status-awaiting-final-payment { background: #FCE7F3; color: #9D174D; }
.pms-status-preview-ready        { background: #EDE9FE; color: #7C3AED; }

.pms-order-card-body {
  padding: 20px 24px;
}

.pms-order-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.pms-meta-item label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--pms-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 4px;
}

.pms-meta-item span {
  font-size: 14px;
  font-weight: 700;
  color: var(--pms-text);
}

.pms-queue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--pms-purple), var(--pms-deep));
  color: white;
  border-radius: 50%;
  font-weight: 900;
  font-size: 14px;
}

.pms-order-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--pms-border);
}

.pms-btn-play {
  background: linear-gradient(135deg, var(--pms-teal), #38A89D);
  color: white !important;
  text-decoration: none;
  border-radius: 50px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 800;
  font-family: var(--pms-font);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 15px rgba(78,205,196,.3);
}

.pms-btn-play:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(78,205,196,.4);
}

.pms-btn-unlock {
  background: linear-gradient(135deg, var(--pms-gold), #E09F1E);
  color: var(--pms-dark) !important;
  text-decoration: none;
  border-radius: 50px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 800;
  font-family: var(--pms-font);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 15px rgba(246,185,59,.3);
  transition: transform .2s;
}

.pms-btn-unlock:hover { transform: translateY(-2px); }

.pms-payment-progress {
  margin-top: 14px;
}

.pms-payment-progress label {
  font-size: 12px;
  font-weight: 700;
  color: var(--pms-muted);
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.pms-progress-bar {
  height: 6px;
  background: var(--pms-border);
  border-radius: 4px;
  overflow: hidden;
}

.pms-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pms-purple), var(--pms-teal));
  border-radius: 4px;
  transition: width .6s ease;
}

/* ── UTILITIES ────────────────────────────────── */
.pms-error-msg {
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  color: var(--pms-error);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 14px;
}

.pms-loading {
  text-align: center;
  padding: 20px;
  color: var(--pms-muted);
}

.pms-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--pms-border);
  border-top-color: var(--pms-purple);
  border-radius: 50%;
  animation: pms-spin 1s linear infinite;
  margin: 0 auto 12px;
}

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

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width: 600px) {
  .pms-card { padding: 24px 20px; }
  .pms-form-grid { grid-template-columns: 1fr; }
  .pms-summary-grid { grid-template-columns: 1fr; }
  .pms-progress-step { font-size: 10px; }
  .pms-step-dot { width: 32px; height: 32px; font-size: 13px; }
  .pms-step-label { display: none; }
  .pms-actions-split { flex-direction: column-reverse; gap: 12px; align-items: stretch; text-align: center; }
  .pms-confirmed-details { flex-direction: column; align-items: center; }
  .pms-payment-summary { flex-direction: column; gap: 12px; text-align: center; }
  .pms-btn-primary, .pms-btn-ghost { width: 100%; justify-content: center; }
}