/* Repagify — Homepage (index.php) */

.rpgfy-gen-screen, .rpgfy-confirm-screen{
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 80px 24px 60px; text-align: center;
}

.rpgfy-req{ color: var(--coral); }

.rpgfy-optional{ font-weight: 400; color: var(--soft); font-size: 11px; }

.rpgfy-mono{ font-family: 'JetBrains Mono', monospace; }

/* non-mono inputs */ input[type=email].rpgfy-input, input.rpgfy-input:not(.rpgfy-mono){ font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 400; }

/* ── PATH TOGGLE ── */ .rpgfy-path-toggle{ display: flex; background: var(--faint2); border: 1.5px solid var(--faint); border-radius: var(--radius-sm); overflow: hidden; }

.rpgfy-path-btn{ flex: 1; padding: 11px 12px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--mid); cursor: pointer; border: none; background: transparent; transition: background .2s, color .2s; border-right: 1.5px solid var(--faint); }

.rpgfy-path-btn:last-child{ border-right: none; }

.rpgfy-path-btn.active{ background: var(--white); color: var(--coral); box-shadow: inset 0 1px 3px rgba(0,0,0,.05); }

/* ── EXPAND ── */ .rpgfy-expand{ overflow: hidden; max-height: 0; opacity: 0; transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease, margin .3s ease; margin-top: 0; }

.rpgfy-expand.open{ max-height: 640px; opacity: 1; margin-top: 14px; }

.rpgfy-expand-inner{ display: flex; flex-direction: column; gap: 14px; }

.rpgfy-divider{ display: flex; align-items: center; gap: 10px; }

.rpgfy-divider-line{ flex: 1; height: 1px; background: var(--faint); }

.rpgfy-divider-label{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #c5c1b9; }

/* ── TONE CHIPS ── */ .rpgfy-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.rpgfy-footnote{ margin-top: 14px; font-size: 12px; color: var(--mid); text-align: center; display: flex; align-items: center; justify-content: center; gap: 5px; }

/* ═══════════════════════════════════════════════════════════ GENERATING ═══════════════════════════════════════════════════════════ */ .rpgfy-gen-label{ font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--mid); background: var(--white); border: 1px solid var(--border); padding: 7px 18px; border-radius: var(--radius-sm); margin-bottom: 44px; }

.rpgfy-gen-label span{ color: var(--coral); }

.rpgfy-spinner{ width: 88px; height: 88px; position: relative; margin: 0 auto 40px; }

.rpgfy-spinner-ring{ width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--coral) 0%, var(--amber) 50%, var(--coral) 100%); animation: rpgfy-rot 1.1s linear infinite; }

.rpgfy-spinner-center{ position: absolute; inset: 9px; background: var(--bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; }

.rpgfy-gen-title{ font-size: 24px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 8px; }

.rpgfy-gen-sub{ font-size: 14px; color: var(--mid); margin-bottom: 40px; }

.rpgfy-gen-list{ display: flex; flex-direction: column; gap: 10px; max-width: 300px; margin: 0 auto; text-align: left; }

.rpgfy-gen-item{ display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--mid); opacity: 0; transition: opacity .35s; }

.rpgfy-gen-item.done{ opacity: 1; color: var(--ink); }

.rpgfy-gen-item.active{ opacity: 1; color: var(--coral); }

.rpgfy-gen-icon{ width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; }

.rpgfy-gen-item:not(.done):not(.active) .rpgfy-gen-icon{ background: var(--faint); color: var(--mid); }

.rpgfy-gen-item.done .rpgfy-gen-icon{ background: var(--green-bg); color: var(--green); }

.rpgfy-gen-item.active .rpgfy-gen-icon{ background: var(--coral-bg); color: var(--coral); animation: rpgfy-rot 1s linear infinite; }

/* ── Activity ticker ── */ .rpgfy-gen-activity{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 28px auto 0;
  padding: 11px 22px;
  max-width: 360px;
  background: var(--faint);
  border: 1px solid var(--border);
  border-radius: 50px;
  min-height: 42px;
}

.rpgfy-gen-activity-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  flex-shrink: 0;
  animation: rpgfy-pulse-dot 1.4s ease-in-out infinite;
}

.rpgfy-gen-activity-text{
  font-size: 13px;
  font-weight: 500;
  color: var(--soft);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -.01em;
  transition: opacity .3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════ CONFIRMATION ═══════════════════════════════════════════════════════════ */ .rpgfy-confirm-icon{ width: 72px; height: 72px; border-radius: 50%; background: var(--green-bg); border: 1.5px solid rgba(22,163,74,.2); display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 28px; animation: rpgfy-pop .5s cubic-bezier(.34,1.56,.64,1) both; }

.rpgfy-confirm-title{ font-size: clamp(26px,4vw,42px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; margin-bottom: 14px; max-width: 520px; }

.rpgfy-confirm-title em{ font-style: normal; color: var(--coral); }

.rpgfy-confirm-sub{ font-size: 16px; color: var(--mid); max-width: 420px; line-height: 1.65; margin-bottom: 40px; }

/* next steps */ .rpgfy-next-steps{ width: 100%; max-width: 400px; }

.rpgfy-next-step{ display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--faint); }

.rpgfy-next-step:last-child{ border-bottom: none; }

.rpgfy-next-num{ width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }

.rpgfy-next-text h4{ font-size: 14px; font-weight: 700; margin-bottom: 2px; letter-spacing: -.01em; }

.rpgfy-next-text p{ font-size: 13px; color: var(--mid); line-height: 1.5; }

.rpgfy-next-text strong{ color: var(--ink); }

.rpgfy-slug-prefix{ padding: 0 8px 0 14px; font-size: 12px; font-weight: 600; color: var(--mid); white-space: nowrap; font-family: var(--mono, monospace); flex-shrink: 0; }

/* ── PAGE NAV (new-design / landing-page cross-links) ── */
.rpgfy-page-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--faint);
  width: 100%;
  max-width: 480px;
}

.rpgfy-page-nav-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--soft);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rpgfy-page-nav-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.rpgfy-page-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--mid);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .18s, color .18s, background .18s;
}

.rpgfy-page-nav-btn:hover {
  border-color: var(--coral);
  color: var(--coral);
  background: var(--coral-bg);
}

@media (max-width: 480px) {
  .rpgfy-page-nav-btns { flex-direction: column; width: 100%; }
  .rpgfy-page-nav-btn  { justify-content: center; }
}

/* ── New Design content input tabs ────────────────────────────────────────── */
.rpgfy-nd-content-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.rpgfy-nd-tab {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--mid);
  cursor: pointer;
  transition: all 0.15s;
}
.rpgfy-nd-tab.active,
.rpgfy-nd-tab:hover {
  border-color: var(--coral);
  color: var(--coral);
  background: rgba(228, 133, 74, 0.06);
}
.rpgfy-nd-tab-panel { display: none; }
.rpgfy-nd-tab-panel.active { display: block; }
.rpgfy-nd-file-wrap { position: relative; }
.rpgfy-nd-file-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
}
.rpgfy-nd-file-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--mid);
  transition: border-color 0.15s, color 0.15s;
}
.rpgfy-nd-file-label:hover {
  border-color: var(--coral);
  color: var(--coral);
}
.rpgfy-nd-file-icon { font-size: 18px; }