/* Fade Membership — Frontend styles */

/* ============================================================
   DESIGN TOKENS — fallback values (overridden by FM_Theme PHP)
   ============================================================ */
:root {
  /* Spacing — fixed, not configurable */
  --fm-space-xs: 4px;
  --fm-space-sm: 8px;
  --fm-space-md: 16px;
  --fm-space-lg: 24px;
  --fm-space-xl: 32px;
  --fm-space-2xl: 48px;

  /* Status colors — fixed */
  --fm-error:          #c0392b;
  --fm-error-bg:       #fdf2f2;
  --fm-error-border:   #e8c5c5;
  --fm-warning:        #d4a017;
  --fm-warning-bg:     #fef9e7;
  --fm-warning-border: #f0c040;
  --fm-success:        #059669;
  --fm-success-bg:     #f0fdf4;
  --fm-success-border: #a7f3d0;
  --fm-info:           #0284c7;
  --fm-info-bg:        #f0f9ff;
  --fm-info-border:    #bae6fd;

  /* Global color tokens — overridden by FM_Theme */
  --fm-primary:       #1a1a2e;
  --fm-secondary:     #2d2d4e;
  --fm-accent:        #1a7a4a;
  --fm-bg:            #f8f8fb;
  --fm-surface:       #ffffff;
  --fm-border:        #e0e0e8;
  --fm-text:          #1a1a2e;
  --fm-text-muted:    #666666;
  --fm-primary-light: #f0f0f8;
  --fm-accent-light:  #e8f5e9;

  /* Shape tokens — overridden by FM_Theme */
  --fm-radius-sm:   4px;
  --fm-radius-md:   8px;
  --fm-radius-lg:   12px;
  --fm-radius-xl:   16px;
  --fm-radius-full: 9999px;

  --fm-shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
  --fm-shadow-md:   0 4px 12px rgba(0,0,0,0.08);
  --fm-shadow-lg:   0 10px 30px rgba(0,0,0,0.12);

  --fm-border-width: 1px;
  --fm-border-style: solid;

  /* Typography tokens */
  --fm-font-size:   15px;
  --fm-line-height: 1.6;

  /* Layout tokens */
  --fm-container-max-width: 760px;

  /* Button component tokens */
  --fm-btn-bg:               var(--fm-primary);
  --fm-btn-text:             #ffffff;
  --fm-btn-border-color:     transparent;
  --fm-btn-radius:           var(--fm-radius-sm);
  --fm-btn-padding-x:        22px;
  --fm-btn-padding-y:        10px;
  --fm-btn-font-size:        15px;
  --fm-btn-font-weight:      600;
  --fm-btn-hover-bg:         var(--fm-secondary);
  --fm-btn-hover-text:       #ffffff;
  --fm-btn-disabled-opacity: 0.6;

  /* Card component tokens */
  --fm-card-bg:           var(--fm-surface);
  --fm-card-border:       var(--fm-border);
  --fm-card-radius:       var(--fm-radius-md);
  --fm-card-padding:      20px;
  --fm-card-shadow:       var(--fm-shadow-sm);
  --fm-card-hover-shadow: var(--fm-shadow-md);

  /* Input component tokens */
  --fm-input-bg:           var(--fm-surface);
  --fm-input-text:         var(--fm-text);
  --fm-input-border:       var(--fm-border);
  --fm-input-radius:       var(--fm-radius-sm);
  --fm-input-padding-x:   12px;
  --fm-input-padding-y:   10px;
  --fm-input-font-size:   15px;
  --fm-input-focus-border: var(--fm-primary);
  --fm-input-focus-shadow: 0 0 0 3px rgba(26,26,46,0.08);
}

/* ============================================================
   BASE / UTILITY
   ============================================================ */

.fms-required { color: var(--fm-error); }

.fms-link {
  font-size: 14px;
  color: var(--fm-primary);
  text-decoration: underline;
  transition: opacity .15s;
}
.fms-link:hover { opacity: .75; }

