/*
 * Page Panier - Styles basés sur la maquette Lovable
 * Mapping couleurs: accent → primary, primary → secondary
 */

.cart-page {
  background-color : var(--color-white-default);
}

/* ==================================================
   Header du panier - Fond dégradé
   ================================================== */
.cart-header {
  background : linear-gradient(175deg, var(--color-secondary) 0%, var(--color-secondary) 50%, var(--color-primary) 100%);
  padding    : 1.5rem 0;
  margin-top : 0;
}

@media (min-width : 768px) {
  .cart-header {
    padding : 3rem 0;
  }
}

.cart-header__content {
  display        : flex;
  flex-direction : column;
  gap            : 0.5rem;
}

.cart-header__title {
  display     : flex;
  align-items : center;
  gap         : 0.75rem;
  color       : var(--color-white-default);
  font-size   : var(--font-size-600);
  font-weight : 700;
  margin      : 0;
}

@media (min-width : 768px) {
  .cart-header__title {
    font-size : var(--font-size-700);
  }
}

.cart-header__icon {
  width       : 32px;
  height      : 32px;
  flex-shrink : 0;
}

.cart-header__subtitle {
  color     : rgba(255, 255, 255, 0.8);
  font-size : var(--font-size-200);
  margin    : 0;
}

/* ==================================================
   Contenu principal - Grille
   ================================================== */
.cart-content {
  padding : 2rem 0;
}

@media (min-width : 1024px) {
  .cart-content {
    padding : 3rem 0;
  }
}

.cart-grid {
  display               : grid;
  grid-template-columns : 1fr;
  gap                   : 2rem;
}

@media (min-width : 1200px) {
  .cart-grid {
    grid-template-columns : 2fr 1fr;
    gap                   : 2rem;
  }
}

/* ==================================================
   Colonne Articles (gauche)
   ================================================== */
.cart-grid-body {
  min-width : 0;
}

.cart-articles {
  background    : var(--color-grey-default);
  border-radius : var(--radius-lg);
  overflow      : hidden;
  border        : 1px solid #E0E6EB
}

.cart-articles__header {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  padding         : 1.25rem;
}

.cart-articles__title {
  font-size   : var(--font-size-400);
  font-weight : 600;
  color       : var(--color-black-default);
  margin      : 0;
}

.cart-articles__clear-btn {
  display       : flex;
  align-items   : center;
  gap           : 0.5rem;
  padding       : 0.5rem 1rem;
  background    : transparent;
  border        : none;
  color         : var(--color-grey-font-default);
  font-size     : var(--font-size-200);
  cursor        : pointer;
  transition    : all 0.2s ease;
  border-radius : var(--radius-md);
}

.cart-articles__clear-btn:hover {
  background : hsl(0, 84%, 60%);
  color      : var(--color-white-default);
}

/* ==================================================
   Tableau des produits - Header Desktop
   ================================================== */
.cart-products__header--desktop {
  display : none;
  padding : 1rem;
}

@media (min-width : 768px) {
  .cart-products__header--desktop {
    display               : grid;
    grid-template-columns : 80px 1fr 120px 140px 100px 50px;
    gap                   : 1rem;
    align-items           : center;
  }
}

.cart-products__col {
  font-size      : var(--font-size-200);
  font-weight    : 500;
  color          : var(--color-grey-font-default);
  letter-spacing : 0.05em;
}

.cart-products__col--image {
  text-align : center;
}

.cart-products__col--price,
.cart-products__col--total {
  text-align : right;
}

.cart-products__col--qty {
  text-align : center;
}

/* ==================================================
   Ligne produit
   ================================================== */
.cart-products__list {
  display        : flex;
  flex-direction : column;
}

.cart-product-line {
  display               : grid;
  grid-template-columns : 80px 1fr;
  gap                   : 1rem;
  padding               : 1rem 0;
  margin                : 0 1rem;
  border-top            : 1px solid rgba(0, 0, 0, 0.08);
  align-items           : start;
}

@media (min-width : 768px) {
  .cart-product-line {
    display               : grid;
    grid-template-columns : 80px 1fr 120px 140px 100px 50px;
    gap                   : 1rem;
    align-items           : center;
  }
}

.cart-product-line:last-child {
  border-bottom : none;
}

/* Image du produit */
.cart-product-line__image {
  width         : 80px;
  height        : 80px;
  border-radius : var(--radius-md);
  overflow      : hidden;
  background    : var(--color-grey-default);
  grid-row      : span 1;
}

