/* =====================================================================
   StraightResume — UI Polish  (loaded last, matches site blue theme)
   ---------------------------------------------------------------------
   Attractive, cohesive UI/UX for: template gallery cards, buttons,
   the multi-step form, and the preview page. Uses the theme tokens
   from style.css (--b600 blue, grays, radii, shadows). Fully responsive
   for desktop / tablet / mobile.
===================================================================== */

/* ── SHARED BUTTON SYSTEM ───────────────────────────────────────── */
.btn,
.btn.btn-primary,
.btn.btn-ghost,
.btn-xl,
.btn-download,
.add-btn {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: .1px;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .2s ease;
}

/* primary — blue gradient with a soft shine sweep on hover */
.btn.btn-primary,
.btn-xl,
.btn-download {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--b600), var(--b500)) !important;
  color: #fff !important;
  border: none;
  border-radius: var(--r12);
  box-shadow: 0 4px 14px rgba(37, 99, 235, .30);
}
.btn.btn-primary::after,
.btn-xl::after,
.btn-download::after {
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn.btn-primary:hover,
.btn-xl:hover,
.btn-download:hover {
  background: linear-gradient(135deg, var(--b700), var(--b600)) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37, 99, 235, .42);
}
.btn.btn-primary:hover::after,
.btn-xl:hover::after,
.btn-download:hover::after { left: 150%; }
.btn.btn-primary:active,
.btn-xl:active,
.btn-download:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(37, 99, 235, .30); }

/* ghost / secondary */
.btn.btn-ghost {
  background: var(--g100);
  color: var(--g600);
  border: 1.5px solid var(--g200);
  border-radius: var(--r12);
}
.btn.btn-ghost:hover {
  background: #fff;
  color: var(--b700);
  border-color: var(--b300);
  box-shadow: 0 3px 10px rgba(37, 99, 235, .10);
  transform: translateY(-1px);
}

/* the pulsing download CTA keeps its pulse but gets the theme treatment */
.pulse-btn { box-shadow: 0 8px 24px rgba(37, 99, 235, .35); }
.price-badge { background: var(--green); box-shadow: 0 2px 8px rgba(16, 185, 129, .35); }

/* add-item buttons (dashed → lively) */
.add-btn {
  border: 1.5px dashed var(--b300);
  background: linear-gradient(135deg, var(--b50), #fff);
  color: var(--b700);
  border-radius: var(--r12);
}
.add-btn:hover {
  border-style: solid;
  border-color: var(--b500);
  background: linear-gradient(135deg, var(--b100), var(--b50));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, .16);
}

/* ── MULTI-STEP FORM ────────────────────────────────────────────── */
.form-section { margin-top: 8px; }

.section-header {
  background: linear-gradient(135deg, var(--b50) 0%, #eef4ff 55%, var(--b100) 100%);
  border: 1px solid var(--b200);
  border-radius: var(--r16);
  box-shadow: 0 2px 10px rgba(37, 99, 235, .06);
  padding: 20px 22px;
  margin-bottom: 26px;
}
.section-icon {
  background: linear-gradient(135deg, var(--b600), var(--b400));
  box-shadow: 0 6px 16px rgba(37, 99, 235, .30);
}
.section-header h2 { color: var(--g900); letter-spacing: -.3px; }
.section-header p { color: var(--g500); }

/* inputs */
.field-group label {
  color: var(--g700);
  font-weight: 600;
  font-size: .82rem;
}
.field-group .req { color: var(--red); }
.field-group input,
.field-group select,
.field-group textarea {
  border: 1.5px solid var(--g200);
  border-radius: var(--r12);
  background: #fff;
  padding: 12px 14px;
  font-size: .9rem;
  color: var(--g800);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field-group input::placeholder,
.field-group textarea::placeholder { color: var(--g400); }
.field-group input:hover,
.field-group select:hover,
.field-group textarea:hover { border-color: var(--g300); }
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  border-color: var(--b500);
  box-shadow: 0 0 0 4px var(--b100);
  outline: none;
  background: #fff;
}

/* item cards inside repeatable sections (experience/education blocks) */
.dynamic-item,
.repeat-item,
.exp-block,
.item-card {
  border: 1px solid var(--g200);
  border-radius: var(--r16);
  background: #fff;
  box-shadow: var(--s1);
}

/* sticky bottom nav */
.form-nav {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--g200);
  box-shadow: 0 -6px 22px rgba(37, 99, 235, .08);
}

/* ── TEMPLATE GALLERY ───────────────────────────────────────────── */
.templates-page .page-header h1 {
  letter-spacing: -.5px;
  color: var(--g900);
}

