@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@400;500;700;800&family=Outfit:wght@500;600;700&display=swap");

:root {
  --page-bg: #ffffff;
  --card: #ffffff;
  --brand: #6f68b8;
  --brand-dark: #4f2785;
  --brand-soft: #f5f1fc;
  --text-main: #1a2628;
  --text-muted: #6d7678;
  --danger: #e23d4f;
  --line: #d6dddd;
  --soft-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  --header-height: 74px;
  --sidenav-width: 280px;
}

/* Manage Exclusives Page (pages/manage-exclusives.php) */

.manage-exclusives-surface {
  --exclusive-ink: #20233b;
  --exclusive-muted: #707891;
  --exclusive-line: #dfe3ef;
  --exclusive-soft: #f6f5fd;
  min-height: calc(100vh - 150px);
  min-height: calc(100dvh - 150px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 92% 8%, rgba(194, 233, 148, 0.13), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
}

.manage-exclusives-main {
  flex: 1 1 auto;
  min-height: calc(100vh - 190px);
  min-height: calc(100dvh - 190px);
  display: flex;
  flex-direction: column;
}

.manage-exclusives-header {
  margin-bottom: 22px;
}

.manage-exclusives-toolbar {
  max-width: 760px;
}

.manage-exclusives-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
}

.manage-exclusive-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--exclusive-line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(37, 43, 72, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.manage-exclusive-card:hover {
  transform: translateY(-3px);
  border-color: #c9c4e8;
  box-shadow: 0 18px 36px rgba(37, 43, 72, 0.13);
}

.manage-exclusive-card-media {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #edf0f7;
}

.manage-exclusive-card-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(16, 19, 39, 0.28));
  pointer-events: none;
}

.manage-exclusive-card-media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.manage-exclusive-card:hover .manage-exclusive-card-media > img {
  transform: scale(1.025);
}

.manage-exclusive-card-media .application-status-badge {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  box-shadow: 0 5px 14px rgba(21, 26, 49, 0.16);
}

.manage-exclusive-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
}

.manage-exclusive-card-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.manage-exclusive-card-heading > img {
  width: 60px;
  height: 60px;
  display: block;
  border: 1px solid #d9deeb;
  border-radius: 16px;
  background: #ffffff;
  padding: 5px;
  object-fit: contain;
  box-shadow: 0 7px 16px rgba(31, 38, 68, 0.1);
}

.manage-exclusive-card-heading > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.manage-exclusive-card-heading span {
  color: #777f99;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.manage-exclusive-card-heading h2 {
  overflow: hidden;
  margin: 0;
  color: var(--exclusive-ink);
  font-size: 1.05rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manage-exclusive-card-body > p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 4.35em;
  margin: 0;
  color: #59617a;
  font-size: 0.88rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.manage-exclusive-card-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.manage-exclusive-card-dates span {
  border: 1px solid #e1e4ef;
  border-radius: 999px;
  background: #f8f8fc;
  padding: 5px 9px;
  color: #6f7690;
  font-size: 0.7rem;
  font-weight: 650;
}

.manage-exclusive-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #eceef5;
  padding-top: 14px;
}

.manage-exclusive-card-footer > span {
  color: #858ca2;
  font-size: 0.74rem;
}

.manage-exclusive-card .masterclass-card-edit-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #6f68b8;
  border-radius: 10px;
  background: #6f68b8;
  padding: 8px 16px;
  color: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.manage-exclusive-card .masterclass-card-edit-button:hover,
.manage-exclusive-card .masterclass-card-edit-button:focus-visible {
  border-color: #5d56a8;
  background: #5d56a8;
  transform: translateY(-1px);
}

.manage-exclusives-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 300px;
  border: 1px dashed #d8ddea;
  border-radius: 18px;
  background: #fafafe;
  padding: 30px;
  text-align: center;
}

.manage-exclusives-empty strong {
  color: var(--exclusive-ink);
  font-size: 1rem;
}

.manage-exclusives-empty p {
  margin: 0;
  color: var(--exclusive-muted);
  font-size: 0.86rem;
}

.manage-exclusives-main > .manage-exclusives-pagination {
  margin-top: auto;
  padding-top: 24px;
}

.manage-exclusive-modal .ws-default-modal-dialog {
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.manage-exclusive-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.manage-exclusive-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.manage-exclusive-form > .field-full {
  grid-column: 1 / -1;
}

.manage-exclusive-form label {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6.5px;
}

.manage-exclusive-form label > span:first-child {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.25;
}

.manage-exclusive-form input,
.manage-exclusive-form select,
.manage-exclusive-form textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.manage-exclusive-form input[type="file"] {
  min-height: 44px;
  padding: 8px 10px;
}

.manage-exclusive-form textarea {
  min-height: 130px;
  resize: vertical;
}

.manage-exclusive-preview {
  position: relative;
  overflow: visible;
  min-height: 245px;
  margin-bottom: 7px;
  border: 1px solid #dce1ed;
  border-radius: 16px;
  background: #eef1f7;
}

.manage-exclusive-preview-banner {
  width: 100%;
  height: 245px;
  display: block;
  border-radius: 15px;
  object-fit: cover;
}

.manage-exclusive-preview-logo {
  position: absolute;
  left: 24px;
  bottom: -20px;
  width: 82px;
  height: 82px;
  border: 5px solid #ffffff;
  border-radius: 20px;
  background: #ffffff;
  padding: 5px;
  object-fit: contain;
  box-shadow: 0 9px 24px rgba(28, 34, 61, 0.2);
}

.manage-exclusive-preview.is-empty .manage-exclusive-preview-banner {
  object-fit: contain;
  padding: 50px;
}

.manage-exclusive-preview.is-empty .manage-exclusive-preview-logo {
  padding: 12px;
}

.manage-exclusive-assets-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(180px, 220px);
  align-items: end;
  gap: 20px;
}

.manage-exclusive-assets-row > label {
  display: grid;
  gap: 6.5px;
}

.manage-exclusive-assets-row .manage-schedules-active-switch {
  align-self: stretch;
  justify-content: center;
  border: 1px solid #e0e3ef;
  border-radius: 12px;
  background: #f8f8fc;
  padding: 12px 14px;
}

.manage-exclusive-date-row input:disabled {
  cursor: not-allowed;
  background: #f2f3f7;
  color: #9aa0b2;
}

.manage-exclusive-category-manager-dialog {
  width: min(1440px, calc(100vw - 36px));
}

.manage-exclusive-category-manager-form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.manage-exclusive-category-manager-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.manage-exclusive-category-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  border: 1px solid #e0e2f0;
  border-radius: 16px;
  background: linear-gradient(135deg, #faf9ff 0%, #f5f3fd 100%);
  padding: 20px 22px;
}

.manage-exclusive-category-toolbar > div {
  min-width: 0;
}

.manage-exclusive-category-toolbar strong {
  display: block;
  margin-bottom: 4px;
  color: #2f2059;
  font-size: 1rem;
}

.manage-exclusive-category-toolbar p {
  margin: 0;
  color: #747b94;
  font-size: 0.82rem;
}

.manage-exclusive-category-list {
  display: grid;
  gap: 18px;
}

.manage-exclusive-category-row {
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: 20px;
  border: 1px solid #e0e3ef;
  border-radius: 16px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(41, 45, 76, 0.06);
}

.manage-exclusive-category-preview {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid #dce1ed;
  border-radius: 14px;
  background: #eef1f7;
}

.manage-exclusive-category-banner {
  width: 100%;
  height: 100%;
  min-height: 190px;
  display: block;
  object-fit: cover;
}

.manage-exclusive-category-logo {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 62px;
  height: 62px;
  border: 4px solid #ffffff;
  border-radius: 15px;
  background: #ffffff;
  padding: 4px;
  object-fit: contain;
  box-shadow: 0 7px 18px rgba(29, 34, 61, 0.2);
}

.manage-exclusive-category-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-content: start;
  gap: 16px;
}

.manage-exclusive-category-fields label,
.manage-exclusive-category-assets label {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6.5px;
}

.manage-exclusive-category-fields label > span:first-child,
.manage-exclusive-category-assets label > span:first-child {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
}

.manage-exclusive-category-fields input,
.manage-exclusive-category-fields textarea,
.manage-exclusive-category-assets input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.manage-exclusive-category-fields textarea {
  min-height: 84px;
  resize: vertical;
}

.manage-exclusive-category-assets {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(170px, 210px);
  align-items: end;
  gap: 16px;
}

.manage-exclusive-category-assets input[type="file"] {
  min-height: 44px;
  padding: 8px 10px;
  color: transparent;
  font-size: 0.72rem;
}

.manage-exclusive-category-assets input[type="file"]::file-selector-button {
  margin-right: 8px;
  border: 1px solid #cfd5e5;
  border-radius: 8px;
  background: #ffffff;
  padding: 6px 10px;
  color: #31384f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.manage-exclusive-category-assets .manage-schedules-active-switch,
.manage-exclusive-category-active-field {
  align-self: stretch;
  justify-content: center;
  border: 1px solid #e0e3ef;
  border-radius: 12px;
  background: #f8f8fc;
  padding: 12px 14px;
}

.manage-exclusive-category-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #e5e7f0;
  background: #ffffff;
  padding: 16px 24px;
}

.manage-exclusive-submit-row {
  display: flex;
  justify-content: flex-end;
}

.manage-exclusive-submit-row .page-modal-actions {
  margin-left: auto;
}

@media (max-width: 1100px) {
  .manage-exclusives-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manage-exclusive-assets-row,
  .manage-exclusive-category-assets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manage-exclusive-assets-row .manage-schedules-active-switch,
  .manage-exclusive-category-assets .manage-schedules-active-switch {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .manage-exclusives-surface,
  .manage-exclusives-main {
    min-height: auto;
  }

  .manage-exclusives-header {
    align-items: stretch;
  }

  .manage-exclusives-toolbar,
  .manage-exclusives-header .masterclass-header-actions,
  .manage-exclusives-header .membership-toolbar-btn {
    width: 100%;
  }

  .manage-exclusives-grid,
  .manage-exclusive-form,
  .manage-exclusive-assets-row,
  .manage-exclusive-category-row,
  .manage-exclusive-category-fields,
  .manage-exclusive-category-assets {
    grid-template-columns: 1fr;
  }

  .manage-exclusive-category-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .manage-exclusive-category-toolbar .membership-toolbar-btn {
    width: 100%;
  }

  .manage-exclusive-category-assets,
  .manage-exclusive-assets-row .manage-schedules-active-switch,
  .manage-exclusive-category-assets .manage-schedules-active-switch {
    grid-column: auto;
  }

  .manage-exclusive-category-manager-content {
    padding: 16px;
  }

  .manage-exclusive-preview,
  .manage-exclusive-preview-banner {
    min-height: 190px;
    height: 190px;
  }

  .manage-exclusive-preview-logo {
    left: 16px;
    width: 68px;
    height: 68px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--text-main);
  background: var(--page-bg);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

button:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="reset"]:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  cursor: not-allowed;
}

/* Login Page (login.php) */

.login-body {
  min-height: 100vh;
  background: radial-gradient(circle at 50% 0%, #f7f9f9 0%, #e5ebec 100%);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 18px;
}

.login-card {
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 20px 36px rgba(33, 42, 45, 0.14);
}

.login-brand {
  background: var(--brand);
  color: #ffffff;
  padding: 42px 32px 24px;
  border-bottom: 3px solid #181818;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.brand-logo {
  width: 70px;
  height: 90px;
  margin-top: -10px;
  margin-bottom: 10px;
  object-fit: contain;
}

.login-brand h1 {
  margin: -20px 0 0;
  font-family: "Outfit", "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
}

.login-form-wrap {
  padding: 20px 24px 28px;
}

.login-alert {
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid #efb8c0;
  background: linear-gradient(180deg, #fff6f7 0%, #fce8ea 100%);
  color: #b83a47;
  font-size: 0.91rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: loginAlertIn 0.25s ease-out;
}

.login-alert-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  color: #cd4b4b;
}

.login-alert-icon svg {
  width: 100%;
  height: 100%;
}

.login-alert-text {
  line-height: 1.35;
}

@keyframes loginAlertIn {
  0% {
    opacity: 0;
    transform: translateY(-4px) scale(0.99);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.login-form {
  display: grid;
  gap: 11px;
}

.login-form label {
  margin-top: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1b1f21;
}

.login-form input {
  width: 100%;
  border: 2px solid #c9d5d6;
  border-radius: 14px;
  padding: 14px 16px;
  font: inherit;
  color: var(--text-main);
  background: #f8fbfb;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.login-form input::placeholder {
  color: #727d80;
}

.login-form input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(97, 48, 161, 0.2);
  outline: none;
  background: #ffffff;
}

.login-form .login-submit {
  border: 0;
  border-radius: 14px;
  background: var(--brand);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 14px 16px;
  margin-top: 14px;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  isolation: isolate;
}

.login-form .login-submit:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
}

.login-submit-loading {
  display: none;
}

.login-form.is-submitting .login-submit,
.login-form .login-submit.is-loading {
  cursor: wait;
  pointer-events: none;
}

.login-form .login-submit.is-loading .login-submit-label {
  display: none;
}

.login-form .login-submit.is-loading .login-submit-loading {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.94rem;
  font-weight: 700;
}

.login-form .login-submit.is-loading .login-submit-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: loginSpinner 0.7s linear infinite;
}

@keyframes loginSpinner {
  to {
    transform: rotate(360deg);
  }
}

/* Header (header.php) */

.app-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1200;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #d9dde6;
  box-shadow: 0 2px 10px rgba(22, 35, 64, 0.05);
}

.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.header-left-group {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-logo-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding-left: 12px;
  border-radius: 8px;
}

.header-logo-link::before {
  content: none;
}

.header-logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  transition: transform 0.22s ease;
}

.header-logo-link:hover .header-logo,
.header-logo-link:focus-visible .header-logo {
  transform: translateX(3px);
}

.header-menu-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 9px 8px;
  cursor: pointer;
}

.header-menu-btn span {
  display: block;
  width: 24px;
  height: 2.4px;
  border-radius: 2px;
  background: #ffffff;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.header-menu-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

body.sidenav-open .header-menu-btn span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.sidenav-open .header-menu-btn span:nth-child(2) {
  opacity: 0;
}

body.sidenav-open .header-menu-btn span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.header-profile-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-avatar-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: #17458b;
  border: 1px solid #cfd6e5;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.header-avatar-btn:hover {
  background-color: #eef3fb;
  transform: translateY(-1px);
}

.header-avatar-btn svg,
.header-home-btn svg,
.dropdown-link svg {
  width: 22px;
  height: 22px;
  display: block;
}

.header-home-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #17458b;
  border: 1px solid #cfd6e5;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.header-home-btn:hover {
  background-color: #eef3fb;
  transform: translateY(-1px);
}

.header-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: min(320px, calc(100vw - 24px));
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #dde3ef;
  box-shadow: 0 14px 28px rgba(27, 54, 108, 0.12);
  overflow: hidden;
}

.header-dropdown[hidden] {
  display: none;
}

.dropdown-header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--line);
}

.dropdown-admin-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
  color: #193f83;
}

.dropdown-admin-username {
  margin: 8px 0 0;
  color: #6a7487;
  font-size: 0.92rem;
}

.dropdown-menu {
  padding: 10px 0 14px;
}

.dropdown-link {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  color: #324057;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    padding-left 0.2s ease;
}

.dropdown-link:hover {
  background: #eef3fb;
  color: #193f83;
  padding-left: 28px;
}

.dropdown-link.logout-link {
  color: var(--danger);
}

.dropdown-link.logout-link:hover {
  color: #c13241;
  background: #f9e7e9;
}

/* Shared Modal (header.php) */

body.ws-modal-open {
  overflow: hidden;
}

.ws-modal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  padding: 18px;
}

.ws-modal[hidden] {
  display: none !important;
}

.ws-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 23, 42, 0.55);
}

.ws-modal-dialog {
  position: relative;
  width: min(420px, 100%);
  border-radius: 14px;
  border: 1px solid #d8cced;
  background: #ffffff;
  box-shadow: 0 24px 40px rgba(24, 36, 63, 0.28);
  overflow: hidden;
  padding: 20px;
}

.ws-modal-title {
  margin: -20px -20px 12px;
  padding: 14px 20px;
  font-size: 1.18rem;
  color: #ffffff;
  background: var(--brand);
}

.ws-modal-message {
  margin: 8px 0 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #425173;
}

.ws-modal-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.ws-modal-button {
  border: 0;
  border-radius: 9px;
  min-width: 96px;
  padding: 9px 14px;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}

.ws-modal-button.is-cancel {
  background: #ffffff;
  color: var(--brand);
  border: 1px solid #ccbce8;
}

.ws-modal-button.is-confirm {
  background: var(--brand);
  color: #ffffff;
}

.ws-modal-button.is-confirm.is-danger {
  background: #6f68b8;
  color: #ffffff;
}

.ws-modal-button:hover {
  filter: brightness(1.03);
}

/* Page Modals (pages/*.php) */

.page-modal {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: grid;
  place-items: center;
  padding: 22px;
}

.page-modal[hidden] {
  display: none !important;
}

.page-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 23, 42, 0.55);
}

.page-modal-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid #d8cced;
  background: #ffffff;
  box-shadow: 0 24px 40px rgba(24, 36, 63, 0.28);
  padding: 16px;
}

.page-modal-lg {
  width: min(760px, 100%);
}

.page-modal-xl {
  width: min(980px, 100%);
}

.page-modal-head {
  margin: -16px -16px 0;
  padding: 14px 16px;
  background: var(--brand);
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid #d7c8ef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-modal-head h2 {
  margin: 0;
  font-size: 1.08rem;
  color: #ffffff;
}

.page-modal-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.page-modal-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.page-modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-modal-actions .application-action-button {
  margin: 0;
  background: var(--brand);
  color: #ffffff;
}