/* ============================================================
   RESTRICTED NOTICE
   ============================================================ */

.fm-restricted-notice {
  padding: 20px 24px;
  margin: 20px 0;
  font-size: var(--fm-font-size);
  line-height: var(--fm-line-height);
  color: var(--fm-text);
  background: var(--fm-bg);
  border: var(--fm-border-width) var(--fm-border-style) var(--fm-border);
  border-left: 4px solid var(--fm-primary);
  border-radius: var(--fm-radius-sm);
}

/* ============================================================
   AUTH PAGES — centered card layout
   ============================================================ */

.fms-auth {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--fm-space-xl) var(--fm-space-md);
  min-height: 380px;
}

.fms-auth__box {
  width: 100%;
  max-width: 420px;
  background: var(--fm-surface);
  border: var(--fm-border-width) var(--fm-border-style) var(--fm-border);
  border-radius: var(--fm-radius-xl);
  box-shadow: var(--fm-shadow-lg);
  overflow: hidden;
}

.fms-auth__header {
  padding: 28px 32px 24px;
  background: var(--fm-primary);
  text-align: center;
}

.fms-auth__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.3px;
}

.fms-auth__body {
  padding: 28px 32px 32px;
}

.fms-auth__body .fms-form {
  max-width: none;
}

.fms-auth__footer {
  margin-top: var(--fm-space-md);
  text-align: center;
  padding-top: var(--fm-space-md);
  border-top: var(--fm-border-width) var(--fm-border-style) var(--fm-border);
}

/* Error/notice inside auth box */
.fms-auth .fms-form-notice {
  border-radius: var(--fm-radius-sm);
  font-size: 14px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.fms-btn,
.fms-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--fm-btn-padding-y) var(--fm-btn-padding-x);
  border: var(--fm-border-width) var(--fm-border-style) var(--fm-btn-border-color);
  border-radius: var(--fm-btn-radius);
  font-size: var(--fm-btn-font-size);
  font-weight: var(--fm-btn-font-weight);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, box-shadow .15s, opacity .15s;
  line-height: 1;
  white-space: nowrap;
}

.fms-btn:disabled,
.fms-button:disabled {
  opacity: var(--fm-btn-disabled-opacity);
  cursor: not-allowed;
}

.fms-btn--primary,
.fms-button--primary {
  background: var(--fm-btn-bg);
  color: var(--fm-btn-text);
}

.fms-btn--primary:hover:not(:disabled),
.fms-button--primary:hover:not(:disabled) {
  background: var(--fm-btn-hover-bg);
  color: var(--fm-btn-hover-text);
  box-shadow: var(--fm-shadow-sm);
}

.fms-button--large {
  padding: 13px 32px;
  font-size: 16px;
}

.fms-btn--sm,
.fms-button--sm {
  padding: 5px 12px;
  font-size: 13px;
}

.fms-btn--outline,
.fms-button--outline {
  background: transparent;
  color: var(--fm-primary);
  border-color: var(--fm-border);
}

.fms-btn--outline:hover:not(:disabled),
.fms-button--outline:hover:not(:disabled) {
  background: var(--fm-bg);
  border-color: var(--fm-primary);
}

.fms-btn--block {
  width: 100%;
}

.fms-button--copy {
  background: var(--fm-bg);
  color: var(--fm-primary);
  border-color: var(--fm-border);
}

.fms-button--copy:hover {
  background: var(--fm-primary-light);
}

/* ============================================================
   FORMS
   ============================================================ */

.fms-form {
  max-width: 480px;
  font-size: var(--fm-font-size);
  line-height: var(--fm-line-height);
}

.fms-form__field {
  margin-bottom: var(--fm-space-md);
}

.fms-form__field--inline {
  display: flex;
  align-items: center;
  gap: var(--fm-space-sm);
}

.fms-form__label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 13px;
  color: var(--fm-text);
  letter-spacing: .1px;
}

.fms-form__hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--fm-text-muted);
}

