/* static/css/kk-steps.css */
:root{
  --green:#16A34A;   /* completed */
  --gold:#FFC107;    /* current */
  --sindoor:#E34234; /* upcoming labels */
  --ivory:#FFF8F2;
  --text:#333333;
  --line:#f0dfd4;
  --border:#efd7c9;
  --cta:#F78CA0;
}

/* Page frame */
.wrap{max-width:1100px;margin:32px auto;padding:0 16px}
body{background:var(--ivory)}

/* Card */
.card{margin-top:24px;background:#fff;border:1px solid var(--border);
      border-radius:18px;padding:20px;box-shadow:0 14px 36px rgba(0,0,0,.06)}
.title{margin-top:28px;margin-bottom:18px;font-weight:800;font-size:24px;color:var(--sindoor)}

/* Grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media (max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}

/* Form fields */
.mb-3 label{font-size:13px;font-weight:600;color:#374151;margin:6px 0;display:block}
.mb-3 input[type="text"], .mb-3 input[type="email"], .mb-3 input[type="tel"], .mb-3 input[type="date"], .mb-3 select{
  width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff;font-size:14px;
  outline:none;transition:border .15s, box-shadow .15s;margin-bottom:6px;
}
.mb-3 input:focus, .mb-3 select:focus{border-color:#cab6ff;box-shadow:0 0 0 4px #f1ecff}

/* Actions */
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:28px}
.btn{padding:10px 14px;border-radius:12px;border:1px solid #f4c7cf;background:#fff;cursor:pointer;font-weight:700;color:var(--sindoor)}
.btn.primary{background:var(--cta);border-color:var(--cta);color:#fff}

/* ==================================================================
   PILL-STYLE, CLICKABLE BREADCRUMBS (used by _breadcrumbs_steps.html)
   ================================================================== */
nav.kk-breadcrumbs{margin-bottom:1rem}

/* Normalize UL/LI within the breadcrumb nav so other global styles don't interfere */
nav.kk-breadcrumbs ul{margin:0;padding:0;list-style:none}
nav.kk-breadcrumbs li{margin:0;padding:0}

/* Horizontal layout */
nav.kk-breadcrumbs .kk-bc-list{
  display:flex;                 /* row */
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
}

/* Arrow separators between items */
nav.kk-breadcrumbs .kk-bc-list > li{
  display:inline-flex;
  align-items:center;
}
nav.kk-breadcrumbs .kk-bc-list > li + li::before{
  content:"›";                  /* swap to "→" if you prefer */
  display:inline-block;
  margin:0 .25rem;
  opacity:.6;
  font-weight:700;
  transform:translateY(-1px);
}

/* Pills (buttons) */
.kk-bc-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  border:1px solid #e5e7eb;     /* light gray border */
  padding:.375rem .6rem;
  border-radius:999px;          /* pill shape */
  color:#374151;                /* gray-700 default */
  background:#fff;
  font-size:.9rem;
  transition:background .2s, border-color .2s, color .2s;
}
.kk-bc-pill.is-clickable:hover{background:#f3f4f6}

/* Step index bubble */
.kk-bc-index{
  display:inline-flex;
  width:1.5rem;height:1.5rem;
  align-items:center;justify-content:center;
  border-radius:50%;
  font-weight:700;
  background:#e5e7eb;           /* default grey circle */
  color:#111827;
  font-size:.85rem;
}

/* Completed → green */
.kk-bc-pill.is-done{
  color:var(--green);
  border-color:#BBF7D0;
  background:#F0FDF4;
}
.kk-bc-pill.is-done .kk-bc-index{
  background:var(--green);
  color:#fff;
}

/* Current → gold */
.kk-bc-pill.is-current{
  color:#B45309;
  border-color:#FDE68A;
  background:#FFFBEB;
}
.kk-bc-pill.is-current .kk-bc-index{
  background:var(--gold);
  color:#111827;
}

/* Upcoming → sindoor labels */
.kk-bc-pill:not(.is-done):not(.is-current){color:var(--sindoor)}

/* Responsive tweaks */
@media (max-width:720px){
  nav.kk-breadcrumbs .kk-bc-list{gap:.4rem}
  .kk-bc-pill{font-size:.85rem;padding:.3rem .5rem}
  .kk-bc-index{width:1.35rem;height:1.35rem;font-size:.8rem}
}

/* ==================================================================
   LEGACY DOT/LABEL BREADCRUMBS (kept for older templates)
   ================================================================== */
.steps{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:14px;position:relative;align-items:center
}
.steps::before{
  content:"";position:absolute;left:0;right:0;top:26px;height:4px;
  background:var(--line);z-index:0;border-radius:10px
}
.step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.dot{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#fff;background:#d9d9d9;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.label{font-size:12px;font-weight:600;color:var(--sindoor);max-width:160px}

/* Color rules (legacy) */
.step.completed .dot{background:var(--green)}
.step.current .dot{background:var(--gold);color:#7a5200}
.step.completed .label{color:var(--green)}
.step.current .label{color:var(--gold)}
/* Upcoming labels remain sindoor */

/* Small screens: hide line (legacy) */
@media (max-width:900px){
  .steps{grid-template-columns:repeat(3,1fr);row-gap:18px}
  .steps::before{display:none}
}