@media (min-width : 768px) {
  .cart-product-line__image {
    grid-row : auto;
  }
}

.cart-product-line__image img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
}

.cart-product-line__image-link {
  display : block;
  width   : 100%;
  height  : 100%;
}

.cart-product-line__image-placeholder {
  width           : 100%;
  height          : 100%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : var(--color-grey-font-default);
  opacity         : 0.3;
}

/* Corps du produit */
.cart-product-line__body {
  display : contents;
}

@media (max-width : 767px) {
  .cart-product-line__body {
    display : grid;
    gap     : 0.75rem;
  }

  .cart-product-line__quantity, .cart-product-line__remove {
    grid-row : 3;
  }

  .cart-product-line .cart-product-line__price-unit {
    align-items : flex-end;
  }
}

.cart-product-line__info {
  display        : flex;
  flex-direction : column;
  gap            : 0.25rem;
}

@media (min-width : 768px) {
  .cart-product-line__info {
    grid-column : 2;
  }
}

.cart-product-line__name {
  font-size       : var(--font-size-300);
  font-weight     : 600;
  color           : var(--color-black-default);
  text-decoration : none;
  transition      : color 0.2s ease;
  line-height     : 1.4;
}

.cart-product-line__name:hover {
  color : var(--color-primary);
}

.cart-product-line__reference {
  font-size : var(--font-size-200);
  color     : var(--color-grey-font-default);
  margin    : 0;
}

.cart-product-line__attribute {
  font-size : var(--font-size-200);
  color     : var(--color-grey-font-default);
  margin    : 0;
}

.cart-product-line__attribute-label {
  font-weight : 500;
}

.cart-product-line__customization {
  font-size       : var(--font-size-200);
  color           : var(--color-primary);
  text-decoration : underline;
}

/* Prix unitaire */
.cart-product-line__price-unit {
  display        : flex;
  flex-direction : column;
  align-items    : flex-start;
  gap            : 0.25rem;
}

@media (min-width : 768px) {
  .cart-product-line__price-unit {
    grid-column : 3;
    align-items : flex-end;
  }
}

.cart-product-line__discount {
  display     : flex;
  align-items : center;
  gap         : 0.5rem;
}

.cart-product-line__regular-price {
  font-size       : var(--font-size-200);
  color           : var(--color-grey-font-default);
  text-decoration : line-through;
}

.cart-product-line__discount-badge {
  font-size     : var(--font-size-100);
  padding       : 0.125rem 0.375rem;
  background    : var(--color-primary);
  color         : var(--color-white-default);
  border-radius : var(--radius-sm);
}

.cart-product-line__current-price {
  font-size   : var(--font-size-300);
  font-weight : 500;
  color       : var(--color-black-default);
}

.cart-product-line__unit-price {
  font-size : var(--font-size-200);
  color     : var(--color-grey-font-default);
}

/* Sélecteur de quantité */
.cart-product-line__quantity {
  display         : flex;
  justify-content : flex-start;
}

@media (min-width : 768px) {
  .cart-product-line__quantity {
    grid-column     : 4;
    justify-content : center;
  }
}

.qty-selector {
  display     : flex;
  align-items : center;
  gap         : 0.25rem;
  padding     : 0.25rem;
}

.qty-selector__btn {
  width           : 32px;
  height          : 32px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : #efefef;
  border          : none;
  border-radius   : var(--radius-sm);
  cursor          : pointer;
  transition      : all 0.2s ease;
  color           : var(--color-black-default);
}

/* Hide Bootstrap TouchSpin elements - force override */
.cart-product-line__quantity .input-group.bootstrap-touchspin {
  display : contents !important;
}

.cart-product-line__quantity .input-group-addon {
  display : none !important;
}

.cart-product-line__quantity .input-group-btn-vertical {
  display : none !important;
}

.cart-product-line__quantity .bootstrap-touchspin-prefix,
.cart-product-line__quantity .bootstrap-touchspin-postfix {
  display : none !important;
}

.cart-product-line__quantity .js-cart-qty-input,
.cart-product-line__quantity .qty-selector__input {
  display         : block !important;
  width           : 48px !important;
  height          : 32px !important;
  text-align      : center !important;
  font-size       : var(--font-size-200) !important;
  font-weight     : 500 !important;
  border          : none !important;
  background      : var(--color-white-default);
  border-radius   : var(--radius-md);
  -moz-appearance : textfield !important;
  margin          : 0 !important;
  padding         : 0 !important;
}

