/* ============================================================
   Premium Color System — CSS Custom Properties + Utilities
   ============================================================ */

:root {
  /* --- Core Premium Palette --- */
  --premium-alabaster: #FAF9F6;
  --premium-ink:       #0B0F19;
  --premium-surface:   #121826;
  --premium-linen:     #EADCC9;
  --premium-gold:      #A38A5F;

  /* --- Extended Neutral Tones --- */
  --premium-alabaster-dark:  #f0ede6;
  --premium-ink-light:       #1e2433;
  --premium-surface-light:   #1a2030;
  --premium-linen-dark:      #d4c4ac;
  --premium-gold-light:      #b8a378;
  --premium-gold-dark:       #8a7350;

  /* --- Semantic Status Colors (Gold-aligned) --- */
  --premium-success:       #2d7d5a;
  --premium-success-light: #e8f5ee;
  --premium-success-dark:  #1a5a3e;

  --premium-error:         #a64d4d;
  --premium-error-light:   #fce8e8;
  --premium-error-dark:    #7a3636;

  --premium-warning:       #b8862d;
  --premium-warning-light: #fef3e2;
  --premium-warning-dark:  #8c6520;

  --premium-info:          #4d6fa6;
  --premium-info-light:    #e8effc;
  --premium-info-dark:     #36507a;
}

/*
  Dark mode overrides — applied when parent has class "dark"
  Most dark values are handled by Tailwind's dark: prefix,
  but these utility classes need explicit dark variants.
*/
.dark {
  --premium-alabaster: #0B0F19;
  --premium-alabaster-dark: #121826;
}

/* ============================================================
   Semantic Utility Classes (light & dark aware)
   ============================================================ */

/* --- Success --- */
.bg-premium-success         { background-color: var(--premium-success); }
.bg-premium-success-light   { background-color: var(--premium-success-light); }
.text-premium-success       { color: var(--premium-success); }
.text-premium-success-dark  { color: var(--premium-success-dark); }
.border-premium-success     { border-color: var(--premium-success); }
.border-premium-success-light { border-color: var(--premium-success-light); }
.dark .bg-premium-success         { background-color: var(--premium-success-dark); }
.dark .bg-premium-success-light   { background-color: #0a2e1e; }
.dark .text-premium-success       { color: var(--premium-success-light); }
.dark .text-premium-success-dark  { color: var(--premium-success); }
.dark .border-premium-success     { border-color: var(--premium-success-dark); }
.dark .border-premium-success-light { border-color: #0a2e1e; }

/* --- Error --- */
.bg-premium-error           { background-color: var(--premium-error); }
.bg-premium-error-light     { background-color: var(--premium-error-light); }
.text-premium-error         { color: var(--premium-error); }
.text-premium-error-dark    { color: var(--premium-error-dark); }
.border-premium-error       { border-color: var(--premium-error); }
.border-premium-error-light { border-color: var(--premium-error-light); }
.dark .bg-premium-error         { background-color: var(--premium-error-dark); }
.dark .bg-premium-error-light   { background-color: #3a1a1a; }
.dark .text-premium-error       { color: var(--premium-error-light); }
.dark .text-premium-error-dark  { color: var(--premium-error); }
.dark .border-premium-error     { border-color: var(--premium-error-dark); }
.dark .border-premium-error-light { border-color: #3a1a1a; }

/* --- Warning --- */
.bg-premium-warning         { background-color: var(--premium-warning); }
.bg-premium-warning-light   { background-color: var(--premium-warning-light); }
.text-premium-warning       { color: var(--premium-warning); }
.text-premium-warning-dark  { color: var(--premium-warning-dark); }
.border-premium-warning     { border-color: var(--premium-warning); }
.border-premium-warning-light { border-color: var(--premium-warning-light); }
.dark .bg-premium-warning         { background-color: var(--premium-warning-dark); }
.dark .bg-premium-warning-light   { background-color: #2e2410; }
.dark .text-premium-warning       { color: var(--premium-warning-light); }
.dark .text-premium-warning-dark  { color: var(--premium-warning); }
.dark .border-premium-warning     { border-color: var(--premium-warning-dark); }
.dark .border-premium-warning-light { border-color: #2e2410; }

/* --- Info --- */
.bg-premium-info            { background-color: var(--premium-info); }
.bg-premium-info-light      { background-color: var(--premium-info-light); }
.text-premium-info          { color: var(--premium-info); }
.text-premium-info-dark     { color: var(--premium-info-dark); }
.border-premium-info        { border-color: var(--premium-info); }
.border-premium-info-light  { border-color: var(--premium-info-light); }
.dark .bg-premium-info            { background-color: var(--premium-info-dark); }
.dark .bg-premium-info-light      { background-color: #1a2840; }
.dark .text-premium-info          { color: var(--premium-info-light); }
.dark .text-premium-info-dark     { color: var(--premium-info); }
.dark .border-premium-info        { border-color: var(--premium-info-dark); }
.dark .border-premium-info-light  { border-color: #1a2840; }

/* ============================================================
   Step Progression (for ZATCA settings)
   ============================================================ */
.step-active {
  border-color: var(--premium-gold) !important;
  background-color: var(--premium-alabaster) !important;
}
.step-active span:first-child {
  background-color: var(--premium-gold) !important;
  color: #ffffff !important;
}
.step-complete {
  border-color: var(--premium-success) !important;
  background-color: var(--premium-success-light) !important;
}
.step-complete span:first-child {
  background-color: var(--premium-success) !important;
  color: #ffffff !important;
}
.dark .step-active {
  border-color: var(--premium-gold) !important;
  background-color: var(--premium-surface) !important;
}
.dark .step-active span:first-child {
  background-color: var(--premium-gold) !important;
}
.dark .step-complete {
  border-color: var(--premium-success) !important;
  background-color: #0a2e1e !important;
}
.dark .step-complete span:first-child {
  background-color: var(--premium-success) !important;
}

/* ============================================================
   RTL Support
   ============================================================ */
html[dir="rtl"] .mr-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}
html[dir="rtl"] .ml-1 {
  margin-left: 0 !important;
  margin-right: 0.25rem !important;
}

/* ============================================================
   Animations
   ============================================================ */
#toast-container .toast-item {
  animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(100px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   Frappe-inspired low-code form system
   ============================================================ */

:root {
  --form-accent: #8a7350;
  --form-accent-strong: #6f5b3e;
  --form-bg: #f4f5f6;
  --form-bg-hover: #eef0f2;
  --form-surface: #ffffff;
  --form-border: #d8dce2;
  --form-border-soft: #e8eaed;
  --form-text: #1f272e;
  --form-muted: #6b7280;
  --form-focus: rgba(163, 138, 95, 0.18);
  --form-danger: #b42318;
  --form-danger-soft: #fff1f0;
  --form-radius: 7px;
}

.dark {
  --form-bg: #171e2b;
  --form-bg-hover: #1d2635;
  --form-surface: #121826;
  --form-border: #30394a;
  --form-border-soft: #242d3d;
  --form-text: #f2eee7;
  --form-muted: #a9b0bb;
  --form-focus: rgba(184, 163, 120, 0.2);
  --form-danger: #ffb4ac;
  --form-danger-soft: #3a1a1a;
}

.frappe-page {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.frappe-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-block-end: 1.25rem;
}

.frappe-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-block-end: 0.45rem;
  color: var(--form-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.frappe-breadcrumbs a:hover {
  color: var(--form-accent);
}

.frappe-page-title {
  overflow: hidden;
  color: var(--form-text);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[dir="rtl"] .frappe-page-title {
  letter-spacing: 0;
}

.frappe-page-description {
  margin-block-start: 0.35rem;
  color: var(--form-muted);
  font-size: 0.8rem;
  line-height: 1.65;
}

.frappe-page-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
}

.frappe-button {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--form-radius);
  padding: 0.45rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1;
  transition: background-color 120ms ease, border-color 120ms ease,
    box-shadow 120ms ease, color 120ms ease, transform 120ms ease;
}

.frappe-button:hover {
  transform: translateY(-1px);
}

.frappe-button:focus-visible {
  outline: 2px solid var(--form-accent);
  outline-offset: 2px;
}

.frappe-button:disabled,
.frappe-button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

.frappe-button svg {
  width: 0.95rem;
  height: 0.95rem;
}

.frappe-button kbd {
  margin-inline-start: 0.25rem;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.16);
  padding: 0.16rem 0.32rem;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 700;
}

.frappe-button--primary {
  background: var(--form-accent);
  color: #fff;
}

.frappe-button--primary:hover {
  background: var(--form-accent-strong);
  box-shadow: 0 4px 12px rgb(72 57 37 / 0.15);
}

.frappe-button--secondary {
  border-color: var(--form-border);
  background: var(--form-surface);
  color: var(--form-text);
}

.frappe-button--secondary:hover {
  background: var(--form-bg);
}

.frappe-button--danger {
  border-color: color-mix(in srgb, var(--form-danger) 30%, transparent);
  background: var(--form-surface);
  color: var(--form-danger);
}

.frappe-button--danger:hover {
  background: var(--form-danger-soft);
}

.frappe-button--dark {
  background: #1f272e;
  color: #fff;
}

.frappe-dirty-indicator,
.frappe-readonly-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.25rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
}

.frappe-dirty-indicator[hidden] {
  display: none;
}

.frappe-dirty-indicator {
  background: #fff7e6;
  color: #9a6700;
}

.frappe-dirty-indicator > span {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: currentColor;
}

.frappe-readonly-badge {
  background: var(--form-bg);
  color: var(--form-muted);
}

.frappe-form-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-block-end: 1rem;
  border: 1px solid color-mix(in srgb, var(--form-danger) 24%, transparent);
  border-radius: var(--form-radius);
  background: var(--form-danger-soft);
  padding: 0.8rem 0.9rem;
  color: var(--form-danger);
  font-size: 0.78rem;
  font-weight: 600;
}

.frappe-form-alert svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

.frappe-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.frappe-form-layout--with-aside {
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
}

.frappe-form {
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--form-border-soft);
  border-radius: 10px;
  background: var(--form-surface);
  box-shadow: 0 1px 2px rgb(31 39 46 / 0.04);
}

.frappe-section + .frappe-section {
  border-block-start: 1px solid var(--form-border-soft);
}

.frappe-section-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  text-align: start;
}

.frappe-section-head:hover {
  background: color-mix(in srgb, var(--form-bg) 45%, transparent);
}

.frappe-section-head > svg {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  color: var(--form-muted);
  transition: transform 120ms ease;
}

.frappe-section-title,
.frappe-section-description {
  display: block;
}

.frappe-section-title {
  color: var(--form-text);
  font-size: 0.85rem;
  font-weight: 700;
}

.frappe-section-description {
  margin-block-start: 0.15rem;
  color: var(--form-muted);
  font-size: 0.68rem;
  font-weight: 450;
  line-height: 1.5;
}

.frappe-section-body {
  padding: 0.25rem 1.25rem 1.35rem;
}

.frappe-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}

.frappe-control {
  min-width: 0;
}

.frappe-control--wide {
  grid-column: 1 / -1;
}

.frappe-label {
  display: block;
  margin-block-end: 0.35rem;
  color: var(--form-text);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.4;
}

.frappe-required {
  margin-inline-start: 0.12rem;
  color: var(--form-danger);
}

.frappe-input-wrap {
  position: relative;
}

.frappe-input {
  display: block;
  width: 100%;
  min-height: 2.35rem;
  border: 1px solid transparent;
  border-radius: var(--form-radius);
  outline: none;
  background: var(--form-bg);
  padding: 0.52rem 0.7rem;
  color: var(--form-text);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.35;
  transition: background-color 120ms ease, border-color 120ms ease,
    box-shadow 120ms ease;
}

.frappe-input::placeholder {
  color: color-mix(in srgb, var(--form-muted) 72%, transparent);
}

.frappe-input:hover:not(:disabled):not([readonly]) {
  background: var(--form-bg-hover);
}

.frappe-input:focus {
  border-color: var(--form-accent);
  background: var(--form-surface);
  box-shadow: 0 0 0 3px var(--form-focus);
}

.frappe-input[readonly],
.frappe-input:disabled {
  cursor: default;
  border-color: transparent;
  opacity: 0.78;
}

.frappe-input[aria-invalid="true"],
.frappe-control--invalid .frappe-input {
  border-color: var(--form-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-danger) 10%, transparent);
}

select.frappe-input {
  cursor: pointer;
}

.frappe-textarea {
  min-height: 5.8rem;
  resize: vertical;
}

.frappe-input--uppercase {
  text-transform: uppercase;
}

.frappe-input--has-prefix {
  padding-inline-start: 3.25rem;
}

.frappe-input--with-leading-icon {
  padding-inline-start: 2.55rem;
}

.frappe-input--with-trailing-action {
  padding-inline-end: 3.75rem;
}

.frappe-input--has-suffix {
  padding-inline-end: 3.25rem;
}

.frappe-input-affix {
  position: absolute;
  z-index: 1;
  inset-block: 0;
  display: flex;
  align-items: center;
  color: var(--form-muted);
  font-size: 0.62rem;
  font-weight: 750;
  pointer-events: none;
}

.frappe-input-affix--start {
  inset-inline-start: 0.7rem;
}

.frappe-input-affix--end {
  inset-inline-end: 0.7rem;
}

.frappe-help,
.frappe-error {
  display: block;
  margin-block-start: 0.28rem;
  font-size: 0.62rem;
  line-height: 1.55;
}

.frappe-help {
  color: var(--form-muted);
}

.frappe-error {
  color: var(--form-danger);
  font-weight: 600;
}

.frappe-feedback:empty {
  display: none;
}

.frappe-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding-block-start: 1.25rem;
  cursor: pointer;
}