.page-modal-actions .membership-toolbar-reset {
  padding: 8px 14px;
  background: #ffffff;
  color: var(--brand);
  border: 1px solid #ccbce8;
}

.page-modal-actions .membership-toolbar-reset:hover {
  background: #f6f1ff;
}

/* Application Layout (index.php, pages/*.php) */

.app-layout {
  min-height: 100vh;
  padding-top: var(--header-height);
}

.app-content {
  margin-left: 0;
  padding: 0;
  min-height: calc(100vh - var(--header-height));
  width: 100%;
}

.content-frame {
  background: #edf1fa;
  border-radius: 0;
  padding: 24px;
  min-height: calc(100vh - var(--header-height));
  box-shadow: inset 6px 0 10px -8px rgba(83, 97, 132, 0.18);
}

body.sidenav-open .content-frame {
  box-shadow: inset 8px 0 12px -9px rgba(83, 97, 132, 0.24);
}

.content-surface {
  background: #ffffff;
  border-radius: 8px;
  min-height: calc(100vh - var(--header-height) - 80px);
  padding: 28px;
  box-shadow: 0 6px 20px rgba(76, 91, 128, 0.2);
}

.content-surface-membership,
.content-surface-masterclass,
.content-surface-user-accounts {
  display: flex;
  flex-direction: column;
}

body.sidenav-open .content-surface {
  box-shadow: 0 8px 24px rgba(76, 91, 128, 0.24);
}

/* Home Page (index.php) */

.app-layout-home .app-content {
  background: #ffffff;
}

.home-dashboard-wrap {
  min-height: calc(100vh - var(--header-height));
  padding: 80px;
  background: #f2f4f7;
}

.home-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: 24px;
}

.home-module-tile {
  display: flex;
  width: 100%;
  height: 240px;
  padding: 20px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border-radius: 28px;
  border: 0.5px solid rgba(214, 214, 214, 0.25);
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.home-module-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(36, 27, 55, 0.12);
  border-color: rgba(97, 48, 161, 0.26);
}

.home-module-icon {
  display: flex;
  width: 70px;
  height: 70px;
  padding: 14px;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  border-radius: 14px;
  background: #6f68b8;
  box-shadow: 0 5.25px 7px rgba(0, 0, 0, 0.12);
  color: #ffffff;
}

.home-module-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.home-module-title {
  align-self: stretch;
  color: #2f2f32;
  text-align: center;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}

.home-module-tile.is-placeholder {
  cursor: pointer;
}

/* Membership Page (pages/membership.php) */

.membership-main {
  padding: 0;
}

body:not(.membership-detail-view) .membership-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.membership-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.membership-header-copy {
  min-width: 250px;
}

.membership-header-copy.is-detail {
  width: 100%;
  min-width: 0;
  padding-top: -10px; /* 'back to list' button to top of header */
}

.membership-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6f68b8;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.membership-back-icon {
  color: #6f68b8;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.membership-header-copy h1 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 28px;
  font-style: normal;
  line-height: normal;
}

.membership-header-copy.is-detail h1 {
  margin-top: 12.5px; /* 'membership profile' to 'back to list' button */
}

.membership-detail-view .membership-header-copy.is-detail h1 {
  font-size: 28px;
  gap: 6px;
}

.membership-title-primary {
  color: #6f68b8;
  font-weight: 700;
}

.membership-title-secondary {
  color: #2f2f32;
  font-weight: 600;
}

.membership-header-copy .membership-count {
  margin: 4px 0 0;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
}

.membership-header-copy:not(.is-detail) .membership-count {
  margin-top: 4px;
  margin-bottom: 0;
}

.membership-count-number {
  color: #6f68b8;
  font-weight: 700;
}

.membership-count-label {
  color: #71717a;
  font-weight: 400;
}

.membership-header-copy > p:not(.membership-count) {
  margin: 10px 0 0;
}

.membership-toolbar {
  margin-top: 0;
  margin-left: auto;
  flex: 1 1 600px;
  width: min(100%, 860px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(150px, 190px) auto;
  gap: 10px;
  align-items: end;
  max-width: 860px;
}

.membership-search,
.membership-filter {
  display: grid;
  gap: 6px;
}

.membership-search {
  max-width: none;
}

.membership-search span,
.membership-filter span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #5c5d72;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.membership-search input,
.membership-filter select {
  width: 100%;
  border: 1px solid #d4daea;
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  color: #2a2d3d;
  background: #ffffff;
}

.membership-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.membership-toolbar-btn,
.membership-toolbar-reset {
  border-radius: 10px;
  padding: 9px 14px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
}

.membership-toolbar-btn {
  border: 0;
  background: var(--brand);
  color: #ffffff;
  cursor: pointer;
}

.membership-toolbar-reset {
  border: 1px solid #cad4ea;
  color: #2d4371;
  background: #ffffff;
}

.kids-journey-toolbar {
  margin-top: 0;
  margin-left: auto;
  flex: 1 1 600px;
  width: min(100%, 860px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 10px;
  align-items: end;
  max-width: 860px;
}

.kids-journey-toolbar .membership-toolbar-actions {
  justify-content: flex-end;
}

.kids-journey-qa-modal-dialog {
  width: min(880px, 100%);
  max-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kids-journey-qa-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 16px;
  background: #f7f8fc;
}

.kids-journey-qa-modal-subtitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #6f68b8;
}

.kids-journey-qa-empty {
  margin: 0;
}

.kids-journey-qa-list {
  display: grid;
  gap: 14px;
}

.kids-journey-qa-card {
  border: 1px solid #e3e7f2;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px 14px 12px;
  display: grid;
  gap: 10px;
}

.kids-journey-qa-card h3 {
  margin: 0;
  color: #333742;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.35;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}

.kids-journey-qa-question-number {
  color: #6f68b8;
  font-weight: 700;
}

.kids-journey-qa-question-description {
  margin: 0;
  color: #666b7e;
  font-size: 0.9rem;
  line-height: 1.35;
}

.kids-journey-qa-meta {
  margin: 0;
  color: #7b8093;
  font-size: 0.76rem;
  font-weight: 700;
}

.kids-journey-qa-answer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.kids-journey-qa-answer-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #323744;
  font-size: 0.9rem;
  line-height: 1.35;
}

.kids-journey-qa-answer-indicator {
  width: 16px;
  height: 16px;
  border: 2px solid #8f87cc;
  border-radius: 50%;
  flex: 0 0 16px;
  margin-top: 2px;
  position: relative;
  background: #ffffff;
}

.kids-journey-qa-answer-list.is-multiple .kids-journey-qa-answer-indicator {
  border-radius: 5px;
}

.kids-journey-qa-answer-item.is-selected .kids-journey-qa-answer-indicator {
  background: #6f68b8;
  border-color: #6f68b8;
}

.kids-journey-qa-answer-list.is-single .kids-journey-qa-answer-item.is-selected .kids-journey-qa-answer-indicator::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.kids-journey-qa-answer-copy {
  display: grid;
  gap: 1px;
}

.kids-journey-qa-answer-copy strong {
  font-weight: 500;
  color: #2f3240;
}

.kids-journey-qa-answer-description {
  color: #666b7e;
  font-size: 0.83rem;
}

.membership-error,
.membership-empty {
  margin-top: 20px;
  background: #ffffff;
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  padding: 14px 16px;
  color: #3f3f4d;
  box-shadow: var(--soft-shadow);
}

.membership-flash {
  margin-top: 18px;
  border-radius: 12px;
  padding: 12px 15px;
  font-size: 0.9rem;
  box-shadow: var(--soft-shadow);
}

.membership-flash.is-success {
  background: #eaf7ee;
  border-left: 4px solid #2f9b5d;
  color: #1f6f42;
}

.membership-flash.is-error {
  background: #fbeaec;
  border-left: 4px solid #c63f51;
  color: #922f3e;
}

.application-list {
  margin-top: 20px;
  display: grid;
  gap: 14px;
}

.application-card {
  background: #fcfcfd;
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

body:not(.membership-detail-view) .application-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(44, 24, 80, 0.13);
}

body:not(.membership-detail-view) .application-card:hover .application-summary {
  background: #ece8f8;
}

.application-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: var(--brand-soft);
}

.application-summary::-webkit-details-marker {
  display: none;
}

.application-summary h2 {
  margin: 0;
  font-size: 1.08rem;
  color: #2c1850;
}

.application-summary-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.application-summary-avatar {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  object-fit: cover;
  background: #ffffff;
  border: 2px solid #dfe3f2;
  flex-shrink: 0;
}

.application-summary-copy {
  min-width: 0;
}

.application-summary-meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.summary-meta-item {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #d9dff1;
  background: #ffffff;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #4a5372;
  line-height: 1.2;
}

.application-summary p {
  margin: 4px 0 0;
  color: #5f5b73;
  font-size: 0.93rem;
}

.membership-main .application-card {
  background: #ffffff;
  border: 1px solid #e7e7ea;
  border-radius: 10px;
  box-shadow: none;
}

.membership-main .application-list {
  margin-top: 34px;
}

.membership-detail-view .membership-main .application-list {
  margin-top: 20px; /* fam banner to header */
  gap: 0;
}

.membership-detail-view .membership-main .application-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:not(.membership-detail-view) .membership-main .application-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(47, 47, 50, 0.08);
}

body:not(.membership-detail-view)
  .membership-main
  .application-card:hover
  .application-summary {
  background: #f3f3f5;
}

.membership-main .application-summary {
  padding: 20px 18px;
  gap: 16px;
  align-items: flex-start;
  background: #f8f8f8;
}

.membership-main .application-summary-main {
  gap: 14px;
}

.membership-main .application-summary-avatar {
  width: 50px;
  height: 50px;
  border: 1px solid #d7d7dc;
}

.membership-main .application-summary-copy {
  display: grid;
  gap: 6px;
}

.membership-main .application-summary h2 {
  margin: 0;
  color: #2f2f32;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.membership-main .application-summary-meta {
  margin-top: 0;
  display: grid;
  gap: 10px;
}

.membership-main .summary-membership-line {
  color: #71717a;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.membership-main .summary-membership-line span {
  color: #71717a;
  font-weight: 400;
}

.membership-main .summary-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 38px;
}

.membership-main .summary-stat-item {
  display: grid;
  gap: 2px;
  min-width: 125px;
}

.membership-main .summary-stat-label {
  color: #71717a;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.membership-main .summary-stat-value {
  color: #2f2f32;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.summary-right {
  text-align: right;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
  color: #3f355c;
  flex-shrink: 0;
}

.summary-label {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8572a8;
  margin-bottom: 3px;
}

.application-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  margin-bottom: 0;
}

.membership-main .application-status-badge {
  display: flex;
  width: 120px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 30px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.application-status-badge.is-pending {
  background: #eceef5;
  color: #616781;
}

.application-status-badge.is-activated {
  background: #e3f6ea;
  color: #1f7d4f;
}

.application-status-badge.is-declined {
  background: #fae8eb;
  color: #a53848;
}

.application-status-badge.is-blacklisted {
  background: #111827;
  color: #ffffff;
}

.application-status-badge.is-expired {
  background: #fff3cd;
  color: #9a6700;
}

.membership-main .application-status-badge.is-activated {
  background: #d7ffe2;
  color: #34a855;
}

.membership-main .application-status-badge.is-pending {
  background: #e6e6e6;
  color: #71717a;
}

.membership-main .application-status-badge.is-blacklisted {
  background: #2f2f32;
  color: #ffffff;
}

.membership-main .application-status-badge.is-declined {
  background: #ffe0e0;
  color: #cd4b4b;
}

.application-content {
  padding: 18px 20px 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
}

body:not(.membership-detail-view) .application-content {
  display: none;
}

.membership-detail-view
  .application-card:not(.is-editing)
  .application-summary {
  display: none;
}

.membership-detail-view
  .application-card:not(.is-editing)
  .application-content {
  display: block;
  padding: 0;
}

.membership-detail-view .application-card.is-editing .application-summary {
  cursor: default;
  pointer-events: none;
}

.membership-detail-view .application-card.is-editing .application-content {
  grid-template-columns: 1fr;
}

.membership-detail-view .content-frame {
  background: #ebeff9;
  padding: 22px;
  box-shadow: none;
}

.membership-detail-view .content-surface-membership {
  background: #ffffff;
  border: 1px solid #e3e4e9;
  border-radius: 12px;
  min-height: auto;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(25, 27, 33, 0.05);
}

.membership-detail-view .membership-header {
  align-items: flex-start;
}

.membership-detail-shell {
  display: grid;
  gap: 18px;
  padding: 0;
}

.membership-detail-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.membership-family-banner-card,
.membership-detail-summary-card,
.membership-detail-group-card {
  border: 1px solid #d7d8de;
  border-radius: 12px;
  background: #f3f6fb;
}

.membership-family-banner-card {
  overflow: hidden;
  min-height: 315px;
  height: 100%;
  position: relative;
  background: #e8edf8;
}

.membership-family-banner-image-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  filter: blur(14px) saturate(1.1);
  opacity: 0.55;
}

.membership-family-banner-image {
  position: absolute;
  inset: 10px;
  z-index: 1;
  display: block;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  min-height: 0;
  object-fit: contain;
  object-position: center;
  padding: 0;
}

.membership-family-banner-card.is-placeholder-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  height: 100%;
}

.membership-family-banner-image.is-placeholder {
  position: static;
  width: 72%;
  height: auto;
  min-height: 0;
  max-height: 220px;
  object-fit: contain;
}

.membership-family-banner-meta {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px 14px;
  background: linear-gradient(
    180deg,
    rgba(20, 21, 26, 0) 0%,
    rgba(20, 21, 26, 0.7) 100%
  );
}

.membership-family-banner-meta h3 {
  margin: 0;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
}

.membership-family-banner-meta p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8rem;
}

.membership-detail-summary-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 315px;
  height: auto;
  align-self: stretch;
  padding: 20px 16px 39px;
  justify-content: flex-start;
  align-items: stretch;
  border: 0.5px solid rgba(214, 214, 214, 0.6);
  border-radius: 8px;
  background: #f4f3ff;
  gap: 0;
}

.membership-detail-summary-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 16px;
  width: 100%;
  min-width: 0;
  margin-bottom: 28px;
}

.membership-detail-summary-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(214, 214, 214, 0.6);
  background: #ffffff;
}

.membership-detail-summary-copy {
  min-width: 0;
}

.membership-detail-summary-copy h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  color: #30313a;
  font-family: "Inter", "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.membership-detail-summary-copy p {
  margin: 4px 0 0;
  color: #727583;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
  font-family: "Inter", "Manrope", sans-serif;
}

.membership-detail-summary-head .application-status-badge {
  margin-left: 0;
  flex-shrink: 0;
  min-width: 132px;
  min-height: 36px;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
}

.membership-detail-summary-stats {
  display: grid;
  gap: 28px;
  margin-left: 60px;
  margin-top: 0;
  margin-bottom: 28px;
}

.membership-detail-summary-stats-row {
  display: flex;
  align-items: flex-start;
}

.membership-detail-summary-stats-row.is-members {
  gap: 48px;
}

.membership-detail-summary-stats-row.is-dates {
  gap: 48px;
}

.membership-detail-summary-stats-row.is-dates
  .membership-detail-summary-stat:nth-child(3) {
  margin-left: 32px;
}

.membership-detail-summary-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.membership-detail-summary-stats span {
  color: #777986;
  font-size: 12px;
  line-height: 1.2;
}

.membership-detail-summary-stats strong {
  color: #343640;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 500;
}

.membership-detail-summary-tools {
  display: none;
}

.membership-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-start;
  margin-top: auto;
  margin-left: 60px;
}

.membership-detail-actions .application-action-button {
  display: flex;
  width: 117px;
  height: 40px;
  min-width: 117px;
  min-height: 40px;
  padding: 0 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 6px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.membership-detail-actions .application-action-form {
  margin: 0;
}

.membership-detail-actions .application-action-button.is-edit {
  background: #6f68b8;
  color: #ffffff;
  border: 0;
}

.membership-detail-actions-label {
  width: 100%;
  margin: 0;
  color: #707380;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
}

.membership-detail-view
  .membership-detail-summary-head
  .application-status-badge.is-pending {
  background: #dddddf;
  color: #747783;
}

.membership-detail-view
  .membership-detail-summary-head
  .application-status-badge.is-activated {
  background: #d7ffe2;
  color: #2f8f55;
}

.membership-detail-view
  .membership-detail-summary-head
  .application-status-badge.is-declined {
  background: #ffd9d9;
  color: #c84e4e;
}

.membership-detail-view
  .membership-detail-summary-head
  .application-status-badge.is-blacklisted {
  background: #31343e;
  color: #ffffff;
}

.membership-detail-view
  .membership-detail-actions
  .application-action-button.is-activate {
  background: #6f68b8;
  color: #ffffff;
}

.membership-detail-view
  .membership-detail-actions
  .application-action-button.is-decline {
  background: #e76363;
  color: #ffffff;
}

.membership-detail-view
  .membership-detail-actions
  .application-action-button.is-blacklist {
  background: #404040;
  color: #ffffff;
}

.membership-detail-view .membership-detail-actions .application-action-note {
  width: 100%;
}

.membership-detail-group-card {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  display: grid;
  gap: 10px;
}

.membership-detail-group-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
}

.membership-detail-group-header h3 {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.membership-group-count {
  color: #6f68b8;
  font-size: 14px;
  font-weight: 700;
}

.membership-group-title {
  color: #676b77;
  font-size: 14px;
  font-weight: 400;
}

.membership-detail-row-grid {
  display: grid;
  gap: 16px;
}

.membership-detail-row-grid.is-child-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.membership-detail-row-stack {
  display: grid;
  gap: 14px;
}

.membership-detail-row-card {
  border: 1px solid #d7dbe6;
  border-radius: 10px;
  background: #f8f8f8;
  padding: 14px 16px;
  display: grid;
  gap: 14px;
}

.membership-detail-row-card.is-child {
  min-height: 148px;
}

.membership-detail-row-card.is-wide {
  gap: 3px;
}

.membership-detail-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 12px;
}