.cart-product-line__quantity .js-cart-qty-input::-webkit-outer-spin-button,
.cart-product-line__quantity .js-cart-qty-input::-webkit-inner-spin-button,
.cart-product-line__quantity .qty-selector__input::-webkit-outer-spin-button,
.cart-product-line__quantity .qty-selector__input::-webkit-inner-spin-button {
  -webkit-appearance : none !important;
  margin             : 0 !important;
}

.qty-selector__input {
  width           : 48px;
  height          : 32px;
  text-align      : center;
  font-size       : var(--font-size-200);
  font-weight     : 500;
  border          : none;
  background      : transparent;
  -moz-appearance : textfield;
}

.qty-selector__input::-webkit-outer-spin-button,
.qty-selector__input::-webkit-inner-spin-button {
  -webkit-appearance : none;
  margin             : 0;
}

.qty-selector__input:focus {
  outline : none;
}

/* Total ligne */
.cart-product-line__total {
  display : none;
}

@media (min-width : 768px) {
  .cart-product-line__total {
    display         : flex;
    grid-column     : 5;
    justify-content : flex-end;
  }
}

.cart-product-line__total-price {
  font-size   : var(--font-size-300);
  font-weight : 600;
  color       : var(--color-black-default);
}

.cart-product-line__gift {
  font-size : var(--font-size-200);
  color     : var(--color-tertiary);
}

/* Bouton supprimer */
.cart-product-line__remove {
  display         : flex;
  justify-content : flex-end;
}

@media (min-width : 768px) {
  .cart-product-line__remove {
    grid-column : 6;
  }
}

.cart-product-line__remove-btn {
  padding    : 0.5rem;
  color      : var(--color-grey-font-default);
  transition : color 0.2s ease;
}

.cart-product-line__remove-btn:hover {
  color : hsl(0, 84%, 60%);
}

/* Total mobile */
.cart-product-line__mobile-total {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  padding-top     : 0.75rem;
  margin-top      : 0.75rem;
  border-top      : 1px solid rgba(0, 0, 0, 0.08);
  grid-column     : 1 / -1;
}

@media (min-width : 768px) {
  .cart-product-line__mobile-total {
    display : none;
  }
}

.cart-product-line__mobile-total-label {
  font-size : var(--font-size-200);
  color     : var(--color-grey-font-default);
}

.cart-product-line__mobile-total-value {
  font-size   : var(--font-size-300);
  font-weight : 700;
  color       : var(--color-primary);
}

/* ==================================================
   Bouton Continuer achats
   ================================================== */
.cart-continue {
  margin-top : 1.5rem;
}

.cart-continue__btn {
  display         : inline-flex;
  align-items     : center;
  gap             : 0.5rem;
  padding         : 0.75rem 1.25rem;
  background      : transparent;
  border          : 1px solid var(--color-black-default);
  color           : var(--color-black-default);
  font-size       : var(--font-size-200);
  font-weight     : 500;
  text-decoration : none;
  border-radius   : var(--radius-md);
  transition      : all 0.2s ease;
}

.cart-continue__btn:hover {
  background : var(--color-black-default);
  color      : var(--color-white-default);
}

/* ==================================================
   Colonne Récapitulatif (droite)
   ================================================== */
.cart-grid-right {
  position : relative;
}

@media (min-width : 1024px) {
  .cart-grid-right {
    position   : sticky;
    top        : 6rem;
    align-self : start;
  }
}

.cart-summary {
  background    : var(--color-grey-default);
  border-radius : var(--radius-lg);
  overflow      : hidden;
  border        : 1px solid #E0E6EB
}

.cart-summary__header {
  padding       : 1.25rem;
  border-bottom : 1px solid rgba(0, 0, 0, 0.08);
}

.cart-summary__title {
  font-size   : var(--font-size-400);
  font-weight : 600;
  color       : var(--color-black-default);
  margin      : 0;
}

.cart-summary__content {
  padding : 1.25rem;
}

/* ==================================================
   Totaux
   ================================================== */
.cart-totals {
  display        : flex;
  flex-direction : column;
  gap            : 0.75rem;
}

.cart-totals__line {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  flex-wrap       : wrap;
  gap             : 0.5rem;
}