.frappe-check > input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.frappe-check__box {
  display: flex;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-block-start: 0.02rem;
  border: 1px solid var(--form-border);
  border-radius: 4px;
  background: var(--form-surface);
  color: transparent;
  transition: background-color 120ms ease, border-color 120ms ease,
    box-shadow 120ms ease;
}

.frappe-check__box svg {
  width: 0.78rem;
  height: 0.78rem;
}

.frappe-check > input:checked + .frappe-check__box {
  border-color: var(--form-accent);
  background: var(--form-accent);
  color: #fff;
}

.frappe-check > input:focus-visible + .frappe-check__box {
  box-shadow: 0 0 0 3px var(--form-focus);
}

.frappe-check .frappe-label {
  margin: 0;
}

.frappe-check .frappe-help {
  margin-block-start: 0.15rem;
}

.frappe-input-action {
  position: absolute;
  inset-block: 0;
  display: flex;
  width: 2rem;
  align-items: center;
  justify-content: center;
  color: var(--form-muted);
  font-size: 1rem;
}

.frappe-input-action:hover {
  color: var(--form-text);
}

.frappe-input-action--toggle {
  inset-inline-end: 0;
}

.frappe-input-action--clear {
  inset-inline-end: 1.8rem;
}

.frappe-input-action svg {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 120ms ease;
}

.frappe-input--link {
  padding-inline-end: 4rem;
}

.frappe-link {
  position: relative;
}

.frappe-native-link {
  min-width: 0;
}

.saas-filter-bar > .frappe-native-link {
  width: auto;
  min-width: 10rem;
}

.saas-filter-bar > .frappe-native-link .frappe-input {
  width: 100%;
  min-width: 10rem;
}

.saas-inline-status > .frappe-native-link {
  flex: 1;
}

.frappe-link-menu {
  position: absolute;
  z-index: 60;
  inset-inline: 0;
  margin-block-start: 0.28rem;
  overflow: hidden;
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  background: var(--form-surface);
  box-shadow: 0 12px 32px rgb(31 39 46 / 0.14);
}

.frappe-link-menu__options {
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.28rem;
}

.frappe-link-option {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 5px;
  padding: 0.52rem 0.62rem;
  color: var(--form-text);
  font-size: 0.74rem;
  font-weight: 520;
  text-align: start;
}

.frappe-link-option:hover,
.frappe-link-option--active {
  background: var(--form-bg);
}

.frappe-link-option svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
  color: var(--form-accent);
}

.frappe-link-empty {
  padding: 0.8rem;
  color: var(--form-muted);
  font-size: 0.7rem;
  text-align: center;
}

.frappe-link-create {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border-block-start: 1px solid var(--form-border-soft);
  padding: 0.6rem 0.85rem;
  color: var(--form-accent);
  font-size: 0.7rem;
  font-weight: 700;
}

.frappe-link-create:hover {
  background: var(--form-bg);
}

.frappe-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-block-start: 1px solid var(--form-border-soft);
  padding: 0.85rem 1.25rem;
}

.frappe-form-footer p {
  color: var(--form-muted);
  font-size: 0.62rem;
}

.frappe-aside-card {
  position: sticky;
  top: 0;
  overflow: hidden;
  border: 1px solid var(--form-border-soft);
  border-radius: 10px;
  background: var(--form-surface);
  padding: 1.15rem;
  box-shadow: 0 1px 2px rgb(31 39 46 / 0.04);
}

.frappe-aside-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.frappe-aside-card h2 {
  margin-block-start: 0.1rem;
  color: var(--form-text);
  font-size: 0.9rem;
  font-weight: 700;
}

.frappe-eyebrow {
  color: var(--form-muted);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.frappe-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.25rem 0.5rem;
  font-size: 0.58rem;
  font-weight: 750;
}

.frappe-status--success {
  background: var(--premium-success-light);
  color: var(--premium-success-dark);
}

.frappe-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 1rem;
  border-radius: var(--form-radius);
  background: #fff;
  padding: 0.85rem;
}

.frappe-qr svg {
  width: min(11rem, 100%);
  height: auto;
}

.frappe-summary-list {
  margin-block-end: 1rem;
}

.frappe-summary-list > div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0.75rem;
  padding-block: 0.48rem;
  border-block-start: 1px solid var(--form-border-soft);
  font-size: 0.68rem;
}

.frappe-summary-list dt {
  color: var(--form-muted);
}

.frappe-summary-list dd {
  overflow: hidden;
  color: var(--form-text);
  font-weight: 600;
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frappe-summary-list__total {
  font-size: 0.8rem !important;
  font-weight: 750;
}

/* Reusable variants for non-CRUD forms (POS, onboarding, login). */
.frappe-input--compact {
  min-height: 1.8rem;
  padding-block: 0.28rem;
  font-size: 0.68rem;
}

.frappe-input--large {
  min-height: 3rem;
  padding-block: 0.75rem;
  font-size: 0.9rem;
}

.frappe-input--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.03em;
}

.frappe-password-wrap .frappe-input {
  padding-inline-end: 2.7rem;
}

.frappe-password-toggle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  color: var(--form-muted);
}

.frappe-password-toggle:hover {
  color: var(--form-text);
}

.frappe-password-toggle svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 900px) {
  .frappe-form-layout--with-aside {
    grid-template-columns: 1fr;
  }

  .frappe-aside-card {
    position: static;
  }
}

@media (max-width: 680px) {
  .frappe-page-head {
    flex-direction: column;
  }

  .frappe-page-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .frappe-page-actions .frappe-button--primary {
    margin-inline-start: auto;
  }

  .frappe-field-grid {
    grid-template-columns: 1fr;
  }

  .frappe-control--wide {
    grid-column: auto;
  }

  .frappe-section-head,
  .frappe-section-body,
  .frappe-form-footer {
    padding-inline: 1rem;
  }

  .frappe-form-footer {
    align-items: flex-end;
  }

  .frappe-button kbd {
    display: none;
  }
}

/* Smart catalog column matching */
.catalog-mapping-page {
  max-width: 76rem;
  margin-inline: auto;
  padding-block: 0.5rem 2rem;
}

.catalog-mapping-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.25rem;
}

.catalog-mapping-page__back {
  display: inline-block;
  margin-block-end: 0.65rem;
  color: var(--form-accent-strong);
  font-size: 0.78rem;
  font-weight: 750;
}

.catalog-mapping-page h1,
.catalog-mapping-page h2,
.catalog-mapping-page p {
  margin: 0;
}

.catalog-mapping-page h1 {
  color: var(--form-text);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
}

.catalog-mapping-page__header p,
.catalog-mapping-card__intro p,
.catalog-preview p {
  margin-block-start: 0.4rem;
  color: var(--form-muted);
  font-size: 0.82rem;
}

.catalog-mapping-page__badge {
  flex: none;
  border: 1px solid var(--form-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--form-accent) 10%, var(--form-surface));
  padding: 0.38rem 0.65rem;
  color: var(--form-accent-strong);
  font-size: 0.7rem;
  font-weight: 800;
}

.catalog-mapping-card,
.catalog-preview {
  border: 1px solid var(--form-border);
  border-radius: 14px;
  background: var(--form-surface);
  box-shadow: 0 10px 28px rgb(11 15 25 / 0.08);
}

.catalog-mapping-card__intro,
.catalog-preview > div:first-child {
  padding: 1rem 1.1rem;
  border-block-end: 1px solid var(--form-border-soft);
}

.catalog-mapping-card__intro h2,
.catalog-preview h2 {
  color: var(--form-text);
  font-size: 0.92rem;
  font-weight: 800;
}

.catalog-mapping-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  padding: 1.1rem;
}

.catalog-mapping-field {
  display: grid;
  gap: 0.42rem;
}

.catalog-mapping-field > span {
  color: var(--form-text);
  font-size: 0.75rem;
  font-weight: 750;
}

.catalog-mapping-field b {
  margin-inline-start: 0.2rem;
  color: #b54747;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.catalog-mapping-field select {
  min-height: 2.5rem;
  width: 100%;
  border: 1px solid var(--form-border);
  border-radius: 8px;
  background: var(--form-bg);
  padding: 0.45rem 0.65rem;
  color: var(--form-text);
  font-size: 0.8rem;
}

.catalog-mapping-field select:focus {
  outline: 2px solid color-mix(in srgb, var(--form-accent) 50%, transparent);
  border-color: var(--form-accent);
}

.catalog-mapping-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  border-block-start: 1px solid var(--form-border-soft);
  padding: 1rem 1.1rem;
}

