/* components.css
   Kafle, wiersze cennika, karty formularza, modal, toast.
   Lucifer's Garage */

/* ============================================================
   Kafle kategorii
   ============================================================ */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:16px}
.tile{
  display:flex; flex-direction:column; gap:12px; padding:26px 24px 22px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  transition:.2s; position:relative; overflow:hidden;
}
.tile:hover{border-color:var(--brass); transform:translateY(-3px)}
.tile__ico{width:30px; height:30px; color:var(--brass)}
.tile__title{font-family:var(--f-display); font-size:23px}
.tile__desc{font-size:14px; color:var(--dim); flex:1}
.tile__foot{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); padding-top:12px;
  border-top:1px solid var(--line);
}
.tile:hover .tile__foot{color:var(--brass)}
/* ============================================================
   Lista usług / cennik z kropkami wiodącymi
   ============================================================ */
.catblock{margin-bottom:52px}
.catblock__head{display:flex; align-items:center; gap:14px; margin-bottom:6px}
.catblock__ico{width:22px; height:22px; color:var(--brass); flex:none}
.catblock__note{font-size:14px; color:var(--dim); margin-bottom:22px}

.srow{
  display:grid; grid-template-columns:1fr auto; gap:8px 18px;
  padding:16px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.srow__name{font-size:17px; font-weight:600}
.srow__desc{grid-column:1/-1; font-size:14px; color:var(--dim); max-width:70ch; margin-top:-2px}
.srow__price{font-family:var(--f-mono); font-size:15px; color:var(--brass); white-space:nowrap}
.srow__meta{
  grid-column:1/-1; display:flex; gap:16px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
}

.pricerow{display:flex; align-items:baseline; gap:12px; padding:11px 0}
.pricerow__n{font-size:15px}
.pricerow__d{flex:1; border-bottom:1px dotted var(--line-2); transform:translateY(-4px)}
.pricerow__p{font-family:var(--f-mono); font-size:14px; color:var(--brass)}

.badge{
  display:inline-block; padding:3px 9px; border-radius:100px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line-2); color:var(--dim);
}
.badge--brass{border-color:var(--brass); color:var(--brass); background:var(--brass-soft)}
.badge--ok{border-color:var(--ok); color:var(--ok)}
.badge--warn{border-color:var(--warn); color:var(--warn)}
.badge--blood{border-color:var(--oxblood); color:var(--oxblood)}
/* ============================================================
   Karta zlecenia (formularz wyceny) — element sygnaturowy
   ============================================================ */
.order{display:grid; grid-template-columns:1fr 348px; gap:26px; align-items:start}
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:26px;
}
.card + .card{margin-top:18px}
.card__title{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.card__title::after{content:""; flex:1; height:1px; background:var(--line)}

.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.field__label{font-size:13px; font-weight:600}
.field__hint{font-size:12px; color:var(--dim)}
.input, .select, .textarea{
  width:100%; padding:11px 13px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-sm); transition:.15s;
}
.input:focus, .select:focus, .textarea:focus{border-color:var(--brass); outline:none}
.textarea{min-height:96px; resize:vertical}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:0 16px}

.sizes{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
.size{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 8px;
  text-align:center; cursor:pointer; transition:.16s; background:var(--bg-2);
}
.size:hover{border-color:var(--line-2)}
.size.is-on{border-color:var(--brass); background:var(--brass-soft)}
.size__k{font-family:var(--f-mono); font-size:16px; color:var(--brass)}
.size__l{font-size:11px; color:var(--dim); margin-top:2px}

.pick{
  display:grid; grid-template-columns:22px 1fr auto; gap:12px;
  padding:13px 12px; border:1px solid transparent; border-radius:var(--r-sm);
  cursor:pointer; transition:.15s; align-items:start;
}
.pick:hover{background:var(--surface-2)}
.pick.is-on{border-color:var(--brass); background:var(--brass-soft)}
.pick.is-off{opacity:.44; cursor:not-allowed}
.pick.is-off:hover{background:transparent}
.pick__box{
  width:19px; height:19px; border:1px solid var(--line-2); border-radius:3px;
  display:grid; place-items:center; margin-top:2px; flex:none;
}
.pick.is-on .pick__box{background:var(--brass); border-color:var(--brass); color:#17140F}
.pick__box svg{width:13px; height:13px; opacity:0}
.pick.is-on .pick__box svg{opacity:1}
.pick__n{font-size:15px; font-weight:500}
.pick__d{font-size:13px; color:var(--dim); margin-top:2px}
.pick__block{font-size:12px; color:var(--warn); margin-top:4px}
.pick__p{font-family:var(--f-mono); font-size:14px; color:var(--brass); white-space:nowrap}
.pick.is-off .pick__p{color:var(--dim); text-decoration:line-through}

.summary{position:sticky; top:calc(var(--nav-h) + 18px)}
.sum__list{display:flex; flex-direction:column; gap:9px; margin-bottom:16px; max-height:290px; overflow:auto}
.sum__row{display:flex; justify-content:space-between; gap:12px; font-size:13px}
.sum__row span:last-child{font-family:var(--f-mono); color:var(--dim); white-space:nowrap}
.sum__total{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:16px; border-top:1px solid var(--line); margin-bottom:6px;
}
.sum__total b{font-family:var(--f-mono); font-size:27px; color:var(--brass); font-weight:500}
.sum__empty{font-size:13px; color:var(--dim); padding:14px 0 18px}
/* ============================================================
   Modal + toast
   ============================================================ */
.backdrop{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.62);
  display:grid; place-items:center; padding:22px; overflow:auto;
  animation:fade .18s ease;
}
.modal{
  width:100%; max-width:660px; background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:var(--r-lg); box-shadow:var(--shadow); margin:auto;
  animation:pop .22s cubic-bezier(.2,.9,.3,1.1);
}
.modal__head{
  display:flex; align-items:center; gap:12px; padding:20px 24px;
  border-bottom:1px solid var(--line);
}
.modal__head h3{font-family:var(--f-display); font-size:22px; flex:1}
.modal__body{padding:24px; max-height:64vh; overflow:auto}
.modal__foot{
  display:flex; gap:10px; justify-content:flex-end; padding:18px 24px;
  border-top:1px solid var(--line);
}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.985)}}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:300; background:var(--surface); border:1px solid var(--brass);
  color:var(--text); padding:13px 20px; border-radius:var(--r-sm);
  box-shadow:var(--shadow); font-size:14px; animation:up .22s ease;
}
@keyframes up{from{opacity:0; transform:translate(-50%,14px)}}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  padding:7px 12px; border:1px solid var(--line); border-radius:100px;
  font-size:13px; cursor:pointer; background:var(--bg-2); transition:.15s;
}
.chip:hover{border-color:var(--line-2)}
.chip.is-on{border-color:var(--brass); background:var(--brass-soft); color:var(--brass)}

.note{
  padding:14px 16px; border-left:2px solid var(--brass); background:var(--brass-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:13px; color:var(--dim);
}
.note b{color:var(--text)}