/**
 * RCP Subscription Details Styles
 * 
 * Styles specific to the RCP subscription details component
 */

/* Wrapper and Headers */
.rcp-table-wrapper {
  width: 100%;
  margin: var(--wp--preset--spacing--20) 0;
}

.rcp-table-wrapper h3 {
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--contrast);
  margin: 0 0 var(--wp--preset--spacing--20) 0;
  padding: 0;
  font-weight: 600;
  line-height: 1.2;
}

/* Table Base Styles */
.rcp-table.subscription {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--borderline);
  border-radius: 7px;
  overflow: hidden;
}

/* Link Styles */
.rcp-table.subscription a:where(:not(.wp-element-button)),
.rcp-table-wrapper a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

/* Table Headers */
.rcp-table.subscription thead tr {
  background: var(--wp--preset--color--base-2);
}

.rcp-table.subscription thead th {
  text-align: left;
  padding: 12px 16px;
  color: var(--wp--preset--color--contrast);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--x-small);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
}

/* Set width for actions column */
.rcp-table.subscription th:last-child,
.rcp-table.subscription td:last-child {
  width: 280px;
}

/* Table Cells */
.rcp-table.subscription td {
  padding: 12px 16px;
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--contrast);
  border-top: 1px solid var(--wp--preset--color--borderline);
  background: var(--wp--preset--color--base);
  vertical-align: top;
}

/* Status Cell */
.rcp-table.subscription td[data-title='Status'] {
  color: var(--wp--preset--color--accent);
}

/* Auto Renew Text */
.renews-automatically {
  color: var(--wp--preset--color--contrast-2);
  font-size: var(--wp--preset--font-size--x-small);
  margin-top: 4px;
}

/* Action Buttons Container */
.rcp-table.subscription td[data-title='Actions'] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rcp-table.subscription td[data-title='Actions'] br {
  display: none;
}

.rcp-table.subscription td[data-title='Actions'] a {
  display: flex;
  width: 100%;
}

/* Action Buttons */
.rcp-table.subscription button {
  display: block;
  width: 100% !important;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--base-2);
  border: 0px solid var(--wp--preset--color--borderline) !important;
  color: var(--wp--preset--color--contrast);
  padding: 6px 12px;
  border-radius: var(--button-border-radius);
  font-size: var(--wp--preset--font-size--x-small);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  margin-bottom: 0px !important;
  text-align: center;
  line-height: 1.4;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none !important;
}

/* Update Payment Method Button */
.rcp-table.subscription button[data-action='update-billing'] {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}

.rcp-table.subscription button[data-action='update-billing']:hover {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 85%, black);
  border-color: color-mix(in srgb, var(--wp--preset--color--accent) 85%, black);
}

/* Upgrade Membership Button */
.rcp-table.subscription button[data-action='upgrade'] {
  background: var(--wp--preset--color--accent-2);
  border-color: var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--base);
}

.rcp-table.subscription button[data-action='upgrade']:hover {
  background: color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, black);
  border-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent-2) 85%,
    black
  );
}

/* Cancel Membership Button */
.rcp-table.subscription #rcp_cancel_membership_1 button {
  color: red !important;
}

.rcp-table.subscription #rcp_cancel_membership_1 button:hover {
  background: color-mix(
    in srgb,
    red 5%,
    var(--wp--preset--color--base-2)
  ) !important;
}

/* Auto Renew Button */
.rcp-auto-renew-toggle {
  margin-top: var(--wp--preset--spacing--10);
  width: 100%;
  display: block;
}

.rcp-auto-renew-toggle a {
  display: block;
  width: 100%;
}

.rcp-auto-renew-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--base-2);
  border: 0px solid var(--wp--preset--color--borderline) !important;
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
  color: var(--wp--preset--color--contrast);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: var(--wp--preset--font-size--x-small);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  margin: 0;
  text-align: center;
  line-height: 1.4;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none !important;
}

/* Success Message */
.rcp_success {
  background: color-mix(
    in srgb,
    var(--wp--preset--color--accent-2) 10%,
    transparent
  );
  border: 1px solid var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--accent-2);
  padding: var(--wp--preset--spacing--20);
  border-radius: 6px;
  margin-bottom: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--small);
  text-align: center;
}

/* Payment History Table */
.rcp-table#rcp-payment-history td {
  vertical-align: middle;
}

/* Payment History Actions Column */
.rcp-table#rcp-payment-history th:last-child,
.rcp-table#rcp-payment-history td:last-child {
  width: 140px;
}

/* Payment History Action Button */
.rcp-table#rcp-payment-history button {
  background: var(--wp--preset--color--accent);
  border: 0;
  color: var(--wp--preset--color--base);
}

.rcp-table#rcp-payment-history button:hover {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 85%, white);
}

/* Update Payment Button */
.rcp_sub_details_update_card button {
  background: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--base) !important;
}

