/* doc-project | paiement/assets/css/page-paiement-acompte.css | Définit les styles dédiés au bloc “Total ou acompte” de la page finale de paiement, à sa modal ergonomique de choix de montant avec option totalité intégrée dans la même grille que les autres choix, sans texte descriptif secondaire sur cette option, et aux bandeaux contextuels distinguant arrivée imposée ou volontaire sur la page de paiement. | Expose: aucun | Dépend de: paiement/page_paiement.php, paiement/payment_deposit_modal.php | Impacte: rendu visuel, accessibilité et lisibilité du choix d’acompte, homogénéité visuelle du règlement total et des autres montants, simplification du contenu de l’option totalité, hiérarchisation des messages de contexte | Tables: aucune */

.aqp-online-order-banner {
  margin-bottom: 1rem;
}

.aqp-online-order-banner--required {
  border-left: 4px solid #d39e00;
}

.aqp-online-order-banner--optional {
  border-left: 4px solid #138496;
}

.payment-option--deposit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.payment-option--deposit p {
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
  width: 100%;
  text-align: center;
}

.payment-option--deposit small {
  display: block;
  width: 100%;
  color: #234;
  font-weight: 600;
  text-align: center;
}

.payment-option--deposit i {
  margin-right: 0;
  margin-bottom: 0.35rem;
}

.payment-option--deposit.payment-option--disabled {
  pointer-events: none;
}

.payment-option--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.aqp-deposit-modal .modal-content {
  border-radius: 16px;
}

.aqp-deposit-modal__intro {
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 600;
}

.aqp-deposit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  text-align: center;
}

.aqp-deposit-choice {
  min-height: 88px;
  border: 2px solid #d7e5ff;
  border-radius: 14px;
  background: #f7fbff;
  color: #17345f;
  font-weight: 700;
  padding: 0.9rem;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.aqp-deposit-choice__eyebrow,
.aqp-deposit-choice__amount {
  display: block;
  width: 100%;
  text-align: center;
}

.aqp-deposit-choice__eyebrow {
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

.aqp-deposit-choice__amount {
  font-size: 1.35rem;
}

.aqp-deposit-choice--total {
  min-height: 104px;
}

.aqp-deposit-choice:hover,
.aqp-deposit-choice:focus {
  outline: none;
  border-color: #7aa8ff;
  box-shadow: 0 10px 24px rgba(33, 76, 160, 0.14);
  transform: translateY(-1px);
}

.aqp-deposit-choice.is-active {
  border-color: #007bff;
  background: #e8f2ff;
}

.aqp-deposit-choice--custom {
  justify-self: stretch;
}

.aqp-deposit-custom {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 14px;
  background: #f8f9fb;
  border: 1px solid #d9dee8;
}

.aqp-deposit-custom__label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.aqp-deposit-custom__input {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
}

.aqp-deposit-custom__help {
  display: block;
  margin-top: 0.5rem;
  color: #556274;
}

.aqp-deposit-custom__error {
  display: none;
  margin-top: 0.75rem;
  color: #b51f2e;
  font-weight: 700;
}

.aqp-deposit-custom__error.is-visible {
  display: block;
}

@media (max-width: 575.98px) {
  .aqp-deposit-grid {
    grid-template-columns: 1fr;
  }
}