.cart-totals__label {
  font-size : var(--font-size-200);
  color     : var(--color-grey-font-default);
}

.cart-totals__value {
  font-size : var(--font-size-200);
  color     : var(--color-black-default);
}

.cart-totals__value--strong {
  font-weight : 600;
}

.cart-totals__value--free {
  color       : #16a34a;
  font-weight : 600;
}

.cart-totals__separator {
  height     : 1px;
  background : rgba(0, 0, 0, 0.08);
  margin     : 0.5rem 0;
}

.cart-totals__details {
  display        : flex;
  flex-direction : column;
  gap            : 0.5rem;
}

.cart-totals__shipping-info {
  width         : 100%;
  font-size     : var(--font-size-100);
  color         : var(--color-grey-font-default);
  background    : var(--color-grey-default);
  padding       : 0.5rem;
  border-radius : var(--radius-sm);
}

.cart-totals__shipping-details {
  width : 100%;
}

.cart-totals__line--total {
  padding-top : 0.5rem;
}

.cart-totals__label--total {
  font-size   : var(--font-size-400);
  font-weight : 700;
  color       : var(--color-black-default);
}

.cart-totals__value--total {
  font-size   : var(--font-size-600);
  font-weight : 700;
  color       : var(--color-black-default);
}

.cart-totals__tax-info {
  font-size  : var(--font-size-100);
  color      : var(--color-grey-font-default);
  text-align : right;
  margin     : 0;
}

/* ==================================================
   Code promo
   ================================================== */
.cart-voucher {
  display        : flex;
  flex-direction : column;
  gap            : 0.75rem;
}

.cart-voucher__label {
  display     : flex;
  align-items : center;
  gap         : 0.5rem;
  font-size   : var(--font-size-200);
  font-weight : 600;
  color       : var(--color-black-default);
}

.cart-voucher__list {
  list-style     : none;
  padding        : 0;
  margin         : 0;
  display        : flex;
  flex-direction : column;
  gap            : 0.5rem;
}

.cart-voucher__applied {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 0.75rem;
  background      : var(--color-primary-90);
  border          : 1px solid var(--color-primary-30);
  border-radius   : var(--radius-md);
}

.cart-voucher__applied-info {
  display     : flex;
  align-items : center;
  gap         : 0.5rem;
}

.cart-voucher__applied-info svg {
  color : var(--color-primary);
}

.cart-voucher__applied-name {
  font-size   : var(--font-size-200);
  font-weight : 600;
  color       : var(--color-primary);
}

.cart-voucher__applied-remove {
  padding    : 0.25rem;
  color      : var(--color-grey-font-default);
  transition : color 0.2s ease;
}

.cart-voucher__applied-remove:hover {
  color : var(--color-black-default);
}

.cart-voucher__form-inner {
  display : flex;
  gap     : 0.5rem;
}

.cart-voucher .cart-voucher__form {
  display        : flex;
  flex-direction : column;
  gap            : 0.75rem;
}

.cart-voucher__input {
  flex          : 1;
  padding       : 0.625rem 0.875rem;
  border        : 1px solid var(--input-border-color);
  border-radius : var(--input-radius);
  font-size     : var(--font-size-200);
  background    : var(--input-bg-color);
  min-width     : 0;
}

.cart-voucher__input:focus {
  outline      : none;
  border-color : var(--color-primary);
  box-shadow   : 0 0 0 3px var(--color-primary-20);
}

.cart-voucher__btn {
  padding       : 0.625rem 1rem;
  background    : transparent;
  border        : 1px solid var(--color-black-default);
  color         : var(--color-black-default);
  font-size     : var(--font-size-200);
  font-weight   : 500;
  border-radius : var(--radius-md);
  cursor        : pointer;
  transition    : all 0.2s ease;
  white-space   : nowrap;
}

.cart-voucher__btn:hover {
  background : var(--color-black-default);
  color      : var(--color-white-default);
}

.cart-voucher__error {
  display       : none;
  align-items   : center;
  gap           : 0.5rem;
  padding       : 0.75rem;
  background    : hsl(0, 84%, 97%);
  border        : 1px solid hsl(0, 84%, 90%);
  border-radius : var(--radius-md);
  color         : hsl(0, 84%, 50%);
  font-size     : var(--font-size-200);
}

.cart-voucher__error.show {
  display : flex;
}

.cart-voucher__available {
  padding-top : 0.5rem;
}