.membership-detail-row-top-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.membership-detail-row-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #d7d9df;
  background: #ffffff;
}

.membership-detail-row-name-wrap h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: #31333b;
  font-size: 18px;
  font-family: "Inter", "Manrope", sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

.membership-detail-member-role {
  color: #6f68b8;
  font-size: 0.85em;
  font-weight: 700;
}

.membership-detail-row-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 24px;
}

.membership-detail-row-fields.is-child {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.membership-detail-row-fields.is-child-wide {
  grid-template-columns: 130px 195px;
  margin-left: 60px;
  margin-top: -2px;
  padding-left: 0;
}

.membership-detail-row-fields.is-wide {
  grid-template-columns: 130px 195px 115px minmax(260px, 1fr);
  margin-left: 60px;
  margin-top: -2px;
  column-gap: 28px;
  padding-left: 0;
}

.membership-detail-row-fields div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.membership-detail-row-fields span {
  color: #777a86;
  font-size: 12px;
}

.membership-detail-row-fields strong {
  color: #353740;
  font-size: 14px;
  font-weight: 500;
  word-break: break-word;
}

.membership-detail-row-fields.is-wide > div:first-child strong {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.membership-detail-row-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 1px;
  color: #41434d;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.membership-edit-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.membership-edit-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.info-block {
  background: #faf9fc;
  border: 1px solid #ebe6f5;
  border-radius: 12px;
  padding: 12px;
}

.info-block h3 {
  margin: 0;
  font-size: 0.95rem;
  color: #341d5e;
}

.info-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.info-block-edit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid #cad4ea;
  background: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2a4e97;
  line-height: 1;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.info-block-edit-link:hover {
  background: #eef3ff;
  border-color: #b8c8ea;
  color: #1f4488;
}

.info-block-edit-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid #dfe3ec;
  background: #f6f8fc;
  font-size: 0.76rem;
  font-weight: 600;
  color: #8b93a9;
  line-height: 1;
}

.info-edit-form {
  display: grid;
  gap: 8px;
}

.info-edit-form label {
  display: grid;
  gap: 5px;
}

.info-edit-form label span {
  font-size: 0.75rem;
  color: #676a7e;
}

.info-edit-form input,
.info-edit-form select {
  border: 1px solid #d7dded;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.85rem;
  color: #252735;
  background: #ffffff;
}

.membership-modal-form {
  gap: 10px;
}

.membership-modal-row {
  display: grid;
  gap: 10px;
}

.membership-modal-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.membership-modal-row-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.membership-modal-field-full {
  grid-column: 1 / -1;
}

.membership-modal-form .js-child-age[readonly] {
  background: #f4f6fb;
  color: #4d5673;
}

.info-edit-actions {
  margin-top: 4px;
}

.info-block dl {
  margin: 0;
  display: grid;
  grid-template-columns: 135px 1fr;
  gap: 8px 10px;
}

.info-block dt {
  margin: 0;
  color: #706884;
  font-size: 0.82rem;
}

.info-block dd {
  margin: 0;
  color: #242633;
  font-size: 0.86rem;
  word-break: break-word;
}

.member-mini-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.member-mini-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #dfe3f2;
  background: #ffffff;
}

.member-mini-copy {
  font-size: 0.82rem;
  font-weight: 700;
  color: #4a5372;
}

.welcome-kit-list {
  margin: 0;
  padding-left: 18px;
}

.welcome-kit-list li {
  margin-bottom: 4px;
}

.info-block-actions {
  grid-column: 1 / -1;
}

.info-block-family-members {
  grid-column: 1 / -1;
}

.family-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.family-member-card {
  background: #ffffff;
  border: 1px solid #e7e3f2;
  border-radius: 10px;
  padding: 10px;
}

.family-member-card .member-mini-copy {
  font-size: 0.8rem;
}

.family-member-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 7px 9px;
}

.family-member-card dt {
  margin: 0;
  color: #706884;
  font-size: 0.79rem;
}

.family-member-card dd {
  margin: 0;
  color: #242633;
  font-size: 0.83rem;
  word-break: break-word;
}

.application-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.application-action-form {
  margin: 0;
}

