/* ===================================================================
 * PSD2 Calculator — template-psd2-calculator.php
 * Standalone React microsite styles.
 *
 * The source app was authored against the Tailwind Play CDN, which ships
 * Tailwind's "preflight" base reset. This theme's compiled Tailwind has
 * preflight DISABLED, so the relevant parts of preflight are reproduced
 * here first (at their natural low specificity) so the app renders
 * identically. Everything below the preflight block is the app's own
 * original <style> content, lifted verbatim out of the page.
 * =================================================================== */

/* ── Tailwind preflight subset (matches the CDN behaviour the app expects) ── */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
::before, ::after { --tw-content: ""; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; }
body { margin: 0; line-height: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
p, blockquote, figure, pre, dl, dd, hr { margin: 0; }
a { color: inherit; text-decoration: inherit; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; background-color: transparent; background-image: none; }
:-moz-focusring { outline: auto; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
[hidden] { display: none; }

/* ── WP admin bar: visible for logged-in users; offset the fixed app
 *    header by the bar's height so it isn't covered (WP bumps html down). ── */
body.admin-bar #psd2-calc-root header { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar #psd2-calc-root header { top: 46px !important; }
}

/* ===================================================================
 * App styles (original <style> block)
 * =================================================================== */
* { font-family: 'Poppins', sans-serif; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; background: #ffffff; color: #0a0a0a; min-height: 100vh; }

/* Animations */
@keyframes fade-up { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.animate-fade-up { animation: fade-up 0.55s ease-out forwards; }

/* Forter gradient */
.f-gradient-bg { background: linear-gradient(135deg, #005de8, #2A8BFF); }
.f-gradient-text { background: linear-gradient(135deg, #005de8, #2A8BFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* AI gradient */
.ai-gradient-bg { background: linear-gradient(135deg, #D5C3FD, #E4E6FE); }

/* Pill button */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #005de8, #2A8BFF);
  color: white; font-weight: 600; font-size: 15px;
  padding: 15px 36px; border-radius: 100px; border: none; cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* Outline pill button (for gradient backgrounds) */
.btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: white; font-weight: 600; font-size: 15px;
  padding: 14px 34px; border-radius: 100px; border: 2px solid white; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.btn-outline:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); }

/* Cards */
.card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 32px; }
.card-sm { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 24px; }

/* Eyebrow pill */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: #DCEAFF; color: #005de8;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 100px;
}

/* Quiz option */
.quiz-option {
  width: 100%; text-align: left; padding: 16px 20px; border-radius: 12px;
  transition: all 0.15s ease; cursor: pointer; border: 1.5px solid #e2e8f0;
  background: #fff; color: #5a6478; font-size: 14px; line-height: 1.6;
  font-family: 'Poppins', sans-serif;
}
.quiz-option:hover { border-color: #2A8BFF; background: #DCEAFF; color: #0a0a0a; }
.quiz-option.selected { border-color: #005de8; background: #DCEAFF; color: #0a0a0a; }
.quiz-option.selected .opt-radio { border-color: #005de8; background: #005de8; }

/* Radio dot */
.opt-radio {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #e2e8f0;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}

/* Form inputs */
.f-input {
  width: 100%; border-radius: 8px; padding: 12px 16px; font-family: 'Poppins', sans-serif;
  font-size: 14px; border: 1.5px solid #e2e8f0; background: #f8fafc; color: #0a0a0a;
  transition: border-color 0.15s; outline: none;
}
.f-input:focus { border-color: #005de8; background: #fff; }
.f-input.err { border-color: #ef4444; }
.f-input::placeholder { color: #9ca3af; }
select.f-input { appearance: none; cursor: pointer; }
select.f-input option { background: white; color: #0a0a0a; }

/* Progress bar */
.progress-track { height: 4px; border-radius: 100px; background: #e2e8f0; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, #005de8, #2A8BFF); transition: width 0.5s ease-out; }

/* Stats strip */
.stats-strip { background: linear-gradient(135deg, #005de8, #2A8BFF); }

/* Hero stats — responsive flex layout. Desktop: 3 across with vertical
   dividers. Mobile (<=640px): stacked and centered (incl. the 3rd item),
   with the divider flipping to a horizontal rule between stacked items. */
.psd2-stats { display: flex; flex-wrap: wrap; justify-content: center; }
.psd2-stat {
  flex: 1 1 0; min-width: 160px; text-align: center;
  padding: 12px 28px; position: relative;
}
.psd2-stat:not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 1px; background: rgba(255,255,255,0.2);
}
@media (max-width: 640px) {
  .psd2-stats { flex-direction: column; align-items: center; }
  .psd2-stat { flex: 1 1 auto; width: 100%; max-width: 420px; min-width: 0; padding: 24px 16px; }
  .psd2-stat:not(:first-child)::before {
    left: 50%; top: 0; bottom: auto; transform: translateX(-50%);
    width: 70%; height: 1px;
  }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 3px; }

/* Tooltip */
.tooltip { position: relative; display: inline-block; }
.tooltip-text {
  visibility: hidden; opacity: 0; position: absolute; bottom: 130%; left: 50%;
  transform: translateX(-50%); width: 260px; background: #0a0a0a; color: #9ca3af;
  font-size: 12px; line-height: 1.5; border-radius: 8px; padding: 10px 14px;
  pointer-events: none; transition: opacity 0.2s; z-index: 50;
}
.tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }

/* Level colors */
.lc1 { color: #3B82F6; } .lbg1 { background: rgba(59,130,246,0.1); } .lb1 { border-color: #3B82F6; }
.lc2 { color: #0D9488; } .lbg2 { background: rgba(13,148,136,0.1); } .lb2 { border-color: #0D9488; }
.lc3 { color: #22C55E; } .lbg3 { background: rgba(34,197,94,0.1); } .lb3 { border-color: #22C55E; }
.lc4 { color: #F97316; } .lbg4 { background: rgba(249,115,22,0.1); } .lb4 { border-color: #F97316; }
.lc5 { color: #005de8; } .lbg5 { background: rgba(0,93,232,0.1); } .lb5 { border-color: #005de8; }

details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }

input[type="checkbox"] { accent-color: #005de8; }

.section-alt { background: #DCEAFF; }
.max-content { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) { .max-content { padding: 0 24px; } }

.calc-input {
  border-radius: 6px; padding: 5px 8px; font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 600; border: 1.5px solid #e2e8f0;
  background: #f8fafc; color: #0a0a0a; text-align: right; outline: none; width: 72px;
}
.calc-input:focus { border-color: #005de8; background: #fff; }

/* Quiz slider */
.quiz-slider { width:100%; -webkit-appearance:none; height:6px; border-radius:3px; outline:none; cursor:pointer; transition:opacity 0.2s; }
.quiz-slider::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#005de8; cursor:pointer; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,93,232,0.35); }
.quiz-slider::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:#005de8; cursor:pointer; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,93,232,0.35); }
.quiz-slider:disabled { cursor:not-allowed; }