.catalog-mapping-page__error {
  margin-block-end: 1rem;
  border: 1px solid #c56b6b;
  border-radius: 10px;
  background: color-mix(in srgb, #bd4141 15%, var(--form-surface));
  padding: 0.75rem 0.9rem;
  color: var(--form-text);
  font-size: 0.8rem;
  font-weight: 700;
}

.catalog-preview {
  margin-block-start: 1rem;
  overflow: hidden;
}

.catalog-preview__table-wrap {
  overflow-x: auto;
}

.catalog-preview table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
}

.catalog-preview th,
.catalog-preview td {
  min-width: 8rem;
  border-block-end: 1px solid var(--form-border-soft);
  padding: 0.72rem 0.85rem;
  color: var(--form-text);
  text-align: start;
}

.catalog-preview th {
  background: var(--form-bg);
  color: var(--form-muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.catalog-preview tbody tr:last-child td {
  border-block-end: 0;
}

@media (max-width: 680px) {
  .catalog-mapping-page__header,
  .catalog-mapping-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-mapping-page__badge {
    align-self: flex-start;
  }

  .catalog-mapping-grid {
    grid-template-columns: 1fr;
  }

  .catalog-mapping-card__actions > * {
    text-align: center;
  }
}

/* ============================================================
   Dynamic plans and public SaaS website
   ============================================================ */

[x-cloak] {
  display: none !important;
}

.saas-plan-admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.saas-plan-admin-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--form-border-soft);
  border-radius: 12px;
  background: var(--form-surface);
  box-shadow: 0 1px 2px rgb(31 39 46 / 0.04);
}

.saas-plan-admin-card--featured {
  border-color: color-mix(in srgb, var(--form-accent) 55%, var(--form-border));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--form-accent) 10%, transparent);
}

.saas-plan-admin-card--featured::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--form-accent);
  content: "";
}

.saas-plan-admin-card__head,
.saas-plan-admin-card__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
}

.saas-plan-admin-card__head h2 {
  color: var(--form-text);
  font-size: 1rem;
  font-weight: 800;
}

.saas-plan-admin-card__head p {
  margin-block-start: 0.25rem;
  color: var(--form-muted);
  font-size: 0.62rem;
  line-height: 1.5;
}

.saas-plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  border-block: 1px solid var(--form-border-soft);
  padding: 0.9rem 1rem;
}

.saas-plan-price strong {
  color: var(--form-text);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.saas-plan-price span {
  color: var(--form-muted);
  font-size: 0.58rem;
}

.saas-plan-limits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--form-border-soft);
}

.saas-plan-limits > div {
  background: var(--form-surface);
  padding: 0.75rem 1rem;
}

.saas-plan-limits dt {
  color: var(--form-muted);
  font-size: 0.55rem;
}

.saas-plan-limits dd {
  margin-block-start: 0.18rem;
  color: var(--form-text);
  font-size: 0.76rem;
  font-weight: 750;
}

.saas-plan-admin-card__footer {
  align-items: center;
  border-block-start: 1px solid var(--form-border-soft);
}

.saas-plan-admin-card__footer > span {
  color: var(--form-muted);
  font-size: 0.56rem;
}

.saas-plan-admin-card__footer > div {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.saas-feature-editor {
  display: grid;
  gap: 0.7rem;
}

.saas-feature-editor__row {
  display: grid;
  grid-template-columns: minmax(9rem, 1.1fr) minmax(9rem, 1.1fr) minmax(10rem, 1.5fr) minmax(10rem, 1.5fr) 5rem 7rem;
  gap: 0.65rem;
  align-items: start;
  border: 1px solid var(--form-border-soft);
  border-radius: 9px;
  background: color-mix(in srgb, var(--form-bg) 42%, var(--form-surface));
  padding: 0.75rem;
}

.saas-feature-delete {
  grid-column: 1 / -1;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  color: var(--form-danger);
  font-size: 0.6rem;
  font-weight: 650;
}

.saas-lead-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  margin-block-end: 0.75rem;
}

.saas-lead-stats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid var(--form-border-soft);
  border-radius: 9px;
  background: var(--form-surface);
  padding: 0.72rem 0.8rem;
  color: var(--form-muted);
  font-size: 0.58rem;
}

.saas-lead-stats a.is-active {
  border-color: var(--form-accent);
  color: var(--form-accent);
  box-shadow: 0 0 0 2px var(--form-focus);
}

.saas-lead-stats strong {
  color: var(--form-text);
  font-size: 0.9rem;
}

.saas-inline-status {
  display: flex;
  min-width: 9rem;
  align-items: center;
  gap: 0.45rem;
}

/* Public marketing shell */

.public-body {
  --public-bg: #fbfaf7;
  --public-surface: #ffffff;
  --public-text: #12151d;
  --public-muted: #68707d;
  --public-border: #e8e4dc;
  --public-brand: #9a7b45;
  --public-brand-dark: #735a31;
  --public-dark: #0d121c;
  --public-soft: #f5f2ec;
  --public-gold: var(--public-brand);
  --public-gold-strong: var(--public-brand-dark);
  --public-gold-soft: #f2eadc;
  --public-gold-light: #d8c18f;
  margin: 0;
  background: var(--public-bg);
  color: var(--public-text);
  font-family: "Inter", "Noto Kufi Arabic", sans-serif;
  -webkit-font-smoothing: antialiased;
}

html[dir="rtl"] .public-body {
  font-family: "Noto Kufi Arabic", "Inter", sans-serif;
}

.public-body *,
.public-body *::before,
.public-body *::after {
  box-sizing: border-box;
}

.public-body a {
  color: inherit;
  text-decoration: none;
}

.public-body button,
.public-body input,
.public-body select,
.public-body textarea {
  font: inherit;
}

.public-container {
  width: min(1180px, calc(100% - 2.5rem));
  margin-inline: auto;
}

.public-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-block-end: 1px solid color-mix(in srgb, var(--public-border) 78%, transparent);
  background: color-mix(in srgb, var(--public-bg) 88%, transparent);
  backdrop-filter: blur(18px);
}

.public-header__inner {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  gap: 2rem;
}

.public-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.65rem;
}

.public-brand > span {
  display: inline-flex;
  width: 2.1rem;
  height: 2.1rem;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--public-brand);
  color: #fff;
  font-weight: 800;
}

.public-brand strong {
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.public-nav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 1.55rem;
}

.public-nav a {
  color: var(--public-muted);
  font-size: 0.78rem;
  font-weight: 600;
  transition: color 150ms ease;
}

.public-nav a:hover {
  color: var(--public-text);
}

