// _cart.scss
.cart-container {
  padding: 2rem;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;

  .poster-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    justify-content: center;
    gap: 1rem;
    padding-right: 1rem;
    overflow: visible;

    .poster-card {
      position: relative;
      aspect-ratio: 2/3;
      min-height: 220px;

      &:hover .delete-overlay {
        opacity: 1;
      }

      .poster-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        display: block;
      }

      .delete-overlay {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease;
        border-radius: 8px;

        .delete-button {
          background-color: #e74c3c;
          border: none;
          color: white;
          padding: 0.65rem;
          border-radius: 50%;
          cursor: pointer;
          transition: transform 0.2s ease;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
          display: inline-flex;
          align-items: center;
          justify-content: center;

          &:hover,
          &:focus {
            transform: scale(1.05);
            outline: none;
          }
        }
      }
    }

    .poster-card.add-new {
      aspect-ratio: 2/3;
      border-radius: 8px;
      border: 2px dashed #7f8c8d;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color .2s ease, border-color .2s ease;
    }
    
    .poster-card.add-new:hover {
      background-color: rgba(255,255,255,0.05);
      border-color: #1caff2;
    }
    
    .add-new .add-symbol {
      font-size: 3rem;
      font-weight: bold;
      color: #7f8c8d;
      transition: transform .2s ease;
    }
    
    .poster-card.add-new:hover .add-symbol {
      transform: scale(1.1);
    }

    // État vide simple
    .empty-cart-container {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 60vh;
      text-align: center;

      .MuiTypography-body1 {
        color: #7f8c8d;
        margin-bottom: 2rem;
        max-width: 400px;
      }

      .back-button {
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        line-height: 2.4rem;
        display: inline-block;
        cursor: pointer;
        padding: 0 1rem;
        border: 0;
        border-radius: 4px;
        outline: none;
        background: #526e89;
        transition: background-color 0.3s ease;
        min-width: 160px;

        &:hover {
          background-color: #1caff2;
        }

        &:disabled {
          opacity: 0.7;
          cursor: not-allowed;
        }
      }
    }
  }

  .action-panel {
    flex: 0 0 320px;
    max-width: 320px;
    position: sticky;
    top: 2rem;
    background-color: #34495e;
    border-radius: 8px;
    padding: 1.5rem;
    height: fit-content;
    box-sizing: border-box;
    align-self: flex-start;

    h2 {
      color: white;
      margin-bottom: 1.5rem;
      font-size: 1.25rem;
    }

    .format-select {
      width: 100%;
      margin-bottom: 1.5rem;
      padding: 0.6rem;
      background-color: #2c3e50;
      border: 1px solid #95a5a6;
      color: white;
      border-radius: 4px;
      appearance: none;
    }

    .download-button,
    .clear-button {
      width: 100%;
      padding: 0.85rem;
      background-color: #00a346;
      color: white;
      border: none;
      border-radius: 6px;
      margin-bottom: 1rem;
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.08s ease;
      font-size: 0.9rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;

      &:active {
        transform: translateY(1px);
      }

      &:hover:not(:disabled) {
        filter: brightness(0.95);
      }

      &:disabled {
        background-color: #7f8c8d;
        cursor: not-allowed;
      }
    }

    .clear-button {
      background-color: #e74c3c;

      &:hover:not(:disabled) {
        filter: brightness(0.95);
      }
    }
  }
}

/* Tablette */
@media (max-width: 992px) {
  .cart-container {
    padding: 1.5rem;
    gap: 1rem;

    .poster-grid {
      grid-template-columns: repeat(2, 140px); 
      max-height: calc(100vh - 3rem);

      .poster-card {
        min-height: 200px;
      }
    }

    .action-panel {
      width: 260px;
      top: 1.5rem;
      padding: 1.25rem;
    }
  }
}

/* Small devices */
@media (max-width: 768px) {
  .cart-container {
    flex-direction: column;
    padding: 1rem;

    .poster-grid {
      grid-template-columns: repeat(4, 120px);
      gap: 0.75rem;
      padding-right: 0;
      max-height: none;

      .poster-card {
        aspect-ratio: 2/3;
        min-height: 180px;
      }

      .empty-cart-container {
        min-height: 50vh;
      }
    }

    .action-panel {
      flex: 0;
      align-self: center;
      .download-button,
      .clear-button {
        padding: 0.85rem;
        font-size: 0.95rem;
      }
    }
  }
}

/* Mobile */
@media (max-width: 480px) {
  .cart-container {
    display: flex;
    padding: 0.75rem;
    gap: 0.75rem;
    align-items: center;

    .poster-grid {
      grid-template-columns: repeat(2, 140px);

      .poster-card {
        aspect-ratio: 2/3;
        min-height: 150px;
        border-radius: 6px;

        .poster-image {
          border-radius: 6px;
        }

        .delete-overlay .delete-button {
          padding: 0.6rem;
          font-size: 1rem;
        }
      }

      .empty-cart-container {
        padding: 1rem 0;
        min-height: 40vh;

        .MuiTypography-body1 {
          max-width: 320px;
          font-size: 0.95rem;
        }

        .back-button {
          min-width: 140px;
          padding: 0.6rem 0.9rem;
          font-size: 0.85rem;
        }
      }
    }

    .action-panel {
      flex: 0;
      align-self: center;
      width: 100%;
      .download-button,
      .clear-button {
        padding: 0.85rem;
        font-size: 0.95rem;
      }
    }
  }
}

/* Focus states (accessibility) */
.poster-card .delete-button:focus,
.action-panel .download-button:focus,
.action-panel .clear-button:focus,
.action-panel .format-select:focus,
.empty-cart-container .back-button:focus {
  outline: 3px solid rgba(255, 255, 255, 0.12);
  outline-offset: 2px;
}