.application-action-inline {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.application-action-inline .application-action-form {
  margin-left: auto;
}

.application-action-inline .application-action-button {
  margin: 0;
}

.application-action-button {
  border: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 9px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.application-action-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.application-action-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.application-action-button.is-activate {
  background: var(--brand);
}

.application-action-button.is-decline {
  background: #ce4455;
}

.application-action-button.is-blacklist {
  background: #111827;
}

.application-action-note {
  margin: 0;
  color: #3d4a68;
  font-size: 0.86rem;
  font-weight: 600;
}

.application-action-note.is-declined {
  color: #a53848;
}

.membership-pagination {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.membership-page-link {
  background: #ffffff;
  border: 1px solid #cad4ea;
  border-radius: 10px;
  padding: 7px 12px;
  color: #2a4e97;
  font-size: 0.85rem;
  font-weight: 700;
}

.membership-page-current {
  font-size: 0.84rem;
  color: #4f5a78;
}

/* Masterclass Page (pages/masterclass.php) */

.masterclass-main {
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.masterclass-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.masterclass-header-copy {
  min-width: 250px;
}

.masterclass-header-copy h1 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 28px;
  font-style: normal;
  line-height: normal;
}

.masterclass-header-copy .membership-count {
  margin: 4px 0 0;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
}

.masterclass-header-copy .membership-count-number {
  color: #6f68b8;
  font-weight: 700;
}

.masterclass-header-copy .membership-count-label {
  color: #71717a;
  font-weight: 400;
}

.masterclass-header-copy > p:not(.membership-count) {
  margin: 8px 0 0;
  color: #5f6073;
}

.masterclass-header-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.masterclass-header-actions .membership-toolbar-btn {
  margin: 0;
}

.masterclass-inline-search-toolbar {
  margin: 0 0 0 auto;
  flex: 1 1 560px;
  width: min(100%, 860px);
  max-width: 860px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr);
  gap: 10px;
  align-items: end;
}

.campaign-toolbar {
  grid-template-columns: minmax(240px, 1fr) minmax(190px, 230px);
}

.masterclass-source-toolbar {
  grid-template-columns: minmax(240px, 1fr) minmax(190px, 230px);
}

.masterclass-inline-search-toolbar + .masterclass-header-actions {
  margin-left: 0;
}

.masterclass-week-navigation {
  width: 100%;
  margin: 14px 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.masterclass-week-nav-button {
  width: 34px;
  height: 34px;
  border: 1px solid #c9d3ea;
  border-radius: 10px;
  color: #4f5a78;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.masterclass-week-nav-button:hover,
.masterclass-week-nav-button:focus-visible {
  color: #3f3b95;
  border-color: #9ea8d0;
  background: #f3f2ff;
}

.masterclass-week-nav-label {
  color: #4f5a78;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.masterclass-toolbar {
  margin-top: 0;
  margin-left: auto;
  flex: 1 1 600px;
  width: min(100%, 860px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(150px, 190px) auto;
  gap: 10px;
  align-items: end;
  max-width: 860px;
}

.masterclass-search,
.masterclass-filter {
  display: grid;
  gap: 6px;
}

.masterclass-search {
  max-width: none;
}

.masterclass-search span,
.masterclass-filter span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #5c5d72;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.masterclass-search input,
.masterclass-filter select {
  width: 100%;
  border: 1px solid #d4daea;
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  color: #2a2d3d;
  background: #ffffff;
}

.masterclass-create-card {
  margin-top: 16px;
  background: #fcfcfd;
  border-radius: 14px;
  border: 1px solid #ebe6f5;
  box-shadow: var(--soft-shadow);
  padding: 14px;
}

.masterclass-create-card h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #341d5e;
}

.masterclass-create-form,
.masterclass-edit-form {
  display: grid;
  gap: 8px;
}

.masterclass-modal-form {
  margin-top: 12px;
}

.masterclass-create-form .page-modal-actions,
.masterclass-edit-form .page-modal-actions,
.user-accounts-form .page-modal-actions,
.role-edit-form .page-modal-actions,
.compact-form-grid .page-modal-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.compact-form-grid {
  grid-template-columns: minmax(220px, 320px) minmax(240px, 1fr);
  gap: 10px;
  align-items: start;
}

.compact-form-grid .field-full {
  grid-column: 1 / -1;
}

.compact-form-grid .field-file input[type="file"] {
  max-width: 320px;
}

.masterclass-create-form label,
.masterclass-edit-form label {
  display: grid;
  gap: 6.5px;
}

.masterclass-create-form label span,
.masterclass-edit-form label span {
  font-size: 0.75rem;
  color: #676a7e;
}

.masterclass-create-form input,
.masterclass-edit-form input,
.masterclass-create-form textarea,
.masterclass-edit-form textarea {
  border: 1px solid #d7dded;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.85rem;
  color: #252735;
  background: #ffffff;
}

.masterclass-create-form textarea,
.masterclass-edit-form textarea {
  resize: vertical;
  min-height: 74px;
}

.masterclass-form-actions {
  margin-top: 4px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.masterclass-list {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.masterclass-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  background: #fcfcfd;
  border-radius: 14px;
  border: 1px solid #ebe6f5;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}

.masterclass-card-media {
  background: #eef2fb;
  min-height: 160px;
}

.masterclass-card-media img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  display: block;
}

.masterclass-card-body {
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.masterclass-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.masterclass-card-head h3 {
  margin: 0;
  font-size: 1rem;
  color: #2c1850;
}

.masterclass-description {
  margin: 0;
  color: #3e4254;
  font-size: 0.89rem;
  line-height: 1.5;
}

.masterclass-meta {
  margin: 0;
  color: #6a728c;
  font-size: 0.78rem;
}

.masterclass-card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.masterclass-card-actions .application-action-button {
  margin: 0;
}

.masterclass-toggle-form {
  margin: 0;
}

/* Campaign Banners Page (pages/campaign-banners.php) */

.campaign-card .masterclass-card-body {
  gap: 10px;
}

.campaign-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.campaign-family-banner-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.campaign-family-banner-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.campaign-family-banner-check span {
  margin: 0;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
}

.campaign-route-field-group {
  display: grid;
  gap: 6px;
}

.campaign-route-field-group > label {
  display: grid;
  gap: 6px;
}

.ws-modal-banner-form .manage-schedules-form-row,
.ws-modal-banner-form .manage-schedules-form-row-last {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
}

.ws-modal-two-col-row,
.ws-modal-three-col-row {
  display: grid;
  align-items: end;
  gap: 10px;
}

.ws-modal-two-col-row {
  grid-template-columns: repeat(2, minmax(200px, 1fr));
}

.ws-modal-three-col-row {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
}

.ws-modal-family-active-row {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.ws-modal-family-active-row > label {
  width: auto;
  min-width: 150px;
}

.ws-modal-memory-active-row {
  display: flex;
  align-items: end;
  justify-content: flex-start;
}

.ws-modal-two-col-row > label,
.ws-modal-three-col-row > label {
  display: grid;
  gap: 6px;
}

.ws-modal-banner-form label {
  display: grid;
  gap: 6.5px;
}

.ws-default-modal-form
  > :where(
    label,
    .field-full:not(.ws-modal-submit-row),
    .ws-modal-two-col-row,
    .ws-modal-three-col-row,
    .manage-schedules-form-row,
    .manage-schedules-description-field,
    .manage-schedules-active-switch
  )
  + :where(
    label,
    .field-full:not(.ws-modal-submit-row),
    .ws-modal-two-col-row,
    .ws-modal-three-col-row,
    .manage-schedules-form-row,
    .manage-schedules-description-field,
    .manage-schedules-active-switch
  ) {
  padding-top: 10px;
}

.ws-modal-banner-form .field-file input[type="file"] {
  width: 100%;
  max-width: 100%;
}

.ws-modal-banner-form input,
.ws-modal-banner-form select,
.ws-modal-banner-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.ws-modal-section-divider {
  border-top: 1px solid #e3e8f4;
  margin-top: 2px;
  padding-top: 2px;
}

.ws-modal-banner-preview-wrap {
  display: grid;
  gap: 8px;
}

.ws-modal-banner-preview-label {
  font-size: 0.79rem;
  font-weight: 700;
  color: #555c76;
}

.ws-modal-banner-preview-image {
  width: 100%;
  min-height: 180px;
  max-height: 260px;
  border-radius: 12px;
  border: 1px solid #d8dff0;
  background: #eef2fb;
  object-fit: cover;
  display: block;
}

.ws-modal-submit-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ws-modal-banner-form .ws-modal-submit-row {
  margin-top: 10px;
}

.ws-inline-switch-label {
  margin: 0;
}

.ws-inline-actions {
  margin-top: 0 !important;
  justify-content: flex-end;
}

/* Campaign Management Page (pages/campaign-management.php) */

.campaign-management-surface {
  display: flex;
  flex-direction: column;
}

.campaign-management-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.campaign-management-main > .campaign-management-pagination {
  margin-top: auto;
  padding-top: 18px;
}

.campaign-management-header {
  margin-bottom: 2px;
}

.campaign-management-toolbar {
  max-width: 860px;
  grid-template-columns: minmax(260px, 1fr) minmax(210px, 250px);
}

.campaign-management-form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.campaign-management-form > .campaign-management-pagination {
  order: 2;
  margin-top: auto;
  padding-top: 18px;
}

.campaign-management-panel {
  border: 1px solid #e3dbf2;
  border-radius: 18px;
  background:
    radial-gradient(105% 90% at 100% 0%, rgba(111, 104, 184, 0.08) 0%, rgba(111, 104, 184, 0) 58%),
    #ffffff;
  box-shadow:
    0 12px 28px rgba(58, 45, 95, 0.08),
    0 2px 8px rgba(58, 45, 95, 0.04);
  padding: 18px;
}

.campaign-management-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.campaign-management-panel-head h2 {
  margin: 0;
  color: #21164e;
  font-size: 1.08rem;
  line-height: 1.2;
}

.campaign-management-panel-head p {
  margin: 6px 0 0;
  max-width: 760px;
  color: #5d6684;
  font-size: 0.9rem;
  line-height: 1.45;
}

.campaign-management-composer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
}

.campaign-management-composer-grid label,
.campaign-management-field-wide {
  display: grid;
  gap: 6.5px;
}

.campaign-management-composer-grid label span {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
}

.campaign-management-composer-grid input,
.campaign-management-composer-grid textarea {
  width: 100%;
  border: 1px solid #d8dff0;
  border-radius: 12px;
  padding: 11px 13px;
  background: #ffffff;
  color: #252a3d;
  font: inherit;
  box-sizing: border-box;
}

.campaign-management-composer-grid textarea {
  min-height: 132px;
  resize: vertical;
}

.campaign-management-field-wide {
  grid-column: 1 / -1;
}

.campaign-management-sample {
  grid-column: 1 / -1;
  border: 1px solid #e4e0f3;
  border-radius: 14px;
  background: #f8f7ff;
  padding: 12px 14px;
  color: #4f5878;
}

.campaign-management-sample strong {
  display: block;
  margin-bottom: 7px;
  color: #6f68b8;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.campaign-management-sample p {
  margin: 5px 0 0;
  font-size: 0.86rem;
  line-height: 1.38;
}

.campaign-management-selection-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid #e0e7f5;
  border-radius: 16px;
  background: #fbfcff;
  padding: 12px 14px;
}

.campaign-management-check-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #343c59;
  font-size: 0.9rem;
  font-weight: 700;
}

.campaign-management-check-option input,
.campaign-management-user-card input {
  width: 18px;
  height: 18px;
  accent-color: #6f68b8;
}

.campaign-management-selected-count {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border-radius: 999px;
  background: #f1effd;
  color: #4b477f;
  padding: 7px 12px;
  font-size: 0.86rem;
}

.campaign-management-selected-count strong {
  color: #6f68b8;
  font-size: 1rem;
}

.campaign-management-user-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 12px;
}

.campaign-management-user-card {
  display: grid;
  grid-template-columns: auto 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #dfe6f4;
  border-radius: 16px;
  background: #ffffff;
  padding: 12px;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    background-color 0.18s ease;
}

.campaign-management-user-card:hover,
.campaign-management-user-card:focus-within {
  border-color: #c8bdea;
  box-shadow: 0 10px 20px rgba(58, 45, 95, 0.08);
  transform: translateY(-1px);
}

.campaign-management-user-card:has(input:checked) {
  border-color: #857bd0;
  background: #f6f4ff;
  box-shadow: 0 12px 24px rgba(58, 45, 95, 0.11);
}

.campaign-management-user-card img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid #d9e0f1;
  object-fit: cover;
  background: #f3f6fc;
}

.campaign-management-user-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.campaign-management-user-copy strong {
  overflow: hidden;
  color: #202742;
  font-size: 0.96rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-management-user-copy small {
  overflow: hidden;
  color: #6f7794;
  font-size: 0.82rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-management-token-badge {
  border-radius: 999px;
  background: #fff2e2;
  color: #9a5d10;
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.campaign-management-token-badge.has-token {
  background: #dcfce7;
  color: #16803b;
}

.campaign-management-pagination .membership-page-link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.campaign-management-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.campaign-management-schedule-list {
  display: grid;
  gap: 12px;
}

.campaign-management-schedule-card {
  border: 1px solid #dfe6f4;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(58, 45, 95, 0.06);
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.campaign-management-schedule-card:hover,
.campaign-management-schedule-card:focus-within {
  transform: translateY(-2px);
  border-color: #c8bdea;
  box-shadow: 0 14px 28px rgba(44, 24, 80, 0.13);
}

.campaign-management-schedule-summary {
  width: 100%;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(180px, auto) auto;
  align-items: center;
  gap: 14px;
  border: 0;
  padding: 16px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.campaign-management-schedule-summary:hover,
.campaign-management-schedule-summary:focus-visible {
  background: #ece8f8;
}

.campaign-management-schedule-summary > img {
  width: 56px;
  height: 56px;
  border: 1px solid #d9e0f1;
  border-radius: 14px;
  object-fit: cover;
  background: #f3f6fc;
}

.campaign-management-schedule-copy,
.campaign-management-schedule-time {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.campaign-management-schedule-copy strong,
.campaign-management-schedule-time strong {
  color: #202742;
  font-size: 0.96rem;
}

.campaign-management-schedule-copy small,
.campaign-management-schedule-time small {
  color: #737b96;
  font-size: 0.8rem;
}

.campaign-management-schedule-copy > span {
  overflow: hidden;
  color: #525b79;
  font-size: 0.86rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-management-schedule-time {
  justify-items: end;
  text-align: right;
}

.campaign-management-schedule-modal .ws-default-modal-dialog {
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.campaign-management-schedule-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.campaign-management-schedule-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.campaign-management-schedule-form textarea {
  min-height: 132px;
  resize: vertical;
}

.campaign-management-schedule-form > label.field-full {
  width: 100%;
  display: grid;
  gap: 6.5px;
}

.campaign-management-schedule-form > label.field-full textarea {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.campaign-management-schedule-settings {
  align-items: end;
}

.campaign-management-schedule-note {
  margin: 0;
  border-radius: 12px;
  background: #f5f4ff;
  padding: 11px 13px;
  color: #5d6684;
  font-size: 0.84rem;
  line-height: 1.45;
}

.campaign-management-schedule-actions {
  justify-content: flex-end;
}

.campaign-management-schedule-actions .page-modal-actions {
  margin-left: auto;
}

.campaign-management-account-search {
  position: relative;
}

.campaign-management-account-search-help {
  color: #78809a !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
}

.campaign-management-account-results {
  max-height: 250px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
  border: 1px solid #d8dff0;
  border-radius: 12px;
  background: #ffffff;
  padding: 8px;
  box-shadow: 0 16px 30px rgba(35, 42, 70, 0.12);
}

.campaign-management-account-results[hidden],
.campaign-management-selected-account[hidden] {
  display: none !important;
}

.campaign-management-account-result {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: #f8f9fd;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.campaign-management-account-result:hover,
.campaign-management-account-result:focus-visible {
  background: #efedfc;
}

.campaign-management-account-result img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
}

.campaign-management-account-result > span {
  display: grid;
  gap: 3px;
}

.campaign-management-account-result strong {
  color: #252a3d;
  font-size: 0.86rem;
}

.campaign-management-account-result small {
  color: #737b96;
  font-size: 0.76rem;
}

.campaign-management-account-result-empty,
.campaign-management-selected-account {
  border-radius: 10px;
  padding: 10px 12px;
  color: #626b86 !important;
  background: #f7f8fc;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

.campaign-management-selected-account {
  color: #3f397a !important;
  background: #efedfc;
}

.campaign-management-audience-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  align-items: end;
  gap: 16px 20px;
  border: 1px solid #dedcf1;
  border-radius: 14px;
  background: linear-gradient(135deg, #faf9ff 0%, #f3f1ff 100%);
  padding: 16px;
}

.campaign-management-audience-copy {
  display: grid;
  gap: 6px;
}

.campaign-management-field-label {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
}

.campaign-management-audience-copy p {
  max-width: 680px;
  margin: 0;
  color: #6d7590;
  font-size: 0.82rem;
  line-height: 1.45;
}

.campaign-management-audience-type {
  display: grid;
  gap: 6.5px;
}

.campaign-management-audience-selection {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
}

.campaign-management-audience-selection > span {
  color: #555d7a;
  font-size: 0.84rem;
  font-weight: 650;
}

.campaign-management-audience-selection > span.is-error {
  color: #b92f43;
}

.campaign-management-audience-selection.is-all-users > span {
  color: #48417d;
}

.campaign-management-audience-selection .membership-toolbar-btn.is-secondary {
  border: 1px solid #cfc9ef;
  background: #ffffff;
  color: #5e56a8;
  box-shadow: none;
}

.campaign-management-recipient-modal {
  z-index: 2400;
}

.campaign-management-recipient-modal .ws-default-modal-dialog {
  width: min(940px, 100%);
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.campaign-management-recipient-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.campaign-management-recipient-modal .ws-default-modal-head > div {
  display: grid;
  gap: 3px;
}

.campaign-management-recipient-modal .ws-default-modal-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.75rem;
}

.campaign-management-recipient-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px 4px 18px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.campaign-management-recipient-search {
  display: grid;
  gap: 6.5px;
}

.campaign-management-recipient-search > span {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
}

.campaign-management-recipient-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d8dff0;
  border-radius: 11px;
  background: #ffffff;
  padding: 10px 13px;
  color: #282d42;
  font: inherit;
}

.campaign-management-recipient-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  border: 1px solid #e1e4f1;
  border-radius: 12px;
  background: #f8f8fc;
  padding: 11px 13px;
}

.campaign-management-recipient-toolbar > strong {
  margin-left: auto;
  color: #5c54a6;
  font-size: 0.84rem;
}

.campaign-management-recipient-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4f5772;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}

.campaign-management-recipient-check input,
.campaign-management-recipient-card > input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #6f68b8;
}

.campaign-management-recipient-status {
  border-radius: 10px;
  background: #f3f2fc;
  padding: 11px 13px;
  color: #666e88;
  font-size: 0.82rem;
  text-align: center;
}

.campaign-management-recipient-status[hidden] {
  display: none;
}

.campaign-management-recipient-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 156px;
}

.campaign-management-recipient-list.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.campaign-management-recipient-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe3ef;
  border-radius: 12px;
  background: #ffffff;
  padding: 11px 12px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.campaign-management-recipient-card:hover {
  border-color: #bdb6e8;
  background: #faf9ff;
  transform: translateY(-1px);
}

.campaign-management-recipient-card > img {
  width: 46px;
  height: 46px;
  border: 1px solid #dce2ef;
  border-radius: 50%;
  object-fit: cover;
  background: #f3f6fc;
}

.campaign-management-recipient-card > span:not(.campaign-management-recipient-token-count) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.campaign-management-recipient-card strong,
.campaign-management-recipient-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-management-recipient-card strong {
  color: #252a3d;
  font-size: 0.86rem;
}

.campaign-management-recipient-card small {
  color: #727b96;
  font-size: 0.76rem;
}

.campaign-management-recipient-token-count {
  border-radius: 999px;
  background: #eeecfb;
  padding: 5px 8px;
  color: #5a529f;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.campaign-management-recipient-empty {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px dashed #d6daea;
  border-radius: 12px;
  padding: 34px 16px;
  color: #767e98;
  text-align: center;
}

.campaign-management-recipient-pagination {
  margin-top: 0;
}

.campaign-management-recipient-pagination button {
  cursor: pointer;
}

.campaign-management-recipient-pagination button:disabled {
  cursor: not-allowed;
}

.campaign-management-recipient-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #e2e4ef;
  padding: 14px 4px 0;
}

@media (max-width: 760px) {
  .campaign-management-schedule-form,
  .campaign-management-audience-panel,
  .campaign-management-recipient-list {
    grid-template-columns: 1fr;
  }

  .campaign-management-audience-selection {
    align-items: stretch;
    flex-direction: column;
  }

  .campaign-management-recipient-toolbar > strong {
    width: 100%;
    margin-left: 0;
  }

  .campaign-management-recipient-card {
    grid-template-columns: 20px 42px minmax(0, 1fr);
  }

  .campaign-management-recipient-token-count {
    grid-column: 3;
    justify-self: start;
  }
}

@media (max-width: 820px) {
  .campaign-management-toolbar,
  .campaign-management-schedule-summary {
    grid-template-columns: 1fr;
  }

  .campaign-management-schedule-time {
    justify-items: start;
    text-align: left;
  }
}

.shop-catalogue-submit-row {
  justify-content: flex-end;
}

.shop-catalogue-submit-row .page-modal-actions {
  margin-left: auto;
}

.masterclass-header-actions .membership-toolbar-btn.is-secondary {
  background: #ffffff;
  color: var(--brand);
  border: 1px solid #cfc7ec;
  box-shadow: none;
}

.masterclass-header-actions .membership-toolbar-btn.is-secondary:hover {
  background: #f6f3ff;
}

.shop-category-manager-dialog {
  width: min(1240px, calc(100vw - 48px));
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shop-category-manager-form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.shop-category-manager-content {
  display: grid;
  gap: 16px;
  padding: 20px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.shop-category-manager-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e1e5f2;
  border-radius: 16px;
  background: linear-gradient(135deg, #fbfbff 0%, #f2efff 100%);
}

.shop-category-manager-toolbar > div {
  min-width: 0;
}

.shop-category-manager-toolbar .membership-toolbar-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.shop-category-manager-toolbar strong {
  display: block;
  color: #2c1850;
  font-size: 1rem;
}

.shop-category-manager-toolbar p {
  margin: 5px 0 0;
  color: #6d748d;
  font-size: 0.88rem;
}

.shop-category-manager-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.shop-category-edit-form {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.2fr) minmax(220px, 0.9fr);
  align-items: end;
  gap: 12px;
  padding: 14px;
  min-width: 0;
  border: 1px solid #dfe4f2;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(63, 66, 95, 0.06);
}

.shop-category-edit-form label {
  display: grid;
  gap: 6.5px;
  min-width: 0;
}

.shop-category-edit-form label span,
.shop-category-create-form label span {
  font-size: 0.79rem;
  font-weight: 700;
  color: #555c76;
}

.shop-category-edit-media {
  align-self: center;
}

.shop-category-edit-icon {
  width: 58px;
  height: 58px;
  display: block;
  border-radius: 16px;
  border: 1px solid #d8dff0;
  object-fit: cover;
  background: #f4f6fb;
}

.shop-category-edit-form input[type="text"],
.shop-category-edit-form input[type="file"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid #d8dff0;
  padding: 10px 12px;
  background: #ffffff;
  font: inherit;
}

.shop-category-edit-form input[type="file"] {
  min-height: 43px;
}

.shop-category-edit-switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  min-width: 0;
}

.shop-category-edit-switches .ws-inline-switch-label {
  min-width: 0;
}

.shop-category-manager-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px 20px;
  border-top: 1px solid #e3e6f1;
  background: #ffffff;
}

.shop-category-manager-actions button {
  min-width: 112px;
  min-height: 44px;
  margin: 0;
}

.shop-category-empty {
  margin-top: 0;
}

@media (max-width: 1120px) {
  .shop-category-edit-form {
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
  }

  .shop-category-edit-switches {
    grid-column: 2 / -1;
  }
}

@media (max-width: 760px) {
  .shop-category-manager-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  .shop-category-manager-content {
    padding: 14px;
  }

  .shop-category-manager-toolbar,
  .shop-category-edit-form {
    grid-template-columns: 1fr;
  }

  .shop-category-manager-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .shop-category-edit-media,
  .shop-category-edit-switches {
    grid-column: auto;
  }

  .shop-category-edit-switches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-category-manager-actions {
    padding: 14px;
  }
}

.manage-orders-main .application-summary-meta {
  gap: 8px;
}

.manage-orders-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.manage-orders-preview-panel {
  display: grid;
  gap: 8px;
}

.manage-orders-form {
  gap: 12px;
}

.manage-orders-voucher-modal .page-modal-dialog {
  width: min(920px, 100%);
  padding: 8px 10px 10px;
  height: min(88vh, 860px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.manage-orders-voucher-modal .page-modal-head {
  margin: -8px -10px 0;
  padding: 8px 12px;
}

.manage-orders-voucher-modal .page-modal-head h2 {
  font-size: 0.96rem;
}

.manage-orders-voucher-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
  padding-bottom: 4px;
}

.manage-orders-voucher-form .ws-modal-two-col-row,
.manage-orders-voucher-form .ws-modal-three-col-row {
  gap: 8px;
}

.manage-orders-voucher-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  width: 100%;
  align-self: stretch;
  display: grid;
  gap: 8px;
}

.manage-orders-voucher-scroll-area > * {
  width: 100%;
}

.manage-orders-voucher-modal .page-modal-actions {
  margin-top: 0;
}

.manage-orders-form label {
  display: grid;
  gap: 4px;
}

.manage-orders-form label > span {
  color: #5e6682;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.manage-orders-form input,
.manage-orders-form select,
.manage-orders-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d7dded;
  border-radius: 10px;
  padding: 7px 10px;
  color: #222433;
  background: #ffffff;
  font: inherit;
  font-size: 0.82rem;
}

.manage-orders-form textarea {
  min-height: 56px;
  line-height: 1.5;
  resize: vertical;
}

.manage-orders-form input::placeholder,
.manage-orders-form textarea::placeholder {
  color: #99a0b4;
}

.manage-orders-voucher-media-card {
  display: grid;
  gap: 8px;
}

.manage-orders-voucher-media-stage {
  position: relative;
  height: 300px;
  min-height: 300px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #dce2f0;
  background: linear-gradient(180deg, #f3f6fc 0%, #e7ecf8 100%);
}

.manage-orders-voucher-media-stage.is-placeholder {
  background: linear-gradient(180deg, #f5f7fd 0%, #edf1fa 100%);
}

.manage-orders-voucher-banner-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.manage-orders-voucher-logo-badge {
  position: absolute;
  left: 10px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 12px rgba(58, 74, 114, 0.14);
}

.manage-orders-voucher-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  background: #ffffff;
}

.manage-orders-voucher-media-actions {
  gap: 8px;
}

.manage-orders-voucher-file-card {
  min-height: 40px;
  padding: 6px 9px;
  border-radius: 10px;
  border: 1px solid #dce2f0;
  background: #fbfcff;
}

.manage-orders-voucher-file-card input[type="file"] {
  padding: 4px 0 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.manage-orders-voucher-form .ws-modal-submit-row {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 0;
  padding-top: 10px;
  padding-bottom: 2px;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 22%, #ffffff 100%);
}

.manage-orders-voucher-form .ws-modal-submit-row.shop-catalogue-submit-row {
  justify-content: flex-end !important;
}

.manage-orders-voucher-form .ws-modal-submit-row .page-modal-actions {
  width: 100%;
  justify-content: flex-end;
  margin-left: auto !important;
}

.manage-orders-voucher-submit-row {
  justify-content: flex-end !important;
}

.manage-orders-voucher-submit-row .page-modal-actions {
  width: auto !important;
  flex: 0 0 auto;
  justify-content: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.manage-orders-order-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
}

.manage-orders-order-overview-panel {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #dde2f2;
  background: #f7f8fe;
}

.manage-orders-order-overview-panel span,
.manage-orders-order-overview-panel strong {
  display: block;
}

.manage-orders-order-overview-panel span {
  color: #71717a;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.manage-orders-order-overview-panel strong {
  color: #242633;
  font-size: 0.92rem;
  font-weight: 700;
  word-break: break-word;
}

.manage-orders-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.manage-orders-detail-panel {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #dce2f0;
  background: #fbfbff;
  min-height: 100%;
}

.manage-orders-detail-panel span {
  color: #71717a;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.manage-orders-detail-panel p {
  margin: 0;
  color: #242633;
  font-size: 0.92rem;
  line-height: 1.6;
  word-break: break-word;
}

.manage-orders-edit-order-form .ws-modal-two-col-row > label,
.manage-orders-edit-order-form .ws-modal-three-col-row > label {
  gap: 8px;
}

.manage-orders-edit-order-form > .field-full + .field-full {
  margin-top: 10px;
}

.manage-orders-edit-order-form .ws-modal-two-col-row input[readonly],
.manage-orders-edit-order-form .ws-modal-three-col-row input[readonly],
.manage-orders-edit-order-form > label input[readonly] {
  min-height: 56px;
  padding: 12px 22px;
}

.manage-orders-edit-order-form .manage-orders-detail-panel {
  padding: 18px 20px;
  gap: 10px;
}

.manage-orders-items-section {
  display: grid;
  gap: 10px;
}

.manage-orders-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #4f5a78;
  font-size: 0.9rem;
  font-weight: 700;
}

.manage-orders-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.manage-orders-item-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #dce2f0;
  background: #ffffff;
}

.manage-orders-item-image {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 1px solid #d8dff0;
  object-fit: cover;
  flex-shrink: 0;
  background: #eef2fb;
}

.manage-orders-item-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.manage-orders-item-copy h3 {
  margin: 0;
  font-size: 0.93rem;
  color: #242633;
}

.manage-orders-item-copy p {
  margin: 0;
  color: #5f6073;
  font-size: 0.82rem;
}

.manage-orders-discount-value-wrap[hidden] {
  display: none !important;
}

.manage-orders-card .application-summary-meta {
  gap: 8px;
}

.manage-orders-card .summary-meta-item {
  font-size: 0.73rem;
}

.manage-orders-toolbar {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 230px);
}

.manage-orders-header-actions {
  margin-left: auto;
}

.manage-orders-add-voucher-btn {
  margin: 0;
}

.manage-orders-toolbar.is-orders-view {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 230px) minmax(190px, 230px);
}

.manage-orders-toolbar.is-vouchers-view {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 230px);
}

.manage-orders-status-actions-wrap {
  display: grid;
  gap: 10px;
}

.manage-orders-status-actions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #4f5a78;
  font-size: 0.9rem;
  font-weight: 700;
}

.manage-orders-status-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.manage-orders-status-actions .application-action-note {
  margin: 0;
  width: 100%;
  text-align: left;
}

.manage-orders-status-badge.manage-orders-status-pending {
  background: #fff1d6;
  color: #b86b00;
}

.manage-orders-status-badge.manage-orders-status-confirmed {
  background: #dceaff;
  color: #1e63d6;
}

.manage-orders-status-badge.manage-orders-status-preparing {
  background: #eee2ff;
  color: #7b3fe4;
}

.manage-orders-status-badge.manage-orders-status-ready {
  background: #ddfaf5;
  color: #0b7f76;
}

.manage-orders-status-badge.manage-orders-status-completed {
  background: #ddf6e0;
  color: #14883e;
}

.manage-orders-status-badge.manage-orders-status-cancelled {
  background: #ffe1e1;
  color: #cf3030;
}

.manage-orders-confirm-dialog {
  max-width: 520px;
}

.manage-orders-confirm-body {
  padding: 18px 24px 8px;
}

.manage-orders-confirm-body p {
  margin: 0;
  color: #2f2f3b;
  font-size: 0.98rem;
  line-height: 1.6;
}

.manage-orders-confirm-actions {
  padding: 0 24px 24px;
}

/* Party Booking Page (pages/party-booking.php) */

.party-booking-surface {
  display: flex;
  flex-direction: column;
}

.party-booking-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.party-booking-toolbar {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 230px);
}

