.customer-journey { border-top:1px solid var(--border-hair); }
.customer-journey [hidden] { display:none!important; }
.customer-journey__heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.customer-journey h2 { font-size:1.2rem; margin:0; }
.customer-journey h3 { font-size:1rem; margin:0 0 .5rem; }
.customer-journey p { color:var(--gray-600); font-size:.9rem; }
.customer-journey__summary { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1.5rem; padding:1.5rem 0; border-bottom:1px solid var(--border-hair); }
.customer-journey__summary dt { font-size:.75rem; color:var(--gray-600); margin-bottom:.4rem; }
.customer-journey__summary dd { margin:0; font-size:1rem; color:var(--ink); overflow-wrap:anywhere; }
.customer-journey__states { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.customer-journey__badge { font-size:.76rem; line-height:1.4; padding:.35rem .6rem; border:1px solid var(--border); border-radius:4px; color:var(--gray-600); }
.customer-journey__badge--done { color:#70deb2; border-color:rgba(112,222,178,.3); background:rgba(112,222,178,.07); }
.customer-journey__action { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; padding:1.25rem 0; }
.customer-journey__action p { margin:.35rem 0 0; max-width:65ch; }
.customer-journey details { padding:1rem 0; border-top:1px solid var(--border-hair); }
.customer-journey summary { cursor:pointer; font-weight:600; font-size:.95rem; min-height:32px; }
.customer-journey__steps { list-style:none; padding:0; margin:1rem 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem 1.5rem; }
.customer-journey__steps li { display:grid; grid-template-columns:28px 1fr; gap:.65rem; align-items:start; }
.customer-journey__step-num { width:28px; height:28px; border:1px solid var(--border); border-radius:50%; display:grid; place-items:center; color:var(--accent-400); font-size:.75rem; }
.customer-journey__steps h3 { font-size:.86rem; line-height:1.4; margin:.15rem 0 .35rem; }
.customer-journey__steps p { font-size:.77rem; line-height:1.5; margin:0; }
.customer-journey__appointment { display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--border-hair); padding:1rem 0; }
.customer-journey__appointment p { margin:0; font-size:.8rem; }
.customer-journey__booking { display:grid; grid-template-columns:1fr 1fr auto; gap:1rem; align-items:end; padding:1rem 0; }
.customer-journey label { display:grid; gap:.4rem; color:var(--gray-600); font-size:.8rem; }
.customer-journey input,.customer-journey select { min-height:44px; width:100%; min-width:0; border:1px solid var(--border); border-radius:4px; color:var(--ink); background:var(--surface-2); padding:.65rem; font:inherit; color-scheme:dark; }
.customer-journey__booking button { min-height:44px; }
.customer-journey__booking-note { grid-column:1/-1; font-size:.75rem!important; margin:0; }
.customer-journey__files { list-style:none; padding:0; margin:1rem 0 0; }
.customer-journey__files li { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--border-hair); }
.customer-journey__files span { overflow-wrap:anywhere; font-size:.85rem; }
.customer-journey__files button { flex-shrink:0; }
.customer-journey :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:700px) { .customer-journey__summary { grid-template-columns:1fr 1fr; gap:1rem; } .customer-journey__summary > div:first-child { grid-column:1/-1; } .customer-journey__steps { grid-template-columns:1fr 1fr; } .customer-journey__booking { grid-template-columns:1fr 1fr; } .customer-journey__booking button { grid-column:1/-1; } .customer-journey__action { align-items:flex-start; flex-direction:column; } }
@media(max-width:420px) { .customer-journey__steps,.customer-journey__booking { grid-template-columns:1fr; } .customer-journey__heading { align-items:flex-start; } .customer-journey__heading button { font-size:.76rem; padding:.5rem; } .customer-journey__appointment { align-items:flex-start; flex-direction:column; } }