/*
 * eDetal request wizard (T11): layout of the three-step create-request page.
 *
 * Only what components.css does not already provide: part cards, field grids, the city combobox, the
 * published screen. Component look (buttons, fields, notes, steps, pills) comes from components.css; tokens from
 * tokens.css. Loaded on the wizard route only (functions.php). Class names are prefixed "ed-".
 */

/* The "hidden" attribute must win over display rules of components (.ed-col, .ed-row, ...). */
.ed-wizard [hidden]{display:none!important}

.ed-wizard{padding-bottom:var(--s-12)}
.ed-wizard__head{margin:var(--s-2) 0 var(--s-6);gap:var(--s-3)}
.ed-wizard .ed-steps{margin-bottom:var(--s-6)}
.ed-wizard :focus-visible{outline:2px solid var(--ed-action);outline-offset:2px;box-shadow:0 0 0 5px rgba(216,242,124,.85);border-radius:6px}
.ed-wizard [data-ap-title]:focus,.ed-wizard [data-ap-errsum]:focus,.ed-wizard #ap-pub-title:focus{outline:none}
.ed-wizard [data-ap-errsum]:focus-visible{outline:2px solid var(--ed-err);outline-offset:2px;box-shadow:none}

/* part card */
.ed-part{background:var(--ed-surface);border:1px solid var(--ed-border);border-radius:var(--r-lg)}
.ed-part.has-err{border-color:var(--ed-err-line)}
.ed-part-hd{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) 20px;border-bottom:1px solid var(--ed-border)}
.ed-part-bd{padding:20px;display:flex;flex-direction:column;gap:var(--s-4)}
.ed-more{border-top:1px dashed var(--ed-border);padding-top:var(--s-4)}
.ed-wizard__more{margin-top:var(--s-4)}
.ed-wizard__more-btn{padding:0;text-align:left;white-space:normal}
.ed-wizard__more-btn .ed-ic{transition:transform var(--dur) var(--ease)}
.ed-wizard__more-btn.is-open .ed-ic{transform:rotate(180deg)}
.ed-f-grid{display:grid;grid-template-columns:2fr 1.2fr .8fr;gap:var(--s-4)}
.ed-f-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.ed-f-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.ed-wizard__suggest{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:0;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--ed-lime-soft);border:1px solid #C6E37A;font-size:14px}
.ed-wizard__suggest .ed-btn-text{min-height:36px}
.ed-wizard__fieldset{margin:0;min-width:0}
.ed-wizard__fieldset legend{padding:0 6px}
.ed-wizard__fieldset-plain{border:0;padding:0;margin:0;min-width:0}
.ed-wizard__fieldset-plain legend{padding:0;margin-bottom:var(--s-1)}
.ed-wizard__legend{margin-bottom:var(--s-2)}
.ed-wizard__row-gap{margin-top:var(--s-1)}
.ed-wizard__self-start{align-self:flex-start}
.ed-wizard__plain-btn{padding:0}
.ed-wizard__lookup-input{flex:1 1 260px;width:auto}
.ed-wizard__vin{letter-spacing:.06em;flex-basis:300px}
.ed-wizard__summary{cursor:pointer;min-height:var(--ed-touch);list-style:none}
.ed-wizard__summary::-webkit-details-marker{display:none}
.ed-wizard__details{margin:var(--s-3) 0 var(--s-2)}
.ed-wizard__confirmed{border-color:#A7D2B8;background:#F6FBF8}
.ed-wizard__found{border-color:var(--ed-action);box-shadow:inset 0 0 0 1px var(--ed-action)}
.ed-wizard__thumbs{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0;padding:0}
.ed-wizard__thumbs li{position:relative;display:flex;align-items:center;gap:var(--s-2)}

/* hidden anti-spam field: out of sight and out of the tab order, but still in the DOM */
.ed-wizard__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* summary column */
.ed-summary{position:sticky;top:var(--s-4)}
.ed-wizard__li-s{padding:10px 0}
.ed-cat-s{width:32px;height:32px;border-radius:8px}
.ed-cat-s img{width:20px;height:20px}
.ed-cat-m{width:36px;height:36px;border-radius:10px}
.ed-cat-m img{width:22px;height:22px}
.ed-wizard__how-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.ed-wizard__how{background:var(--ed-lime-soft);border-color:#C6E37A}
.ed-wizard__note{text-align:right;margin-top:var(--s-2)}

/* city combobox */
.ed-wizard__combo{position:relative}
.ed-wizard__listbox{position:absolute;z-index:20;left:0;right:0;top:calc(100% - 4px);max-height:280px;overflow:auto;margin:0;padding:var(--s-1);list-style:none;background:var(--ed-surface);border:1px solid var(--ed-border-strong);border-radius:var(--r-sm);box-shadow:var(--sh-2)}
.ed-wizard__combo .ed-hint{position:relative}
.ed-wizard__option{display:flex;align-items:center;min-height:var(--ed-touch);padding:0 var(--s-3);border-radius:6px;cursor:pointer;font-size:15px}
.ed-wizard__option:hover,.ed-wizard__option.is-active{background:var(--ed-action-soft)}
.ed-wizard__option--empty{cursor:default;color:var(--ed-muted)}
.ed-wizard__option--empty:hover{background:transparent}
.ed-wizard__pw-toggle{border:0;border-left:1px solid var(--ed-border);border-radius:0;min-width:96px}

/* published screen */
.ed-wizard__published{overflow:hidden}
.ed-wizard__published-hd{padding:var(--s-8);display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.ed-wizard__published-ic{width:64px;height:64px;border-radius:20px;background:var(--ed-lime);color:var(--ed-petrol);display:flex;align-items:center;justify-content:center;flex:none}
.ed-wizard__lime{color:var(--ed-lime)}
.ed-wizard__pub-sub{color:#D3E3D9}

.ed-hide-m{display:inline}
@media (max-width:767px){
	.ed-wizard .ed-f-grid,.ed-wizard .ed-f-grid2,.ed-wizard .ed-f-grid3{grid-template-columns:minmax(0,1fr)}
	.ed-part-hd,.ed-part-bd{padding:14px var(--s-4)}
	.ed-summary{position:static}
	.ed-hide-m{display:none}
	.ed-wizard__published-hd{padding:var(--s-6) var(--s-4)}
	.ed-wizard__note{text-align:left}
	.ed-wizard .ed-actionbar{position:sticky;bottom:0;z-index:5;padding:var(--s-3) 0;background:linear-gradient(to top,var(--ed-canvas) 70%,transparent)}
}

/* the parent theme gives the last list item a margin: the steps are a grid and must stay level */
.ed-wizard .ed-steps>li{margin:0}
.ed-drop.is-disabled{opacity:.6;cursor:not-allowed}.ed-drop.is-disabled:hover{border-color:var(--ed-border-strong);background:var(--ed-surface)}.ed-drop:focus-within{outline:2px solid var(--ed-action);outline-offset:2px}

/* long button labels wrap instead of overflowing a narrow card */
.ed-wizard .ed-btn{white-space:normal;text-align:center;line-height:1.25}
.ed-wizard .ed-btn-text{text-align:left}
@media (max-width:767px){
	.ed-wizard .ed-wizard__self-start{align-self:stretch}
}

/* vehicle method switch: three equal columns that never push the page wider than the screen */
.ed-wizard .ed-seg{grid-auto-columns:minmax(0,1fr)}
.ed-wizard .ed-seg-btn{min-width:0}
@media (max-width:480px){
	.ed-wizard .ed-seg-btn{flex-direction:column;gap:4px;padding:6px 4px;min-height:60px;font-size:13px;line-height:1.2}
}