.template-card {
  border: 1.5px solid var(--g200);
  border-radius: var(--r16);
  background: #fff;
  box-shadow: var(--s1);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s ease, border-color .2s ease;
}
.template-card:hover {
  transform: translateY(-5px);
  border-color: var(--b300);
  box-shadow: var(--s3);
}
.template-card.selected {
  border-color: var(--b600);
  box-shadow: 0 0 0 3px var(--b100), var(--s3);
}

/* the preview area = a soft gray "mat" holding a white A4 page that
   the scaler shrinks to fit. The page gets a shadow so the whitespace
   below the content reads as a real document, not an empty card. */
.template-preview {
  height: 360px !important;
  background: var(--g100) !important;
  padding: 18px 18px 0 !important;
  overflow: hidden;
  position: relative;
  display: block !important;
  border-bottom: 1px solid var(--g200);
}
.template-preview .sr-scale-stage { width: 100%; height: 100%; }
.template-preview .sr-scale-doc {
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .08);
}
/* fade the clipped bottom into the gray mat (override the white fade) */
.template-preview::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 78px;
  background: linear-gradient(to bottom, rgba(241, 245, 249, 0), var(--g100) 82%) !important;
  pointer-events: none;
  z-index: 2;
}

/* badges */
.template-badge {
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  font-weight: 700;
  letter-spacing: .2px;
}

/* info block */
.template-info h3 { color: var(--g900); letter-spacing: -.2px; }
.template-info p { color: var(--g500); }
.template-tags span {
  background: var(--b50);
  color: var(--b700);
  border: 1px solid var(--b200);
  font-weight: 600;
}