.party-booking-list {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.party-booking-card {
  background: #fcfcfd;
  border: 0;
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.party-booking-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(44, 24, 80, 0.13);
}

.party-booking-card-button {
  width: 100%;
  border: 0;
  appearance: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.party-booking-card-button:hover {
  background: #ece8f8;
}

.party-booking-card-button .application-summary-copy {
  min-width: 0;
}

.party-booking-summary-avatar {
  object-fit: cover;
  background: #ffffff;
}

.party-booking-summary-meta {
  margin-top: 8px;
}

.party-booking-summary-meta .summary-meta-item {
  max-width: min(100%, 360px);
}

.party-booking-card-button .summary-right {
  flex: 0 0 auto;
}

.party-booking-contact {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.party-booking-contact img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid #dbe2f1;
  object-fit: cover;
  background: #eef2fb;
  flex-shrink: 0;
}

.party-booking-contact h2 {
  margin: 0;
  color: #232838;
  font-size: 1.02rem;
  line-height: 1.2;
}

.party-booking-contact p {
  margin: 3px 0 0;
  color: #6b7287;
  font-size: 0.82rem;
}

.party-booking-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.party-booking-meta-grid div,
.party-booking-overview-panel,
.party-booking-timeline-grid div {
  display: grid;
  gap: 5px;
  border-radius: 14px;
  border: 1px solid #e1e6f3;
  background: #f8f9fd;
  padding: 12px;
}

.party-booking-meta-grid span,
.party-booking-overview-panel span,
.party-booking-timeline-grid span {
  color: #788098;
  font-size: 0.73rem;
  font-weight: 700;
}

.party-booking-meta-grid strong,
.party-booking-overview-panel strong,
.party-booking-timeline-grid strong {
  color: #252938;
  font-size: 0.86rem;
  line-height: 1.35;
}

.party-booking-status-badge.party-booking-status-pending {
  background: #fff1d6;
  color: #b86b00;
}

.party-booking-status-badge.party-booking-status-contacted {
  background: #dceaff;
  color: #1e63d6;
}

.party-booking-status-badge.party-booking-status-booked {
  background: #eee2ff;
  color: #7b3fe4;
}

.party-booking-status-badge.party-booking-status-completed {
  background: #ddf6e0;
  color: #14883e;
}

.party-booking-status-badge.party-booking-status-denied {
  background: #ffe1e1;
  color: #cf3030;
}

.party-booking-status-badge.party-booking-status-cancelled {
  background: #eceff6;
  color: #596074;
}

.party-booking-modal .page-modal-dialog {
  width: min(1120px, 100%);
}

.party-booking-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.party-booking-form > .field-full,
.party-booking-form > label.field-full {
  grid-column: 1 / -1;
}

.party-booking-form label,
.party-booking-form > label.field-full {
  display: grid;
  gap: 6.5px;
}

.party-booking-form input,
.party-booking-form select,
.party-booking-form textarea {
  width: 100%;
  box-sizing: border-box;
}

.party-booking-banner-preview {
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #dbe2f1;
  background: #f3f5fb;
}

.party-booking-banner-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #f3f5fb;
}

.party-booking-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.party-booking-form input[readonly] {
  color: #252938;
  background: #fbfcff;
}

.party-booking-admin-row {
  align-items: end;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.party-booking-booked-at-wrap[hidden] {
  display: none !important;
}

.party-booking-form textarea {
  min-height: 116px;
  resize: vertical;
}

.party-booking-timeline {
  display: grid;
  gap: 10px;
}

.party-booking-timeline h3 {
  margin: 0;
  color: #4f5a78;
  font-size: 0.9rem;
}

.party-booking-timeline-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
}

.party-booking-form .party-booking-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.party-booking-form .party-booking-save-actions {
  width: auto;
  margin-left: auto;
  justify-content: flex-end;
}

.party-booking-chat-open {
  margin-right: 0;
  min-width: 150px;
  background: var(--brand);
  color: #ffffff;
}

.party-booking-chat-shell {
  min-height: 520px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #f5f7fc;
}

.party-booking-chat-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  color: #5e6684;
  font-weight: 700;
}

.party-booking-chat-loading[hidden] {
  display: none !important;
}

.party-booking-chat-loading span {
  width: 16px;
  height: 16px;
  border: 3px solid rgba(111, 104, 184, 0.2);
  border-top-color: #6f68b8;
  border-radius: 999px;
  animation: loginSpinner 0.8s linear infinite;
}

.party-booking-chat-messages {
  min-height: 360px;
  max-height: min(52vh, 520px);
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.party-booking-chat-empty {
  margin: auto;
  color: #77809b;
  text-align: center;
  font-weight: 700;
}

.party-booking-chat-message {
  display: grid;
  gap: 5px;
  max-width: 78%;
}

.party-booking-chat-message.is-admin {
  align-self: flex-end;
  justify-items: end;
}

.party-booking-chat-message.is-customer {
  align-self: flex-start;
}

.party-booking-chat-bubble {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #dbe2f1;
  background: #ffffff;
  color: #252938;
  line-height: 1.45;
  box-shadow: 0 10px 24px rgba(50, 56, 84, 0.08);
}

.party-booking-chat-message.is-admin .party-booking-chat-bubble {
  background: #6f68b8;
  border-color: #6f68b8;
  color: #ffffff;
  border-bottom-right-radius: 6px;
}

.party-booking-chat-message.is-customer .party-booking-chat-bubble {
  border-bottom-left-radius: 6px;
}

.party-booking-chat-message p {
  margin: 0;
  color: #6b7390;
  font-size: 0.78rem;
  font-weight: 700;
}

.party-booking-chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 16px 18px;
  border-top: 1px solid #dfe5f2;
  background: #ffffff;
}

.party-booking-chat-form label {
  display: grid;
  gap: 6.5px;
}

.party-booking-chat-form label span {
  color: #4f5a78;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

.party-booking-chat-form textarea {
  width: 100%;
  min-height: 52px;
  max-height: 110px;
  resize: vertical;
  border: 1px solid #d2dbed;
  border-radius: 16px;
  padding: 13px 15px;
  color: #252938;
  background: #f8faff;
  box-sizing: border-box;
}

.party-booking-chat-form textarea:focus {
  outline: 3px solid rgba(111, 104, 184, 0.16);
  border-color: #6f68b8;
}

.party-booking-chat-form button {
  min-height: 52px;
}

.party-booking-pagination {
  margin-top: auto;
  padding-top: 18px;
}

@media (max-width: 920px) {
  .party-booking-toolbar,
  .party-booking-overview-grid,
  .party-booking-timeline-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 560px) {
  .party-booking-card-button {
    display: grid;
    gap: 12px;
  }

  .party-booking-banner-preview {
    height: 150px;
  }

  .party-booking-chat-form {
    grid-template-columns: 1fr;
  }

  .party-booking-chat-message {
    max-width: 92%;
  }
}

/* Membership Packages Page (pages/membership-packages.php) */

.membership-packages-plan-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px;
}

.membership-package-card {
  background: #fcfcfd;
  border-radius: 14px;
  border: 1px solid #ebe6f5;
  box-shadow: var(--soft-shadow);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.membership-package-plan-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.membership-package-plan-logo {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #dce3f1;
  background: #ffffff;
}

.membership-package-plan-label {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #737a94;
  font-weight: 700;
}

.membership-package-plan-title {
  margin: 2px 0 0;
  color: #2c1850;
  font-size: 1rem;
}

.membership-package-benefits {
  display: grid;
  gap: 8px;
}

.membership-package-benefits-title {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 800;
  color: #433166;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.membership-package-empty {
  margin: 0;
  font-size: 0.85rem;
  color: #6a728c;
}

.membership-package-benefits-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.membership-package-benefit-item {
  position: relative;
  padding-left: 14px;
  color: #2f3448;
}

.membership-package-benefit-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f3448;
  transform: translateY(-50%);
}

.membership-package-benefit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.membership-package-benefit-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #d6deef;
  background: #ffffff;
  object-fit: cover;
  flex: 0 0 34px;
}

.membership-package-benefit-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.membership-package-benefit-row .info-block-edit-link {
  cursor: pointer;
  font: inherit;
}

/* Subscription Plans Card Grid (pages/subscription-plans.php) */

.subscription-plans-grid {
  align-items: start;
}

.subscription-plan-card {
  gap: 10px;
}

.subscription-plan-head {
  align-items: flex-start;
}

.subscription-plan-heading-copy {
  min-width: 0;
}

.subscription-plan-head .application-status-badge {
  margin-left: auto;
  white-space: nowrap;
}

.subscription-plan-body {
  display: grid;
  gap: 8px;
}

.subscription-plan-description {
  margin: 0;
}

.subscription-plan-meta-list {
  display: grid;
  gap: 2px;
}

.subscription-plan-meta-list .masterclass-meta {
  margin: 0;
}

.subscription-plan-card .masterclass-card-actions {
  padding-top: 4px;
}

.subscription-plans-grid .subscription-card.is-editing {
  grid-column: 1 / -1;
}

.subscription-card.is-editing .subscription-plan-head {
  flex-wrap: wrap;
}

.subscription-card.is-editing .compact-form-grid > label,
.subscription-card.is-editing .compact-form-grid > .field-full,
.subscription-card.is-editing .compact-form-grid > div {
  min-width: 0;
}

.subscription-card.is-editing .compact-form-grid input,
.subscription-card.is-editing .compact-form-grid select,
.subscription-card.is-editing .compact-form-grid textarea {
  width: 100%;
  max-width: 100%;
}

.subscription-card.is-editing .field-file input[type="file"] {
  width: 100%;
  max-width: 100%;
}

.subscription-plan-card .masterclass-description {
  color: #2d3550;
}

.subscription-plan-card .masterclass-meta {
  color: #3f4763;
}

.subscription-plan-card .ws-default-modal-form label span,
.subscription-plan-card .compact-form-grid label span {
  color: #3a4463;
  font-weight: 700;
}

/* Masterclass Card Grid (pages/masterclass.php) */

.masterclass-grid-list {
  align-items: stretch;
}

.masterclass-grid-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #e3dbf2;
  background:
    radial-gradient(120% 95% at 100% 0%, rgba(111, 104, 184, 0.08) 0%, rgba(111, 104, 184, 0) 55%),
    #ffffff;
  box-shadow:
    0 10px 26px rgba(58, 45, 95, 0.08),
    0 2px 8px rgba(58, 45, 95, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.masterclass-grid-card:hover {
  transform: translateY(-2px);
  border-color: #cfc3ea;
  box-shadow:
    0 16px 34px rgba(58, 45, 95, 0.14),
    0 4px 10px rgba(58, 45, 95, 0.08);
}

.masterclass-grid-card .subscription-plan-head {
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #ece6f8;
}

.masterclass-grid-card .membership-package-plan-logo {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  border: 1px solid #d4cdea;
  box-shadow: 0 6px 14px rgba(47, 34, 86, 0.15);
}

.masterclass-grid-card .membership-package-plan-label {
  color: #6f68b8;
}

.masterclass-grid-card .membership-package-plan-title {
  font-size: 1.12rem;
  line-height: 1.2;
}

.masterclass-grid-card .subscription-plan-description {
  margin: 0;
  color: #2f3450;
  line-height: 1.48;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.masterclass-grid-card .subscription-plan-meta-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.masterclass-grid-card .subscription-plan-meta-list .masterclass-meta {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f5fb;
  color: #4f5979;
  font-size: 0.76rem;
  font-weight: 600;
}

.masterclass-grid-card .masterclass-card-actions {
  padding-top: 6px;
}

.masterclass-grid-card .masterclass-card-actions .info-block-edit-link {
  border-radius: 10px;
  border: 1px solid #6f68b8;
  background: #6f68b8;
  color: #ffffff;
  font-weight: 700;
  padding: 8px 14px;
}

.masterclass-grid-card .masterclass-card-actions .info-block-edit-link:hover,
.masterclass-grid-card .masterclass-card-actions .info-block-edit-link:focus-visible {
  border-color: #5f58ad;
  background: #5f58ad;
  color: #ffffff;
}

.membership-package-card .masterclass-card-actions .info-block-edit-link,
.membership-package-benefit-row .info-block-edit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  font-size: 0.78rem;
  line-height: 1;
  border-radius: 10px;
  border: 1px solid #6f68b8;
  background: #6f68b8;
  color: #ffffff;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
}

.membership-package-card .masterclass-card-actions .info-block-edit-link:hover,
.membership-package-card .masterclass-card-actions .info-block-edit-link:focus-visible,
.membership-package-benefit-row .info-block-edit-link:hover,
.membership-package-benefit-row .info-block-edit-link:focus-visible {
  border-color: #5f58ad;
  background: #5f58ad;
  color: #ffffff;
}

/* Credits Inventory Page (pages/credits-inventory.php) */

.credits-inventory-history {
  border: 1px solid #dde4f2;
  border-radius: 14px;
  background: #f8faff;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.credits-inventory-history h3 {
  margin: 0;
  font-size: 1rem;
  color: #2c3350;
}

.credits-inventory-history-empty {
  margin: 0;
}

.credits-inventory-history-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.credits-inventory-history-item {
  border: 1px solid #dbe3f3;
  border-radius: 10px;
  background: #ffffff;
  padding: 9px 10px;
  display: grid;
  gap: 4px;
}

.credits-inventory-history-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #2f3757;
}

.credits-inventory-history-meta {
  margin: 0;
  font-size: 0.8rem;
  color: #647093;
}

.credits-inventory-adjust-form {
  gap: 16px;
}

.credits-inventory-adjust-form .ws-modal-three-col-row,
.credits-inventory-adjust-form .ws-modal-two-col-row {
  align-items: start;
  gap: 16px;
}

.credits-inventory-adjust-form label > span {
  display: inline-block;
  margin-bottom: -5px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #4d5778;
}

.credits-inventory-adjust-form input[type="text"] {
  min-height: 46px;
}

.credits-inventory-account-summary {
  margin-bottom: 16px;
}

.credits-inventory-adjust-form .ws-modal-two-col-row + .credits-inventory-history {
  margin-top: 20px;
}

.credits-inventory-adjust-form .ws-modal-submit-row {
  margin-top: 20px;
  justify-content: flex-end;
}

.credits-inventory-actions {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  margin-left: auto;
}

.credits-inventory-actions .application-action-button {
  margin: 0;
}

.credits-inventory-pagination {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.credits-inventory-pagination .membership-page-link {
  min-width: 36px;
  text-align: center;
}

.credits-inventory-pagination .membership-page-link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.credits-inventory-pagination .membership-page-current {
  min-width: 26px;
  text-align: center;
}

.membership-main > .credits-inventory-pagination,
.masterclass-main > .credits-inventory-pagination,
.user-accounts-main > .credits-inventory-pagination {
  margin-top: auto;
  padding-top: 18px;
}

/* Referrals Page (pages/referrals.php) */

.referrals-surface {
  overflow: hidden;
}

.referrals-main {
  gap: 18px;
}

.referrals-toolbar {
  flex: 0 1 980px;
  width: min(100%, 980px);
  max-width: 980px;
  justify-self: end;
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 240px);
}

.referrals-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.referrals-stat-card {
  min-height: 128px;
  padding: 18px;
  border: 1px solid #e0e6f5;
  border-radius: 20px;
  background:
    radial-gradient(circle at 85% 15%, rgba(111, 104, 184, 0.16), transparent 34%),
    #fbfbff;
  box-shadow: 0 14px 30px rgba(76, 91, 128, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.referrals-stat-card span,
.referrals-person-label {
  color: #59617b;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.referrals-stat-card strong {
  color: #251c54;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.1;
}

.referrals-stat-card small {
  color: #77819c;
  font-weight: 700;
}

.referrals-stat-card.is-featured {
  color: #ffffff;
  border-color: #6f68b8;
  background:
    linear-gradient(135deg, rgba(111, 104, 184, 0.96), rgba(70, 53, 146, 0.94)),
    #6f68b8;
}

.referrals-stat-card.is-featured span,
.referrals-stat-card.is-featured strong,
.referrals-stat-card.is-featured small {
  color: #ffffff;
}

.referrals-list {
  display: grid;
  gap: 14px;
}

.referrals-card {
  padding: 0;
  overflow: hidden;
}

.referrals-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(220px, 0.62fr);
  gap: 14px;
  align-items: stretch;
  padding: 16px;
}

.referrals-person-card,
.referrals-meta-card {
  border: 1px solid #e3e8f5;
  border-radius: 18px;
  background: #ffffff;
  padding: 14px;
}

.referrals-person-main {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  min-width: 0;
}

.referrals-person-main h2 {
  margin: 0;
  color: #1d2435;
  font-size: 1rem;
  line-height: 1.2;
}

.referrals-person-main p {
  margin: 4px 0 0;
  color: #68738e;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.referrals-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.referrals-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #d5dcf0;
  border-radius: 999px;
  background: #f8f7ff;
  color: #4f5a78;
  font-size: 0.78rem;
  font-weight: 800;
}

.referrals-arrow {
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #6f68b8;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(111, 104, 184, 0.24);
}

.referrals-meta-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f8f9fd;
}

