/* doc-project | paiement/assets/css/client-address-book.css | Refonte le carnet d’adresses et habille ses petites modales accessibles de confirmation, succès et erreur sans alertes navigateur. | Expose: classes .payment-address-*, .payment-address-action-modal et .paymentModalShell__dialog--contacts | Dépend de: paiement/client_info.php, paiement/modals.php, paiement/assets/js/client-address-book.js, Bootstrap, Font Awesome | Impacte: hiérarchie visuelle, confirmations d’actions, lisibilité, largeur de la modale et ergonomie mobile | Tables: aucune */
.payment-address-book{display:grid;gap:1rem}.payment-address-book__toolbar{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}.payment-address-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}.payment-address-card{border:1px solid rgba(0,0,0,.12);border-radius:1rem;padding:1rem;background:#fff;box-shadow:0 .35rem 1rem rgba(0,0,0,.08)}.payment-address-card.is-selected{border:2px solid #246bce;box-shadow:0 0 0 .2rem rgba(36,107,206,.12)}.payment-address-card__badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.45rem}.payment-address-card__badges span{display:inline-flex;padding:.2rem .55rem;border-radius:999px;background:#e9f2ff;color:#174d91;font-size:.75rem;font-weight:700}.payment-address-card__body{margin:.85rem 0;line-height:1.5;overflow-wrap:anywhere}.payment-address-card__actions{display:flex;gap:.5rem;flex-wrap:wrap}.payment-address-editor{padding:1rem;border-radius:1rem;background:#f5f7fa}.payment-address-editor[hidden]{display:none!important}.payment-address-editor__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.payment-address-editor__grid .form-group{margin:0}.payment-address-editor__wide{grid-column:1/-1}.payment-address-editor__actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1rem}.payment-address-status{min-height:1.5rem}.payment-address-book.is-loading{opacity:.65;pointer-events:none}@media(max-width:640px){.payment-address-list,.payment-address-editor__grid{grid-template-columns:1fr}.payment-address-card__actions .btn{width:100%}}


/* Refonte visuelle du carnet d'adresses paiement. */
#manageContactInfoModal .paymentModalShell__dialog--contacts {
  width: min(920px, calc(100vw - 24px));
  max-width: 920px;
}

#manageContactInfoModal .modal-content {
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(28, 10, 12, .34);
}

#manageContactInfoModal .modal-body {
  padding: 0;
  background:
    radial-gradient(circle at top right, rgba(126, 24, 39, .08), transparent 34%),
    #f7f3ef;
}

#manageContactInfoModal .modal-body > .card {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#manageContactInfoModal #ClientInfo {
  padding: clamp(18px, 3vw, 30px);
  overflow: visible;
}

#manageContactInfoModal #updateClientForm {
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid rgba(111, 15, 26, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 30px rgba(50, 25, 20, .07);
}

#manageContactInfoModal #updateClientBtn {
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  padding: 0 18px;
  background: linear-gradient(180deg, #8a1826, #6f0f1a);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(111, 15, 26, .2);
}

#manageContactInfoModal #updateClientBtn:hover,
#manageContactInfoModal #updateClientBtn:focus {
  color: #fff;
  filter: brightness(1.06);
  box-shadow: 0 12px 26px rgba(111, 15, 26, .28);
}

.payment-address-book {
  margin-top: 24px;
  gap: 18px;
}

.payment-address-book__toolbar {
  padding: 4px 2px;
}

.payment-address-book__toolbar h5 {
  margin: 0;
  color: #2c1f1d;
  font-size: clamp(1.25rem, 2.3vw, 1.55rem);
  font-weight: 850;
  letter-spacing: -.02em;
}

.payment-address-book__toolbar .text-muted {
  max-width: 590px;
  margin-top: 4px;
  color: #756b67 !important;
  line-height: 1.45;
}