/* selected CTA bar */
.template-cta {
  background: linear-gradient(135deg, var(--b50), #eef4ff);
  border: 1px solid var(--b200);
  border-radius: var(--r16);
  box-shadow: 0 4px 16px rgba(37, 99, 235, .10);
}
.selected-info i { color: var(--b600); }

/* ── PREVIEW PAGE ───────────────────────────────────────────────── */
.preview-page { max-width: 900px; }
.preview-toolbar {
  border: 1px solid var(--g200);
  border-radius: var(--r16);
  box-shadow: var(--s2);
}
.preview-container {
  padding: 22px 0 !important;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(37, 99, 235, .05), transparent 60%);
  border-radius: var(--r16);
}
.preview-paper {
  box-shadow: 0 12px 40px rgba(15, 23, 42, .14), 0 3px 12px rgba(15, 23, 42, .06) !important;
  border: 1px solid var(--g200) !important;
}
.download-cta-bar {
  background: linear-gradient(135deg, var(--b50), #eef4ff) !important;
  border: 1px solid var(--b200) !important;
  border-radius: var(--r16);
  box-shadow: var(--s2);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .template-preview { height: 340px !important; }
}
@media (max-width: 768px) {
  .templates-grid { gap: 20px !important; }
  .template-preview { height: 320px !important; padding: 14px 14px 0 !important; }
  .section-header { padding: 16px 16px; margin-bottom: 20px; }
  .section-header h2 { font-size: 1.15rem; }
  .field-group input,
  .field-group select,
  .field-group textarea { padding: 11px 13px; font-size: .88rem; }
  .form-nav { padding: 12px 16px; }
}
@media (max-width: 480px) {
  .template-preview { height: 300px !important; padding: 12px 12px 0 !important; }
  .template-info { padding: 14px 14px; }
  .btn.btn-primary,
  .btn.btn-ghost,
  .add-btn { border-radius: 10px; }
}

/* =====================================================================
   RESUME-FLOW: navigation + action bars + button sizing (authoritative)
   Fixes: oversized / full-width stacked buttons on scaled displays,
   and adds clear navigation so the user is never stranded.
   Loaded last → wins the cascade. Uses !important only on the
   layout-critical props that the older responsive rules fight over.
===================================================================== */

/* ── Top navigation on the builder pages (main.php) ─────────────── */
.flow-nav { display: flex; align-items: center; gap: 20px; }
.flow-nav a {
  font-size: .9rem; font-weight: 600; color: var(--g700);
  text-decoration: none; padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.flow-nav a:hover { color: var(--b600); border-bottom-color: var(--b600); }
.flow-nav a.flow-nav-cta {
  color: #fff; background: linear-gradient(135deg, var(--b600), var(--b500));
  padding: 8px 16px; border-radius: 10px; border-bottom: none;
  box-shadow: 0 4px 12px rgba(37,99,235,.28);
}
.flow-nav a.flow-nav-cta:hover { transform: translateY(-1px); color: #fff; }
.flow-nav-badge {
  font-size: .78rem; color: #64748b; font-weight: 500;
  padding-left: 12px; border-left: 1px solid var(--g200);
}

/* ── "Back" affordance on the templates page ────────────────────── */
.flow-back-row { margin-bottom: 16px; }
.flow-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 600; color: var(--g600);
  text-decoration: none; background: var(--g100);
  border: 1.5px solid var(--g200); padding: 8px 16px; border-radius: 10px;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.flow-back:hover { color: var(--b700); background: #fff; border-color: var(--b200); transform: translateX(-3px); }

/* ── Sensible, consistent button sizing across the flow ─────────── */
.preview-toolbar .btn,
.template-cta .btn-xl,
.download-cta-bar .btn-download,
.download-cta-bar .btn-xl {
  width: auto !important;
  border-radius: 10px !important;
  font-size: .9rem !important;
  white-space: nowrap;
  justify-content: center;
}
.preview-toolbar .btn.btn-sm      { padding: 9px 16px !important; font-size: .85rem !important; }
.preview-toolbar .btn.btn-download{ padding: 10px 20px !important; }
.template-cta .btn-xl             { padding: 11px 26px !important; }
.download-cta-bar .btn-download,
.download-cta-bar .btn-xl         { padding: 12px 24px !important; font-size: .95rem !important; }

/* ── Horizontal action bars on desktop / tablet ─────────────────── */
.preview-toolbar {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  justify-content: space-between !important; align-items: center !important;
  gap: 12px !important; padding: 14px 18px !important;
}
.toolbar-left, .toolbar-right {
  display: flex !important; flex-direction: row !important; align-items: center !important;
  width: auto !important; gap: 10px !important; flex-wrap: wrap;
}
.template-cta {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  justify-content: space-between !important; align-items: center !important;
  gap: 18px !important; padding: 18px 26px !important;
}
.download-cta-bar {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  justify-content: space-between !important; align-items: center !important;
  gap: 16px !important; padding: 18px 24px !important;
}

/* ── One clean mobile breakpoint (comfortable, not oversized) ───── */
@media (max-width: 700px) {
  .flow-nav { gap: 14px; }
  .flow-nav-badge { display: none; }

  .preview-toolbar { flex-direction: column !important; align-items: stretch !important; }
  .toolbar-left, .toolbar-right {
    width: 100% !important; flex-direction: column !important;
    align-items: stretch !important; gap: 8px !important;
  }
  .preview-toolbar .btn { width: 100% !important; padding: 11px 16px !important; font-size: .9rem !important; }

  .template-cta { flex-direction: column !important; align-items: stretch !important; text-align: center; }
  .template-cta .btn-xl { width: 100% !important; padding: 12px 18px !important; }

  .download-cta-bar { flex-direction: column-reverse !important; align-items: stretch !important; text-align: center; }
  .download-cta-bar .btn-download,
  .download-cta-bar .btn-xl { width: 100% !important; padding: 12px 18px !important; }
  .cta-left { justify-content: center; }
  .btn-paypal { display: none !important; }
}

/* ── Builder-flow nav: collapse gracefully on small screens ─────── */
/* Tablet: drop the secure badge so the links still fit one row.     */
@media (max-width: 860px) {
  .flow-nav-badge { display: none !important; }
  .flow-nav { gap: 16px !important; }
}
/* Mobile: hide the link cluster entirely — it overflowed the bar.   */
/* The logo still links Home, and pages keep their own Back button,  */
/* so navigation is preserved without a cramped/clipped nav.         */
@media (max-width: 640px) {
  .flow-nav { display: none !important; }
  .nav .nav-inner { justify-content: flex-start; }
}

/* ── Resume form: edit mode + work-experience timeline errors ───────── */
.progress-steps.ps-clickable .ps { cursor: pointer; }
.progress-steps.ps-clickable .ps:hover { color: #1d4ed8; }
.ps.current { color: #2563eb; border-bottom-color: #2563eb; }
.edit-mode-note {
  max-width: 812px; margin: 12px auto 0; padding: 10px 14px;
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a;
  border-radius: 10px; font-size: .86rem; line-height: 1.5;
}
.edit-mode-note i { margin-right: 6px; }
.timeline-errors {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 10px;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: .87rem; line-height: 1.5;
}
.timeline-errors ul { margin: 6px 0 4px 18px; padding: 0; }
.timeline-errors li { margin: 2px 0; }
.timeline-errors small { color: #7f1d1d; opacity: .85; }
#btnSaveEdit { margin-left: auto; }
@media (max-width: 600px) {
  .edit-mode-note { margin: 10px 16px 0; }
  #btnSaveEdit { margin-left: 0; }
}