// Variables
$primary-color: #00a346;
$secondary-color: #3498db;
$background-dark: #2c3e50;
$background-light: #34495e;
$text-white: #ecf0f1;
$text-muted: #95a5a6;
$hover-scale: 1.05;
$gap-spacing: 1rem;

.cart-container {
  margin-top: 2rem;
  margin-bottom: 4rem;
  display: flex;
  gap: $gap-spacing;

  .poster-list {
    flex: 2;
    margin-right: 2rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;

    .cart-title {
      color: $text-white;
      margin-bottom: 1rem;
      font-size: 2rem;
      font-weight: 400;
    }

    .poster-card {
      display: flex;
      margin-bottom: 1rem;
      background-color: $background-dark;
      border-radius: 4px;
      overflow: hidden;

      .poster-media {
        width: 120px;
        height: 180px;
        object-fit: cover;
        border-radius: 4px 0 0 4px;
      }

      .poster-content {
        flex-grow: 1;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .poster-title {
          color: $text-white;
          font-size: 1.25rem;
          margin-bottom: 0.5rem;
        }

        .poster-id {
          color: $text-muted;
          font-size: 1rem;
          margin-bottom: 1rem;
        }

        .poster-actions {
          display: flex;
          justify-content: space-between;
          gap: 0.5rem;

          .action-button {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem;
            border-radius: 4px;
            background-color: transparent;
            border: 1px solid $text-muted;
            color: $text-white;
            transition: background-color 0.3s ease;

            &:hover {
              background-color: $background-light;
              cursor: pointer;
            }

            &:not(:last-child) {
              margin-right: 0.5rem;
            }
          }
        }
      }
    }
  }

  .action-panel {
    flex: 1;
    position: sticky;
    top: 2rem;
    height: fit-content;
    padding: 1.5rem;
    background-color: $background-light;
    border-radius: 8px;

    .action-title {
      color: $text-white;
      margin-bottom: 1rem;
      font-size: 1.5rem;
    }

    .form-control {
      width: 100%;
      margin-bottom: 1.5rem;
      color: $text-white;

      select {
        background-color: $background-dark;
        color: $text-white;
        padding: 0.5rem;
        border: 1px solid $text-muted;
        border-radius: 4px;
      }
    }

    .action-buttons {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      .primary-button,
      .secondary-button {
        width: 100%;
        padding: 0.75rem;
        border: none;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: bold;
        transition: background-color 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;

        &.primary-button {
          background-color: $primary-color;
          color: $text-white;

          &:hover {
            background-color: darken($primary-color, 10%);
          }

          &:disabled {
            background-color: darken($primary-color, 20%);
            cursor: not-allowed;
          }
        }

        &.secondary-button {
          background-color: $secondary-color;
          color: $text-white;

          &:hover {
            background-color: darken($secondary-color, 10%);
          }
        }
      }
    }
  }
}