.fms-form__checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
  color: var(--fm-text);
}

.fms-form__intro {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--fm-text-muted);
  line-height: var(--fm-line-height);
}

.fms-form__message {
  min-height: 20px;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
}

.fms-form__message--success { color: var(--fm-accent); }
.fms-form__message--error   { color: var(--fm-error); }

.fms-form__actions {
  display: flex;
  align-items: center;
  gap: var(--fm-space-md);
  margin-top: var(--fm-space-md);
  flex-wrap: wrap;
}

.fms-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--fm-space-md);
}

.fms-form__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fms-form__textarea {
  resize: vertical;
  min-height: 80px;
}

.fms-form__input {
  display: block;
  width: 100%;
  padding: var(--fm-input-padding-y) var(--fm-input-padding-x);
  border: var(--fm-border-width) var(--fm-border-style) var(--fm-input-border);
  border-radius: var(--fm-input-radius);
  font-size: var(--fm-input-font-size);
  box-sizing: border-box;
  background: var(--fm-input-bg);
  color: var(--fm-input-text);
  transition: border-color .15s, box-shadow .15s;
}

.fms-form__input:focus {
  outline: none;
  border-color: var(--fm-input-focus-border);
  box-shadow: var(--fm-input-focus-shadow);
}

.fms-form__input--error {
  border-color: var(--fm-error) !important;
  background: var(--fm-error-bg) !important;
}

.fms-form__input--error:focus {
  box-shadow: 0 0 0 3px rgba(192,57,43,.15) !important;
}

.fms-field-error {
  display: block;
  color: var(--fm-error);
  font-size: 12px;
  font-weight: 500;
  margin-top: 3px;
  line-height: 1.4;
}

.fms-plans-grid--error .fms-plan-card {
  border-color: var(--fm-error-border);
}

.fms-plan-error {
  color: var(--fm-error);
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
  display: none;
}

.fms-plan-error--visible {
  display: block;
}

/* ============================================================
   NOTICES
   ============================================================ */

.fms-login-notice,
.fms-form-notice,
.fms-notice {
  padding: 14px 18px;
  border-radius: var(--fm-radius-sm);
  font-size: var(--fm-font-size);
  line-height: var(--fm-line-height);
  margin-bottom: var(--fm-space-md);
  border: var(--fm-border-width) var(--fm-border-style) var(--fm-border);
  border-left: 4px solid var(--fm-border);
  background: var(--fm-bg);
  color: var(--fm-text);
}

.fms-notice--warning {
  background: var(--fm-warning-bg);
  border-color: var(--fm-warning-border);
  border-left-color: var(--fm-warning);
}

.fms-form-notice--error,
.fms-notice--error {
  background: var(--fm-error-bg);
  border-color: var(--fm-error-border);
  border-left-color: var(--fm-error);
  color: var(--fm-text);
}

.fms-notice--success {
  background: var(--fm-success-bg);
  border-color: var(--fm-success-border);
  border-left-color: var(--fm-success);
}

.fms-notice--info {
  background: var(--fm-info-bg);
  border-color: var(--fm-info-border);
  border-left-color: var(--fm-info);
}

/* ============================================================
   CARDS
   ============================================================ */

.fms-card {
  background: var(--fm-card-bg);
  border: var(--fm-border-width) var(--fm-border-style) var(--fm-card-border);
  border-radius: var(--fm-card-radius);
  box-shadow: var(--fm-card-shadow);
  margin-bottom: var(--fm-space-lg);
  overflow: hidden;
}

.fms-card__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--fm-text-muted);
  padding: 14px var(--fm-card-padding);
  border-bottom: var(--fm-border-width) var(--fm-border-style) var(--fm-card-border);
  margin: 0;
  background: var(--fm-bg);
}

.fms-card__content {
  padding: var(--fm-card-padding);
}