.public-header__actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.public-language {
  border: 0;
  background: transparent;
  padding: 0.6rem;
  color: var(--public-muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 750;
}

.public-button {
  display: inline-flex;
  min-height: 2.55rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.68rem 1rem;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}

.public-button:hover {
  transform: translateY(-1px);
}

.public-button--primary {
  background: var(--public-brand);
  color: #fff !important;
  box-shadow: 0 8px 24px rgb(154 123 69 / 0.18);
}

.public-button--primary:hover {
  background: var(--public-brand-dark);
}

.public-button--ghost {
  border-color: var(--public-border);
  background: var(--public-surface);
  color: var(--public-text);
}

.public-button--dark {
  background: var(--public-dark);
  color: #fff !important;
}

.public-button--light {
  background: #fff;
  color: var(--public-dark) !important;
}

.public-button--large {
  min-height: 3rem;
  padding-inline: 1.25rem;
  font-size: 0.78rem;
}

.public-mobile-toggle {
  display: none;
  margin-inline-start: auto;
  border: 0;
  background: transparent;
  color: var(--public-text);
  font-size: 1.3rem;
}

.public-toast-wrap {
  position: fixed;
  z-index: 80;
  inset-block-start: 5.2rem;
  inset-inline: 1rem;
  display: grid;
  justify-content: center;
  pointer-events: none;
}

.public-toast {
  max-width: 34rem;
  border: 1px solid #cde8da;
  border-radius: 10px;
  background: #ecf8f1;
  padding: 0.8rem 1rem;
  color: #1f6948;
  box-shadow: 0 10px 30px rgb(20 30 40 / 0.12);
  font-size: 0.72rem;
  font-weight: 650;
}

.public-hero {
  overflow: hidden;
  padding-block: 6.5rem 2rem;
  background:
    radial-gradient(circle at 82% 15%, rgb(163 138 95 / 0.16), transparent 30rem),
    linear-gradient(180deg, #fff 0%, var(--public-bg) 100%);
}

html[dir="rtl"] .public-hero {
  background:
    radial-gradient(circle at 18% 15%, rgb(163 138 95 / 0.16), transparent 30rem),
    linear-gradient(180deg, #fff 0%, var(--public-bg) 100%);
}

.public-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(32rem, 1.1fr);
  gap: 4rem;
  align-items: center;
}

.public-kicker {
  display: inline-block;
  color: var(--public-brand-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.public-hero__copy h1,
.public-section-head h2,
.public-zatca-grid h2,
.public-contact-copy h2,
.public-pricing-hero h1,
.public-pricing-cta h2 {
  margin: 0;
  color: var(--public-text);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1.08;
}

html[dir="rtl"] .public-hero__copy h1,
html[dir="rtl"] .public-section-head h2,
html[dir="rtl"] .public-zatca-grid h2,
html[dir="rtl"] .public-contact-copy h2,
html[dir="rtl"] .public-pricing-hero h1,
html[dir="rtl"] .public-pricing-cta h2 {
  letter-spacing: -0.025em;
  line-height: 1.5;
}

.public-hero__copy h1 {
  max-width: 11em;
  margin-block-start: 1rem;
  font-size: clamp(2.8rem, 5vw, 4.7rem);
}

.public-hero__copy > p {
  max-width: 43rem;
  margin-block: 1.4rem 0;
  color: var(--public-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.public-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-block-start: 1.7rem;
}

.public-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-start: 1.5rem;
  color: var(--public-muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.public-trust-row span::first-letter {
  color: #2d7d5a;
}

.public-product-preview {
  position: relative;
  overflow: visible;
  border: 1px solid #dcd7ce;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 30px 80px rgb(19 26 38 / 0.16);
  transform: perspective(1200px) rotateY(-4deg) rotateX(1deg);
}

html[dir="rtl"] .public-product-preview {
  transform: perspective(1200px) rotateY(4deg) rotateX(1deg);
}

.public-preview__bar {
  display: flex;
  height: 2.5rem;
  align-items: center;
  gap: 0.35rem;
  border-block-end: 1px solid #e6e8ec;
  padding-inline: 0.85rem;
}

.public-preview__bar > span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #d7d9df;
}

.public-preview__bar strong {
  margin-inline-start: auto;
  color: #343a46;
  font-size: 0.55rem;
}

.public-preview__body {
  display: grid;
  min-height: 26rem;
  grid-template-columns: 3.5rem 1fr;
}

.public-preview__body aside {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 1.15rem;
  background: var(--public-dark);
  padding-block: 1rem;
}

.public-preview__body aside b {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 5px;
  background: var(--public-brand);
  color: #fff;
  font-size: 0.7rem;
}

.public-preview__body aside i {
  width: 1.1rem;
  height: 0.25rem;
  border-radius: 999px;
  background: #3a4250;
}

.public-preview__content {
  padding: 1.25rem;
}

.public-preview__title {
  display: flex;
  justify-content: space-between;
  color: #212733;
  font-size: 0.63rem;
}

.public-preview__title span {
  color: #8a909b;
}

.public-preview__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-block-start: 1rem;
}

.public-preview__stats article {
  display: grid;
  gap: 0.2rem;
  border: 1px solid #e7e8eb;
  border-radius: 8px;
  padding: 0.75rem;
}

.public-preview__stats small {
  color: #858c98;
  font-size: 0.46rem;
}

.public-preview__stats b {
  color: #171c25;
  font-size: 1rem;
}

.public-preview__stats span {
  color: #2d7d5a;
  font-size: 0.43rem;
}

.public-preview__chart {
  display: flex;
  height: 9.5rem;
  align-items: end;
  justify-content: space-around;
  gap: 0.55rem;
  margin-block-start: 1rem;
  border: 1px solid #e7e8eb;
  border-radius: 8px;
  background: repeating-linear-gradient(to bottom, #fff, #fff 2.25rem, #f0f1f3 2.3rem);
  padding: 1rem;
}

.public-preview__chart span {
  width: 8%;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #b49a6b, #8a7350);
}

.public-preview__table {
  display: grid;
  gap: 0.5rem;
  margin-block-start: 1rem;
}

.public-preview__table i {
  height: 0.48rem;
  border-radius: 4px;
  background: linear-gradient(90deg, #e9eaed 25%, #f4f5f6 25%);
}

.public-preview__float {
  position: absolute;
  inset-block-end: 2rem;
  inset-inline-end: -2rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid #dce8e1;
  border-radius: 11px;
  background: #fff;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 15px 35px rgb(18 30 24 / 0.15);
}

.public-preview__float > span {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: 999px;
  background: #e8f5ee;
  color: #2d7d5a;
  font-weight: 800;
}

.public-preview__float strong,
.public-preview__float small {
  display: block;
}

.public-preview__float strong {
  color: #202630;
  font-size: 0.58rem;
}

.public-preview__float small {
  margin-block-start: 0.12rem;
  color: #7c8490;
  font-size: 0.46rem;
}

.public-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-block-start: 5rem;
  border-block: 1px solid var(--public-border);
}

.public-metric-strip > div {
  display: grid;
  gap: 0.2rem;
  padding: 1.35rem;
  text-align: center;
}

.public-metric-strip > div + div {
  border-inline-start: 1px solid var(--public-border);
}

.public-metric-strip strong {
  font-size: 1.35rem;
}

.public-metric-strip span {
  color: var(--public-muted);
  font-size: 0.62rem;
}

.public-section {
  padding-block: 6.5rem;
}

.public-section--soft {
  background: #f4f1eb;
}

.public-section--dark {
  background: var(--public-dark);
  color: #fff;
}

.public-section-head {
  max-width: 48rem;
  margin-inline: auto;
  margin-block-end: 3rem;
  text-align: center;
}

.public-section-head h2,
.public-zatca-grid h2,
.public-contact-copy h2,
.public-pricing-cta h2 {
  margin-block-start: 0.8rem;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.public-section-head > p,
.public-zatca-grid > div > p,
.public-contact-copy > p {
  margin-block-start: 1rem;
  color: var(--public-muted);
  font-size: 0.92rem;
  line-height: 1.75;
}

.public-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.public-feature-grid article {
  min-height: 14rem;
  border: 1px solid var(--public-border);
  border-radius: 13px;
  background: var(--public-surface);
  padding: 1.5rem;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.public-feature-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgb(28 35 45 / 0.08);
}

.public-feature-grid article > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 7px;
  background: #f0e9dd;
  color: var(--public-brand-dark);
  font-size: 0.58rem;
  font-weight: 800;
}

.public-feature-grid h3 {
  margin-block: 2rem 0.65rem;
  font-size: 1rem;
}

.public-feature-grid p {
  color: var(--public-muted);
  font-size: 0.76rem;
  line-height: 1.7;
}

.public-zatca-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 5rem;
  align-items: center;
}

.public-section--dark h2 {
  color: #fff;
}

.public-section--dark .public-kicker {
  color: #cbb78e;
}

.public-zatca-grid > div > p {
  color: #a9b0bb;
}

.public-zatca-grid .public-button {
  margin-block-start: 1.5rem;
}

.public-zatca-grid ol {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-zatca-grid li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 1px solid #2b3341;
  border-radius: 11px;
  background: #141b27;
  padding: 1rem;
}

.public-zatca-grid li > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: #2a303b;
  color: #cbb78e;
  font-size: 0.65rem;
  font-weight: 800;
}

.public-zatca-grid li strong,
.public-zatca-grid li small {
  display: block;
}

.public-zatca-grid li strong {
  font-size: 0.78rem;
}

.public-zatca-grid li small {
  margin-block-start: 0.2rem;
  color: #929aa8;
  font-size: 0.62rem;
  line-height: 1.5;
}

.public-billing-toggle {
  display: flex;
  width: fit-content;
  margin: 0 auto 2rem;
  border: 1px solid #ded9cf;
  border-radius: 999px;
  background: #fff;
  padding: 0.25rem;
}

.public-billing-toggle button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0.6rem 0.9rem;
  color: var(--public-muted);
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 700;
}

.public-billing-toggle button.is-active {
  background: var(--public-dark);
  color: #fff;
}

.public-billing-toggle button span {
  margin-inline-start: 0.25rem;
  color: #64b68b;
  font-size: 0.52rem;
}

.public-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.public-plan {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid #ded9cf;
  border-radius: 14px;
  background: #fff;
  padding: 1.4rem;
}

.public-plan--featured {
  border-color: var(--public-brand);
  box-shadow: 0 18px 50px rgb(116 90 49 / 0.14);
  transform: translateY(-0.5rem);
}

.public-plan__recommended {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 1rem;
  border-radius: 0 0 7px 7px;
  background: var(--public-brand);
  padding: 0.38rem 0.65rem;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 800;
}

.public-plan__head > p {
  min-height: 2.8em;
  padding-inline-end: 3rem;
  color: var(--public-muted);
  font-size: 0.62rem;
  line-height: 1.5;
}

.public-plan__head h3 {
  margin-block: 1rem 0.7rem;
  font-size: 1.15rem;
}

.public-plan__price {
  display: flex;
  min-height: 3.6rem;
  align-items: baseline;
  gap: 0.45rem;
}

.public-plan__price strong {
  font-size: 2.25rem;
  letter-spacing: -0.06em;
}

.public-plan__price span,
.public-plan__head > small {
  color: var(--public-muted);
  font-size: 0.56rem;
}

.public-plan__description {
  min-height: 4.7em;
  margin-block-start: 1rem;
  border-block-start: 1px solid var(--public-border);
  padding-block-start: 1rem;
  color: var(--public-muted);
  font-size: 0.68rem;
  line-height: 1.6;
}

.public-plan__features {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.public-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #363d48;
  font-size: 0.65rem;
  line-height: 1.5;
}

.public-plan__features li > span:first-child {
  color: #2d7d5a;
  font-weight: 800;
}

.public-plan__features small {
  display: block;
  color: var(--public-muted);
  font-size: 0.54rem;
}

.public-plan__cta {
  width: 100%;
  margin-block-start: auto;
}

.public-empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--public-border);
  border-radius: 12px;
  padding: 3rem;
  color: var(--public-muted);
  text-align: center;
}

.public-contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 5rem;
  align-items: start;
}

.public-contact-copy > div {
  margin-block-start: 2rem;
  border-inline-start: 3px solid var(--public-brand);
  padding-inline-start: 1rem;
}

.public-contact-copy > div strong {
  font-size: 0.78rem;
}

.public-contact-copy ol {
  display: grid;
  gap: 0.55rem;
  margin: 0.8rem 0 0;
  padding-inline-start: 1.2rem;
  color: var(--public-muted);
  font-size: 0.68rem;
  line-height: 1.5;
}

.public-lead-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  border: 1px solid var(--public-border);
  border-radius: 15px;
  background: #fff;
  padding: 1.5rem;
  box-shadow: 0 20px 55px rgb(24 30 40 / 0.07);
}

.public-field label {
  display: block;
  margin-block-end: 0.4rem;
  color: #343a45;
  font-size: 0.65rem;
  font-weight: 700;
}

.public-field label span {
  color: #a64d4d;
}

.public-field .frappe-input {
  min-height: 2.75rem;
  background: #f3f4f5;
  color: #202630;
}

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

.public-form-error {
  color: #a64d4d;
  font-size: 0.58rem;
}

.public-form-note {
  margin: 0;
  color: var(--public-muted);
  font-size: 0.56rem;
  text-align: center;
}

.public-pricing-hero {
  padding-block: 7rem 4rem;
  background: linear-gradient(180deg, #fff, var(--public-bg));
  text-align: center;
}

.public-pricing-hero h1 {
  max-width: 13em;
  margin-inline: auto;
  margin-block-start: 0.8rem;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
}

.public-pricing-hero p {
  max-width: 43rem;
  margin-inline: auto;
  margin-block-start: 1.2rem;
  color: var(--public-muted);
  line-height: 1.7;
}

.public-pricing-cta {
  background: var(--public-dark);
  color: #fff;
  padding-block: 4rem;
}

.public-pricing-cta > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.public-pricing-cta h2 {
  max-width: 16em;
  color: #fff;
  font-size: 2.1rem;
}

.public-pricing-cta .public-kicker {
  color: #cbb78e;
}

.public-footer {
  border-block-start: 1px solid var(--public-border);
  background: #fff;
  padding-block: 4rem 1.5rem;
}

.public-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 3rem;
}

