/* bloc devis */
.ksk-devis-root{ padding: 40px 0; }
.ksk-devis-card{
  width:min(980px, 92vw);
  margin:0 auto;
  background:#1C1C1C;
  border:1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  color:#fff;
}
.ksk-devis-title{ margin:0; font-size:28px; letter-spacing:.02em; }
.ksk-devis-sub{ margin:10px 0 0; color:rgba(255,255,255,.72); line-height:1.6; }

.ksk-devis-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.ksk-btn{
  border:none;
  cursor:pointer;
  padding: 12px 18px;
  border-radius: 999px;
  color:#fff;
  font-weight:600;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.30);
  transition: transform .2s ease, background .25s ease, border-color .25s ease;
}
.ksk-btn:hover{ transform: translateY(-1px); background: rgba(220,199,161,0.65); border-color: rgba(220,199,161,0.9); }
.ksk-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.ksk-btn-ghost{ background: rgba(255,255,255,0.06); }

.ksk-cart-preview{ margin-top:16px; }
.ksk-empty{
  padding:14px;
  border-radius:14px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.75);
}
.ksk-preview-head{ font-weight:700; margin-bottom:10px; }
.ksk-rows{ display:grid; gap:10px; }
.ksk-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:14px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,.10);
}
.ksk-row-left{ min-width:0; }
.ksk-name{ font-weight:600; }
.ksk-sku{ font-size:12px; color: rgba(255,255,255,.55); margin-top:2px; }
.ksk-qty{ color: rgba(255,255,255,.75); white-space:nowrap; }
.ksk-price{ white-space:nowrap; font-weight:700; }

.ksk-totals{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
  display:grid;
  gap:8px;
}
.ksk-totals > div{ display:flex; justify-content:space-between; }
.ksk-totals span{ color: rgba(255,255,255,.70); }
.ksk-totals b{ font-weight:800; }
.ksk-totals .is-strong span{ color: rgba(220,199,161,.95); }

.ksk-devis-msg{ margin-top:12px; padding:10px 12px; border-radius:14px; display:none; }
.ksk-devis-msg.is-ok{ display:block; background: rgba(0,255,140,.10); border:1px solid rgba(0,255,140,.18); }
.ksk-devis-msg.is-err{ display:block; background: rgba(255,70,70,.10); border:1px solid rgba(255,70,70,.18); }

/* modal */
.ksk-modal{ position:fixed; inset:0; z-index:999999; }
.ksk-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.6); }
.ksk-modal__panel{
  position:relative;
  width:min(920px, 92vw);
  margin: 5vh auto;
  background:#141414;
  border:1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 18px;
  color:#fff;
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
}
.ksk-modal__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.ksk-modal__title{ font-weight:800; font-size:18px; }
.ksk-x{
  border:none; background:transparent; color:#fff;
  font-size:28px; cursor:pointer; line-height:1;
  opacity:.85;
}
.ksk-x:hover{ opacity:1; }

.ksk-form .ksk-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.ksk-form label{ display:grid; gap:6px; }
.ksk-form label span{ font-size:13px; color: rgba(255,255,255,.75); }
.ksk-form input, .ksk-form select, .ksk-form textarea{
  padding: 11px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  outline:none;
}
.ksk-form input:focus, .ksk-form select:focus, .ksk-form textarea:focus{
  border-color: rgba(220,199,161,.75);
  box-shadow: 0 0 0 4px rgba(220,199,161,.12);
}
.ksk-form .full{ grid-column: 1 / -1; }

.ksk-modal__actions{ margin-top:14px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.ksk-form-msg{ margin-top:10px; color: rgba(255,120,120,.95); font-weight:600; }

@media (max-width: 820px){
  .ksk-form .ksk-grid{ grid-template-columns: 1fr; }
  .ksk-modal__actions{ justify-content:stretch; }
  .ksk-modal__actions .ksk-btn{ width:100%; }
}