.rcp_sub_details_update_card button:hover {
  background: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 85%,
    white
  ) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }

  .rcp-table.subscription {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .rcp-table.subscription,
  .rcp-table.subscription tbody,
  .rcp-table.subscription tr {
    display: block;
    width: 100%;
  }

  .rcp-table.subscription td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    text-align: right;
    border: none;
    border-bottom: 1px solid var(--wp--preset--color--borderline);
  }

  .rcp-table.subscription td::before {
    content: attr(data-th);
    font-weight: 500;
    color: var(--wp--preset--color--contrast-2);
    text-align: left;
    padding-right: 16px;
  }

  .rcp-table.subscription tr:last-child td:last-child {
    border-bottom: none;
  }

  .rcp-table.subscription button {
    width: auto;
    min-width: 120px;
    margin-left: 8px;
    display: inline-flex;
  }

  .rcp-table.subscription td:last-child {
    width: 100%;
  }

  /* Fix for the expiration/renewal date cell */
  .rcp-table.subscription td[data-title='Expiration/Renewal Date'] {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .rcp-table.subscription td[data-title='Expiration/Renewal Date']::before {
    margin-bottom: 0;
    flex: 1;
    max-width: 50%;
  }

  /* Create a container for the date and renewal notice */
  .rcp-table.subscription
    td[data-title='Expiration/Renewal Date']
    > :not([class]):first-of-type {
    text-align: right;
    flex: 1;
    max-width: 50%;
  }

  .rcp-table.subscription .rcp-membership-auto-renew-notice {
    display: block;
    text-align: right;
    width: 100%;
    margin-left: auto;
  }

  .rcp-auto-renew-toggle {
    margin-top: var(--wp--preset--spacing--10);
    margin-left: 0;
    width: 100%;
    display: block;
  }

  .rcp-auto-renew-toggle a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
  }

  .rcp-auto-renew-toggle button {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: normal;
    box-sizing: border-box;
    margin-left: 0 !important;
  }

  /* Also ensure the toggle button is aligned properly in the expiration cell */
  .rcp-table.subscription
    td[data-title='Expiration/Renewal Date']
    .rcp-auto-renew-toggle {
    margin-left: 0;
  }

  /* Fix for actions column (hide br tags and stack buttons) */
  .rcp-table.subscription td[data-title='Actions'] {
    flex-direction: column;
    align-items: flex-start;
  }

  .rcp-table.subscription td[data-title='Actions'] br {
    display: none;
  }

  .rcp-table.subscription td[data-title='Actions'] a {
    width: 100%;
    margin: 0;
  }

  .rcp-table.subscription td[data-title='Actions'] button {
    width: 100%;
    margin-left: 0;
  }

  /* Fix for payment history table */
  .rcp-table#rcp-payment-history th:last-child,
  .rcp-table#rcp-payment-history td:last-child {
    width: 100%;
  }

  .rcp-table#rcp-payment-history td[data-title='Actions'] {
    flex-direction: column;
    align-items: flex-start;
  }

  .rcp-table#rcp-payment-history td[data-title='Actions'] a {
    width: 100%;
  }

  /* Fix for the action buttons overflow */
  .rcp-table.subscription td[data-title='Actions'] {
    padding: var(--wp--preset--spacing--10);
    box-sizing: border-box;
    width: 100%;
  }

  .rcp-table.subscription td[data-title='Actions'] a {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  .rcp-table.subscription td[data-title='Actions'] button {
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    word-break: break-word;
    white-space: normal;
    padding: 8px;
  }

  .rcp-auto-renew-toggle a.rcp-enable-auto-renew {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: normal;
    box-sizing: border-box;
    margin-left: 0 !important;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .rcp-table.subscription thead tr {
    background: var(--wp--preset--color--base-3);
  }

  .rcp-table.subscription button,
  .rcp-auto-renew-toggle button {
    background: var(--wp--preset--color--base-2);
    border-color: var(--wp--preset--color--borderline);
  }

  .rcp-table.subscription button:hover,
  .rcp-auto-renew-toggle button:hover {
    background: var(--wp--preset--color--base-3);
  }
}

/* Last button in actions shouldn't have bottom margin */
.rcp-table.subscription td:last-child button:last-of-type {
  margin-bottom: 0;
}

.rcp-membership-auto-renew-notice {
  color: var(--wp--preset--color--contrast-2);
  font-size: var(--wp--preset--font-size--x-small);
}

/* Auto Renew Toggle Link Styling */
.rcp-auto-renew-toggle a.rcp-enable-auto-renew {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--base-2);
  border: 0px solid var(--wp--preset--color--borderline) !important;
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
  color: var(--wp--preset--color--contrast);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: var(--wp--preset--font-size--x-small);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  margin: 0;
  text-align: center;
  line-height: 1.4;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none !important;
  box-sizing: border-box;
}

.rcp-auto-renew-toggle a.rcp-enable-auto-renew:hover {
  background: var(--wp--preset--color--base-3);
}