.referrals-meta-card .application-status-badge {
  align-self: flex-start;
}

.referrals-meta-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.referrals-meta-card dt {
  color: #7a839b;
  font-size: 0.76rem;
  font-weight: 800;
}

.referrals-meta-card dd {
  margin: 0;
  color: #1e2738;
  font-size: 0.88rem;
  font-weight: 800;
}

.referrals-invitation-card {
  background:
    radial-gradient(circle at 4% 12%, rgba(111, 104, 184, 0.1), transparent 28%),
    #ffffff;
}

.referrals-invitation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(220px, 0.55fr);
  gap: 14px;
  align-items: stretch;
  padding: 16px;
}

.referrals-invitee-card {
  border-color: #d9d2f1;
  background:
    linear-gradient(135deg, rgba(111, 104, 184, 0.08), rgba(255, 255, 255, 0.94)),
    #ffffff;
}

.referrals-inviter-card {
  background: #fcfcff;
}

.referrals-invitation-meta-card {
  justify-content: space-between;
}

@media (max-width: 1120px) {
  .referrals-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .referrals-flow,
  .referrals-invitation-layout {
    grid-template-columns: 1fr;
  }

  .referrals-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
}

@media (max-width: 680px) {
  .referrals-toolbar {
    grid-template-columns: 1fr;
  }

  .referrals-stat-grid {
    grid-template-columns: 1fr;
  }

  .referrals-flow,
  .referrals-invitation-layout {
    padding: 12px;
  }
}

/* Manage Schedules Page (pages/manage-schedules.php) */

.manage-schedules-main {
  display: grid;
  gap: 14px;
}

.manage-schedules-section {
  background: #fcfcfd;
  border: 1px solid #ebe6f5;
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.manage-schedules-section > .credits-inventory-pagination {
  margin-top: auto;
  padding-top: 18px;
}

.manage-schedules-section-title {
  margin: 0;
  color: #2c1850;
  font-size: 1.03rem;
}

.manage-schedules-list {
  margin-top: 12px;
}

.manage-schedules-bookings-wrap {
  margin-top: 0;
}

.manage-schedules-bookings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.manage-schedules-bookings-head p {
  margin: 0;
  color: #6a728c;
  font-size: 0.84rem;
}

.manage-schedules-bookings-table td small {
  color: #6b7390;
}

.manage-schedule-summary {
  width: 100%;
  border: 0;
  text-align: left;
  font: inherit;
}

.manage-schedule-summary:focus-visible {
  outline: 2px solid #2a4e97;
  outline-offset: -2px;
}

.manage-schedules-form .manage-schedules-form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 10px;
}

.manage-schedules-form .manage-schedules-form-row-last {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
}

.manage-schedules-form .manage-schedules-form-row-audience {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr) minmax(0, 0.55fr) minmax(0, 1fr);
  align-items: end;
}

.manage-schedules-form .manage-schedules-form-row-switch-only {
  grid-template-columns: 1fr;
}

.manage-schedules-form .manage-schedules-price-status-row {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr);
  align-items: end;
}

.manage-schedules-form .manage-schedules-price-status-row .manage-schedules-active-switch {
  justify-items: start;
}

.manage-schedules-form .manage-schedules-form-row-audience .manage-schedules-age-field {
  min-width: 0;
  width: 100%;
}

.manage-schedules-form .manage-schedules-form-row-audience .manage-schedules-gender-field {
  min-width: 0;
  width: 100%;
}

.manage-schedules-form .manage-schedules-form-row-audience > label {
  min-width: 0;
}

.manage-schedules-form .manage-schedules-form-row label {
  display: grid;
  gap: 6.5px;
}

.manage-schedules-form .manage-schedules-description-field {
  display: grid;
  gap: 6.5px;
  margin-top: 2px;
}

.manage-schedules-form .manage-schedules-description-field > span {
  margin: 0;
  font-size: 0.79rem;
  font-weight: 700;
  color: #555c76;
}

.manage-schedules-form .manage-schedules-form-row input,
.manage-schedules-form .manage-schedules-form-row select,
.manage-schedules-form .manage-schedules-form-row textarea,
.manage-schedules-form .manage-schedules-description-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.manage-schedules-form .manage-schedules-description-field textarea {
  min-height: 104px;
  resize: vertical;
}

.manage-schedules-form .manage-schedules-active-switch {
  display: grid !important;
  align-items: center;
  gap: 6px;
  align-self: end;
  min-height: 52px;
}

.manage-schedules-form .manage-schedules-active-switch > span:first-child {
  margin: 0;
  font-size: 0.79rem;
  font-weight: 700;
  color: #555c76;
}

.manage-schedules-switch {
  position: relative;
  display: inline-flex;
  width: 50px;
  height: 28px;
}

.manage-schedules-switch input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.manage-schedules-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d9deea;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: inset 0 0 0 1px #cdd5e7;
}

.manage-schedules-switch-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(30, 36, 64, 0.3);
  transition: transform 0.2s ease;
}

.manage-schedules-switch
  input[type="checkbox"]:checked
  + .manage-schedules-switch-slider {
  background: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(74, 46, 138, 0.5);
}

.manage-schedules-switch
  input[type="checkbox"]:checked
  + .manage-schedules-switch-slider::before {
  transform: translateX(22px);
}

.manage-schedules-switch
  input[type="checkbox"]:focus-visible
  + .manage-schedules-switch-slider {
  outline: 2px solid #2a4e97;
  outline-offset: 2px;
}

.membership-package-benefit-copy {
  display: grid;
  gap: 2px;
}

.membership-package-benefit-copy strong {
  font-size: 0.88rem;
  color: #251f3b;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.membership-package-benefit-copy span {
  font-size: 0.81rem;
  color: #616986;
  line-height: 1.45;
}

.membership-benefit-edit-form {
  margin-top: 6px;
  padding: 14px;
  border: 1px solid #ded7ef;
  border-radius: 14px;
  background: #ffffff;
  display: grid;
  gap: 10px;
}

.membership-benefit-field {
  display: grid;
  gap: 6.5px;
}

.membership-benefit-field span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #576082;
  font-weight: 700;
}

.membership-benefit-field input,
.membership-benefit-field select,
.membership-benefit-field textarea {
  width: 100%;
  border: 1px solid #d4dcf0;
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  color: #22273a;
  background: #ffffff;
}

.membership-benefit-plan-field select {
  max-width: 380px;
}

.membership-benefit-upload-field input[type="file"] {
  max-width: 380px;
}

.membership-benefit-field textarea {
  min-height: 110px;
  resize: vertical;
}

.membership-benefit-field input[readonly] {
  background: #f4f6fb;
  color: #4d5673;
}

.membership-benefit-edit-modal {
  width: min(720px, 100%);
}

.membership-benefit-edit-modal-form {
  gap: 12px;
}

.membership-plan-create-form {
  gap: 16px;
}

.membership-package-create-modal .ws-default-modal-dialog {
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.membership-package-create-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.membership-package-create-modal .ws-default-modal-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.membership-plan-create-logo-row {
  align-items: center;
}

.membership-plan-create-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(170px, 0.7fr);
  align-items: end;
  gap: 14px;
}

.membership-plan-create-active {
  display: grid !important;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 6.5px;
  min-height: 68px;
  align-content: end;
}

.membership-plan-create-active > span:first-child {
  display: block;
  margin: 0;
  font-size: 0.79rem;
  font-weight: 700;
  color: #555c76;
}

.membership-plan-create-actions {
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 0;
}

.membership-package-create-modal .ws-default-modal-form .page-modal-actions {
  margin-top: 20px;
  justify-content: flex-end;
}

.membership-package-plan-modal-form {
  gap: 14px;
}

.membership-package-plan-modal-form
  > :where(
    label,
    .field-full:not(.ws-modal-submit-row),
    .ws-modal-two-col-row,
    .ws-modal-three-col-row,
    .manage-schedules-active-switch
  )
  + :where(
    label,
    .field-full:not(.ws-modal-submit-row),
    .ws-modal-two-col-row,
    .ws-modal-three-col-row,
    .manage-schedules-active-switch
  ) {
  padding-top: 0;
}

.membership-package-plan-modal-form .field-full {
  margin-top: 0;
}

.membership-benefit-logo-editor {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e3dbf1;
  border-radius: 12px;
  background: #fbf9ff;
}

.membership-benefit-logo-title {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #576082;
  font-weight: 700;
}

.membership-benefit-logo-row {
  display: grid;
  grid-template-columns: 72px minmax(200px, 1fr);
  gap: 12px;
  align-items: start;
}

.membership-benefit-logo-preview {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 1px solid #d6deef;
  background: #ffffff;
  object-fit: cover;
}

.membership-benefit-logo-row
  .membership-benefit-upload-field
  input[type="file"] {
  max-width: 100%;
}

.membership-benefit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.membership-benefit-actions .application-action-button {
  margin: 0;
}

.membership-benefit-actions .membership-toolbar-reset {
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid #ccbce8;
  color: var(--brand);
  border-radius: 10px;
}

.ws-default-modal-dialog,
.membership-packages-modal-dialog {
  width: min(840px, 100%);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}

.party-booking-modal .ws-default-modal-dialog {
  width: min(1120px, 100%);
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  overflow-x: hidden;
}

.party-booking-chat-modal .ws-default-modal-dialog {
  width: min(780px, 100%);
  max-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.party-booking-chat-modal .ws-default-modal-head p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.84rem;
  font-weight: 700;
}

.ws-default-modal-head,
.membership-packages-modal-head {
  margin: 0;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #ded3f2;
}

.ws-default-modal-head h2,
.membership-packages-modal-head h2 {
  font-size: 1.12rem;
}

.ws-default-modal-form,
.membership-packages-modal-form {
  padding: 20px 20px 18px;
  gap: 20px;
}

.ws-default-modal-form label,
.membership-packages-modal-form label {
  gap: 6.5px;
}

.ws-default-modal-form label span,
.membership-packages-modal-form label span {
  font-size: 0.79rem;
  font-weight: 700;
  color: #555c76;
}

.ws-default-modal-form input,
.ws-default-modal-form select,
.ws-default-modal-form textarea,
.membership-packages-modal-form input,
.membership-packages-modal-form select,
.membership-packages-modal-form textarea {
  border-radius: 10px;
  border: 1px solid #d8dff0;
  padding: 10px 12px;
  background: #ffffff;
}

.ws-default-modal-form textarea,
.membership-packages-modal-form textarea {
  min-height: 120px;
}

.ws-default-modal-form .page-modal-actions,
.membership-packages-modal-form .page-modal-actions {
  margin-top: 4px;
}

.campaign-banners-surface {
  display: flex;
  flex-direction: column;
}

.campaign-banners-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.campaign-banners-main > .credits-inventory-pagination {
  margin-top: auto;
  padding-top: 18px;
}

