/* ======================================================
   COMPONENT - UI MODAL CONFIRM
   ====================================================== */

.ui-confirm[hidden]{ display:none; }

.ui-confirm{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.ui-confirm__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}

.ui-confirm__modal{
  position: relative;
  width: min(420px, calc(100vw - 24px));
  margin: 12vh auto 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}

.ui-confirm__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.ui-confirm__title{
  font-weight: 700;
  font-size: 15px;
  color: #111;
}

.ui-confirm__x{
  border:0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 2px 6px;
}

.ui-confirm__x:focus { outline: none; }
.ui-confirm__x:focus-visible{
  outline: 3px solid rgba(37, 99, 235, .45);
  outline-offset: 2px;
}

.ui-confirm__msg{
  padding: 16px;
  color:#222;
  font-size: 14px;
}

.ui-confirm__actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.ui-confirm__btn{
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Focus visible uniquement au clavier */
.ui-confirm__btn:focus { outline: none; }
.ui-confirm__btn:focus-visible{
  outline: 3px solid rgba(37, 99, 235, .45);
  outline-offset: 2px;
}

.ui-confirm__btn--ghost{
  background:#fff;
  border-color: rgba(0,0,0,.15);
  color:#222;
}

.ui-confirm__btn--danger{
  background:#ff2d55;
  color:#fff;
}

.ui-confirm__btn--success{
  background:#44d593;
  color:#fff;
}

.ui-confirm__btn--danger:hover{
  filter: brightness(.96);
}