/* create-a-kid.css (cleaned)
   Scoped styles for the PresentsRequested builder + checkout
   NO class/selector renames; behavior preserved.
*/

/* ---------- Base / Layout ---------- */
html, body { overflow-x: hidden; }
body, .pr-cak-builder, .pr-cak-builder * { font-family: "Comic Neue", cursive !important; }
.centered-page {
  max-width: 1100px; margin: 0 auto; padding: 24px 16px; box-sizing: border-box;
}
.centered-row { display: flex; justify-content: center; align-items: center; }

.pr-cak-builder {
  width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px 16px;
  box-sizing: border-box; overflow-x: hidden; touch-action: pan-y; overscroll-behavior-x: contain;
}
.pr-cak-builder * { box-sizing: border-box; }

.pr-type-holder,
.pr-cak-preview-wrap,
.pr-cak-controls,
.pr-cak-categories,
.pr-cak-options,
.pr-cak-footer { max-width: 100%; }

/* ---------- Topbar / Logo ---------- */
.pr-cak-topbar { display: flex; align-items: center; justify-content: center; padding: 6px 0 18px; }
.pr-cak-logo { font: 700 24px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0; }

/* ---------- Type selector (Nice / Naughty / Elf) ---------- */
.pr-type-holder { margin-bottom: 16px; }
.pr-type-toggle { display: inline-flex; gap: 8px; background: transparent; padding: 0; border-radius: 0; }
.pr-type-btn {
  appearance: none; border: 3px solid #000; background: #fff; color: #000;
  padding: 8px 16px; border-radius: 0; font: 700 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  cursor: pointer; transition: background .15s, color .15s, transform .02s;
}
.pr-type-btn:hover { transform: translateY(1px); }
.pr-type-btn.active { background: #000; color: #fff; }

/* Step 1: larger buttons */
.pr-cak-builder[data-step="1"] .pr-type-btn {
  font-size: 24px !important; padding: 10px 20px !important;
}

/* ---------- Preview area ---------- */
.pr-cak-preview-wrap {
  display: grid; grid-template-rows: auto auto; justify-items: center; gap: 8px; margin: 8px auto 16px;
}
.pr-cak-preview-label {
  font: 600 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #6b7280;
}
.pr-cak-preview {
  width: min(480px, 100%); height: auto; aspect-ratio: 1 / 1; background: #fff;
  border: 3px solid #000; border-radius: 0; box-shadow: none; overflow: hidden; position: relative;
}
.pr-stack { position: absolute; inset: 0; }
.pr-layer {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  image-rendering: auto; opacity: 0; transition: opacity .15s ease-in;
}
.pr-layer.loaded { opacity: 1; }
.pr-layer.error { opacity: .25; filter: grayscale(100%); }

/* ---------- Categories + Options ---------- */
.pr-cak-controls { margin-top: 8px; }

.pr-cak-categories {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px auto 12px;
}
.pr-cat-btn {
  appearance: none; border: 1px solid #e5e7eb; background: #fff; color: #111827;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  font: 600 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.pr-cat-btn:hover { border-color: #cfd3d9; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.pr-cat-btn.active { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

/* Step 1: category buttons in black-outline scheme */
.pr-cak-builder[data-step="1"] .pr-cat-btn {
  border: 3px solid #000 !important; border-radius: 0 !important; background: #fff !important; color: #000 !important;
  font-weight: 700 !important; font-size: 16px !important; padding: 5px 10px !important; box-shadow: none !important;
}
.pr-cak-builder[data-step="1"] .pr-cat-btn.active {
  background: #000 !important; color: #fff !important; border-color: #000 !important; box-shadow: none !important;
}
.pr-cak-builder[data-step="1"] .pr-cat-btn:hover { transform: translateY(1px); }

/* Options grid — force compact 200px tiles even with 1 item */
.pr-cak-options { margin: 4px auto; }

.pr-options-grid {
  display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; justify-content: flex-start !important;
  gap: 12px !important;
}
.pr-option {
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
  padding: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  transition: border-color .15s, box-shadow .15s, transform .02s;
  flex: 0 0 200px !important; max-width: 200px !important; width: 200px !important;
}
.pr-option:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.pr-option:active { transform: translateY(1px); }
.pr-option.selected { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.18); }

.pr-option img {
  width: 100%; max-width: 180px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; display: block;
}
.pr-option-label {
  margin-top: 6px; font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #374151; text-align: center; word-break: break-word;
}

/* Step 1: option tiles — square, 2px black border, no blue halo */
.pr-cak-builder[data-step="1"] .pr-option { border: 2px solid #000 !important; border-radius: 0 !important; box-shadow: none !important; }
.pr-cak-builder[data-step="1"] .pr-option.selected { border-color: #000 !important; box-shadow: none !important; }

/* ---------- Footer nav (Back / Next) ---------- */
.pr-cak-footer { margin-top: 18px; }
.pr-cak-nav { display: flex !important; align-items: center; width: 100%; gap: 12px; }
#pr-cak-back { margin-right: auto !important; }
#pr-cak-next { margin-left: 0 !important; }

.pr-btn {
  appearance: none; border: 1px solid transparent; border-radius: 10px; padding: 10px 16px;
  font: 700 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s, transform .02s;
}
.pr-btn:active { transform: translateY(1px); }
.pr-btn-primary { background: #2563eb; color: #fff; }
.pr-btn-primary:hover { background: #1e4fd1; }
.pr-btn-muted { background: #f3f4f6; color: #111827; border-color: #e5e7eb; }
.pr-btn-muted:hover { background: #e5e7eb; }

/* Step 1: rectangular, black-outline buttons */
.pr-cak-builder[data-step="1"] #pr-cak-back,
.pr-cak-builder[data-step="1"] #pr-cak-next {
  background: #fff !important; color: #000 !important; border: 3px solid #000 !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 8px 16px !important;
}

/* Step 2/3: text-only nav buttons */
.pr-cak-builder[data-step="2"] #pr-cak-back,
.pr-cak-builder[data-step="2"] #pr-cak-next,
.pr-cak-builder[data-step="3"] #pr-cak-back,
.pr-cak-builder[data-step="3"] #pr-cak-next {
  background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
  font: 800 18px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important; color: #111827 !important;
}
.pr-cak-builder[data-step="2"] #pr-cak-next:hover,
.pr-cak-builder[data-step="2"] #pr-cak-back:hover,
.pr-cak-builder[data-step="3"] #pr-cak-next:hover,
.pr-cak-builder[data-step="3"] #pr-cak-back:hover { text-decoration: underline; }

/* ---------- Step 2 form (Name / About) ---------- */
.pr-form {
  display: grid; gap: 10px; max-width: 720px; margin: 0 auto;
}
.pr-label {
  font: 600 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #374151;
}
.pr-input, .pr-textarea {
  width: 100%; border: 1px solid #d1d5db; border-radius: 10px; padding: 10px 12px;
  font: 400 15px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #fff; transition: border-color .2s, box-shadow .2s;
}
.pr-input:focus, .pr-textarea:focus {
  border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}
.pr-textarea { min-height: 120px; resize: vertical; }
.space-top { margin-top: 6px; }
.pr-counter {
  margin-top: -2px; text-align: left; font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #6b7280;
}
.pr-help-link { display: inline-block; margin-top: 0; color: #1d4ed8; text-decoration: none; font-weight: 600; }
.pr-help-link:hover { text-decoration: underline; }
.pr-prompts { margin-top: 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; }
.pr-prompts h3 { margin: 0 0 8px 0; font: 700 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.pr-prompts ul { margin: 0; padding-left: 18px; }
.pr-prompts li { margin: 4px 0; }

/* Step 2: remove card look for prompts + square inputs */
.pr-cak-builder[data-step="2"] .pr-prompts { background: transparent !important; border: none !important; padding: 0; }
.pr-cak-builder[data-step="2"] .pr-input,
.pr-cak-builder[data-step="2"] .pr-textarea {
  border: 2px solid #000 !important; border-radius: 0 !important; background: #fff;
}

/* ---------- Step 3 summary layout ---------- */
.summary-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.summary-left .pr-cak-preview { width: 100%; max-width: 520px; aspect-ratio: 1 / 1; }
.summary-right { display: grid; gap: 8px; }
.type-row .type-label {
  display: inline-block; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
  font: 700 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  padding: 6px 10px; border-radius: 999px;
}
.name-row { font: 800 22px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin-top: 4px; }
.blurb { font: 400 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #374151; white-space: pre-wrap; }
.summary-right .blurb, .summary-card .blurb { padding-left: 25px; padding-right: 25px; }

/* Centered heading for Nice/Naughty/Elf (no pill) */
.type-heading { text-align: center; font: 800 22px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 6px 0 8px; color: #111827; }

/* Hide legacy 'Preview' label on step 2 */
.pr-cak-builder[data-step="2"] #pr-cak-preview-label { display: none !important; }

/* Summary card used on step 2 */
.summary-card {
  border: 3px solid #000; border-radius: 0; padding: 20px 30px; background: #fff; max-width: 100%;
  box-sizing: border-box; margin-top: -48px;
}

/* ---------- Checkout page form ---------- */
.pr-cak-form {
  max-width: 720px; margin: 20px auto; padding: 20px;
  background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
}
.pr-cak-form label { display: block !important; clear: both !important; font-weight: 600; margin-bottom: 6px; color: #1f2937; }
.pr-cak-form .pr-input,
.pr-cak-form input[type="text"],
.pr-cak-form input[type="email"],
.pr-cak-form select,
.pr-cak-form textarea {
  display: block !important; width: 100% !important; padding: 10px 12px;
  border: 2px solid #000 !important; border-radius: 0 !important; background: #fff !important;
  font-size: 15px; transition: border-color .2s, box-shadow .2s;
}
.pr-cak-form .pr-input:focus,
.pr-cak-form input:focus, .pr-cak-form select:focus, .pr-cak-form textarea:focus {
  border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.2); outline: none;
}
.pr-cak-form .pr-btn {
  background: #fff !important; color: #000 !important; border: 3px solid #000 !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 10px 18px !important; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background-color .2s, box-shadow .2s, transform .02s;
}
.pr-cak-form .pr-btn:hover { text-decoration: underline; }
.pr-cak-errors {
  background: #fee2e2; color: #b91c1c; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-weight: 500;
}
/* Field vertical rhythm */
.pr-cak-form label + * { margin-top: 6px !important; }
.pr-cak-form label { margin-top: 10px !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .summary-two-col { grid-template-columns: 1fr; }
  .summary-left .pr-cak-preview { max-width: 480px; margin: 0 auto; }
  .pr-cak-nav { gap: 10px; }
}
@media (max-width: 600px) {
  .centered-page { padding: 20px 12px; }
  .pr-cak-preview { border-radius: 12px; }
}
@media (max-width: 520px) {
  .pr-option { flex: 0 0 48% !important; max-width: 48% !important; width: 48% !important; }
  .pr-option img { max-width: 100% !important; }
}
@media (max-width: 480px) {
  .centered-page { padding: 16px 12px; }
  .pr-cak-categories { margin-left: 0; margin-right: 0; }
}