.public-footer__grid > div {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.public-footer__grid > div > strong {
  margin-block-end: 0.35rem;
  font-size: 0.7rem;
}

.public-footer__grid p,
.public-footer__grid a,
.public-footer__grid span {
  max-width: 18rem;
  margin: 0;
  color: var(--public-muted);
  font-size: 0.62rem;
  line-height: 1.65;
}

.public-footer__grid a:hover {
  color: var(--public-text);
}

.public-footer__bottom {
  display: flex;
  justify-content: space-between;
  margin-block-start: 3rem;
  border-block-start: 1px solid var(--public-border);
  padding-block-start: 1rem;
  color: var(--public-muted);
  font-size: 0.56rem;
}

@media (max-width: 1050px) {
  .saas-plan-admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saas-feature-editor__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-header__actions .public-button--ghost,
  .public-nav {
    display: none;
  }

  .public-mobile-toggle {
    display: block;
  }

  .public-nav.is-open {
    position: absolute;
    inset-block-start: 4.5rem;
    inset-inline: 1.25rem;
    display: grid;
    border: 1px solid var(--public-border);
    border-radius: 10px;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 15px 35px rgb(20 28 38 / 0.12);
  }

  .public-hero__grid {
    grid-template-columns: 1fr;
  }

  .public-hero__copy {
    text-align: center;
  }

  .public-hero__copy h1,
  .public-hero__copy > p {
    margin-inline: auto;
  }

  .public-hero__actions,
  .public-trust-row {
    justify-content: center;
  }

  .public-product-preview {
    max-width: 44rem;
    margin-inline: auto;
    transform: none;
  }

  html[dir="rtl"] .public-product-preview {
    transform: none;
  }

  .public-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-contact-grid,
  .public-zatca-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 720px) {
  .saas-plan-admin-grid,
  .saas-lead-stats {
    grid-template-columns: 1fr;
  }

  .saas-feature-editor__row {
    grid-template-columns: 1fr;
  }

  .public-container {
    width: min(100% - 1.4rem, 1180px);
  }

  .public-header__inner {
    gap: 0.5rem;
  }

  .public-header__actions .public-button--primary {
    display: none;
  }

  .public-hero {
    padding-block-start: 4rem;
  }

  .public-hero__copy h1 {
    font-size: 2.45rem;
  }

  .public-product-preview {
    overflow: hidden;
  }

  .public-preview__body {
    min-height: 20rem;
    grid-template-columns: 2.8rem 1fr;
  }

  .public-preview__stats {
    grid-template-columns: 1fr;
  }

  .public-preview__stats article:nth-child(n + 2),
  .public-preview__float {
    display: none;
  }

  .public-metric-strip,
  .public-feature-grid,
  .public-lead-form,
  .public-footer__grid {
    grid-template-columns: 1fr;
  }

  .public-metric-strip > div + div {
    border-block-start: 1px solid var(--public-border);
    border-inline-start: 0;
  }

  .public-plan--featured {
    transform: none;
  }

  .public-field--wide {
    grid-column: auto;
  }

  .public-pricing-cta > div,
  .public-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ============================================================
   SaaS Super Administrator Control Plane
   ============================================================ */

.saas-page {
  max-width: 1480px;
}

.saas-eyebrow {
  margin-block-end: 0.25rem;
  color: var(--form-accent);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.saas-title-row,
.saas-filter-bar,
.saas-panel__head,
.saas-pagination,
.saas-activity-list > a,
.saas-activity-list--rows > div {
  display: flex;
  align-items: center;
}

.saas-title-row {
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-block-start: 0.55rem;
}

.saas-title-row .frappe-page-title {
  margin: 0;
}

.saas-company-mark,
.saas-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--form-accent) 15%, var(--form-surface));
  color: var(--form-accent-strong);
  font-weight: 800;
  text-transform: uppercase;
}

.dark .saas-company-mark,
.dark .saas-avatar {
  color: var(--premium-gold-light);
}

.saas-company-mark {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 11px;
  font-size: 0.82rem;
}

.saas-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
  font-size: 0.62rem;
}

.saas-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem;
  margin-block-end: 1rem;
}

.saas-kpi-grid--compact {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.saas-kpi {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--form-border-soft);
  border-radius: 11px;
  background: var(--form-surface);
  padding: 1rem;
  box-shadow: 0 1px 2px rgb(31 39 46 / 0.04);
}

.saas-kpi::after {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: transparent;
  content: "";
}

.saas-kpi--accent::after {
  background: var(--form-accent);
}

.saas-kpi--warning::after {
  background: var(--premium-warning);
}

.saas-kpi > span {
  display: block;
  min-height: 2.2em;
  color: var(--form-muted);
  font-size: 0.64rem;
  font-weight: 650;
  line-height: 1.45;
}

.saas-kpi strong {
  display: block;
  overflow: hidden;
  margin-block: 0.35rem 0.2rem;
  color: var(--form-text);
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  font-weight: 780;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-kpi strong small {
  color: var(--form-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0;
}

.saas-kpi p {
  color: var(--form-muted);
  font-size: 0.57rem;
  line-height: 1.45;
}

.saas-dashboard-grid,
.saas-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.saas-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.saas-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--form-border-soft);
  border-radius: 11px;
  background: var(--form-surface);
  box-shadow: 0 1px 2px rgb(31 39 46 / 0.04);
}

.saas-panel--wide {
  grid-column: span 2;
}

.saas-panel--full {
  grid-column: 1 / -1;
}

.saas-panel__head {
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  border-block-end: 1px solid var(--form-border-soft);
  padding: 0.8rem 1rem;
}

.saas-panel__head h2 {
  color: var(--form-text);
  font-size: 0.82rem;
  font-weight: 750;
}

.saas-panel__head p,
.saas-cell-note {
  display: block;
  margin-block-start: 0.12rem;
  color: var(--form-muted);
  font-size: 0.58rem;
}

.saas-panel__head > a {
  flex: 0 0 auto;
  color: var(--form-accent);
  font-size: 0.63rem;
  font-weight: 750;
}

.saas-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.saas-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--form-text);
  font-size: 0.67rem;
}

.saas-table th {
  background: color-mix(in srgb, var(--form-bg) 68%, var(--form-surface));
  padding: 0.62rem 0.85rem;
  color: var(--form-muted);
  font-size: 0.56rem;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-align: start;
  text-transform: uppercase;
  white-space: nowrap;
}

.saas-table td {
  border-block-start: 1px solid var(--form-border-soft);
  padding: 0.72rem 0.85rem;
  vertical-align: middle;
}

.saas-table tbody tr:first-child td {
  border-block-start: 0;
}

.saas-table tbody tr:hover {
  background: color-mix(in srgb, var(--form-bg) 42%, transparent);
}

.saas-record-link {
  display: block;
  color: var(--form-text);
  font-weight: 700;
}

.saas-record-link:hover,
.saas-table a:not(.saas-record-link):hover {
  color: var(--form-accent);
}

.saas-record-link small {
  display: block;
  overflow: hidden;
  max-width: 22rem;
  margin-block-start: 0.15rem;
  color: var(--form-muted);
  font-size: 0.56rem;
  font-weight: 450;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-badge,
.saas-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 0.22rem 0.48rem;
  font-size: 0.55rem;
  font-weight: 750;
  white-space: nowrap;
}

.saas-badge {
  background: color-mix(in srgb, var(--form-accent) 12%, var(--form-bg));
  color: var(--form-accent-strong);
}

.dark .saas-badge {
  color: var(--premium-gold-light);
}

.saas-status {
  background: var(--form-bg);
  color: var(--form-muted);
}

.saas-status--success {
  background: var(--premium-success-light);
  color: var(--premium-success-dark);
}

.saas-status--warning {
  background: var(--premium-warning-light);
  color: var(--premium-warning-dark);
}

.saas-status--danger {
  background: var(--premium-error-light);
  color: var(--premium-error-dark);
}

.dark .saas-status--success {
  background: #0a2e1e;
  color: var(--premium-success-light);
}

.dark .saas-status--warning {
  background: #2e2410;
  color: var(--premium-warning-light);
}

.dark .saas-status--danger {
  background: #3a1a1a;
  color: var(--premium-error-light);
}

.saas-row-action {
  border: 0;
  background: transparent;
  color: var(--form-accent);
  font-size: 0.62rem;
  font-weight: 750;
  white-space: nowrap;
}

button.saas-row-action {
  cursor: pointer;
}

.saas-filter-bar {
  gap: 0.65rem;
  margin-block-end: 0.85rem;
  border: 1px solid var(--form-border-soft);
  border-radius: 10px;
  background: var(--form-surface);
  padding: 0.65rem;
}

.saas-filter-bar .frappe-input {
  width: auto;
  min-width: 10rem;
}

.saas-filter-bar .saas-search {
  flex: 1 1 17rem;
  min-width: 14rem;
}

.saas-plan-list,
.saas-month-list {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
}

.saas-plan-list p,
.saas-month-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--form-text);
  font-size: 0.65rem;
}

.saas-plan-list strong,
.saas-month-list strong {
  font-weight: 750;
}

.saas-progress {
  height: 0.34rem;
  overflow: hidden;
  margin-block-start: 0.4rem;
  border-radius: 999px;
  background: var(--form-bg);
}

.saas-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--form-accent);
}

.saas-activity-list {
  padding: 0.35rem 1rem;
}

.saas-activity-list > a,
.saas-activity-list--rows > div {
  gap: 0.65rem;
  min-width: 0;
  border-block-start: 1px solid var(--form-border-soft);
  padding-block: 0.72rem;
}

.saas-activity-list > :first-child {
  border-block-start: 0;
}

.saas-activity-list > a > span:nth-child(2),
.saas-activity-list--rows > div > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.saas-activity-list strong,
.saas-activity-list small {
  display: block;
}

.saas-activity-list strong {
  overflow: hidden;
  color: var(--form-text);
  font-size: 0.64rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-activity-list small,
.saas-activity-meta {
  color: var(--form-muted);
  font-size: 0.55rem;
}

.saas-activity-dot {
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--form-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--form-accent) 10%, transparent);
}

.saas-activity-meta {
  flex: 0 0 auto;
}

.saas-definition-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.3rem 1rem 0.85rem;
}

.saas-definition-list > div {
  min-width: 0;
  border-block-start: 1px solid var(--form-border-soft);
  padding: 0.7rem 0.4rem;
}

.saas-definition-list dt {
  color: var(--form-muted);
  font-size: 0.56rem;
}

.saas-definition-list dd {
  overflow: hidden;
  margin-block-start: 0.18rem;
  color: var(--form-text);
  font-size: 0.66rem;
  font-weight: 700;
  text-overflow: ellipsis;
}

.saas-security-note {
  margin: 0 1rem 1rem;
  border-radius: 7px;
  background: var(--form-bg);
  padding: 0.65rem;
  color: var(--form-muted);
  font-size: 0.57rem;
  line-height: 1.55;
}

.saas-security-note > strong,
.saas-plan-feature-chip {
  display: block;
}

.saas-security-note > strong {
  margin-block-end: 0.45rem;
  color: var(--form-text);
  font-size: 0.6rem;
}

.saas-plan-feature-chip {
  margin-block-start: 0.3rem;
  color: var(--form-muted);
}

.saas-empty {
  padding: 2rem !important;
  color: var(--form-muted);
  font-size: 0.65rem;
  text-align: center;
}

.saas-pagination {
  justify-content: space-between;
  gap: 1rem;
  border-block-start: 1px solid var(--form-border-soft);
  padding: 0.65rem 0.85rem;
  color: var(--form-muted);
  font-size: 0.6rem;
}

.saas-pagination > div {
  display: flex;
  gap: 0.45rem;
}

.saas-audit-details {
  margin-block-start: 0.35rem;
  color: var(--form-muted);
  font-size: 0.56rem;
}

.saas-audit-page {
  width: min(1480px, 100%);
}

.saas-audit-page .saas-filter-bar {
  width: 100%;
}

.saas-audit-panel {
  width: 100%;
}

.saas-audit-panel .saas-table {
  min-width: 900px;
}

.saas-audit-panel .saas-table th:nth-child(1),
.saas-audit-panel .saas-table td:nth-child(1) {
  width: 10.5rem;
}

.saas-audit-panel .saas-table th:nth-child(5),
.saas-audit-panel .saas-table td:nth-child(5) {
  min-width: 18rem;
}

.saas-audit-details summary {
  cursor: pointer;
  color: var(--form-accent);
  font-weight: 700;
}

.saas-audit-details code {
  display: block;
  max-width: 28rem;
  overflow: auto;
  margin-block-start: 0.35rem;
  border-radius: 5px;
  background: var(--form-bg);
  padding: 0.5rem;
  white-space: pre-wrap;
}

.saas-nowrap {
  white-space: nowrap;
}