.payment-address-book [data-address-add] {
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  padding: 0 18px;
  background: linear-gradient(180deg, #8a1826, #6f0f1a);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(111, 15, 26, .18);
}

.payment-address-book [data-address-add]::before {
  content: "+";
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: 1.15rem;
  line-height: 1;
}

.payment-address-status {
  min-height: 0;
  color: #756b67;
  font-size: .9rem;
}

.payment-address-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.payment-address-card {
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(89, 64, 56, .16);
  border-radius: 20px;
  padding: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(250, 246, 242, .98));
  box-shadow: 0 12px 28px rgba(61, 35, 28, .09);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.payment-address-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 20px 0 0 20px;
  background: linear-gradient(180deg, #c9b5aa, #8f776c);
}

.payment-address-card:hover {
  transform: translateY(-2px);
  border-color: rgba(111, 15, 26, .28);
  box-shadow: 0 16px 34px rgba(61, 35, 28, .14);
}

.payment-address-card.is-selected {
  border: 2px solid #7d1725;
  background:
    radial-gradient(circle at top right, rgba(125, 23, 37, .12), transparent 42%),
    linear-gradient(145deg, #fff, #fff7f3);
  box-shadow: 0 0 0 4px rgba(125, 23, 37, .1), 0 18px 36px rgba(111, 15, 26, .16);
}

.payment-address-card.is-selected::before {
  width: 7px;
  background: linear-gradient(180deg, #a92336, #6f0f1a);
}

.payment-address-card__head strong {
  display: block;
  color: #2b1f1c;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -.01em;
}

.payment-address-card__badges {
  margin-top: 9px;
  gap: 6px;
}

.payment-address-card__badges span {
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(111, 15, 26, .12);
  background: #f5e8e5;
  color: #6f0f1a;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.payment-address-card.is-selected .payment-address-card__badges span:last-child {
  border-color: rgba(31, 143, 79, .22);
  background: #e6f5eb;
  color: #17663a;
}

.payment-address-card__body {
  flex: 1 1 auto;
  margin: 18px 0;
  padding: 14px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  color: #3b302d;
  font-size: .98rem;
  line-height: 1.55;
  box-shadow: inset 0 0 0 1px rgba(83, 60, 52, .08);
}

.payment-address-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.payment-address-card__actions .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 8px 12px;
  white-space: normal;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.15;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}

.payment-address-card__actions .btn:hover,
.payment-address-card__actions .btn:focus {
  transform: translateY(-1px);
}

.payment-address-card__actions [data-address-action="edit"] {
  border-color: rgba(111, 15, 26, .28);
  background: #fff;
  color: #6f0f1a;
}

.payment-address-card__actions [data-address-action="primary"] {
  border-color: rgba(60, 49, 45, .18);
  background: #efe9e5;
  color: #433632;
}

.payment-address-card__actions [data-address-action="select"] {
  grid-column: 1 / -1;
  border: 0;
  background: linear-gradient(180deg, #8a1826, #6f0f1a);
  color: #fff;
  box-shadow: 0 9px 20px rgba(111, 15, 26, .18);
}

.payment-address-card__actions [data-address-action="delete"] {
  border-color: rgba(178, 48, 58, .24);
  background: #fff2f1;
  color: #a22d38;
}

.payment-address-editor {
  border: 1px solid rgba(111, 15, 26, .16);
  border-radius: 20px;
  padding: clamp(18px, 3vw, 26px);
  background: #fff;
  box-shadow: 0 16px 36px rgba(61, 35, 28, .12);
}

.payment-address-editor::before {
  content: "Ajouter ou modifier une adresse";
  display: block;
  margin-bottom: 18px;
  color: #2b1f1c;
  font-size: 1.15rem;
  font-weight: 850;
}

.payment-address-editor label {
  color: #4d403c;
  font-size: .84rem;
  font-weight: 800;
}

.payment-address-editor .form-control {
  min-height: 46px;
  border: 1px solid #ddd3ce;
  border-radius: 12px;
  background: #fdfbf9;
}

.payment-address-editor .form-control:focus {
  border-color: #8a1826;
  box-shadow: 0 0 0 3px rgba(138, 24, 38, .12);
}

.payment-address-editor__actions .btn {
  min-height: 44px;
  border-radius: 12px;
  padding-inline: 18px;
  font-weight: 800;
}

.payment-address-editor__actions .btn-primary {
  border: 0;
  background: linear-gradient(180deg, #8a1826, #6f0f1a);
  box-shadow: 0 9px 20px rgba(111, 15, 26, .18);
}

.payment-address-editor__actions .btn-light {
  border: 1px solid #d8cdc7;
  background: #f4efec;
  color: #443733;
}

@media (max-width: 767.98px) {
  #manageContactInfoModal .paymentModalShell__dialog--contacts {
    width: calc(100vw - 16px);
    margin: 8px auto;
  }

  #manageContactInfoModal .modal-content {
    border-radius: 20px;
  }

  #manageContactInfoModal #ClientInfo {
    padding: 16px;
  }

  .payment-address-book__toolbar {
    align-items: stretch;
  }

  .payment-address-book [data-address-add] {
    width: 100%;
  }

  .payment-address-list,
  .payment-address-editor__grid {
    grid-template-columns: 1fr;
  }

  .payment-address-card {
    min-height: 0;
  }

  .payment-address-card__actions {
    grid-template-columns: 1fr;
  }

  .payment-address-card__actions [data-address-action="select"] {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  .payment-address-card {
    padding: 17px 15px 16px 19px;
    border-radius: 17px;
  }

  .payment-address-card::before {
    border-radius: 17px 0 0 17px;
  }

  .payment-address-card__actions .btn {
    width: 100%;
  }
}


/* Petites modales d'action du carnet d'adresses. */
.payment-address-action-modal {
  position: fixed;
  inset: 0;
  z-index: 11050;
  display: grid;
  place-items: center;
  padding: 18px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .18s ease, visibility .18s ease;
}

.payment-address-action-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.payment-address-action-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 12, 13, .62);
  backdrop-filter: blur(4px);
}

