/* ── hjaltebyran-guide/assets/guide.css ── */

/* Google Fonts — only loaded if theme hasn't already imported them */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;0,900;1,700;1,800;1,900&family=Barlow:ital,wght@0,700;0,800;0,900;1,700;1,800&family=Hind:wght@400;500;600&display=swap');

/* Inherit from theme CSS vars where possible, fall back to brand values */
.hg-wrap {
  --hg-pink:       var(--theme-primary, #E854B1);
  --hg-pink-dark:  var(--theme-primary-dark, #c93d9a);
  --hg-bg:         var(--theme-bg, #0e0c18);
  --hg-card:       var(--theme-card, #13111f);
  --hg-border:     rgba(255, 255, 255, 0.06);
  --hg-text:       var(--theme-text, #f0edf7);
  --hg-muted:      rgba(240, 237, 247, 0.62);

  font-family:     var(--theme-body-font, 'Hind', sans-serif);
  position:        relative;
  z-index:         9999;
}

/* ── Cursor glow ── */
.hg-glow {
  pointer-events: none;
  position:       fixed;
  width:          700px;
  height:         700px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(232, 84, 177, 0.07) 0%, transparent 68%);
  transform:      translate(-50%, -50%);
  transition:     left 0.7s cubic-bezier(.2, 0, .2, 1),
                  top  0.7s cubic-bezier(.2, 0, .2, 1);
  z-index:        0;
}

/* ── Wizard card ── */
.hg-wizard {
  position:      relative;
  z-index:       9999;
  width:         100%;
  max-width:     680px;
  margin:        0 auto;
  background:    var(--hg-card);
  border:        1px solid var(--hg-border);
  border-radius: 28px;
  overflow:      hidden;
  box-shadow:    0 0 0 1px rgba(232, 84, 177, 0.06),
                 0 40px 80px rgba(0, 0, 0, 0.55);
}

/* ── Shimmer top line ── */
.hg-shimmer {
  height:          2px;
  background:      linear-gradient(90deg,
    transparent 0%, rgba(232, 84, 177, 0) 20%,
    #E854B1 40%, #FBAFA9 50%, #E854B1 60%,
    rgba(232, 84, 177, 0) 80%, transparent 100%);
  background-size: 300% 100%;
  animation:       hg-sweep 2.8s ease-in-out infinite;
}

@keyframes hg-sweep {
  0%   { background-position: 200% 0; opacity: 0.5; }
  50%  { opacity: 1; }
  100% { background-position: -200% 0; opacity: 0.5; }
}

/* ── Progress bar ── */
.hg-prog {
  height:     1px;
  background: rgba(255, 255, 255, 0.04);
}
.hg-prog-fill {
  height:     100%;
  background: var(--hg-pink);
  box-shadow: 0 0 10px rgba(232, 84, 177, 0.5);
  transition: width 0.7s cubic-bezier(.4, 0, .2, 1);
}

/* ── Inner layout: left accent bar + content ── */
.hg-inner {
  display:               grid;
  grid-template-columns: 4px 1fr;
  min-height:            100%;
}
.hg-accent {
  background: linear-gradient(180deg,
    rgba(232, 84, 177, 0.5) 0%,
    rgba(232, 84, 177, 0.05) 100%);
  transition: background 0.6s;
}
.hg-accent--done {
  background: linear-gradient(180deg,
    rgba(232, 84, 177, 0.8) 0%,
    rgba(232, 84, 177, 0.1) 100%);
}

/* ── Header ── */
.hg-head {
  padding:         20px 32px 0;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.hg-back {
  font-size:   0.74rem;
  color:       var(--hg-muted);
  cursor:      pointer;
  border:      none;
  background:  none;
  font-family: 'Hind', sans-serif;
  display:     flex;
  align-items: center;
  gap:         4px;
  transition:  color 0.2s;
  padding:     0;
}
.hg-back:hover { color: var(--hg-text); }

/* ── Step dots ── */
.hg-dots { display: flex; gap: 6px; align-items: center; }
.hg-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0.1);
  transition:    all 0.4s cubic-bezier(.4, 0, .2, 1);
}
.hg-dot--on {
  background:    var(--hg-pink);
  box-shadow:    0 0 8px rgba(232, 84, 177, 0.8);
  width:         22px;
  border-radius: 3px;
}
.hg-dot--done { background: rgba(232, 84, 177, 0.4); }

/* ── Screen / body ── */
.hg-screen { display: none; }
.hg-screen--active { display: block; }

.hg-body {
  padding:   24px 32px 32px;
  position:  relative;
}

/* ── Ghost step number ── */
.hg-ghost {
  position:       absolute;
  top:            -8px;
  right:          24px;
  font-family:    'Barlow Condensed', sans-serif;
  font-size:      8rem;
  font-weight:    900;
  font-style:     italic;
  color:          rgba(232, 84, 177, 0.13);
  line-height:    1;
  pointer-events: none;
  user-select:    none;
  transition:     opacity 0.4s;
}
.hg-ghost--done { color: rgba(232, 84, 177, 0.18); }

/* ── Title ── */
.hg-title {
  font-family:    'Barlow Condensed', var(--theme-heading-font, sans-serif);
  font-size:      2.6rem;
  font-weight:    900;
  font-style:     italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height:    1.0;
  margin-bottom:  10px;
  color:          var(--hg-text);
  position:       relative;
  z-index:        1;
}
.hg-title em  { color: var(--hg-pink); font-style: italic; }
.hg-title span { display: block; font-style: normal; color: rgba(240, 237, 247, 0.85); }

.hg-sub {
  font-size:     0.84rem;
  color:         var(--hg-muted);
  margin-bottom: 26px;
  line-height:   1.55;
  position:      relative;
  z-index:       1;
}

/* ── Choices (button reset + visual styles) ── */
.hg-choices { position: relative; z-index: 1; }
.hg-choice {
  /* Button reset */
  -webkit-appearance: none;
  appearance:     none;
  background:     none;
  border:         none;
  border-radius:  0;
  font:           inherit;
  color:          inherit;
  text-align:     left;
  width:          100%;
  /* Visual */
  display:        flex;
  align-items:    center;
  gap:            16px;
  padding:        16px 0;
  border-bottom:  1px solid var(--hg-border);
  cursor:         pointer;
  position:       relative;
  overflow:       hidden;
  transition:     padding-left 0.22s cubic-bezier(.4, 0, .2, 1);
  text-decoration: none;
}
.hg-choice:first-child { border-top: 1px solid var(--hg-border); }

.hg-choice::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(90deg, rgba(232, 84, 177, 0.09) 0%, transparent 80%);
  transform:  translateX(-102%);
  transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
}
.hg-choice:hover::before { transform: translateX(0); }

.hg-choice::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--hg-pink);
  transition: width 0.32s cubic-bezier(.4, 0, .2, 1);
}
.hg-choice:hover::after { width: 100%; }
.hg-choice:hover { padding-left: 8px; }
.hg-choice:hover .hg-cnum   { color: var(--hg-pink); }
.hg-choice:hover .hg-ctitle { color: #fff; }
.hg-choice:hover .hg-arrow  { opacity: 1; transform: translateX(0); }

/* Focus ring for keyboard navigation */
.hg-choice:focus-visible {
  outline:        2px solid var(--hg-pink);
  outline-offset: -2px;
}

.hg-cnum {
  font-family:    'Barlow Condensed', sans-serif;
  font-size:      0.65rem;
  font-weight:    800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(232, 84, 177, 0.6);
  width:          28px;
  flex-shrink:    0;
  transition:     color 0.2s;
}
.hg-ctext { flex: 1; position: relative; z-index: 1; }
.hg-cnum  { position: relative; z-index: 1; }
.hg-arrow { position: relative; z-index: 1; }
.hg-ctitle {
  font-family:   'Barlow', sans-serif;
  font-size:     1.1rem;
  font-weight:   800;
  color:         rgba(240, 237, 247, 0.9);
  transition:    color 0.2s;
  line-height:   1.2;
  margin-bottom: 2px;
}
.hg-cdesc { font-size: 0.77rem; color: rgba(240, 237, 247, 0.65); }
.hg-arrow {
  font-size:   1.1rem;
  color:       var(--hg-pink);
  opacity:     0;
  transform:   translateX(-8px);
  transition:  all 0.22s cubic-bezier(.4, 0, .2, 1);
  position:    relative;
  z-index:     1;
  flex-shrink: 0;
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
}

/* ── Service grid ── */
.hg-svc-grid {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  border:        1px solid var(--hg-border);
  border-radius: 16px;
  overflow:      hidden;
  position:      relative;
  z-index:       1;
}
.hg-svc {
  padding:         14px 18px;
  border-right:    1px solid var(--hg-border);
  border-bottom:   1px solid var(--hg-border);
  cursor:          pointer;
  transition:      background 0.18s, color 0.18s;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  font-family:     'Barlow', sans-serif;
  font-size:       0.88rem;
  font-weight:     700;
  color:           rgba(240, 237, 247, 0.75);
  background:      none;
  border-top:      none;
  border-left:     none;
  text-align:      left;
}
.hg-svc:nth-child(even)      { border-right: none; }
.hg-svc:nth-last-child(-n+2) { border-bottom: none; }
.hg-svc--wide {
  grid-column:  span 2;
  border-right: none;
  font-family:  'Hind', sans-serif;
  font-weight:  500;
  font-size:    0.78rem;
  justify-content: center;
  color:        var(--hg-muted);
  border-style: dashed;
}
.hg-svc--wide:last-child { border-bottom: none; }
.hg-svc:hover,
.hg-svc--sel { background: rgba(232, 84, 177, 0.1); color: #fff; }
.hg-svc--sel .hg-chk { opacity: 1; transform: scale(1); }
.hg-svc:focus-visible {
  outline:        2px solid var(--hg-pink);
  outline-offset: -2px;
}


.hg-chk {
  width:        17px;
  height:       17px;
  border-radius: 50%;
  background:   var(--hg-pink);
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-size:    0.6rem;
  color:        #fff;
  font-weight:  900;
  opacity:      0;
  transform:    scale(0.3);
  transition:   all 0.22s cubic-bezier(.4, 0, .2, 1);
  flex-shrink:  0;
}

.hg-svc-loading {
  grid-column: span 2;
  padding:     20px;
  text-align:  center;
  color:       var(--hg-muted);
  font-size:   0.82rem;
}

/* ── CTA button ── */
.hg-cta {
  display:        block;
  width:          100%;
  margin-top:     24px;
  padding:        15px 24px;
  background:     var(--hg-pink);
  color:          #fff;
  font-family:    'Barlow Condensed', sans-serif;
  font-size:      1rem;
  font-weight:    800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border:         none;
  border-radius:  12px;
  cursor:         pointer;
  position:       relative;
  overflow:       hidden;
  transition:     all 0.25s cubic-bezier(.4, 0, .2, 1);
  box-shadow:     0 4px 28px rgba(232, 84, 177, 0.28),
                  inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-decoration: none;
  text-align:     center;
}
.hg-cta::after {
  content:    '';
  position:   absolute;
  top:        0;
  left:       -100%;
  width:      50%;
  height:     100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transition: left 0.55s;
}
.hg-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(232, 84, 177, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.hg-cta:hover::after { left: 150%; }
.hg-cta:active { transform: translateY(0); }
.hg-cta:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Form fields ── */
.hg-form { position: relative; z-index: 1; }
.hg-form input[type="text"],
.hg-form input[type="email"],
.hg-form textarea {
  display:       block;
  width:         100%;
  margin-top:    12px;
  padding:       12px 16px;
  background:    rgba(255, 255, 255, 0.04);
  border:        1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color:         var(--hg-text);
  font-family:   'Hind', sans-serif;
  font-size:     0.9rem;
  outline:       none;
  transition:    border-color 0.2s;
}
.hg-form input:focus,
.hg-form textarea:focus { border-color: rgba(232, 84, 177, 0.5); }
.hg-form input::placeholder,
.hg-form textarea::placeholder { color: var(--hg-muted); }
.hg-form textarea { resize: vertical; min-height: 88px; }

.hg-form-error {
  margin-top:   10px;
  padding:      10px 14px;
  background:   rgba(255, 60, 60, 0.1);
  border:       1px solid rgba(255, 60, 60, 0.25);
  border-radius: 8px;
  font-size:    0.8rem;
  color:        #ff9090;
}

/* ── Honeypot (off-screen hidden) ── */
.hg-hp {
  position:   absolute;
  left:       -9999px;
  opacity:    0;
  height:     0;
  width:      0;
  overflow:   hidden;
}

/* ── Outcome row ── */
.hg-outcome-row {
  display:       grid;
  grid-template-columns: repeat(3, 1fr);
  border:        1px solid var(--hg-border);
  border-radius: 14px;
  overflow:      hidden;
  position:      relative;
  z-index:       1;
  margin-bottom: 4px;
}
.hg-ocell {
  padding:    15px 10px;
  text-align: center;
  border-right: 1px solid var(--hg-border);
  transition: background 0.2s;
}
.hg-ocell:last-child { border-right: none; }
.hg-ocell:hover { background: rgba(232, 84, 177, 0.06); }
.hg-ocell strong {
  display:        block;
  color:          #fff;
  font-family:    'Barlow Condensed', sans-serif;
  font-size:      0.9rem;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom:  3px;
}
.hg-ocell span { font-size: 0.7rem; color: var(--hg-muted); }

/* ── Portal note ── */
.hg-pnote {
  margin-top:    14px;
  padding:       12px 16px;
  background:    rgba(255, 255, 255, 0.02);
  border:        1px solid var(--hg-border);
  border-radius: 10px;
  font-size:     0.76rem;
  color:         var(--hg-muted);
  line-height:   1.5;
  position:      relative;
  z-index:       1;
}
.hg-pnote strong { color: rgba(240, 237, 247, 0.6); }

/* ── Mail escape link ── */
.hg-escape {
  text-align: center;
  margin-top: 18px;
  position:   relative;
  z-index:    1;
}
.hg-escape a {
  font-size:     0.8rem;
  color:         rgba(240, 237, 247, 0.55);
  text-decoration: none;
  transition:    color 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 2px;
}
.hg-escape a:hover {
  color:         var(--hg-pink);
  border-bottom-color: rgba(232, 84, 177, 0.4);
}

/* ── Success screen ── */
.hg-body--success { text-align: center; }

/* ── Entry animation ── */
@keyframes hg-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hg-animate {
  animation: hg-step-in 0.38s cubic-bezier(.4, 0, .2, 1) both;
}
.hg-animate:nth-child(2) { animation-delay: 0.04s; }
.hg-animate:nth-child(3) { animation-delay: 0.08s; }
.hg-animate:nth-child(4) { animation-delay: 0.12s; }
.hg-animate:nth-child(5) { animation-delay: 0.16s; }
.hg-animate:nth-child(6) { animation-delay: 0.20s; }

/* ── Responsive ── */
@media (max-width: 400px) {
  .hg-title { font-size: 2rem; }
  .hg-body  { padding: 20px 20px 28px; }
  .hg-head  { padding: 16px 20px 0; }
  .hg-svc-grid { grid-template-columns: 1fr; }
  .hg-svc:nth-child(even)       { border-right: 1px solid var(--hg-border); }
  .hg-svc--wide                 { grid-column: span 1; }
  .hg-outcome-row { grid-template-columns: 1fr; }
  .hg-ocell { border-right: none; border-bottom: 1px solid var(--hg-border); }
  .hg-ocell:last-child { border-bottom: none; }
}