.campaign-banners-modal .ws-default-modal-dialog {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.campaign-banners-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.campaign-banners-modal .campaign-edit-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.campaign-banners-modal .campaign-edit-form > .ws-modal-submit-row {
  display: flex;
  justify-content: flex-end;
}

.campaign-banners-modal .campaign-edit-form > .page-modal-actions,
.campaign-banners-modal .campaign-edit-form > .ws-modal-submit-row .page-modal-actions {
  width: auto;
  margin-left: auto;
  margin-right: 0;
  justify-content: flex-end;
}

.campaign-date-range-row {
  align-items: end;
}

.campaign-date-range-row input[type="datetime-local"]:disabled {
  border-color: #e1e4ed;
  background: #f1f3f8;
  color: #9aa1b4;
  cursor: not-allowed;
}

@media (max-height: 700px) {
  .campaign-banners-modal {
    padding: 12px;
  }

  .campaign-banners-modal .ws-default-modal-dialog {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
}

.campaign-scope-field[hidden] {
  display: none !important;
}

.missions-directory-detail-form textarea[readonly] {
  resize: none;
}

.missions-directory-modal .missions-directory-detail-form {
  padding-top: 20px;
  gap: 20px;
}

.missions-directory-detail-form .ws-modal-banner-preview-wrap {
  gap: 6.5px;
  margin-bottom: 0;
}

.missions-directory-detail-form .ws-modal-section-divider {
  display: none;
}

.missions-directory-detail-form .ws-modal-two-col-row,
.missions-directory-detail-form .ws-modal-three-col-row {
  column-gap: 14px;
  row-gap: 20px;
  margin: 0;
  padding-top: 10px;
}

.missions-directory-detail-form > label.field-full {
  padding-top: 10px;
}

.missions-directory-detail-form label,
.missions-directory-detail-form .ws-modal-two-col-row > label,
.missions-directory-detail-form .ws-modal-three-col-row > label {
  gap: 6.5px;
}

.missions-directory-detail-form label span,
.missions-directory-detail-form .ws-modal-banner-preview-label {
  line-height: 1.2;
}

.missions-directory-detail-form input,
.missions-directory-detail-form select {
  min-height: 46px;
}

.missions-directory-detail-form textarea {
  min-height: 130px;
}

.missions-directory-detail-form .ws-modal-submit-row {
  margin-top: 8px;
}

.missions-directory-create-form textarea {
  min-height: 132px;
}

.missions-directory-create-form .ws-modal-submit-row .page-modal-actions {
  justify-content: flex-end;
}

.missions-directory-confirm-form .ws-modal-submit-row {
  justify-content: flex-end;
}

.missions-directory-confirm-form .ws-modal-submit-row .page-modal-actions {
  margin-left: auto;
}

.ws-default-modal-body {
  padding: 16px 20px 18px;
}

.ws-subscription-pricing-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
}

.ws-subscription-pricing-row label {
  display: grid;
  gap: 6px;
}

@media (max-width: 1080px) {
  .membership-packages-plan-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

@media (max-width: 900px) {
  .campaign-toolbar {
    grid-template-columns: 1fr;
  }

  .masterclass-source-toolbar {
    grid-template-columns: 1fr;
  }

  .masterclass-card {
    grid-template-columns: 1fr;
  }

  .masterclass-card-media,
  .masterclass-card-media img {
    min-height: 180px;
  }

  .membership-packages-plan-grid {
    grid-template-columns: 1fr;
  }

  .compact-form-grid {
    grid-template-columns: 1fr;
  }

  .ws-modal-two-col-row,
  .ws-modal-three-col-row {
    grid-template-columns: 1fr;
  }

  .ws-modal-family-active-row {
    gap: 10px;
  }

  .compact-form-grid .field-file input[type="file"] {
    max-width: 100%;
  }

  .ws-subscription-pricing-row {
    grid-template-columns: 1fr;
  }

  .membership-benefit-logo-row {
    grid-template-columns: 1fr;
  }

  .membership-plan-create-details {
    grid-template-columns: 1fr;
  }

  .manage-schedules-form .manage-schedules-form-row,
  .manage-schedules-form .manage-schedules-form-row-last,
  .manage-schedules-form .manage-schedules-form-row-audience,
  .manage-schedules-form .manage-schedules-form-row-switch-only {
    grid-template-columns: 1fr;
  }
}

/* User Accounts Page (pages/user-accounts.php) */

.user-accounts-main {
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.user-accounts-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.user-accounts-header-copy {
  min-width: 250px;
}

.user-accounts-header-copy h1 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 28px;
  font-style: normal;
  line-height: normal;
}

.user-accounts-header-copy .membership-count {
  margin: 4px 0 0;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
}

.user-accounts-header-copy .membership-count-number {
  color: #6f68b8;
  font-weight: 700;
}

.user-accounts-header-copy .membership-count-label {
  color: #71717a;
  font-weight: 400;
}

.user-accounts-header-copy > p:not(.membership-count) {
  margin: 8px 0 0;
  color: #5f6073;
}

.user-accounts-header-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.user-accounts-header-actions .membership-toolbar-btn {
  margin: 0;
}

.user-accounts-toolbar {
  margin-top: 0;
  margin-left: auto;
  flex: 1 1 600px;
  width: min(100%, 860px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(150px, 190px) auto;
  gap: 10px;
  align-items: end;
  max-width: 860px;
}

.user-accounts-search,
.user-accounts-filter {
  display: grid;
  gap: 6px;
}

.user-accounts-search {
  max-width: none;
}

.user-accounts-search span,
.user-accounts-filter span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #5c5d72;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-accounts-search input,
.user-accounts-filter select {
  width: 100%;
  border: 1px solid #d4daea;
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  color: #2a2d3d;
  background: #ffffff;
}

.user-accounts-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 12px;
}

.user-accounts-panel,
.user-accounts-role-list,
.user-accounts-table-wrap {
  background: #fcfcfd;
  border-radius: 14px;
  border: 1px solid #ebe6f5;
  box-shadow: var(--soft-shadow);
  padding: 14px;
}

.user-accounts-panel h2,
.user-accounts-section-head h2 {
  margin: 0;
  font-size: 1rem;
  color: #341d5e;
}

.user-accounts-form {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.user-accounts-form label {
  display: grid;
  gap: 5px;
}

.user-accounts-form label span {
  font-size: 0.75rem;
  color: #676a7e;
}

.user-accounts-form input,
.user-accounts-form select {
  border: 1px solid #d7dded;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.85rem;
  color: #252735;
  background: #ffffff;
}

.user-accounts-form-actions {
  margin-top: 4px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.user-accounts-form-actions .application-action-button {
  margin: 0;
}

.user-accounts-modules-picker {
  display: grid;
  gap: 8px;
}

.picker-title {
  font-size: 0.79rem;
  font-weight: 700;
  color: #4e5470;
}

.picker-empty {
  margin: 0;
  color: #6b7189;
  font-size: 0.82rem;
}

.modules-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 6px 10px;
}

.module-check-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.module-check-item span {
  font-size: 0.83rem !important;
  color: #2f3448 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 600 !important;
}

.role-list-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

#userAccountsRolesModal .ws-default-modal-dialog {
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#userAccountsRolesModal .ws-default-modal-head {
  flex: 0 0 auto;
}

#userAccountsRolesModal .ws-default-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.role-card {
  border: 1px solid #e7e3f2;
  border-radius: 12px;
  background: #ffffff;
  padding: 16px 18px 18px;
  overflow: hidden;
}

.role-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.role-card-head h3 {
  margin: 0;
  font-size: 0.95rem;
  color: #2c1850;
}

.role-card-meta {
  margin: 10px 0 0;
  color: #66708c;
  font-size: 0.8rem;
}

.role-module-chips {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.user-accounts-table-wrap {
  margin-top: 12px;
}

.user-accounts-table-scroll {
  margin-top: 10px;
  overflow: auto;
}

.user-accounts-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}

.user-accounts-table th,
.user-accounts-table td {
  border-bottom: 1px solid #e6eaf4;
  text-align: left;
  vertical-align: top;
  padding: 10px 8px;
  font-size: 0.83rem;
}

.user-accounts-table th {
  color: #5b6382;
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  background: #f5f7fc;
}

.user-accounts-table td {
  color: #27314f;
}

.user-account-row {
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}

.user-account-row:hover {
  background: #f2f6ff;
}

.user-account-row:focus-visible {
  outline: 2px solid #2a4e97;
  outline-offset: -2px;
  background: #eef4ff;
}

.user-account-row td {
  vertical-align: middle;
}

.role-edit-form {
  margin-top: 10px;
  padding-bottom: 10px;
}

.role-edit-form[hidden] {
  display: none !important;
}

.role-edit-form .page-modal-actions {
  margin-top: 22px;
  padding-top: 4px;
  padding-bottom: 8px;
  padding-right: 8px;
  align-items: center;
  box-sizing: border-box;
}

.role-edit-form .modules-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.role-edit-form .module-check-item {
  min-width: 0;
}

.role-edit-form .module-check-item span {
  overflow-wrap: anywhere;
}

.user-update-dialog {
  padding: 0;
  width: min(980px, 100%);
}

.user-update-head {
  background: var(--brand);
  color: #ffffff;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 14px 14px 0 0;
}

.user-update-head h2 {
  margin: 0;
  font-size: 1.55rem;
  font-family: "Outfit", "Manrope", sans-serif;
}

.user-update-close {
  border: 0;
  background: transparent;
  color: #dccff0;
  font-size: 2.1rem;
  line-height: 1;
  cursor: pointer;
}

.user-update-close:hover {
  color: #ffffff;
}

.user-update-form {
  margin: 0;
}

.user-update-body {
  padding: 22px;
  display: grid;
  gap: 14px;
}

.user-update-grid {
  display: grid;
  gap: 14px;
}

.user-update-grid-three {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.user-update-grid-two {
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end;
}

.user-update-grid-align-end {
  align-items: end;
}

.user-update-body label {
  display: grid;
  gap: 7px;
}

.user-update-body label span {
  font-size: 0.79rem;
  font-weight: 700;
  color: var(--brand);
}

.user-update-body input,
.user-update-body select {
  border: 1px solid #d3dae4;
  border-radius: 10px;
  padding: 12px 13px;
  font: inherit;
  font-size: 0.95rem;
  color: #23303f;
  background: #ffffff;
}

.user-update-body .account-role-select {
  max-width: none;
}

.user-update-active-switch {
  display: grid !important;
  gap: 6px;
  min-height: 52px;
  align-self: end;
}

.user-update-active-switch > span:first-child {
  margin: 0;
}

.user-update-footer {
  border-top: 1px solid #dbe2eb;
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.user-update-footer-split {
  justify-content: space-between;
}

.user-update-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.user-update-reset-button {
  border: 0;
  border-radius: 10px;
  background: #6f68b8;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
}

.user-update-close-button {
  border: 1px solid #ccbce8;
  border-radius: 10px;
  background: #ffffff;
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  padding: 10px 18px;
  cursor: pointer;
}

.user-update-submit-button {
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  padding: 10px 18px;
  cursor: pointer;
}

.user-update-reset-button:hover,
.user-update-close-button:hover,
.user-update-submit-button:hover {
  filter: brightness(1.03);
}

.account-actions {
  display: grid;
  grid-template-columns: minmax(240px, 280px) auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  width: 100%;
  justify-content: flex-start;
}

.account-inline-form {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  width: auto;
  max-width: 100%;
}

.account-actions .account-inline-form:first-child {
  width: 100%;
}

.account-role-select {
  min-width: 0;
  width: 100%;
  max-width: 190px;
  border: 1px solid #d7dded;
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 0.82rem;
  color: #252735;
  background: #ffffff;
}

.account-inline-form .application-action-button {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Chat Room Page (pages/chat-room.php) */

.chat-room-page {
  height: 100vh;
  overflow: hidden;
  background: #edf1fa;
}

.chat-room-page .app-layout,
.chat-room-page .app-content,
.chat-room-page .content-frame,
.chat-room-page .content-surface,
.chat-room-page .chat-room-main {
  min-height: 0;
}

.chat-room-page .app-layout {
  min-height: 0;
  height: 100vh;
  overflow: hidden;
}

.chat-room-page .app-content {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-room-page .content-frame {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.chat-room-page .content-surface {
  min-height: 0;
  height: auto;
  overflow: hidden;
  display: flex;
  padding: 20px;
  flex: 1 1 auto;
  flex-direction: column;
}

.chat-room-main {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  flex: 1 1 auto;
  width: 100%;
}

.chat-room-toolbar {
  grid-template-columns: minmax(280px, 1fr);
}

.chat-room-layout {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(290px, 330px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.chat-room-sidebar,
.chat-room-conversation {
  border: 1px solid #dbe1f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(76, 91, 128, 0.08);
}

.chat-room-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-room-sidebar-head {
  padding: 14px 16px;
  border-bottom: 1px solid #e7ecf7;
}

.chat-room-sidebar-head h2 {
  margin: 0;
  color: #2f2f32;
  font-size: 1rem;
  font-weight: 700;
}

.chat-room-users-list {
  padding: 8px;
  display: grid;
  gap: 8px;
  overflow-y: auto;
}

.chat-room-users-loader,
.chat-room-messages-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  color: #5f6785;
  font-size: 0.78rem;
  font-weight: 700;
}

.chat-room-users-loader[hidden],
.chat-room-messages-loader[hidden] {
  display: none !important;
}

.chat-room-users-loader::before,
.chat-room-messages-loader::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #c7cee3;
  border-top-color: #6f68b8;
  animation: chat-room-spinner 0.8s linear infinite;
}

.chat-room-user-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e2e7f3;
  border-radius: 12px;
  background: #ffffff;
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.chat-room-user-card:hover,
.chat-room-user-card:focus-visible {
  border-color: #b8c3e0;
  background: #f8f9ff;
  box-shadow: 0 4px 10px rgba(76, 91, 128, 0.08);
}

.chat-room-user-card.is-selected {
  border-color: #6f68b8;
  background: #f5f3ff;
}

.chat-room-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #d8deed;
  background: #f7f8fd;
}

.chat-room-user-copy {
  min-width: 0;
}

.chat-room-user-copy h3 {
  margin: 0;
  color: #2f2f32;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-room-user-copy p {
  margin: 2px 0 0;
  color: #6a728d;
  font-size: 0.78rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-room-user-action {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef1fb;
  color: #42588d;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.chat-room-user-unread-badge {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #6f68b8;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.chat-room-conversation {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-room-conversation-head {
  padding: 14px 16px;
  border-bottom: 1px solid #e7ecf7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chat-room-conversation-head-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-room-conversation-head-copy h2 {
  margin: 0;
  color: #2f2f32;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.chat-room-conversation-head-copy p {
  margin: 2px 0 0;
  color: #6a728d;
  font-size: 0.82rem;
}

.chat-room-refresh-link {
  text-decoration: none;
}

.chat-room-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  background: #f6f8fd;
  display: grid;
  gap: 10px;
  align-content: start;
}

.chat-room-message {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: min(82%, 620px);
}

.chat-room-message.is-admin {
  margin-left: auto;
  align-items: flex-end;
}

.chat-room-message.is-user {
  margin-right: auto;
  align-items: flex-start;
}

.chat-room-message-bubble {
  border-radius: 14px;
  padding: 9px 12px;
  font-size: 0.9rem;
  line-height: 1.45;
  word-break: break-word;
}

.chat-room-message-bubble-media {
  display: grid;
  gap: 8px;
}

.chat-room-media-link {
  display: block;
}

.chat-room-media-image {
  display: block;
  width: 100%;
  max-width: 340px;
  border-radius: 10px;
  border: 1px solid #dce2f2;
  object-fit: cover;
  background: #eef2fb;
}

.chat-room-media-video {
  display: block;
  width: 100%;
  max-width: 360px;
  border-radius: 10px;
  border: 1px solid #dce2f2;
  background: #10152a;
}

.chat-room-file-link {
  display: grid;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}

.chat-room-file-link strong {
  font-size: 0.9rem;
}

.chat-room-file-link span {
  font-size: 0.78rem;
  opacity: 0.88;
}

.chat-room-media-caption {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
}

.chat-room-message.is-admin .chat-room-message-bubble {
  background: #6f68b8;
  color: #ffffff;
  border-top-right-radius: 7px;
}

.chat-room-message.is-user .chat-room-message-bubble {
  background: #ffffff;
  color: #2f2f32;
  border: 1px solid #dde3f2;
  border-top-left-radius: 7px;
}

.chat-room-message-meta {
  margin: 0;
  color: #727a95;
  font-size: 0.74rem;
  font-weight: 600;
}

.chat-room-message-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed #cad4ea;
  border-radius: 12px;
  color: #667089;
  background: #ffffff;
  font-size: 0.9rem;
}

@keyframes chat-room-spinner {
  to {
    transform: rotate(360deg);
  }
}

.chat-room-compose-form {
  border-top: 1px solid #e7ecf7;
  padding: 12px 14px 14px;
  background: #ffffff;
}

.chat-room-compose-form-inline {
  flex: 0 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chat-room-attachment-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(620px, 100%);
  margin: 0 0 10px 66px;
  padding: 10px 12px;
  border: 1px solid #d8def0;
  border-radius: 18px;
  background: #f7f8ff;
  box-shadow: 0 10px 24px rgba(31, 46, 92, 0.08);
}

.chat-room-attachment-preview[hidden] {
  display: none;
}

.chat-room-attachment-preview-thumb {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #e9edfb;
  color: #6f68b8;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  overflow: hidden;
}

.chat-room-attachment-preview-thumb svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.chat-room-attachment-preview-thumb.is-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-room-attachment-preview-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  color: #2a2d3d;
}

.chat-room-attachment-preview-copy strong,
.chat-room-attachment-preview-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-room-attachment-preview-copy strong {
  font-size: 0.92rem;
  font-weight: 800;
}

.chat-room-attachment-preview-copy span {
  color: #68728d;
  font-size: 0.82rem;
}

.chat-room-attachment-preview-remove {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #6f68b8;
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
  margin-left: auto;
  box-shadow: 0 6px 16px rgba(31, 46, 92, 0.1);
}

.chat-room-attachment-preview-remove:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.chat-room-compose-inline-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.chat-room-compose-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  border: 1px solid #d4daea;
  border-radius: 999px;
  padding: 0 18px;
  font: inherit;
  font-size: 0.95rem;
  color: #2a2d3d;
  background: #f9fbff;
}

.chat-room-compose-input::placeholder {
  color: #8a92a8;
}

.chat-room-compose-input:focus {
  outline: none;
  border-color: #6f68b8;
  box-shadow: 0 0 0 3px rgba(111, 104, 184, 0.12);
}

.chat-room-icon-btn {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: #1c2e63;
  color: #a9ffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 56px;
  padding: 0;
  box-shadow: 0 10px 22px rgba(18, 35, 86, 0.18);
}

.chat-room-icon-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.chat-room-attach-trigger {
  position: relative;
}

.chat-room-attach-trigger input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.chat-room-send-trigger {
  color: #a9ffff;
}

.chat-room-send-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(169, 255, 255, 0.35);
  border-top-color: #a9ffff;
  border-radius: 50%;
  display: none;
  animation: chat-room-spinner 0.75s linear infinite;
}

.chat-room-compose-form.is-sending .chat-room-send-icon {
  display: none;
}

.chat-room-compose-form.is-sending .chat-room-send-spinner {
  display: inline-block;
}

.chat-room-compose-form.is-sending .chat-room-compose-input {
  background: #eef3ff;
  color: #65708f;
  cursor: wait;
}

.chat-room-compose-form.is-sending .chat-room-attach-trigger {
  opacity: 0.65;
  pointer-events: none;
  cursor: wait;
}

.chat-room-compose-form.is-sending .chat-room-send-trigger {
  cursor: wait;
  opacity: 0.95;
}

.chat-room-attach-trigger {
  background: #eef3ff;
  color: #415585;
}

.chat-room-attach-trigger input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.chat-room-empty-state {
  min-height: 620px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 28px;
}

.chat-room-empty-state h2 {
  margin: 0;
  color: #2f2f32;
  font-size: 1.22rem;
  font-weight: 700;
}

.chat-room-empty-state p {
  margin: 0;
  color: #626b86;
  font-size: 0.94rem;
  max-width: 520px;
}

/* Data Analytics Page (pages/data-analytics.php) */

.content-surface-analytics {
  background: #f4f5f9;
}

.data-analytics-main {
  display: grid;
  gap: 24px;
}

.data-analytics-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.data-analytics-title h1 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 28px;
  line-height: 1.1;
}

.data-analytics-title p {
  margin: 6px 0 0;
  color: #68718b;
  font-size: 0.95rem;
}

.data-analytics-period-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.data-analytics-date-stepper {
  height: 44px;
  min-width: 176px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  border: 1px solid #7a72c4;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.data-analytics-date-stepper a,
.data-analytics-date-stepper span {
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6f68b8;
  text-decoration: none;
  font-weight: 600;
}

.data-analytics-date-stepper a {
  font-size: 26px;
  line-height: 1;
  transition: background-color 0.16s ease;
}

.data-analytics-date-stepper a:hover,
.data-analytics-date-stepper a:focus-visible {
  background: #f0efff;
}

.data-analytics-period-btn,
.data-analytics-risk-tab {
  min-width: 118px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #e7e7e8;
  color: #3b3b40;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}

.data-analytics-period-btn.is-active,
.data-analytics-risk-tab.is-active {
  background: #6f68b8;
  border-color: #6f68b8;
  color: #ffffff;
}

.data-analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(380px, 0.95fr);
  gap: 20px;
  align-items: start;
}

.data-analytics-card {
  border-radius: 18px;
  background: #ffffff;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(45, 47, 64, 0.08);
}

.data-analytics-card-header,
.data-analytics-centered-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.data-analytics-centered-header {
  justify-content: center;
  text-align: center;
}

.data-analytics-card h2,
.data-analytics-centered-header h2 {
  margin: 0;
  color: #2f2f32;
  font-size: 1.28rem;
  font-weight: 800;
}

.data-analytics-card-link,
.data-analytics-sort-link {
  color: #6f68b8;
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
}

.data-analytics-rank-list {
  display: grid;
  gap: 10px;
}

.data-analytics-rank-row,
.data-analytics-risk-row {
  display: grid;
  grid-template-columns: 32px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f8f8f9;
}

.data-analytics-rank-row.is-highlighted {
  background: #f0eefc;
}

.data-analytics-rank-number {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #6f68b8;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 800;
}

.data-analytics-rank-number.is-muted {
  background: #e1e1e3;
  color: #3b3b40;
}

.data-analytics-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef2fb;
  border: 1px solid #dce3f4;
}

.data-analytics-rank-copy,
.data-analytics-rank-meta,
.data-analytics-risk-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.data-analytics-rank-copy strong,
.data-analytics-risk-row strong {
  color: #2f2f32;
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-analytics-rank-copy span,
.data-analytics-risk-row span:not(.data-analytics-risk-badge):not(.data-analytics-rank-number) {
  color: #3f4354;
  font-size: 0.9rem;
}

.data-analytics-rank-meta {
  justify-items: end;
  text-align: right;
}

.data-analytics-rank-meta strong {
  color: #6f68b8;
  font-size: 1rem;
  font-weight: 800;
}

.data-analytics-rank-meta span {
  color: #747b91;
  font-size: 0.78rem;
}

.data-analytics-donut-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 26px;
}

.data-analytics-donut {
  width: 214px;
  height: 214px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, #ffffff 0 48%, transparent 49%),
    conic-gradient(
      #6f68b8 0 calc(var(--analytics-active-percent, 0) * 1%),
      #ee5d61 calc(var(--analytics-active-percent, 0) * 1%) 100%
    );
}

.data-analytics-donut > div {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.data-analytics-donut strong {
  color: #6f68b8;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
}

.data-analytics-donut span {
  color: #2f2f32;
  font-size: 1.05rem;
  font-weight: 800;
}

.data-analytics-member-legend {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.data-analytics-member-legend span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #2f2f32;
  font-size: 0.95rem;
  font-weight: 800;
}

.data-analytics-member-legend i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-block;
}

.data-analytics-member-legend i.is-active {
  background: #6f68b8;
}

.data-analytics-member-legend i.is-inactive {
  background: #ee5d61;
}

.data-analytics-risk-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto)) minmax(170px, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}

.data-analytics-risk-tab {
  min-width: 104px;
  height: 42px;
  padding: 0 14px;
}

.data-analytics-risk-basis-form {
  justify-self: end;
  min-width: 170px;
}

.data-analytics-risk-basis-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #8d86d1;
  border-radius: 8px;
  color: #4f4f5a;
  background: #ffffff;
  padding: 0 12px;
  font: inherit;
}

.data-analytics-churn-list {
  display: grid;
  gap: 10px;
}

.data-analytics-churn-list h3 {
  margin: 0 0 4px;
  color: #4f5a78;
  font-size: 0.95rem;
}