.fms-card__empty {
  color: var(--fm-text-muted);
  font-size: 14px;
  margin: 0;
  padding: var(--fm-space-sm) 0;
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.fms-dashboard {
  max-width: var(--fm-container-max-width);
}

/* User header */
.fms-user-header {
  display: flex;
  align-items: center;
  gap: var(--fm-space-md);
  padding: var(--fm-space-lg) 0;
  margin-bottom: 4px;
}

.fms-user-header__avatar {
  flex-shrink: 0;
}

.fms-user-header__avatar img,
.fms-user-header__avatar-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid var(--fm-border);
  display: block;
}

.fms-user-header__info {
  flex: 1;
  min-width: 0;
}

.fms-user-header__name {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--fm-text);
  line-height: 1.2;
}

.fms-user-header__email {
  display: block;
  font-size: 13px;
  color: var(--fm-text-muted);
  margin-bottom: 6px;
}

.fms-user-header__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 10px;
  border-radius: var(--fm-radius-full);
}

.fms-user-header__status--aktivno {
  background: var(--fm-accent-light);
  color: var(--fm-accent);
  border: 1px solid var(--fm-accent);
}

.fms-user-header__status--poteklo {
  background: var(--fm-error-bg);
  color: var(--fm-error);
  border: 1px solid var(--fm-error-border);
}

.fms-user-header__status--v_cakanju {
  background: var(--fm-warning-bg);
  color: var(--fm-warning);
  border: 1px solid var(--fm-warning-border);
}

/* Tab navigation */
.fms-tabs {
  display: flex;
  border-bottom: 2px solid var(--fm-border);
  margin-bottom: var(--fm-space-lg);
  gap: 0;
}

.fms-tabs__tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fm-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}

.fms-tabs__tab:hover {
  color: var(--fm-text);
}

.fms-tabs__tab--active {
  color: var(--fm-primary);
  border-bottom-color: var(--fm-primary);
}

/* Dashboard card grid */
.fms-dashboard__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fm-space-lg);
  margin-bottom: 0;
}

/* ============================================================
   MEMBERSHIP CARD
   ============================================================ */

.fms-membership {
  display: flex;
  flex-direction: column;
  gap: var(--fm-space-sm);
}

.fms-membership__plan {
  font-size: 18px;
  font-weight: 700;
  color: var(--fm-text);
}

.fms-membership__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--fm-radius-full);
  width: fit-content;
}

.fms-membership__status::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fms-membership__status--aktivno {
  background: var(--fm-accent-light);
  color: var(--fm-accent);
  border: 1px solid var(--fm-accent);
}
.fms-membership__status--aktivno::before { background: var(--fm-accent); }

.fms-membership__status--poteklo {
  background: var(--fm-error-bg);
  color: var(--fm-error);
  border: 1px solid var(--fm-error-border);
}
.fms-membership__status--poteklo::before { background: var(--fm-error); }

.fms-membership__status--v_cakanju {
  background: var(--fm-warning-bg);
  color: var(--fm-warning);
  border: 1px solid var(--fm-warning-border);
}
.fms-membership__status--v_cakanju::before { background: var(--fm-warning); }

.fms-membership__details {
  margin: var(--fm-space-sm) 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: baseline;
}

.fms-membership__dt {
  font-size: 12px;
  color: var(--fm-text-muted);
  font-weight: 500;
}

.fms-membership__dd {
  font-size: 14px;
  font-weight: 600;
  color: var(--fm-text);
  margin: 0;
}

.fms-membership__expired {
  color: var(--fm-error);
  font-weight: 600;
}

/* ============================================================
   STATUS BADGES (invoices table)
   ============================================================ */

.fms-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--fm-radius-full);
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.fms-status--placano {
  background: var(--fm-accent-light);
  color: var(--fm-accent);
  border: 1px solid var(--fm-accent);
}

.fms-status--poslano {
  background: var(--fm-info-bg);
  color: var(--fm-info);
  border: 1px solid var(--fm-info-border);
}

.fms-status--preklicano {
  background: var(--fm-error-bg);
  color: var(--fm-error);
  border: 1px solid var(--fm-error-border);
}

