/* My Account Subscriptions Styles */

// Menu badge for subscription count
.arraysubs-menu-badge {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  background-color: #007bff;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  border-radius: 10px;
  vertical-align: middle;
}

.arraysubs-my-account-subscriptions {
  margin-bottom: 2rem;

  h2 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
  }

  // Pagination styles
  .arraysubs-pagination {
    margin-top: 1.5rem;
    text-align: center;

    ul {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        margin: 0;

        a,
        span {
          display: inline-block;
          padding: 8px 14px;
          border: 1px solid #dee2e6;
          border-radius: 4px;
          color: #007bff;
          text-decoration: none;
          transition: all 0.2s;
          font-size: 0.875rem;

          &:hover {
            background-color: #f8f9fa;
            border-color: #007bff;
          }
        }

        span.current {
          background-color: #007bff;
          border-color: #007bff;
          color: white;
        }

        span.dots {
          border: none;
          background: none;
          color: #6c757d;
        }
      }
    }
  }

  &__info,
  .arraysubs-pagination__info {
    text-align: center;
    color: #6c757d;
    font-size: 0.875rem;
    margin-top: 0.75rem;
  }

  .arraysubs-subscriptions-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;

    thead {
      background-color: #f8f9fa;
      border-bottom: 2px solid #dee2e6;

      th {
        padding: 12px;
        text-align: left;
        font-weight: 600;
        color: #495057;
      }
    }

    tbody {
      tr {
        border-bottom: 1px solid #dee2e6;
        transition: background-color 0.2s;

        &:hover {
          background-color: #f8f9fa;
        }

        td {
          padding: 12px;
          vertical-align: middle;

          a {
            color: #007bff;
            text-decoration: none;

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

          small {
            display: block;
            color: #6c757d;
            font-size: 0.875rem;
            margin-top: 4px;
            line-height: 1;
          }
        }
      }
    }

    .subscription-status-badge {
      display: inline-block;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 0.875rem;
      line-height: 1;
      font-weight: 500;
      text-transform: capitalize;

      &.subscription-status-active {
        background-color: #d4edda;
        color: #155724;
      }

      &.subscription-status-pending {
        background-color: #fff3cd;
        color: #856404;
      }

      &.subscription-status-on-hold {
        background-color: #fff3cd;
        color: #856404;
      }

      &.subscription-status-cancelled {
        background-color: #f8d7da;
        color: #721c24;
      }

      &.subscription-status-expired {
        background-color: #e2e3e5;
        color: #383d41;
      }

      &.subscription-status-trial {
        background-color: #d1ecf1;
        color: #0c5460;
      }

      &.subscription-status-pending-cancel {
        background-color: #ffeeba;
        color: #7a4f00;
        margin-left: 6px;
      }
    }

    @media (max-width: 768px) {
      thead {
        display: none;
      }

      tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 4px;
      }

      tbody td {
        display: flex;
        justify-content: space-between;
        padding: 8px 12px;
        border-bottom: 1px solid #f1f1f1;

        &:last-child {
          border-bottom: none;
        }

        &::before {
          content: attr(data-title);
          font-weight: 600;
          margin-right: 10px;
        }
      }

      .subscription-actions {
        justify-content: flex-end;
      }
    }
  }
}