.data-analytics-risk-row {
  grid-template-columns: 32px 48px minmax(0, 1fr) minmax(110px, auto);
}

.data-analytics-risk-badge {
  justify-self: end;
  min-width: 96px;
  padding: 5px 12px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.data-analytics-risk-badge.is-low {
  background: #eca72c;
}

.data-analytics-risk-badge.is-medium {
  background: #d97832;
}

.data-analytics-risk-badge.is-high {
  background: #d94659;
}

.data-analytics-visits-card {
  grid-column: 1;
}

.data-analytics-notes-card {
  grid-column: 2;
}

.data-analytics-notes-card h2 {
  margin-bottom: 12px;
}

.data-analytics-notes-card p {
  margin: 0 0 10px;
  color: #5f6680;
  line-height: 1.5;
}

.data-analytics-empty {
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: #f7f7fb;
  color: #68718b;
}

@media (max-width: 1180px) {
  .data-analytics-grid {
    grid-template-columns: 1fr;
  }

  .data-analytics-visits-card,
  .data-analytics-notes-card {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .data-analytics-header {
    align-items: stretch;
  }

  .data-analytics-period-controls,
  .data-analytics-date-stepper {
    width: 100%;
  }

  .data-analytics-period-btn {
    flex: 1 1 30%;
    min-width: 0;
  }

  .data-analytics-risk-toolbar {
    grid-template-columns: 1fr;
  }

  .data-analytics-risk-basis-form {
    justify-self: stretch;
  }

  .data-analytics-rank-row,
  .data-analytics-risk-row {
    grid-template-columns: 30px 44px minmax(0, 1fr);
  }

  .data-analytics-rank-meta,
  .data-analytics-risk-badge {
    grid-column: 3;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 1100px) {
  .user-accounts-grid {
    grid-template-columns: 1fr;
  }

  .membership-detail-hero {
    grid-template-columns: 1fr;
  }

  .membership-detail-summary-card {
    max-width: 100%;
  }

  .membership-family-banner-card,
  .membership-family-banner-image {
    min-height: 240px;
    height: 240px;
  }

  .membership-detail-summary-card {
    min-height: 240px;
    height: auto;
  }

  .membership-detail-summary-stats {
    margin-left: 0;
  }

  .membership-detail-actions {
    margin-left: 0;
  }

  .membership-detail-summary-stats-row {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .membership-detail-summary-stats-row.is-dates
    .membership-detail-summary-stat:nth-child(3) {
    margin-left: 0;
  }

  .masterclass-inline-search-toolbar {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .masterclass-week-navigation {
    margin: 12px 0 16px;
    gap: 8px;
  }

  .masterclass-week-nav-label {
    font-size: 0.9rem;
    text-align: center;
  }

  .chat-room-layout {
    grid-template-columns: 1fr;
  }

  .chat-room-sidebar,
  .chat-room-conversation,
  .chat-room-empty-state {
    min-height: 420px;
  }

  .chat-room-users-list {
    max-height: 330px;
  }

  .manage-orders-order-overview-grid,
  .manage-orders-preview-grid,
  .manage-orders-detail-grid {
    grid-template-columns: 1fr;
  }

  .manage-orders-voucher-media-stage {
    min-height: 92px;
  }

  .manage-orders-voucher-logo-badge {
    width: 40px;
    height: 40px;
    left: 10px;
    bottom: 8px;
  }

  .manage-orders-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .kids-journey-toolbar {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
  }

  .kids-journey-toolbar .membership-toolbar-actions {
    justify-content: flex-start;
  }

  .modules-check-grid {
    grid-template-columns: 1fr;
  }

  .user-update-grid,
  .user-update-grid-three,
  .user-update-grid-two {
    grid-template-columns: 1fr;
  }

  .account-actions {
    grid-template-columns: 1fr;
  }

  .membership-detail-summary-stats-row.is-members,
  .membership-detail-summary-stats-row.is-dates {
    gap: 20px;
  }

  .membership-detail-row-grid.is-child-grid {
    grid-template-columns: 1fr;
  }

  .membership-detail-row-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .membership-detail-row-fields.is-wide {
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .membership-detail-row-fields.is-child-wide {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-top: 0;
  }

  .membership-detail-row-top {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 10px;
  }

  .membership-detail-actions .application-action-button {
    min-width: 126px;
  }

  .membership-detail-view .content-frame {
    padding: 12px;
  }

  .membership-detail-view .content-surface-membership {
    padding: 14px;
  }

  .membership-modal-row-2,
  .membership-modal-row-3 {
    grid-template-columns: 1fr;
  }

  .chat-room-conversation-head {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .chat-room-refresh-link {
    width: 100%;
    text-align: center;
  }

  .chat-room-message {
    max-width: 94%;
  }

  .chat-room-user-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .chat-room-user-action {
    display: none;
  }

  .chat-room-user-unread-badge {
    display: none;
  }

  .chat-room-compose-inline-wrap {
    gap: 8px;
  }

  .chat-room-attachment-preview {
    width: 100%;
    margin-left: 0;
  }

  .chat-room-attachment-preview-thumb {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .chat-room-compose-input {
    height: 50px;
    padding: 0 14px;
  }

  .chat-room-icon-btn {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .manage-orders-items-grid {
    grid-template-columns: 1fr;
  }

  .manage-orders-main .application-summary-meta {
    gap: 6px;
  }

  .manage-orders-card .application-summary {
    gap: 14px;
  }

  .manage-orders-card .application-summary-main {
    gap: 10px;
  }

  .manage-orders-card .summary-meta-item {
    width: 100%;
  }

  .manage-orders-order-overview-grid {
    gap: 8px;
  }

  .manage-orders-voucher-media-actions {
    grid-template-columns: 1fr;
  }

  .manage-orders-voucher-media-stage {
    min-height: 92px;
  }

  .manage-orders-voucher-logo-badge {
    width: 38px;
    height: 38px;
  }
}

/* App Appearance Page (pages/app-appearance.php) */

.app-appearance-surface {
  --appearance-ink: #20233b;
  --appearance-muted: #707891;
  --appearance-line: #dfe3ef;
  --appearance-soft: #f6f5fd;
  min-height: calc(100vh - 150px);
  min-height: calc(100dvh - 150px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 88% 10%, rgba(111, 104, 184, 0.1), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
}

.app-appearance-main {
  flex: 1 1 auto;
  min-height: calc(100vh - 190px);
  min-height: calc(100dvh - 190px);
  display: flex;
  flex-direction: column;
}

.app-appearance-header {
  margin-bottom: 22px;
}

.app-appearance-note {
  max-width: 520px;
  margin: 0;
  color: #6d748d;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.45;
}

.app-appearance-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.app-appearance-header-actions .membership-toolbar-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.app-appearance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
}

.app-appearance-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--appearance-line);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(36, 42, 72, 0.09);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-appearance-card:hover {
  transform: translateY(-3px);
  border-color: #c9c4e8;
  box-shadow: 0 18px 40px rgba(36, 42, 72, 0.14);
}

.app-appearance-card-media {
  position: relative;
  aspect-ratio: 16 / 6.5;
  overflow: hidden;
  background: #eef1f8;
}

.app-appearance-card-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  background: linear-gradient(180deg, transparent, rgba(17, 20, 39, 0.28));
  pointer-events: none;
}

.app-appearance-card-media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.app-appearance-card:hover .app-appearance-card-media > img {
  transform: scale(1.025);
}

.app-appearance-card-media .application-status-badge {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  box-shadow: 0 5px 14px rgba(21, 26, 49, 0.16);
}

.app-appearance-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 18px;
}

.app-appearance-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.app-appearance-card-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.app-appearance-card-head span {
  color: #777f99;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-appearance-card-head h2 {
  overflow: hidden;
  margin: 0;
  color: var(--appearance-ink);
  font-size: 1.08rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-appearance-card-body > p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 3.85em;
  margin: 0;
  color: #59617a;
  font-size: 0.88rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.app-appearance-meta-row {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #eceef5;
  padding-top: 13px;
  color: #7c849d;
  font-size: 0.74rem;
  font-weight: 650;
}

.app-appearance-card .masterclass-card-edit-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #6f68b8;
  border-radius: 10px;
  background: #6f68b8;
  padding: 8px 16px;
  color: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.app-appearance-card .masterclass-card-edit-button:hover,
.app-appearance-card .masterclass-card-edit-button:focus-visible {
  border-color: #5d56a8;
  background: #5d56a8;
  transform: translateY(-1px);
}

.app-appearance-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 340px;
  border: 1px dashed #d8ddea;
  border-radius: 20px;
  background: #fafafe;
  padding: 30px;
  text-align: center;
}

.app-appearance-empty strong {
  color: var(--appearance-ink);
  font-size: 1rem;
}

.app-appearance-empty p {
  max-width: 460px;
  margin: 0;
  color: var(--appearance-muted);
  font-size: 0.86rem;
}

.app-appearance-modal .ws-default-modal-dialog {
  width: min(980px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-appearance-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.app-appearance-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  padding: 22px 24px 24px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.app-appearance-form > .field-full {
  grid-column: 1 / -1;
}

.app-appearance-form label {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6.5px;
}

.app-appearance-form label > span:first-child {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 750;
  line-height: 1.25;
}

.app-appearance-form input,
.app-appearance-form select,
.app-appearance-form textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.app-appearance-form input[type="file"] {
  min-height: 44px;
  padding: 8px 10px;
}

.app-appearance-form textarea {
  min-height: 145px;
  resize: vertical;
}

.app-appearance-preview {
  flex: 0 0 auto;
  display: block;
  margin: 22px 24px 0;
  overflow: hidden;
  border: 1px solid #dce1ed;
  border-radius: 18px;
  background: #eef1f8;
  box-shadow: 0 12px 30px rgba(37, 43, 72, 0.08);
}

.app-appearance-preview > img {
  width: 100%;
  height: 230px;
  display: block;
  object-fit: cover;
}

.app-appearance-form .ws-modal-two-col-row {
  clear: both;
  align-items: start;
  gap: 20px;
}

.app-appearance-form input[readonly] {
  background: #f5f6fb;
  color: #6d748d;
  cursor: not-allowed;
}

.app-appearance-control-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px);
  align-items: end;
  gap: 20px;
}

.app-appearance-control-row > label {
  display: grid;
  gap: 6.5px;
}

.app-appearance-control-row .manage-schedules-active-switch {
  align-self: stretch;
  justify-content: flex-start;
  border: 1px solid #e0e3ef;
  border-radius: 12px;
  background: #f8f8fc;
  padding: 12px 14px;
}

.app-appearance-submit-row {
  display: flex;
  justify-content: flex-end;
}

.app-appearance-submit-row .page-modal-actions {
  margin-left: auto;
}

.app-appearance-legal-modal .ws-default-modal-dialog {
  width: min(980px, calc(100vw - 44px));
}

.app-appearance-legal-modal .ws-default-modal-head > div {
  min-width: 0;
}

.app-appearance-legal-modal .ws-default-modal-head p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  line-height: 1.4;
}

.app-appearance-legal-form {
  display: grid;
  gap: 20px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px 24px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.app-appearance-legal-field {
  display: grid;
  gap: 6.5px;
  min-width: 0;
}

.app-appearance-legal-field > span {
  color: #353b55;
  font-size: 0.88rem;
  font-weight: 800;
}

.app-appearance-legal-field > small {
  color: #747c95;
  font-size: 0.76rem;
  line-height: 1.45;
}

.app-appearance-legal-field textarea {
  width: 100%;
  min-height: 190px;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid #d8dff0;
  border-radius: 12px;
  padding: 13px 14px;
  color: #252a3e;
  background: #ffffff;
  font: inherit;
  line-height: 1.55;
}

.app-appearance-legal-field textarea:focus {
  border-color: #7770c2;
  outline: 3px solid rgba(111, 104, 184, 0.14);
}

.app-appearance-legal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 4px;
}

.app-appearance-legal-actions button {
  min-height: 44px;
  margin: 0;
}

@media (max-width: 1080px) {
  .app-appearance-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .app-appearance-surface,
  .app-appearance-main {
    min-height: auto;
  }

  .app-appearance-header {
    align-items: stretch;
  }

  .app-appearance-note {
    max-width: none;
  }

  .app-appearance-header-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .app-appearance-header-actions .membership-toolbar-btn {
    align-self: flex-end;
  }

  .app-appearance-preview > img {
    height: 190px;
  }

  .app-appearance-control-row,
  .app-appearance-form .ws-modal-two-col-row {
    grid-template-columns: 1fr;
  }
}
/* Manage Wonder Habits */
.wonder-habits-surface {
    position: relative;
    min-height: calc(100vh - 142px);
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 8%, rgba(111, 104, 184, 0.12), transparent 25%),
        linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
}

.wonder-habits-main {
    min-height: calc(100vh - 142px);
    display: flex;
    flex-direction: column;
}

.wonder-habits-toolbar {
    min-width: 0;
}

.wonder-habits-masterclass-grid {
    margin-top: 16px;
}

.wonder-habit-masterclass-card {
    min-height: 330px;
}

.wonder-habit-masterclass-card .subscription-plan-body {
    height: 100%;
    grid-template-rows: minmax(88px, auto) auto auto;
}

.wonder-habit-masterclass-card .masterclass-card-actions {
    margin-top: auto;
}

.wonder-habit-star-logo {
    display: inline-grid;
    place-items: center;
    flex: 0 0 68px;
    color: #ffffff;
    background:
        radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.3), transparent 28%),
        linear-gradient(145deg, #8178cf, #5d55ab);
}

.wonder-habit-star-logo svg {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 3px 4px rgba(39, 31, 83, 0.2));
}

.wonder-habits-user-card .application-summary-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.wonder-habits-progress-track {
    width: min(430px, 100%);
    height: 8px;
    display: block;
    margin-top: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e6ef;
}

.wonder-habits-progress-track > span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #6f68b8, #8f87da);
}

.wonder-habits-status-stack {
    align-self: center;
}

.wonder-habits-modal .ws-default-modal-dialog {
    width: min(920px, calc(100vw - 42px));
    max-height: calc(100vh - 42px);
    max-height: calc(100dvh - 42px);
    overflow: hidden;
}

.wonder-habits-editor-modal .ws-default-modal-dialog {
    width: min(840px, calc(100vw - 42px));
    display: flex;
    flex-direction: column;
}

.wonder-habits-modal .ws-default-modal-form {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.wonder-habits-editor-modal .wonder-habits-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.wonder-habits-editor-modal .ws-default-modal-head {
    flex: 0 0 auto;
}

.wonder-habits-form,
.wonder-habits-detail-form {
    gap: 20px;
}

.wonder-habits-description-field {
    width: 100%;
    min-width: 0;
    display: grid !important;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    gap: 6.5px !important;
    align-items: stretch;
}

.wonder-habits-description-field > span {
    display: block;
    margin: 0;
}

.wonder-habits-description-field > textarea {
    width: 100%;
    min-width: 0;
    min-height: 132px;
    box-sizing: border-box;
    display: block;
    resize: vertical;
}

.wonder-habits-detail-form .wonder-habits-description-field > textarea[readonly] {
    color: #3f455c;
    background: #f8f9fc;
    resize: none;
}

.wonder-habits-form .ws-modal-submit-row .page-modal-actions,
.wonder-habits-detail-form .ws-modal-submit-row .page-modal-actions {
    width: 100%;
    justify-content: flex-end;
}

.wonder-habits-detail-form > .ws-modal-submit-row {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid #e4e6ef;
}

.wonder-habits-settings-row {
    align-items: end;
}

.wonder-habits-settings-row .ws-inline-switch-label {
    min-height: 84px;
    justify-content: center;
    padding: 14px 18px;
    border: 1px solid #e0e2ed;
    border-radius: 16px;
    background: #f8f8fc;
}

.wonder-habits-modal-status-row {
    margin-top: 10px;
}

.wonder-habits-modal-status-row > .ws-inline-switch-label {
    width: auto;
    min-width: 180px;
}

.wonder-habits-user-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border: 1px solid #e1e3ee;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8f7ff, #ffffff);
}

.wonder-habits-user-hero img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid #dfe2ed;
    border-radius: 50%;
}

.wonder-habits-user-hero span:not(.application-status-badge) {
    color: #777e98;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wonder-habits-user-hero h3 {
    margin: 4px 0 2px;
    color: #241f4d;
    font-size: 1.2rem;
}

.wonder-habits-user-hero p {
    margin: 0;
    color: #757c94;
}

.wonder-habits-progress-panel {
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr);
    align-items: center;
    gap: 20px;
    padding: 16px 18px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #6259ad, #8178cc);
}

.wonder-habits-progress-panel span,
.wonder-habits-progress-panel strong {
    display: block;
}

.wonder-habits-progress-panel > div span {
    font-size: 0.76rem;
    opacity: 0.78;
}

.wonder-habits-progress-panel strong {
    margin-top: 2px;
    font-size: 1.3rem;
}

.wonder-habits-progress-panel .wonder-habits-progress-track {
    width: 100%;
    margin: 0;
    background: rgba(255, 255, 255, 0.24);
}

.wonder-habits-progress-panel .wonder-habits-progress-track > span {
    background: #fff;
}

.wonder-habits-empty {
    display: grid;
    place-items: center;
    min-height: 260px;
    margin-top: 20px;
    padding: 36px;
    border: 1px dashed #d7d9e7;
    border-radius: 22px;
    color: #747b93;
    text-align: center;
    background: #fbfbfe;
}

.wonder-habits-empty strong {
    color: #292354;
    font-size: 1.1rem;
}

.wonder-habits-empty p {
    margin: 6px 0 0;
}

.wonder-habits-pagination {
    margin-top: auto;
    padding-top: 26px;
}

@media (max-width: 760px) {
    .wonder-habits-user-hero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .wonder-habits-user-hero .application-status-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .wonder-habits-progress-panel {
        grid-template-columns: 1fr;
    }
}