.saas-truncate {
  white-space: nowrap;
}

.frappe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}

.frappe-section-head--static:hover {
  background: transparent;
}

@media (max-width: 1180px) {
  .saas-kpi-grid,
  .saas-kpi-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .saas-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  .saas-filter-bar {
    flex-wrap: wrap;
  }

  .saas-filter-bar .frappe-input {
    flex: 1 1 12rem;
  }

  .saas-dashboard-grid,
  .saas-detail-grid {
    grid-template-columns: 1fr;
  }

  .saas-panel--wide,
  .saas-panel--full {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .saas-kpi-grid,
  .saas-kpi-grid--compact,
  .frappe-grid,
  .saas-definition-list {
    grid-template-columns: 1fr;
  }

  .saas-activity-meta {
    display: none;
  }
}

/* ============================================================
   SaaS checkout, subscription billing, and payment operations
   ============================================================ */

.checkout-hero {
  border-block-end: 1px solid var(--public-border);
  background:
    radial-gradient(circle at 80% 15%, rgb(163 138 95 / 0.15), transparent 34rem),
    var(--public-bg);
  padding-block: 4.5rem 3.25rem;
}

.checkout-hero--compact {
  padding-block: 3.25rem 2.5rem;
}

.checkout-hero .public-container {
  max-width: 1160px;
}

.checkout-hero h1 {
  max-width: 780px;
  margin-block: 0.6rem 0.75rem;
  color: var(--public-text);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.05;
}

html[dir="rtl"] .checkout-hero h1 {
  letter-spacing: 0;
}

.checkout-hero > .public-container > p {
  max-width: 720px;
  color: var(--public-muted);
  font-size: 1rem;
  line-height: 1.8;
}

.checkout-steps {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-block-end: 2.25rem;
}

.checkout-steps > span {
  display: inline-flex;
  min-width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--public-border);
  border-radius: 999px;
  background: var(--public-surface);
  padding-inline: 0.6rem;
  color: var(--public-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.checkout-steps > span small {
  font-size: 0.68rem;
  font-weight: 700;
}

.checkout-steps > span.is-active,
.checkout-steps > span.is-complete {
  border-color: var(--public-gold);
  background: var(--public-dark);
  color: #fff;
}

.checkout-section {
  min-height: 55vh;
  background: var(--public-soft);
  padding-block: 2rem 5rem;
}

.checkout-layout {
  display: grid;
  max-width: 1160px;
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.75fr);
  align-items: start;
  gap: 1.25rem;
}

.checkout-card,
.checkout-summary {
  border: 1px solid var(--public-border);
  border-radius: 18px;
  background: var(--public-surface);
  box-shadow: 0 8px 35px rgb(31 39 46 / 0.06);
}

.checkout-card {
  padding: 1.75rem;
}

.checkout-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-block-end: 1.4rem;
}

.checkout-card__head > span {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--public-gold-soft);
  color: var(--public-gold-strong);
  font-size: 0.68rem;
  font-weight: 850;
}

.checkout-card__head h2 {
  color: var(--public-text);
  font-size: 1.1rem;
  font-weight: 800;
}

.checkout-card__head p {
  margin-block-start: 0.25rem;
  color: var(--public-muted);
  font-size: 0.75rem;
  line-height: 1.65;
}

.checkout-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.15rem;
}

.checkout-form .frappe-label,
.checkout-offline-form .frappe-label {
  color: var(--public-text);
}

.checkout-form .frappe-input,
.checkout-offline-form .frappe-input {
  background: var(--public-soft);
}

.checkout-choice-section {
  margin-block-start: 1.65rem;
  border-block-start: 1px solid var(--public-border);
  padding-block-start: 1.35rem;
}

.checkout-choice-section > h3 {
  margin-block-end: 0.75rem;
  color: var(--public-text);
  font-size: 0.78rem;
  font-weight: 800;
}

.checkout-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.checkout-choice-grid--payments {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkout-choice {
  position: relative;
  display: flex;
  min-height: 4.6rem;
  cursor: pointer;
  align-items: flex-start;
  gap: 0.65rem;
  border: 1px solid var(--public-border);
  border-radius: 12px;
  background: var(--public-soft);
  padding: 0.85rem;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.checkout-choice:hover {
  border-color: var(--public-gold);
}

.checkout-choice input {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  margin-block-start: 0.12rem;
  accent-color: var(--public-gold-strong);
}

.checkout-choice:has(input:checked) {
  border-color: var(--public-gold);
  background: color-mix(in srgb, var(--public-gold-soft) 55%, var(--public-surface));
  box-shadow: 0 0 0 2px rgb(163 138 95 / 0.1);
}

.checkout-choice strong,
.checkout-choice small {
  display: block;
}

.checkout-choice strong {
  color: var(--public-text);
  font-size: 0.75rem;
  font-weight: 800;
}

.checkout-choice small {
  margin-block-start: 0.2rem;
  color: var(--public-muted);
  font-size: 0.62rem;
  line-height: 1.5;
}

.checkout-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.55rem;
  margin-block-start: 1.4rem;
  color: var(--public-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.checkout-terms input {
  width: 1rem;
  height: 1rem;
  margin-block-start: 0.1rem;
  accent-color: var(--public-gold-strong);
}

.checkout-submit {
  width: 100%;
  margin-block-start: 1.15rem;
}

.checkout-security-note {
  margin-block-start: 0.85rem;
  color: var(--public-muted);
  font-size: 0.62rem;
  line-height: 1.65;
  text-align: center;
}

.checkout-summary {
  position: sticky;
  top: 6.2rem;
  overflow: hidden;
}

.checkout-summary__plan {
  border-block-end: 1px solid var(--public-border);
  background: var(--public-dark);
  padding: 1.5rem;
}

.checkout-summary__plan .public-kicker {
  color: var(--public-gold-light);
}

.checkout-summary__plan h2 {
  margin-block-start: 0.45rem;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 850;
}

.checkout-summary__plan p {
  margin-block-start: 0.35rem;
  color: rgb(255 255 255 / 0.65);
  font-size: 0.72rem;
  line-height: 1.6;
}

.checkout-summary > dl {
  padding: 0.65rem 1.25rem;
}

.checkout-summary > dl > div,
.checkout-bank-details > div,
.billing-invoice-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-block-start: 1px solid var(--public-border);
  padding-block: 0.75rem;
}

.checkout-summary > dl > div:first-child,
.checkout-bank-details > div:first-child {
  border-block-start: 0;
}

.checkout-summary dt,
.checkout-bank-details dt {
  color: var(--public-muted);
  font-size: 0.68rem;
}

.checkout-summary dd,
.checkout-bank-details dd {
  color: var(--public-text);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: end;
}

.checkout-summary .is-total {
  color: var(--public-text);
  font-size: 0.82rem;
  font-weight: 850;
}

.checkout-summary > ul {
  display: grid;
  gap: 0.55rem;
  border-block-start: 1px solid var(--public-border);
  padding: 1.15rem 1.25rem;
  color: var(--public-muted);
  font-size: 0.66rem;
}

.checkout-summary > ul li {
  display: flex;
  gap: 0.45rem;
}

.checkout-summary > ul span {
  color: var(--public-gold-strong);
  font-weight: 900;
}

.checkout-vat-note {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-block-start: 1px solid var(--public-border);
  background: var(--public-soft);
  padding: 0.85rem 1.25rem;
  color: var(--public-muted);
  font-size: 0.62rem;
}

.checkout-vat-note strong {
  color: var(--public-text);
}

.checkout-alert {
  margin-block: 0.75rem;
  border: 1px solid var(--public-border);
  border-radius: 9px;
  background: var(--public-soft);
  padding: 0.7rem 0.8rem;
  color: var(--public-muted);
  font-size: 0.68rem;
  line-height: 1.6;
}

.checkout-alert--error {
  border-color: color-mix(in srgb, var(--premium-error) 25%, var(--public-border));
  background: var(--premium-error-light);
  color: var(--premium-error-dark);
}

.checkout-alert--success {
  border-color: color-mix(in srgb, var(--premium-success) 25%, var(--public-border));
  background: var(--premium-success-light);
  color: var(--premium-success-dark);
}

.checkout-payment-card {
  min-height: 30rem;
}

.checkout-method-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-block-end: 1.25rem;
}

.checkout-method-logos span {
  border: 1px solid var(--public-border);
  border-radius: 6px;
  background: var(--public-soft);
  padding: 0.35rem 0.6rem;
  color: var(--public-text);
  font-size: 0.62rem;
  font-weight: 850;
}

.checkout-bank-details {
  margin-block: 1rem 1.4rem;
  border: 1px solid var(--public-border);
  border-radius: 11px;
  background: var(--public-soft);
  padding-inline: 1rem;
}

.checkout-offline-form {
  display: grid;
  gap: 0.75rem;
}

.checkout-status {
  display: inline-flex;
  border-radius: 999px;
  background: var(--premium-warning-light);
  padding: 0.25rem 0.5rem;
  color: var(--premium-warning-dark);
  font-size: 0.58rem;
  font-weight: 800;
}

.checkout-status--paid {
  background: var(--premium-success-light);
  color: var(--premium-success-dark);
}

.checkout-status--failed,
.checkout-status--cancelled,
.checkout-status--expired,
.checkout-status--refunded {
  background: var(--premium-error-light);
  color: var(--premium-error-dark);
}

.checkout-order-id {
  border-block-start: 1px solid var(--public-border);
  padding: 1rem 1.25rem;
  color: var(--public-muted);
  font-size: 0.6rem;
}

.checkout-order-id code {
  display: block;
  overflow: hidden;
  margin-block-start: 0.25rem;
  color: var(--public-text);
  direction: ltr;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-result-page {
  display: grid;
  min-height: 68vh;
  place-items: center;
  background: var(--public-soft);
  padding-block: 4rem;
}

.checkout-result-card {
  max-width: 720px;
  margin-inline: auto;
}

.checkout-result {
  display: flex;
  min-height: 22rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

.checkout-result > span {
  display: inline-flex;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--premium-success-light);
  color: var(--premium-success-dark);
  font-size: 1.8rem;
  font-weight: 900;
}

.checkout-result--error > span {
  background: var(--premium-error-light);
  color: var(--premium-error-dark);
}

.checkout-result--warning > span {
  background: var(--premium-warning-light);
  color: var(--premium-warning-dark);
}

.checkout-result h1,
.checkout-result h2 {
  margin-block-start: 1rem;
  color: var(--public-text);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 850;
}

.checkout-result p {
  max-width: 34rem;
  margin-block: 0.65rem 1.25rem;
  color: var(--public-muted);
  font-size: 0.78rem;
  line-height: 1.75;
}

.checkout-result > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.billing-page {
  max-width: 1480px;
}

.billing-overview-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block-end: 1rem;
  overflow: hidden;
  border: 1px solid var(--form-border-soft);
  border-radius: 12px;
  background: var(--form-surface);
}

.billing-overview-card > div {
  min-width: 0;
  border-inline-start: 1px solid var(--form-border-soft);
  padding: 1rem;
}

.billing-overview-card > div:first-child {
  border-inline-start: 0;
}

.billing-overview-card span,
.billing-overview-card strong,
.billing-overview-card small {
  display: block;
}

.billing-overview-card span {
  color: var(--form-muted);
  font-size: 0.58rem;
  font-weight: 700;
}

.billing-overview-card strong {
  overflow: hidden;
  margin-block: 0.35rem 0.2rem;
  color: var(--form-text);
  font-size: 1rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-overview-card small {
  color: var(--form-muted);
  font-size: 0.55rem;
}

.billing-method-list {
  padding: 0.35rem 1rem;
}

.billing-method-list > div {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-block-start: 1px solid var(--form-border-soft);
  padding-block: 0.8rem;
}

.billing-method-list > div:first-child {
  border-block-start: 0;
}

.billing-method-icon,
.billing-gateway-logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--form-accent) 14%, var(--form-bg));
  color: var(--form-accent-strong);
  font-weight: 850;
}