.arraysubs-view-subscription {
  margin-bottom: 2rem;

  h2 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
  }

  h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
  }

  .subscription-details {
    .subscription-overview,
    .subscription-orders,
    .subscription-actions {
      margin-bottom: 2rem;
    }

    .woocommerce-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;

      th,
      td {
        padding: 1rem;
        text-align: left;
        border-bottom: 1px solid #dee2e6;
      }

      th {
        font-weight: 600;
        width: 200px;
        color: #495057;
      }

      td {
        color: #212529;
      }

      thead {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;

        th {
          width: auto;
        }
      }

      tbody tr:hover {
        background-color: #f8f9fa;
      }

      small {
        display: block;
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 4px;
      }
    }

    // Order actions buttons
    .subscription-order-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 7px 12px;
        border: 1px solid var(--arraysubs-fb-primary-color, #0073aa);
        border-radius: 4px;
        background-color: var(--arraysubs-fb-primary-color, #0073aa);
        color: white;
        font-size: 0.8125rem;
        line-height: 1.2;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        transition:
          background-color 0.2s,
          border-color 0.2s,
          color 0.2s;

        &:hover,
        &:focus {
          background-color: #005177;
          border-color: #005177;
          color: white;
          text-decoration: none;
        }

        &.invoice {
          background-color: #17a2b8;
          color: white;
          border-color: #17a2b8;

          &:hover {
            background-color: #138496;
            border-color: #117a8b;
          }
        }

        &.pay {
          background-color: #28a745;
          color: white;
          border-color: #28a745;

          &:hover {
            background-color: #218838;
            border-color: #1e7e34;
          }
        }
      }
    }

    .subscription-status-badge {
      display: inline-block;
      padding: 4px 12px;
      line-height: 1;
      border-radius: 4px;
      font-size: 0.875rem;
      font-weight: 500;
      text-transform: capitalize;

      &.subscription-status-active {
        background-color: #d4edda;
        color: #155724;
      }

      &.subscription-status-pending {
        background-color: #fff3cd;
        color: #856404;
      }

      &.subscription-status-on-hold {
        background-color: #fff3cd;
        color: #856404;
      }

      &.subscription-status-cancelled {
        background-color: #f8d7da;
        color: #721c24;
      }

      &.subscription-status-expired {
        background-color: #e2e3e5;
        color: #383d41;
      }

      &.subscription-status-trial {
        background-color: #d1ecf1;
        color: #0c5460;
      }

      &.subscription-status-pending-cancel {
        background-color: #ffeeba;
        color: #7a4f00;
        margin-left: 6px;
      }
    }

    // Coupon exhausted label
    .arraysubs-coupon-exhausted {
      color: #999;
    }

    // Payment method update link
    .subscription-payment-update-link {
      display: inline-block;
      color: var(--arraysubs-fb-primary-color, #0073aa);
      text-decoration: none;
      border-bottom: 1px dotted var(--arraysubs-fb-primary-color, #0073aa);
      transition:
        color 0.15s ease,
        border-color 0.15s ease;

      &:hover {
        color: #005177;
        border-color: #005177;
      }
    }

    .subscription-actions {
      &__buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        margin-bottom: 1rem;

        .button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 42px;
          padding: 10px 20px;
          border: 1px solid var(--arraysubs-fb-primary-color, #0073aa);
          border-radius: 4px;
          background-color: var(--arraysubs-fb-primary-color, #0073aa);
          color: white;
          font-size: 0.9375rem;
          line-height: 1.2;
          font-weight: 500;
          text-decoration: none;
          cursor: pointer;
          transition:
            background-color 0.2s,
            border-color 0.2s,
            color 0.2s;

          &:hover,
          &:focus {
            background-color: #005177;
            border-color: #005177;
            color: white;
            text-decoration: none;
          }

          &:disabled {
            background-color: #6c757d;
            border-color: #6c757d;
            color: white;
            cursor: not-allowed;
            opacity: 0.75;
          }
        }
      }

      .arraysubs-switch-plan {
        background-color: var(--arraysubs-fb-primary-color, #0073aa);
        color: white;
        border-color: var(--arraysubs-fb-primary-color, #0073aa);

        &:hover {
          background-color: #005177;
          border-color: #005177;
          color: white;
        }
      }

      .arraysubs-cancel-subscription {
        background-color: #dc3545;
        color: white;
        border-color: #dc3545;

        &:hover {
          background-color: #c82333;
          border-color: #c82333;
          color: white;
        }
      }

      @media (max-width: 480px) {
        &__buttons {
          flex-direction: column;
          align-items: stretch;

          .button {
            width: 100%;
            text-align: center;
          }
        }
      }
    }

    // Shipping Address Section
    .subscription-shipping {
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid #dee2e6;

      h3 {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 1.1rem;
        font-weight: 600;
      }

      &__note {
        margin: 0 0 1rem 0;
        color: #6c757d;
      }

      &__address {
        padding: 1rem;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        margin-bottom: 1rem;

        address {
          font-style: normal;
          line-height: 1.8;
          margin: 0;
        }

        p {
          margin: 0;
        }
      }

      &__actions {
        margin-top: 1rem;

        .button {
          background-color: var(--arraysubs-fb-primary-color, #0073aa);
          color: white;
          border: none;
          padding: 8px 16px;
          border-radius: 4px;
          cursor: pointer;
          transition: background-color 0.2s;
          font-size: 0.875rem;

          &:hover {
            background-color: #005177;
            color: white;
          }

          &:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
          }
        }
      }

      &__cutoff-notice {
        margin-top: 0.5rem;
        padding: 0.5rem 0.75rem;
        background-color: #fff3cd;
        border: 1px solid #ffeeba;
        border-radius: 4px;
        color: #856404;

        small {
          font-size: 0.85rem;
        }
      }
    }

    .arraysubs-pending-cancel-banner {
      margin-bottom: 1.25rem;
      padding: 0.75rem 1rem;
      background-color: #fff8e1;
      border: 1px solid #ffe082;
      border-left: 4px solid #f0ad4e;
      border-radius: 4px;
      color: #7a4f00;

      strong {
        display: block;
        font-size: 1rem;
        margin-bottom: 0.25rem;
      }

      span {
        font-size: 0.9rem;
      }
    }
  }
}
