// main: ../main.scss
/*--------------------------------------------------------------
# Buy Tickets Section
--------------------------------------------------------------*/
.buy-tickets {
  background-color: color-mix(in srgb, var(--background-color), var(--surface-color) 5%);

  .ticket-form-wrapper {
    background-color: var(--surface-color);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .event-info {
    text-align: center;
    border-bottom: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%);
    padding-bottom: 30px;

    h3 {
      color: var(--heading-color);
      margin-bottom: 20px;
      font-size: 2rem;
      font-weight: 700;
    }

    .event-meta {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30px;

      span {
        display: flex;
        align-items: center;
        color: var(--default-color);
        font-size: 14px;

        i {
          color: var(--accent-color);
          margin-right: 8px;
          font-size: 16px;
        }
      }
    }

    @media (max-width: 768px) {
      .event-meta {
        flex-direction: column;
        gap: 15px;
      }
    }
  }

  .ticket-types {
    margin-bottom: 40px;

    h4 {
      color: var(--heading-color);
      margin-bottom: 25px;
      font-size: 1.5rem;
      font-weight: 600;
    }

    .ticket-option {
      margin-bottom: 20px;

      input[type="radio"] {
        display: none;
      }

      .ticket-label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25px;
        border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        background-color: var(--surface-color);

        &:hover {
          border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
      }

      input[type="radio"]:checked+.ticket-label {
        border-color: var(--accent-color);
        background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
        box-shadow: 0 5px 20px color-mix(in srgb, var(--accent-color), transparent 80%);
      }

      .ticket-info {
        flex: 1;

        .ticket-name {
          font-size: 1.1rem;
          font-weight: 600;
          color: var(--heading-color);
          margin-bottom: 8px;
        }

        .ticket-description {
          color: var(--default-color);
          font-size: 14px;
          margin-bottom: 12px;
        }

        .ticket-benefits {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;

          span {
            font-size: 12px;
            color: color-mix(in srgb, var(--default-color), transparent 20%);
            background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
            padding: 4px 8px;
            border-radius: 4px;
          }
        }
      }

      .ticket-price {
        text-align: right;

        .original-price {
          color: color-mix(in srgb, var(--default-color), transparent 50%);
          text-decoration: line-through;
          font-size: 14px;
          display: block;
          margin-bottom: 4px;
        }

        .current-price {
          color: var(--accent-color);
          font-size: 1.5rem;
          font-weight: 700;
        }
      }

      @media (max-width: 768px) {
        .ticket-label {
          flex-direction: column;
          text-align: center;
          gap: 15px;
        }

        .ticket-benefits {
          justify-content: center;
        }
      }
    }
  }

  .ticket-form {
    .form-group {
      margin-bottom: 25px;

      label {
        color: var(--heading-color);
        font-weight: 500;
        margin-bottom: 8px;
        display: block;
        font-size: 14px;
      }

      input[type="text"],
      input[type="email"],
      input[type="tel"],
      select,
      textarea {
        color: var(--default-color);
        background-color: var(--surface-color);
        font-size: 14px;
        border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
        border-radius: 8px;
        padding: 12px 16px;
        width: 100%;
        transition: all 0.3s ease;

        &:focus {
          border-color: var(--accent-color);
          outline: none;
          box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 90%);
        }

        &::placeholder {
          color: color-mix(in srgb, var(--default-color), transparent 70%);
        }
      }

      select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 12px center;
        background-repeat: no-repeat;
        background-size: 16px;
        padding-right: 40px;
      }
    }
  }

  .pricing-summary {
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
    border-radius: 10px;
    padding: 25px;
    margin: 30px 0;

    h5 {
      color: var(--heading-color);
      margin-bottom: 20px;
      font-size: 1.2rem;
      font-weight: 600;
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      color: var(--default-color);

      &.total {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 2px solid color-mix(in srgb, var(--accent-color), transparent 70%);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--heading-color);

        .total-price {
          color: var(--accent-color);
          font-size: 1.3rem;
          font-weight: 700;
        }
      }
    }

    .tax-note {
      font-size: 12px;
      color: color-mix(in srgb, var(--default-color), transparent 40%);
      text-align: center;
      margin-top: 15px;
      font-style: italic;
    }
  }

  .terms-checkbox,
  .newsletter-checkbox {
    margin-bottom: 20px;

    input[type="checkbox"] {
      margin-right: 10px;
    }

    label {
      color: var(--default-color);
      font-size: 14px;
      cursor: pointer;

      a {
        color: var(--accent-color);
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .form-submit {
    text-align: center;
    margin-top: 30px;

    .btn-submit {
      background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 15%));
      color: var(--contrast-color);
      border: none;
      padding: 16px 40px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 250px;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px color-mix(in srgb, var(--accent-color), transparent 70%);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }

  .security-info {
    margin-top: 40px;
    text-align: center;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    padding-top: 30px;

    .security-badges {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-bottom: 25px;

      .badge-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: color-mix(in srgb, var(--default-color), transparent 20%);
        font-size: 14px;

        i {
          color: var(--accent-color);
          font-size: 18px;
        }
      }
    }

    .payment-methods {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      flex-wrap: wrap;

      .payment-label {
        color: var(--default-color);
        font-size: 14px;
        font-weight: 500;
      }

      .payment-icons {
        display: flex;
        align-items: center;
        gap: 10px;

        i {
          color: var(--accent-color);
          font-size: 24px;
        }

        .payment-text {
          color: color-mix(in srgb, var(--default-color), transparent 30%);
          font-size: 13px;
        }
      }
    }

    @media (max-width: 768px) {
      .security-badges {
        flex-direction: column;
        gap: 15px;
      }

      .payment-methods {
        flex-direction: column;
        gap: 10px;
      }
    }
  }

  @media (max-width: 768px) {
    .ticket-form-wrapper {
      padding: 25px 20px;
    }
  }
}