.billing-method-icon {
  width: 2.35rem;
  height: 2.35rem;
  font-size: 0.75rem;
}

.billing-method-list strong,
.billing-method-list small {
  display: block;
}

.billing-method-list strong {
  color: var(--form-text);
  font-size: 0.68rem;
}

.billing-method-list small {
  margin-block-start: 0.18rem;
  color: var(--form-muted);
  font-size: 0.56rem;
}

.billing-gateway-card {
  display: grid;
  grid-template-columns: minmax(14rem, 0.7fr) minmax(20rem, 1fr) minmax(20rem, 1fr);
  align-items: center;
  gap: 1rem;
  margin-block-end: 1rem;
  border: 1px solid var(--form-border-soft);
  border-radius: 12px;
  background: var(--form-surface);
  padding: 1rem;
}

.billing-gateway-card > div:first-child {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.billing-gateway-logo {
  width: 2.75rem;
  height: 2.75rem;
}

.billing-gateway-card h2 {
  color: var(--form-text);
  font-size: 0.82rem;
  font-weight: 800;
}

.billing-gateway-card p,
.billing-gateway-card small {
  color: var(--form-muted);
  font-size: 0.56rem;
}

.billing-gateway-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.billing-gateway-checks span {
  border-radius: 999px;
  background: var(--premium-error-light);
  padding: 0.3rem 0.55rem;
  color: var(--premium-error-dark);
  font-size: 0.55rem;
  font-weight: 750;
}

.billing-gateway-checks span.is-ready {
  background: var(--premium-success-light);
  color: var(--premium-success-dark);
}

.billing-webhook-url span,
.billing-webhook-url code,
.billing-webhook-url small {
  display: block;
}

.billing-webhook-url span {
  color: var(--form-muted);
  font-size: 0.52rem;
}

.billing-webhook-url code {
  overflow: hidden;
  margin-block: 0.2rem;
  color: var(--form-text);
  font-size: 0.55rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-invoice-page {
  max-width: 960px;
}

.billing-invoice-card {
  border: 1px solid var(--form-border-soft);
  border-radius: 14px;
  background: var(--form-surface);
  padding: 2rem;
  box-shadow: 0 8px 35px rgb(31 39 46 / 0.05);
}

.billing-invoice-head,
.billing-invoice-head > div,
.billing-invoice-parties {
  display: flex;
}

.billing-invoice-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  border-block-end: 1px solid var(--form-border-soft);
  padding-block-end: 1.5rem;
}

.billing-invoice-head > div {
  align-items: center;
  gap: 0.65rem;
}

.billing-invoice-head > div:first-child > span {
  display: inline-flex;
  width: 2.8rem;
  height: 2.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--form-accent);
  color: #fff;
  font-weight: 850;
}

.billing-invoice-head strong,
.billing-invoice-head small {
  display: block;
}

.billing-invoice-head strong {
  margin-block-start: 0.35rem;
  color: var(--form-text);
  font-size: 0.78rem;
}

.billing-invoice-head small {
  color: var(--form-muted);
  font-size: 0.57rem;
}

.billing-invoice-head > div:last-child {
  flex-direction: column;
  align-items: flex-end;
}

.billing-invoice-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  padding-block: 1.6rem;
}

.billing-invoice-parties > div > span {
  color: var(--form-muted);
  font-size: 0.57rem;
  font-weight: 700;
}

.billing-invoice-parties > div > strong {
  display: block;
  margin-block: 0.35rem;
  color: var(--form-text);
  font-size: 0.78rem;
}

.billing-invoice-parties p,
.billing-invoice-parties dt,
.billing-invoice-parties dd {
  color: var(--form-muted);
  font-size: 0.61rem;
  line-height: 1.7;
}

.billing-invoice-parties dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.billing-invoice-parties dd {
  color: var(--form-text);
  font-weight: 700;
}

.billing-invoice-lines {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.66rem;
}

.billing-invoice-lines th,
.billing-invoice-lines td {
  border-block: 1px solid var(--form-border-soft);
  padding: 0.8rem;
  color: var(--form-text);
  text-align: start;
}

.billing-invoice-lines th {
  background: var(--form-bg);
  color: var(--form-muted);
  font-size: 0.55rem;
  text-transform: uppercase;
}

.billing-invoice-lines th:last-child,
.billing-invoice-lines td:last-child {
  text-align: end;
}

.billing-invoice-totals {
  width: min(22rem, 100%);
  margin-block-start: 1rem;
  margin-inline-start: auto;
}

.billing-invoice-totals dt,
.billing-invoice-totals dd {
  color: var(--form-muted);
  font-size: 0.62rem;
}

.billing-invoice-totals dd {
  color: var(--form-text);
  font-weight: 750;
}

.billing-invoice-totals .is-total dt,
.billing-invoice-totals .is-total dd {
  color: var(--form-text);
  font-size: 0.78rem;
  font-weight: 850;
}

.billing-invoice-footnote {
  margin-block-start: 1.5rem;
  border-radius: 8px;
  background: var(--form-bg);
  padding: 0.75rem;
  color: var(--form-muted);
  font-size: 0.55rem;
  line-height: 1.6;
}

@media (max-width: 1020px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-summary {
    position: static;
  }

  .billing-gateway-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .checkout-hero {
    padding-block-start: 3rem;
  }

  .checkout-field-grid,
  .checkout-choice-grid,
  .checkout-choice-grid--payments,
  .billing-overview-card,
  .billing-invoice-parties {
    grid-template-columns: 1fr;
  }

  .checkout-card {
    padding: 1.1rem;
  }

  .billing-overview-card > div {
    border-block-start: 1px solid var(--form-border-soft);
    border-inline-start: 0;
  }

  .billing-overview-card > div:first-child {
    border-block-start: 0;
  }

  .billing-invoice-card {
    padding: 1.2rem;
  }

  .billing-invoice-head {
    flex-direction: column;
  }

  .billing-invoice-head > div:last-child {
    align-items: flex-start;
  }
}

@media print {
  .billing-invoice-page .frappe-page-head,
  aside,
  header:not(.billing-invoice-head) {
    display: none !important;
  }

  .billing-invoice-card {
    border: 0;
    box-shadow: none;
  }
}

/* ============================================================
   Client-first workspace overview
   ============================================================ */

.workspace-page {
  width: min(1180px, 100%);
  margin-inline: auto;
}

.workspace-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-block-end: 1.35rem;
}

.workspace-hero h1,
.workspace-section-head h2 {
  margin-block-start: 0.35rem;
  color: var(--form-text);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 850;
  letter-spacing: -0.035em;
}

