/**
 * Wealth Insight Memberships — front-end design system for PMS forms.
 */

.wi-membership-shell .pms-form,
.wi-membership-shell .pms-account,
.wi-membership-page .pms-form,
.wi-membership-page .pms-account {
  --wi-field-height: 48px;
  font-family: var(--wi-sans, "Noto Sans TC", sans-serif);
  color: var(--wi-ink, #17201f);
}

.wi-membership-shell .pms-form input[type="text"],
.wi-membership-shell .pms-form input[type="email"],
.wi-membership-shell .pms-form input[type="password"],
.wi-membership-shell .pms-form input[type="tel"],
.wi-membership-shell .pms-form input[type="number"],
.wi-membership-shell .pms-form select,
.wi-membership-shell .pms-form textarea,
.wi-membership-page .pms-form input[type="text"],
.wi-membership-page .pms-form input[type="email"],
.wi-membership-page .pms-form input[type="password"],
.wi-membership-page .pms-form input[type="tel"],
.wi-membership-page .pms-form input[type="number"],
.wi-membership-page .pms-form select,
.wi-membership-page .pms-form textarea {
  width: 100%;
  min-height: var(--wi-field-height);
  padding: 12px 14px;
  border: 1px solid var(--wi-line, #dfe6e2);
  border-radius: var(--wi-radius, 8px);
  background: var(--wi-surface, #fff);
  color: var(--wi-ink, #17201f);
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wi-membership-shell .pms-form input:focus,
.wi-membership-shell .pms-form select:focus,
.wi-membership-shell .pms-form textarea:focus,
.wi-membership-page .pms-form input:focus,
.wi-membership-page .pms-form select:focus,
.wi-membership-page .pms-form textarea:focus {
  outline: none;
  border-color: var(--wi-blue, #2b70d6);
  box-shadow: 0 0 0 3px rgba(43, 112, 214, .12);
}

.wi-membership-shell .pms-form label,
.wi-membership-page .pms-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--wi-ink-2, #253331);
}

.wi-membership-shell .pms-form .pms-field,
.wi-membership-shell .pms-form p,
.wi-membership-page .pms-form .pms-field,
.wi-membership-page .pms-form p {
  margin: 0 0 18px;
}

.wi-membership-shell .pms-form-fields-wrapper,
.wi-membership-page .pms-form-fields-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wi-membership-shell .pms-form input[type="submit"],
.wi-membership-shell .pms-form button,
.wi-membership-shell .pms-form .button,
.wi-membership-page .pms-form input[type="submit"],
.wi-membership-page .pms-form button,
.wi-membership-page .pms-form .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--wi-deep, #111b1a);
  border-radius: var(--wi-radius, 8px);
  background: var(--wi-deep, #111b1a);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.wi-membership-shell .pms-form input[type="submit"]:hover,
.wi-membership-page .pms-form input[type="submit"]:hover {
  background: var(--wi-blue, #2b70d6);
  border-color: var(--wi-blue, #2b70d6);
  transform: translateY(-1px);
}

.wi-membership-shell #pms-subscription-plans-wrapper,
.wi-membership-page #pms-subscription-plans-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.wi-membership-shell .pms-subscription-plan,
.wi-membership-page .pms-subscription-plan {
  position: relative;
  margin: 0 !important;
  padding: 22px !important;
  border: 1px solid var(--wi-line, #dfe6e2) !important;
  border-radius: calc(var(--wi-radius, 8px) + 4px) !important;
  background: var(--wi-surface, #fff);
  box-shadow: var(--wi-shadow, 0 22px 60px rgba(17, 27, 26, .10));
  transition: border-color .2s ease, transform .2s ease;
}

.wi-membership-shell .pms-subscription-plan:hover,
.wi-membership-page .pms-subscription-plan:hover {
  border-color: var(--wi-blue, #2b70d6) !important;
  transform: translateY(-2px);
}

.wi-membership-shell .pms-subscription-plan-name,
.wi-membership-page .pms-subscription-plan-name {
  font-family: var(--wi-serif, "Noto Serif TC", serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--wi-deep, #111b1a);
}

.wi-membership-shell .pms-subscription-plan-price,
.wi-membership-page .pms-subscription-plan-price {
  margin-top: 8px;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--wi-blue, #2b70d6);
}

.wi-membership-shell .pms-subscription-plan-description,
.wi-membership-page .pms-subscription-plan-description {
  margin-top: 12px;
  color: var(--wi-muted, #69746f);
  line-height: 1.6;
  font-size: .95rem;
}

.wi-membership-shell nav.pms-account-navigation ul,
.wi-membership-page nav.pms-account-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 1px solid var(--wi-line, #dfe6e2);
}

.wi-membership-shell nav.pms-account-navigation a,
.wi-membership-page nav.pms-account-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: var(--wi-radius, 8px) var(--wi-radius, 8px) 0 0;
  color: var(--wi-muted, #69746f);
  font-weight: 700;
  text-decoration: none;
}

.wi-membership-shell nav.pms-account-navigation a.pms-account-navigation-link--active,
.wi-membership-page nav.pms-account-navigation a.pms-account-navigation-link--active {
  color: var(--wi-deep, #111b1a);
  box-shadow: inset 0 -3px 0 var(--wi-blue, #2b70d6);
}

.wi-membership-shell .pms-account-subscription,
.wi-membership-page .pms-account-subscription {
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--wi-line, #dfe6e2);
  border-radius: calc(var(--wi-radius, 8px) + 2px);
  background: var(--wi-surface, #fff);
}

.wi-membership-shell .pms-table,
.wi-membership-page .pms-table,
.wi-membership-shell table.pms-account-subscription-details-table,
.wi-membership-page table.pms-account-subscription-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.wi-membership-shell .pms-table th,
.wi-membership-shell .pms-table td,
.wi-membership-page .pms-table th,
.wi-membership-page .pms-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--wi-line, #dfe6e2);
  text-align: left;
}

.wi-membership-shell .pms_success_message,
.wi-membership-shell .pms_error,
.wi-membership-page .pms_success_message,
.wi-membership-page .pms_error {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--wi-radius, 8px);
  font-weight: 600;
}

.wi-membership-shell .pms_success_message,
.wi-membership-page .pms_success_message {
  background: var(--wi-mint, #d9f2e9);
  color: var(--wi-green, #11906b);
}

.wi-membership-shell .pms_error,
.wi-membership-page .pms_error {
  background: rgba(201, 64, 85, .08);
  color: var(--wi-red, #c94055);
}

.wi-membership-shell .login-extra a,
.wi-membership-page .login-extra a {
  color: var(--wi-blue, #2b70d6);
  font-weight: 700;
}

@media (max-width: 640px) {
  .wi-membership-shell #pms-subscription-plans-wrapper,
  .wi-membership-page #pms-subscription-plans-wrapper {
    grid-template-columns: 1fr;
  }

  .wi-membership-shell nav.pms-account-navigation ul,
  .wi-membership-page nav.pms-account-navigation ul {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
}