.fms-status--osnutek {
  background: var(--fm-bg);
  color: var(--fm-text-muted);
  border: 1px solid var(--fm-border);
}

/* ============================================================
   INVOICES TABLE
   ============================================================ */

.fms-card--invoices { margin-bottom: 0; }

.fms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.fms-table__th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--fm-text-muted);
  border-bottom: 2px solid var(--fm-border);
  white-space: nowrap;
}

.fms-table__th:first-child { padding-left: 0; }
.fms-table__th:last-child  { padding-right: 0; }

.fms-table__row {
  border-bottom: var(--fm-border-width) var(--fm-border-style) var(--fm-border);
  transition: background .12s;
}

.fms-table__row:last-child { border-bottom: none; }
.fms-table__row:hover { background: var(--fm-bg); }

.fms-table__td {
  padding: 12px;
  color: var(--fm-text);
  vertical-align: middle;
}

.fms-table__td:first-child { padding-left: 0; }
.fms-table__td:last-child  { padding-right: 0; text-align: right; }

.fms-table__td--number { font-family: 'Courier New', monospace; font-weight: 600; }
.fms-table__td--amount { font-weight: 700; }

/* ============================================================
   CHECKOUT
   ============================================================ */

.fms-checkout {
  max-width: var(--fm-container-max-width);
}

.fms-checkout__section {
  margin-bottom: 28px;
}

.fms-checkout__section-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 14px;
  padding-bottom: var(--fm-space-sm);
  color: var(--fm-text-muted);
  border-bottom: var(--fm-border-width) var(--fm-border-style) var(--fm-border);
}

.fms-checkout__actions {
  display: flex;
  align-items: center;
  gap: var(--fm-space-md);
  flex-wrap: wrap;
}

/* Plan cards */
.fms-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.fms-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--fm-space-md) 18px;
  border: 2px solid var(--fm-border);
  border-radius: var(--fm-card-radius);
  background: var(--fm-card-bg);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  box-shadow: var(--fm-shadow-sm);
}

.fms-plan-card:hover {
  border-color: var(--fm-secondary);
  box-shadow: var(--fm-shadow-md);
}

.fms-plan-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fms-plan-card:has(input:checked),
.fms-plan-card--selected {
  border-color: var(--fm-primary);
  background: var(--fm-primary-light);
  box-shadow: var(--fm-shadow-md);
}

.fms-plan-card__name     { font-weight: 700; font-size: 14px; color: var(--fm-text); }
.fms-plan-card__price    { font-size: 22px; font-weight: 800; color: var(--fm-primary); line-height: 1; }
.fms-plan-card__duration { font-size: 12px; color: var(--fm-text-muted); }

/* Company billing toggle */
.fms-checkout__company-toggle,
.fms-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--fm-space-sm);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  color: var(--fm-text);
}

.fms-billing-company-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: var(--fm-border-width) var(--fm-border-style) var(--fm-border);
}

.fms-billing-company-section h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 14px;
  color: var(--fm-text-muted);
}

/* Payment method display */
.fms-checkout__payment .fms-payment-method {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--fm-space-md);
  border: 2px solid var(--fm-primary);
  border-radius: var(--fm-card-radius);
  background: var(--fm-primary-light);
}