.workspace-hero p,
.workspace-section-head p {
  margin-block-start: 0.35rem;
  color: var(--form-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.workspace-kicker,
.billing-overline {
  color: var(--form-accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.workspace-hero-actions,
.workspace-section-head,
.workspace-status-card__top,
.workspace-panel-head,
.billing-plan-hero,
.billing-health-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.workspace-status-grid,
.billing-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-block-end: 1rem;
}

.workspace-status-card,
.workspace-panel,
.workspace-metric,
.billing-plan-hero,
.billing-health-card,
.billing-alert {
  border: 1px solid var(--form-border-soft);
  border-radius: 14px;
  background: var(--form-surface);
  box-shadow: 0 8px 30px rgb(31 39 46 / 0.035);
}

.workspace-status-card {
  min-height: 13rem;
  padding: 1.15rem;
}

.workspace-status-card--subscription {
  border-top: 3px solid var(--form-accent);
}

.workspace-status-card--zatca {
  border-top: 3px solid var(--premium-success);
}

.workspace-icon {
  display: inline-flex;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 850;
}

.workspace-icon--gold {
  background: color-mix(in srgb, var(--form-accent) 13%, var(--form-bg));
  color: var(--form-accent-strong);
}

.workspace-icon--green {
  background: var(--premium-success-light);
  color: var(--premium-success-dark);
}

.workspace-icon--blue {
  background: var(--premium-info-light);
  color: var(--premium-info-dark);
}

.workspace-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.38rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.workspace-status-pill--success {
  background: var(--premium-success-light);
  color: var(--premium-success-dark);
}

.workspace-status-pill--warning {
  background: var(--premium-warning-light);
  color: var(--premium-warning-dark);
}

.workspace-status-pill--danger {
  background: var(--premium-error-light);
  color: var(--premium-error-dark);
}

.workspace-status-pill--neutral {
  background: var(--form-bg);
  color: var(--form-muted);
}

.workspace-card-label {
  margin-block-start: 1.2rem;
  color: var(--form-muted);
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
}

.workspace-status-card h2,
.billing-health-card h2 {
  margin-block-start: 0.3rem;
  color: var(--form-text);
  font-size: 1.25rem;
  font-weight: 850;
}

.workspace-card-note,
.billing-health-card > p {
  min-height: 2.3rem;
  margin-block-start: 0.4rem;
  color: var(--form-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.workspace-card-link,
.workspace-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-block-start: 0.75rem;
  color: var(--form-accent-strong);
  font-size: 0.8rem;
  font-weight: 800;
}

.workspace-card-link:hover,
.workspace-text-link:hover {
  color: var(--form-accent);
}

.workspace-card-link--muted,
.workspace-card-link--muted:hover {
  color: var(--form-muted);
  font-weight: 650;
}

.workspace-attention,
.billing-alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 1.15rem;
  border-color: color-mix(in srgb, var(--premium-warning) 25%, var(--form-border-soft));
  background: var(--premium-warning-light);
  padding: 0.8rem 0.95rem;
}

.workspace-attention__icon,
.billing-alert__icon {
  display: inline-flex;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--premium-warning);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 850;
}

.workspace-attention strong,
.billing-alert strong {
  color: var(--premium-warning-dark);
  font-size: 0.85rem;
}

.workspace-attention p,
.billing-alert p {
  margin-block-start: 0.18rem;
  color: var(--premium-warning-dark);
  font-size: 0.78rem;
}

.workspace-attention .frappe-button,
.billing-alert .frappe-button {
  margin-inline-start: auto;
}

.workspace-section-head {
  margin-block: 1.45rem 0.85rem;
}

.workspace-section-head h2 {
  font-size: 1.1rem;
}

.workspace-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.workspace-metric {
  padding: 0.95rem;
}

.workspace-metric > span,
.workspace-metric > p {
  display: block;
  color: var(--form-muted);
  font-size: 0.74rem;
}

.workspace-metric strong {
  display: block;
  margin-block: 0.5rem 0.2rem;
  color: var(--form-text);
  font-size: 1.7rem;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.workspace-metric strong small {
  color: var(--form-muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.workspace-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 0.75fr);
  gap: 0.85rem;
  margin-block-start: 0.85rem;
}

.workspace-panel {
  min-width: 0;
  overflow: hidden;
}

.workspace-panel-head {
  align-items: flex-start;
  padding: 1rem 1.1rem 0.8rem;
  border-block-end: 1px solid var(--form-border-soft);
}

.workspace-panel-head h2 {
  color: var(--form-text);
  font-size: 1rem;
  font-weight: 850;
}

.workspace-panel-head p {
  margin-block-start: 0.2rem;
  color: var(--form-muted);
  font-size: 0.75rem;
}

.workspace-table-wrap {
  overflow-x: auto;
}

.workspace-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.workspace-table th,
.workspace-table td {
  padding: 0.75rem 1.1rem;
  border-block-end: 1px solid var(--form-border-soft);
  color: var(--form-muted);
  text-align: start;
  white-space: nowrap;
}

.workspace-table th {
  background: var(--form-bg);
  color: var(--form-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.workspace-table td:first-child {
  color: var(--form-text);
}

.workspace-table td small {
  display: block;
  margin-block-start: 0.2rem;
  color: var(--form-muted);
  font-size: 0.7rem;
}

.workspace-table-link {
  color: var(--form-accent-strong);
  font-weight: 800;
}

.workspace-table-link:hover {
  color: var(--form-accent);
}

.workspace-empty {
  padding: 2rem 1rem !important;
  color: var(--form-muted) !important;
  text-align: center !important;
  white-space: normal !important;
}

.workspace-action-list {
  padding: 0.35rem 1.1rem 0.6rem;
}

.workspace-action-list a {
  display: grid;
  grid-template-columns: 1.9rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  border-block-end: 1px solid var(--form-border-soft);
  padding-block: 0.8rem;
  color: var(--form-muted);
}

.workspace-action-list a:last-child {
  border-block-end: 0;
}

.workspace-action-list a:hover strong,
.workspace-action-list a:hover > span:last-child {
  color: var(--form-accent);
}

.workspace-action-list strong,
.workspace-action-list small {
  display: block;
}

.workspace-action-list strong {
  color: var(--form-text);
  font-size: 0.82rem;
}

.workspace-action-list small {
  margin-block-start: 0.16rem;
  color: var(--form-muted);
  font-size: 0.7rem;
}

.workspace-action-icon {
  display: inline-flex;
  width: 1.8rem;
  height: 1.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--form-bg);
  color: var(--form-accent);
  font-size: 0.9rem;
  font-weight: 850;
}

/* Billing portal */
.billing-page--simple {
  width: min(1120px, 100%);
}

.billing-page-head {
  margin-block-end: 1rem;
}

.zatca-guide-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 1rem;
  border: 1px solid color-mix(in srgb, var(--premium-success) 20%, var(--form-border-soft));
  border-radius: 12px;
  background: var(--premium-success-light);
  padding: 0.8rem 0.95rem;
}

.zatca-guide-banner strong {
  display: block;
  color: var(--premium-success-dark);
  font-size: 0.72rem;
}

.zatca-guide-banner p {
  margin-block-start: 0.2rem;
  color: var(--premium-success-dark);
  font-size: 0.62rem;
  line-height: 1.55;
}

.zatca-guide-banner__time {
  margin-inline-start: auto;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.6);
  padding: 0.35rem 0.6rem;
  color: var(--premium-success-dark);
  font-size: 0.56rem;
  font-weight: 800;
  white-space: nowrap;
}

.billing-alert {
  margin-block-end: 0.9rem;
}

.billing-plan-hero {
  align-items: center;
  gap: 1.25rem;
  margin-block-end: 0.9rem;
  padding: 1.1rem;
}

.billing-plan-hero__main {
  display: flex;
  min-width: 14rem;
  align-items: center;
  gap: 0.65rem;
}

.billing-plan-hero__main h2 {
  margin-block: 0.25rem 0.35rem;
  color: var(--form-text);
  font-size: 1.1rem;
  font-weight: 850;
}

.billing-plan-hero__price,
.billing-plan-hero__renewal {
  min-width: 9rem;
}

.billing-plan-hero__price strong,
.billing-plan-hero__renewal strong {
  display: block;
  color: var(--form-text);
  font-size: 1.05rem;
  font-weight: 850;
}

.billing-plan-hero__price strong small {
  font-size: 0.72rem;
}

.billing-plan-hero__price span,
.billing-plan-hero__renewal span,
.billing-plan-hero__renewal small {
  display: block;
  color: var(--form-muted);
  font-size: 0.72rem;
}

.billing-plan-hero__renewal strong {
  margin-block: 0.25rem;
}

.billing-plan-hero__action {
  margin-inline-start: auto;
}

.billing-health-card {
  padding: 1rem;
}

.billing-health-card__head {
  justify-content: flex-start;
}

.billing-health-card__head h2 {
  margin-block-start: 0.2rem;
}

.billing-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
  gap: 0.85rem;
}

.billing-panel--full {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .workspace-hero,
  .billing-plan-hero,
  .workspace-attention {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-hero-actions {
    width: 100%;
  }

  .workspace-hero-actions .frappe-button {
    flex: 1;
  }

  .workspace-attention .frappe-button,
  .billing-alert .frappe-button {
    margin-inline-start: 0;
  }

  .workspace-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-lower-grid,
  .billing-content-grid {
    grid-template-columns: 1fr;
  }

  .billing-panel--full {
    grid-column: auto;
  }

  .billing-plan-hero__action {
    margin-inline-start: 0;
  }
}

@media (max-width: 620px) {
  .workspace-status-grid,
  .billing-health-grid,
  .workspace-metrics {
    grid-template-columns: 1fr;
  }

  .workspace-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .workspace-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-hero-actions .frappe-button {
    flex: initial;
    width: 100%;
  }

  .billing-plan-hero__main,
  .billing-plan-hero__price,
  .billing-plan-hero__renewal {
    min-width: 0;
    width: 100%;
  }

  .billing-plan-hero {
    align-items: stretch;
  }

  .billing-plan-hero__action {
    width: 100%;
  }

  .zatca-guide-banner {
    align-items: flex-start;
  }

  .zatca-guide-banner__time {
    display: none;
  }
}

/* Catalog spreadsheet import / export */
.catalog-page-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.catalog-transfer {
  position: relative;
  z-index: 30;
}

.catalog-transfer > summary {
  cursor: pointer;
  list-style: none;
}

.catalog-transfer > summary::-webkit-details-marker {
  display: none;
}

.catalog-transfer[open] > summary {
  border-color: var(--form-accent);
  color: var(--form-accent-strong);
}

.catalog-transfer__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.55rem);
  inset-inline-end: 0;
  width: min(24rem, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid var(--form-border);
  border-radius: 13px;
  background: var(--form-surface);
  box-shadow: 0 18px 50px rgb(11 15 25 / 0.22);
}

.catalog-transfer__head,
.catalog-transfer__import,
.catalog-transfer__links {
  padding: 0.9rem;
}

.catalog-transfer__head {
  border-block-end: 1px solid var(--form-border-soft);
}

.catalog-transfer__head strong,
.catalog-transfer__head small {
  display: block;
}

.catalog-transfer__head strong {
  color: var(--form-text);
  font-size: 0.82rem;
}

.catalog-transfer__head small {
  margin-block-start: 0.2rem;
  color: var(--form-muted);
  font-size: 0.68rem;
}

.catalog-transfer__import {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem;
  border-block-end: 1px solid var(--form-border-soft);
}

.catalog-transfer__import label {
  grid-column: 1 / -1;
  color: var(--form-text);
  font-size: 0.7rem;
  font-weight: 750;
}

.catalog-transfer__import input[type="file"] {
  min-width: 0;
  border: 1px solid var(--form-border);
  border-radius: 8px;
  background: var(--form-bg);
  padding: 0.45rem;
  color: var(--form-muted);
  font-size: 0.66rem;
}

.catalog-transfer__import input[type="file"]::file-selector-button {
  margin-inline-end: 0.5rem;
  border: 0;
  border-radius: 6px;
  background: var(--form-surface);
  padding: 0.4rem 0.55rem;
  color: var(--form-text);
  font-weight: 750;
}

.catalog-transfer__links > span {
  color: var(--form-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.catalog-transfer__links > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  margin-block: 0.55rem;
}

.catalog-transfer__links > div a {
  border: 1px solid var(--form-border);
  border-radius: 7px;
  padding: 0.42rem;
  color: var(--form-text);
  font-size: 0.66rem;
  font-weight: 750;
  text-align: center;
}

.catalog-transfer__links > div a:hover {
  border-color: var(--form-accent);
  color: var(--form-accent-strong);
}

.catalog-transfer__all,
.catalog-transfer__template {
  display: block;
  border-radius: 8px;
  padding: 0.48rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 750;
}

.catalog-transfer__all {
  background: color-mix(in srgb, var(--form-accent) 12%, var(--form-bg));
  color: var(--form-accent-strong);
}

.catalog-transfer__template {
  margin-block-start: 0.35rem;
  color: var(--form-muted);
}

@media (max-width: 680px) {
  .catalog-page-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .catalog-transfer,
  .catalog-transfer > summary,
  .catalog-page-actions > a {
    flex: 1;
  }

  .catalog-transfer > summary,
  .catalog-page-actions > a {
    width: 100%;
  }

  .catalog-transfer__menu {
    inset-inline-end: auto;
    inset-inline-start: 0;
  }

  .catalog-transfer__import {
    grid-template-columns: 1fr;
  }

  .catalog-transfer__import label {
    grid-column: auto;
  }

  .catalog-transfer__links > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Public legal and account-recovery pages */
.public-legal-shell { max-width: 860px; }
.public-legal-shell > header { margin-bottom: 2.5rem; }
.public-legal-shell > header h1,
.account-recovery__card h1 { margin: .5rem 0 .75rem; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.08; }
.public-legal-shell > header p,
.account-recovery__card > p { color: var(--public-muted, #64706d); }
.public-legal-shell article { display: grid; gap: .7rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid #eadcc9; border-radius: 1.5rem; background: #fff; box-shadow: 0 20px 55px rgba(11, 15, 25, .06); }
.public-legal-shell article h2 { margin: 1.3rem 0 0; font-size: 1.15rem; }
.public-legal-shell article h2:first-child { margin-top: 0; }
.public-legal-shell article p { margin: 0; color: #53605c; line-height: 1.85; }
.account-recovery { min-height: 65vh; display: grid; align-items: center; }
.account-recovery__card { width: min(100%, 580px); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem); }
.account-recovery__card form { display: grid; gap: 1.2rem; margin: 2rem 0 1.25rem; }
.account-recovery__card--center { text-align: center; }
.account-recovery__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 50%; background: #e8f5ee; color: #2d7d5a; font-size: 1.6rem; font-weight: 800; }
.account-recovery__back { color: #7c6848; font-weight: 700; }
.checkout-terms a { color: #7c6848; text-decoration: underline; text-underline-offset: 2px; }