/*
 * Cart Panel - Style maquette React
 * Mapping: accent = primary, muted = grey-default
 */

/* ==================================================
   Overlay
   ================================================== */
.cart-panel-overlay {
  position       : fixed;
  top            : 0;
  left           : 0;
  height         : 100vh;
  width          : 100%;
  z-index        : 14;
  background     : rgba(0, 0, 0, 0.5);
  cursor         : pointer;
  pointer-events : none;
  opacity        : 0;
  transition     : opacity 0.3s ease-in-out;
}

.cart-panel-overlay--is-show {
  opacity        : 1;
  pointer-events : all;
}

/* ==================================================
   Cart Panel Container
   ================================================== */
.cart-panel {
  position       : fixed;
  top            : 0;
  right          : 0;
  height         : 100vh;
  width          : 100%;
  max-width      : 420px;
  z-index        : 15;
  overflow       : hidden;
  background     : var(--color-white-default);
  display        : flex;
  flex-direction : column;
  transform      : translateX(100%);
  transition     : transform 0.3s ease-in-out;
}

.cart-panel--is-show {
  transform : translateX(0);
}

/* ==================================================
   Header
   ================================================== */
.cart-panel__header {
  display       : flex;
  align-items   : center;
  gap           : 0.75rem;
  padding       : 1.5rem;
  border-bottom : 1px solid rgba(0, 0, 0, 0.08);
}

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

.cart-panel__title svg {
  width  : 20px;
  height : 20px;
}

/* ==================================================
   Close Button
   ================================================== */
.cart-panel__close {
  position        : absolute;
  top             : 1rem;
  right           : 1rem;
  z-index         : 10;
  width           : 32px;
  height          : 32px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : transparent;
  border          : none;
  cursor          : pointer;
  color           : var(--color-black-default);
  opacity         : 0.7;
  transition      : opacity 0.2s ease;
}

.cart-panel__close:hover {
  opacity : 1;
}

.cart-panel__close span {
  font-size   : 1.5rem;
  line-height : 1;
}

/* ==================================================
   Product List Wrapper
   ================================================== */
.cart-panel__product-list-wrapper {
  flex       : 1;
  overflow-y : auto;
  padding    : 1rem 1.5rem;
}

/* ==================================================
   Product Item
   ================================================== */
.cart-panel__product-list {
  list-style     : none;
  padding        : 0;
  margin         : 0;
  display        : flex;
  flex-direction : column;
  gap            : 1rem;
}

.cart-panel__product-item {
  /* No border, managed by .cart-panel__product */
}

/* ==================================================
   Product Card
   ================================================== */
.cart-panel__product {
  display       : flex;
  gap           : 1rem;
  padding       : 0.75rem;
  background    : var(--color-grey-default);
  border-radius : var(--radius-lg);
}

/* Product Image */
.cart-panel__product-image {
  width         : 80px;
  height        : 80px;
  min-width     : 80px;
  border-radius : var(--radius-md);
  overflow      : hidden;
  background    : var(--color-grey-light);
}

.cart-panel__product-image img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
}

/* Product Content */
.cart-panel__product-content {
  flex           : 1;
  min-width      : 0;
  display        : flex;
  flex-direction : column;
}

.cart-panel__product-name {
  font-size          : 0.875rem;
  font-weight        : 500;
  color              : var(--color-black-default);
  text-decoration    : none;
  line-height        : 1.4;
  display            : -webkit-box;
  -webkit-line-clamp : 2;
  -webkit-box-orient : vertical;
  overflow           : hidden;
  transition         : color 0.2s ease;
  margin-bottom      : 0.125rem;
}

.cart-panel__product-name:hover {
  color : var(--color-primary);
}

.cart-panel__product-ref {
  font-size : 0.75rem;
  color     : var(--color-grey-font-default);
  margin    : 0 0 0.25rem 0;
}