.payment-address-action-modal__panel {
  position: relative;
  width: min(430px, calc(100vw - 32px));
  padding: 26px;
  border: 1px solid rgba(112, 25, 37, .15);
  border-radius: 22px;
  background: #fffaf5;
  color: #2d2321;
  box-shadow: 0 24px 70px rgba(31, 12, 15, .35);
  text-align: center;
  transform: translateY(10px) scale(.98);
  transition: transform .18s ease;
}

.payment-address-action-modal.is-open .payment-address-action-modal__panel {
  transform: translateY(0) scale(1);
}

.payment-address-action-modal__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, #8b1e2d, #64101d);
  color: #fff;
  font-size: 1.45rem;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(112, 25, 37, .24);
}

.payment-address-action-modal.is-danger .payment-address-action-modal__icon {
  background: linear-gradient(145deg, #d84a4a, #a5222f);
}

.payment-address-action-modal.is-success .payment-address-action-modal__icon {
  background: linear-gradient(145deg, #2f9d68, #1e714a);
}

.payment-address-action-modal__title {
  margin: 0 0 10px;
  color: #2c2220;
  font-size: 1.28rem;
  font-weight: 850;
}

.payment-address-action-modal__message {
  margin: 0;
  color: #6f6461;
  font-size: .96rem;
  line-height: 1.55;
  white-space: pre-line;
}

.payment-address-action-modal__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.payment-address-action-modal__button {
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}

.payment-address-action-modal__button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.payment-address-action-modal__button:focus-visible {
  outline: 3px solid rgba(123, 28, 43, .23);
  outline-offset: 2px;
}

.payment-address-action-modal__button--secondary {
  background: #f0e7df;
  color: #514643;
}

.payment-address-action-modal__button--primary {
  background: linear-gradient(145deg, #8b1e2d, #64101d);
  color: #fff;
  box-shadow: 0 10px 22px rgba(112, 25, 37, .22);
}

.payment-address-action-modal__button--danger {
  background: linear-gradient(145deg, #d74747, #a5222f);
}

body.payment-address-action-modal-open {
  overflow: hidden;
}

@media (max-width: 520px) {
  .payment-address-action-modal {
    align-items: end;
    padding: 12px;
  }

  .payment-address-action-modal__panel {
    width: 100%;
    padding: 22px 18px 18px;
    border-radius: 22px;
  }

  .payment-address-action-modal__actions {
    flex-direction: column-reverse;
  }

  .payment-address-action-modal__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .payment-address-action-modal,
  .payment-address-action-modal__panel,
  .payment-address-action-modal__button {
    transition: none;
  }
}