.cart-voucher__available-title {
  font-size : var(--font-size-200);
  color     : var(--color-grey-font-default);
  margin    : 0 0 0.5rem 0;
}

.cart-voucher__available-list {
  list-style     : none;
  padding        : 0;
  margin         : 0;
  display        : flex;
  flex-direction : column;
  gap            : 0.25rem;
}

.cart-voucher__available-item {
  font-size : var(--font-size-200);
  color     : var(--color-grey-font-default);
}

.cart-voucher__available-code {
  text-decoration : underline;
  cursor          : pointer;
}

/* ==================================================
   Bouton Commander
   ================================================== */
.cart-actions {
  padding        : 1.25rem;
  display        : flex;
  flex-direction : column;
  gap            : 1rem;
}

.cart-actions__alert {
  margin : 0;
}

.cart-actions__btn {
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5rem;
  width           : 100%;
  padding         : 1rem 1.5rem;
  font-size       : var(--font-size-300);
  font-weight     : 600;
  text-decoration : none;
  border-radius   : var(--radius-md);
  transition      : all 0.2s ease;
  cursor          : pointer;
}

.cart-actions__btn--primary {
  background : var(--color-primary);
  border     : 2px solid var(--color-primary);
  color      : var(--color-white-default);
}

.cart-actions__btn--primary:hover {
  color        : var(--color-white-default);
  background   : var(--color-primary-40);
  border-color : var(--color-primary-40);
  box-shadow   : 0 10px 30px rgba(0, 0, 0, 0.25);
  transform    : translateY(-2px);
}

.cart-actions__btn--disabled {
  background : var(--color-grey-font-default);
  border     : 2px solid var(--color-grey-font-default);
  color      : var(--color-white-default);
  cursor     : not-allowed;
  opacity    : 0.6;
}

/* ==================================================
   Footer paiement sécurisé
   ================================================== */
.cart-payment {
  padding    : 1rem 1.25rem;
  border-top : 1px solid rgba(0, 0, 0, 0.08);
  text-align : center;
}

.cart-payment__label {
  font-size : var(--font-size-100);
  color     : var(--color-grey-font-default);
  margin    : 0 0 0.5rem 0;
}

.cart-payment__logos {
  display         : flex;
  justify-content : center;
  align-items     : center;
  gap             : 0.5rem;
}

.cart-payment__logo {
  height : 28px;
  width  : auto;
}

.cart-payment__logo-visa {
  width : 40px;
}

/* ==================================================
   États panier vide - Style maquette React
   ================================================== */
.cart-empty-display {
  display : none;
  padding : 3rem 0;
}

.cart-page--empty .cart-content,
.cart-page--empty .cart-recommendations {
  display : none;
}

.cart-page--empty .cart-empty-display {
  display : block;
}

.cart-empty {
  padding : 0;
}

.cart-empty__wrapper {
  text-align : center;
  padding    : 4rem 1rem;
}

.cart-empty__icon {
  width   : 96px;
  height  : 96px;
  margin  : 0 auto 1.5rem;
  color   : var(--color-grey-font-default);
  opacity : 0.3;
}

.cart-empty__title {
  font-size   : 1.5rem;
  font-weight : 600;
  color       : var(--color-black-default);
  margin      : 0 0 1rem 0;
}

.cart-empty__text {
  font-size   : var(--font-size-200);
  color       : var(--color-grey-font-default);
  margin      : 0 auto 2rem;
  max-width   : 448px;
  line-height : 1.6;
}

.cart-empty__btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5rem;
  padding         : 1rem 2rem;
  background      : var(--color-primary);
  border          : none;
  color           : var(--color-white-default);
  font-size       : var(--font-size-200);
  font-weight     : 600;
  text-decoration : none;
  border-radius   : var(--radius-md);
  transition      : transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow      : 0 10px 25px rgba(0, 0, 0, 0.2);
}

.cart-empty__btn:hover {
  color      : var(--color-white-default);
  transform  : translateY(-2px);
  box-shadow : 0 15px 35px rgba(0, 0, 0, 0.25);
}

.cart-empty__btn svg {
  width        : 16px;
  height       : 16px;
  margin-right : 0.5rem;
}

/* ==================================================
   Legacy - Compatibilité avec anciens styles
   ================================================== */
.cart-grid .cart-grid-body {
  background : transparent;
}

.cart-grid .card-block {
  padding : 0;
}

.separator {
  display : none;
}