.fms-checkout__payment .fms-payment-method .dashicons {
  font-size: 28px;
  width: 28px;
  height: 28px;
  color: var(--fm-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.fms-checkout__payment .fms-payment-method p {
  font-size: 13px;
  color: var(--fm-text-muted);
  margin: 4px 0 0;
}

/* ============================================================
   UPN BOX
   ============================================================ */

.fms-upn-box {
  background: var(--fm-primary-light);
  border: 2px solid var(--fm-primary);
  border-radius: var(--fm-card-radius);
  padding: 28px 32px;
  max-width: 640px;
  box-shadow: var(--fm-card-shadow);
}

.fms-upn-box__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.fms-upn-box__header .dashicons {
  color: var(--fm-accent);
  font-size: 28px;
  width: 28px;
  height: 28px;
}

.fms-upn-box__header h3 { margin: 0; font-size: 18px; color: var(--fm-text); }
.fms-upn-box__intro { color: var(--fm-text-muted); font-size: 15px; margin: 0 0 18px; }

.fms-upn-box__data table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fms-upn-box__data th { text-align: left; padding: 6px 10px 6px 0; color: var(--fm-text-muted); font-weight: 600; width: 38%; }
.fms-upn-box__data td { padding: 6px 0; color: var(--fm-text); font-weight: 500; }

.fms-upn-box__data code {
  font-size: 14px;
  background: var(--fm-surface);
  border: var(--fm-border-width) var(--fm-border-style) var(--fm-border);
  padding: 2px 8px;
  border-radius: var(--fm-radius-sm);
}

.fms-upn-box__note { margin: 14px 0 0; font-size: 13px; color: var(--fm-text-muted); }

/* ============================================================
   MEMBER CODE
   ============================================================ */

.fms-mcode { display: flex; flex-direction: column; gap: 10px; }
.fms-mcode__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fms-mcode__copy { padding: 6px 14px; font-size: 13px; }
.fms-mcode__status { display: flex; align-items: center; gap: 6px; }

.fms-mcode__code {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
  color: var(--fm-text);
  background: var(--fm-bg);
  padding: 6px 14px;
  border-radius: var(--fm-radius-sm);
  border: var(--fm-border-width) var(--fm-border-style) var(--fm-border);
}

.fms-mcode__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--fm-radius-full);
  letter-spacing: .3px;
  text-transform: uppercase;
}

.fms-mcode__badge::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fms-mcode__badge--active {
  background: var(--fm-accent-light);
  color: var(--fm-accent);
  border: 1px solid var(--fm-accent);
}
.fms-mcode__badge--active::before { background: var(--fm-accent); }

.fms-mcode__badge--inactive {
  background: var(--fm-bg);
  color: var(--fm-text-muted);
  border: 1px solid var(--fm-border);
}
.fms-mcode__badge--inactive::before { background: var(--fm-text-muted); }

.fms-discount__code {
  font-family: 'Courier New', monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--fm-bg);
  padding: 4px 12px;
  border-radius: var(--fm-radius-sm);
  border: var(--fm-border-width) var(--fm-border-style) var(--fm-border);
}

.fms-mcode__discount {
  margin-top: 14px;
  padding-top: 14px;
  border-top: var(--fm-border-width) var(--fm-border-style) var(--fm-border);
}

.fms-mcode__discount-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--fm-text-muted);
  margin-bottom: 8px;
}

.fms-mcode__discount-row { display: flex; align-items: center; gap: var(--fm-space-sm); }

/* ============================================================
   LOGIN REQUIRED
   ============================================================ */

.fms-login-required {
  color: var(--fm-text);
  padding: 20px 24px;
  background: var(--fm-bg);
  border: var(--fm-border-width) var(--fm-border-style) var(--fm-border);
  border-radius: var(--fm-card-radius);
  border-left: 4px solid var(--fm-primary);
}

.fms-login-required a { color: var(--fm-primary); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
  .fms-auth {
    padding: var(--fm-space-md);
  }

  .fms-auth__box {
    border-radius: var(--fm-radius-lg);
  }

  .fms-auth__header {
    padding: 22px 24px 18px;
  }

  .fms-auth__body {
    padding: 22px 24px 28px;
  }

  .fms-dashboard__grid {
    grid-template-columns: 1fr;
  }

  .fms-tabs__tab {
    padding: 8px 14px;
    font-size: 13px;
  }

  .fms-user-header__name {
    font-size: 18px;
  }

  .fms-plans-grid {
    grid-template-columns: 1fr;
  }

  .fms-form__row {
    grid-template-columns: 1fr;
  }

  .fms-upn-box {
    padding: 20px;
  }

  .fms-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}