.cart-panel__product-price {
  font-size   : 0.875rem;
  font-weight : 600;
  color       : var(--color-secondary);
  margin      : 0 0 0.5rem 0;
}

/* Quantity Controls */
.cart-panel__product-qty {
  display     : flex;
  align-items : center;
  gap         : 0.5rem;
  margin-top  : auto;
}

.cart-panel__qty-btn {
  width           : 28px;
  height          : 28px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : var(--color-white-default);
  border          : 1px solid rgba(0, 0, 0, 0.15);
  border-radius   : var(--radius-sm);
  cursor          : pointer;
  transition      : all 0.2s ease;
  color           : var(--color-black-default);
  padding         : 0;
}

.cart-panel__qty-btn:hover {
  background : var(--color-grey-default);
}

.cart-panel__qty-btn:disabled {
  opacity : 0.5;
  cursor  : not-allowed;
}

.cart-panel__qty-value {
  font-size   : 0.875rem;
  font-weight : 500;
  min-width   : 32px;
  text-align  : center;
}

/* Delete Button */
.cart-panel__delete-btn {
  margin-left     : auto;
  width           : 28px;
  height          : 28px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : var(--color-grey-font-default);
  transition      : all 0.2s ease;
  border-radius   : var(--radius-sm);
}

.cart-panel__delete-btn:hover {
  color      : hsl(0, 84%, 55%);
  background : hsla(0, 84%, 60%, 0.1);
}

/* ==================================================
   Summary Wrapper
   ================================================== */
.cart-panel__summary-wrapper {
  border-top : 1px solid rgba(0, 0, 0, 0.08);
  padding    : 1.5rem;
  background : var(--color-white-default);
}

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

.cart-panel__summary-line {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
}

.cart-panel__summary-line .label {
  font-size : 0.875rem;
  color     : var(--color-grey-font-default);
}

.cart-panel__summary-line .value {
  font-size   : 0.875rem;
  font-weight : 500;
  color       : var(--color-black-default);
}

.cart-panel__total {
  margin-top  : 0.5rem;
}

.cart-panel__total .label {
  font-size   : 1rem;
  font-weight : 600;
  color       : var(--color-black-default);
}

.cart-panel__total .value {
  font-size   : 1.25rem;
  font-weight : 700;
  color       : var(--color-secondary);
}

/* Buttons */
.cart-panel__validate {
  width           : 100%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5rem;
  padding         : 0.875rem 1.5rem;
  margin-top      : 1rem;
  font-size       : 1rem;
  font-weight     : 600;
  text-decoration : none;
  border-radius   : var(--radius-md);
  transition      : all 0.3s ease;
  cursor          : pointer;
  background      : var(--color-primary);
  border          : none;
  color           : var(--color-white-default);
  box-shadow      : 0 4px 15px rgba(0, 0, 0, 0.15);
}

.cart-panel__validate:hover {
  background : var(--color-primary-40);
  color      : var(--color-white-default);
  transform  : translateY(-2px);
  box-shadow : 0 6px 20px rgba(0, 0, 0, 0.2);
}

.cart-panel__continue {
  width           : 100%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5rem;
  padding         : 0.875rem 1.5rem;
  margin-top      : 0.5rem;
  font-size       : 1rem;
  font-weight     : 600;
  text-decoration : none;
  border-radius   : var(--radius-md);
  transition      : all 0.3s ease;
  cursor          : pointer;
  background      : transparent;
  border          : 2px solid rgba(0, 0, 0, 0.2);
  color           : var(--color-black-default);
}

.cart-panel__continue:hover {
  background   : var(--color-primary);
  border-color : var(--color-primary);
  color        : var(--color-white-default);
}

/* ==================================================
   Responsive
   ================================================== */
@media (max-width : 479px) {
  .cart-panel {
    max-width : 100%;
  }

  .cart-panel__product-image {
    width     : 64px;
    height    : 64px;
    min-width : 64px;
  }
}