/* doc-project | commande/v1/assets/css/components/cart_login_card.css | Style la carte de connexion du panier avec formulaires, états et boutons d’action responsifs. | Expose: aucun | Dépend de: variables CSS globales, composants .btn, attributs data-cart-login-card/data-login-busy | Impacte: interface de connexion panier, feedback visuel, états responsive | Tables: aucune */
.cartLoginCard{
  border: 1px solid rgba(137, 0, 0, .10);
  box-shadow:
    0 18px 44px rgba(23, 18, 34, .08),
    0 6px 18px rgba(137, 0, 0, .06);
}

.cartLoginCard__body{
  display:flex;
  flex-direction:column;
  gap: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,248,247,.96));
}

.cartLoginCard__header{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.cartLoginCard__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 44px;
  font-size: 20px;
  background: linear-gradient(180deg, rgba(137,0,0,.10), rgba(137,0,0,.06));
  border: 1px solid rgba(137,0,0,.10);
}

.cartLoginCard__headings{
  min-width: 0;
}

.cartLoginCard__title{
  margin-bottom: 4px;
}

.cartLoginCard__intro{
  line-height: 1.45;
}

.cartLoginCard__phoneStep{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.cartLoginCard__form{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.cartLoginCard__step{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.cartLoginCard__label{
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
}

.cartLoginCard__input{
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.96);
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.cartLoginCard__input::placeholder{
  color: rgba(17,17,17,.45);
  font-weight: 700;
}

.cartLoginCard__input:focus{
  outline: none;
  border-color: rgba(137,0,0,.42);
  box-shadow: 0 0 0 4px rgba(137,0,0,.10);
}

.cartLoginCard__input--code{
  text-align:center;
  letter-spacing: .28em;
  font-size: 22px;
  font-weight: 950;
}

.cartLoginCard__hint{
  margin: 0;
  line-height: 1.4;
}

.cartLoginCard__sent{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: #0f5a34;
  background: rgba(15,90,52,.08);
  border: 1px solid rgba(15,90,52,.12);
  border-radius: 12px;
  padding: 10px 12px;
}

.cartLoginCard__actions--stack{
  flex-direction:column;
  align-items:stretch;
}

.cartLoginCard__actions{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.cartLoginCard__primary,
.cartLoginCard__secondary{
  width: 100%;
  min-height: 52px;
}

.cartLoginCard__guestBtn{
  width: 100%;
  min-height: 52px;
  font-weight: 900;
  border-width: 1px;
}

.cartLoginCard__guestBtn:hover,
.cartLoginCard__guestBtn:focus-visible{
  transform: translateY(-1px);
}

.cartLoginCard__guestBtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(137,0,0,.10);
}

.cartLoginCard__feedback{
  display:block;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.4;
}

.cartLoginCard__feedback.is-info{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--text);
}

.cartLoginCard__feedback.is-success{
  background: rgba(15,90,52,.08);
  border: 1px solid rgba(15,90,52,.12);
  color: #0f5a34;
}

.cartLoginCard__feedback.is-error{
  background: rgba(178,34,34,.08);
  border: 1px solid rgba(178,34,34,.12);
  color: #8b0000;
}

.cartLoginCard__modalInput{
  min-height: 52px;
}

.cartLoginCard__guestActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.cartLoginCard__guestActions .btn{
  min-width: 150px;
}

[data-cart-login-card][data-login-busy="1"] .cartLoginCard__body{
  opacity: .96;
}

@media (min-width: 720px){
  .cartLoginCard__body{
    gap: 18px;
  }

  .cartLoginCard__actions{
    flex-direction:row;
    align-items:center;
  }

  .cartLoginCard__primary{
    flex: 1 1 auto;
  }

  .cartLoginCard__secondary{
    flex: 0 0 auto;
    width: auto;
    min-width: 180px;
  }

  .cartLoginCard__actions--stack .cartLoginCard__guestBtn{
    width: 100%;
    min-width: 0;
  }

  .cartLoginCard__guestActions .btn{
    width: auto;
  }
}

@media (max-width: 420px){
  .cartLoginCard__icon{
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 12px;
  }

  .cartLoginCard__input--code{
    letter-spacing: .18em;
    font-size: 20px;
  }

  .cartLoginCard__guestActions{
    flex-direction:column-reverse;
    align-items:stretch;
  }

  .cartLoginCard__guestActions .btn{
    width:100%;
    min-width:0;
  }
}