/**
 * OncoPhysio Workshop Manager — Public Styles
 * =====================================================
 * Full Material Design 3 (M3) compliance:
 *   - M3 Color Role tokens (Primary, Surface, Container, etc.)
 *   - M3 Type Scale tokens (Display → Label)
 *   - M3 Shape tokens (Extra Small → Full)
 *   - M3 Elevation (tinted surface + shadow)
 *   - M3 State Layers (hover/focus/pressed overlays)
 *   - M3 Ripple effect on interactive elements
 *   - M3 Filled Text Field spec (floating labels)
 *   - M3 Button spec (20px radius, state layers)
 *   - 4dp spacing grid throughout
 * =====================================================
 */

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

/* ============================================================
   M3 DESIGN TOKENS — COLOR ROLES
   ============================================================ */
:root {
  /* — Oncophysio Brand palette — */
  --onco-seed: #9912b1;

  /* Primary role — Oncophysio Purple */
  --md-sys-color-primary:              #9912b1;
  --md-sys-color-on-primary:           #FFFFFF;
  --md-sys-color-primary-container:    #f0d4f8;
  --md-sys-color-on-primary-container: #2d0040;

  /* Secondary role — Violet */
  --md-sys-color-secondary:            #975be5;
  --md-sys-color-on-secondary:         #FFFFFF;
  --md-sys-color-secondary-container:  #ecdff5;
  --md-sys-color-on-secondary-container:#1a0030;

  /* Tertiary role — Dark navy */
  --md-sys-color-tertiary:             #1a1a2e;
  --md-sys-color-on-tertiary:          #FFFFFF;
  --md-sys-color-tertiary-container:   #d4d4f0;
  --md-sys-color-on-tertiary-container:#000030;

  /* Error role */
  --md-sys-color-error:                #BA1A1A;
  --md-sys-color-on-error:             #FFFFFF;
  --md-sys-color-error-container:      #FFDAD6;
  --md-sys-color-on-error-container:   #410002;

  /* Surface roles — white/light purple tints */
  --md-sys-color-surface:              #FDFAFF;
  --md-sys-color-on-surface:           #1a1a2e;
  --md-sys-color-surface-variant:      #f0eafa;
  --md-sys-color-on-surface-variant:   #4a3f58;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low:    #faf2fd;
  --md-sys-color-surface-container:        #f4eefc;
  --md-sys-color-surface-container-high:   #ecdff5;
  --md-sys-color-surface-container-highest:#e5d5ef;
  --md-sys-color-outline:              #7a6f88;
  --md-sys-color-outline-variant:      #d8c4e8;
  --md-sys-color-inverse-surface:      #2d1540;
  --md-sys-color-inverse-on-surface:   #f4eefc;
  --md-sys-color-inverse-primary:      #e8a8f8;

  /* Semantic shortcuts (used throughout) */
  --onco-primary:       var(--md-sys-color-primary);
  --onco-on-primary:    var(--md-sys-color-on-primary);
  --onco-primary-cont:  var(--md-sys-color-primary-container);
  --onco-surface:       var(--md-sys-color-surface);
  --onco-on-surface:    var(--md-sys-color-on-surface);
  --onco-outline:       var(--md-sys-color-outline);
  --onco-outline-var:   var(--md-sys-color-outline-variant);
  --onco-error:         var(--md-sys-color-error);
  --onco-error-cont:    var(--md-sys-color-error-container);
  --onco-navy:          var(--md-sys-color-tertiary);

  /* ============================================================
     M3 TYPE SCALE TOKENS
     ============================================================ */
  --md-sys-typescale-display-large-size:   57px;
  --md-sys-typescale-display-medium-size:  45px;
  --md-sys-typescale-display-small-size:   36px;
  --md-sys-typescale-headline-large-size:  32px;
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-small-size:  24px;
  --md-sys-typescale-title-large-size:     22px;
  --md-sys-typescale-title-medium-size:    16px;
  --md-sys-typescale-title-small-size:     14px;
  --md-sys-typescale-body-large-size:      16px;
  --md-sys-typescale-body-medium-size:     14px;
  --md-sys-typescale-body-small-size:      12px;
  --md-sys-typescale-label-large-size:     14px;
  --md-sys-typescale-label-medium-size:    12px;
  --md-sys-typescale-label-small-size:     11px;

  --md-sys-typescale-display-large-weight:  400;
  --md-sys-typescale-headline-weight:       400;
  --md-sys-typescale-title-large-weight:    400;
  --md-sys-typescale-title-medium-weight:   500;
  --md-sys-typescale-title-small-weight:    500;
  --md-sys-typescale-body-weight:           400;
  --md-sys-typescale-label-large-weight:    500;
  --md-sys-typescale-label-medium-weight:   500;
  --md-sys-typescale-label-small-weight:    500;

  --md-sys-typescale-headline-tracking: 0;
  --md-sys-typescale-title-tracking:    0.15px;
  --md-sys-typescale-body-tracking:     0.25px;
  --md-sys-typescale-label-tracking:    0.5px;

  /* ============================================================
     M3 SHAPE SCALE TOKENS
     ============================================================ */
  --md-sys-shape-extra-small:  4px;
  --md-sys-shape-small:        8px;
  --md-sys-shape-medium:       12px;
  --md-sys-shape-large:        16px;
  --md-sys-shape-extra-large:  28px;
  --md-sys-shape-full:         9999px;

  /* Semantic shortcuts */
  --onco-radius-xs:   var(--md-sys-shape-extra-small);
  --onco-radius-sm:   var(--md-sys-shape-small);
  --onco-radius:      var(--md-sys-shape-medium);
  --onco-radius-lg:   var(--md-sys-shape-large);
  --onco-radius-xl:   var(--md-sys-shape-extra-large);
  --onco-radius-full: var(--md-sys-shape-full);

  /* ============================================================
     M3 ELEVATION — Tinted surface overlays
     ============================================================ */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 2px rgba(0,0,0,0.30), 0px 1px 3px 1px rgba(0,0,0,0.15);
  --md-sys-elevation-level2: 0px 1px 2px rgba(0,0,0,0.30), 0px 2px 6px 2px rgba(0,0,0,0.15);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px rgba(0,0,0,0.30);
  --md-sys-elevation-level4: 0px 6px 10px 4px rgba(0,0,0,0.15), 0px 2px 3px rgba(0,0,0,0.30);
  --md-sys-elevation-level5: 0px 8px 12px 6px rgba(0,0,0,0.15), 0px 4px 4px rgba(0,0,0,0.30);

  /* Surface tint at each elevation (primary color overlay opacity) */
  --md-elevation-tint-1: rgba(153,18,177, 0.05);
  --md-elevation-tint-2: rgba(153,18,177, 0.08);
  --md-elevation-tint-3: rgba(153,18,177, 0.11);
  --md-elevation-tint-4: rgba(153,18,177, 0.12);
  --md-elevation-tint-5: rgba(153,18,177, 0.14);

  --onco-elevation-1: 0 4px 24px hsla(291,84%,18%,0.11);
  --onco-elevation-2: 0 8px 40px hsla(291,84%,18%,0.18);
  --onco-elevation-hover: 0 12px 40px hsla(291,84%,38%,0.22);

  /* ============================================================
     STATE LAYER OPACITIES (M3 spec)
     ============================================================ */
  --md-state-hover-opacity:   0.08;
  --md-state-focus-opacity:   0.12;
  --md-state-pressed-opacity: 0.12;

  /* ============================================================
     SPACING (4dp grid)
     ============================================================ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ============================================================
     FONT
     ============================================================ */
  --onco-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --onco-transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}

/* ============================================================
   BASE RESET
   ============================================================ */
.onco-workshops-wrap *,
.onco-workshop-single *,
.onco-payment-return * {
  box-sizing: border-box;
}

/* ============================================================
   WORKSHOPS LIST
   ============================================================ */
.onco-workshops-wrap {
  font-family: var(--onco-font);
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-4);
}

.onco-workshops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}

/* ============================================================
   WORKSHOP CARD — M3 Elevation Level 1 + tint
   ============================================================ */
.onco-workshop-card {
  background: var(--md-sys-color-surface-container-lowest);
  /* M3 elevation 1: shadow + tint overlay via background-image */
  background-image: linear-gradient(var(--md-elevation-tint-1), var(--md-elevation-tint-1));
  border-radius: var(--onco-radius-lg);
  box-shadow: var(--md-sys-elevation-level1);
  border: 1px solid var(--onco-outline-var);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* M3 ripple container */
  position: relative;
  transition:
    transform var(--onco-transition),
    box-shadow var(--onco-transition);
}

/* M3 State Layer — hover (elevation 2) */
.onco-workshop-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-primary);
  opacity: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity var(--onco-transition);
  z-index: 0;
}

.onco-workshop-card:hover {
  box-shadow: 0 12px 40px hsla(291,84%,38%,0.22);
  background-image: linear-gradient(var(--md-elevation-tint-2), var(--md-elevation-tint-2));
  transform: translateY(-2px);
}

.onco-workshop-card:hover::before {
  opacity: var(--md-state-hover-opacity);
}

/* Ripple on press */
.onco-workshop-card:active {
  transform: translateY(0);
}

.onco-card-header {
  background: linear-gradient(135deg, var(--md-sys-color-tertiary) 0%, var(--md-sys-color-primary) 100%);
  padding: var(--sp-6);
  color: var(--md-sys-color-on-tertiary);
  position: relative;
  z-index: 1;
}

.onco-card-header .onco-workshop-name {
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: 600;
  letter-spacing: var(--md-sys-typescale-title-tracking);
  margin: 0 0 var(--sp-2);
  line-height: 1.3;
}

.onco-card-header .onco-workshop-short-desc {
  font-size: var(--md-sys-typescale-body-medium-size);
  opacity: 0.88;
  margin: 0;
  line-height: 1.5;
}

.onco-card-body {
  padding: var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
  z-index: 1;
}

.onco-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.onco-meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}

.onco-meta-item strong {
  color: var(--md-sys-color-on-surface);
}

.onco-meta-icon {
  flex-shrink: 0;
}

.onco-meta-urgent {
  color: var(--md-sys-color-error) !important;
  font-weight: 600;
}

.onco-status-row {
  margin-top: auto;
}

.onco-card-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--onco-outline-var);
  position: relative;
  z-index: 1;
}

/* ============================================================
   STATUS BADGES — M3 Chip-style
   ============================================================ */
.onco-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--onco-radius-full);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.onco-status-open         { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.onco-status-closed       { background: var(--md-sys-color-error-container);   color: var(--md-sys-color-on-error-container); }
.onco-status-not_yet_open { background: #FFF3CD; color: #6B4C00; }
.onco-status-fully_booked { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
.onco-status-inactive     { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }

/* ============================================================
   BUTTONS — M3 Spec: 20px radius, state layers, label large
   ============================================================ */
.onco-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-6);
  /* M3: Button uses Full-pill on small, Large shape on others */
  border-radius: var(--onco-radius-full);
  font-family: var(--onco-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: 0.1px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  /* M3 ripple container */
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--onco-transition), background var(--onco-transition);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  white-space: nowrap;
}

/* M3 Ripple via ::after */
.onco-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  border-radius: inherit;
  transition: opacity var(--onco-transition);
  pointer-events: none;
}

.onco-btn:hover::after   { opacity: var(--md-state-hover-opacity); }
.onco-btn:focus::after   { opacity: var(--md-state-focus-opacity); }
.onco-btn:active::after  { opacity: var(--md-state-pressed-opacity); }

/* M3 Filled Button */
.onco-btn-primary {
  background: var(--md-sys-color-primary);  /* #9912b1 */
  color: #ffffff !important;
  box-shadow: var(--md-sys-elevation-level0);
}

.onco-btn-primary:hover {
  background: #7a0e8e;
  color: #ffffff !important;
  box-shadow: 0 8px 24px hsla(291,84%,38%,0.40);
  text-decoration: none;
}

.onco-btn-primary:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  color: var(--md-sys-color-on-primary);
}

.onco-btn-primary:disabled,
.onco-btn-primary[aria-disabled="true"] {
  background: rgba(25,28,28,0.12);
  color: rgba(25,28,28,0.38);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Processing state: keep purple bg + white text so "Processing…" is legible */
.onco-btn-primary.onco-btn-processing,
.onco-btn-primary.onco-btn-processing:disabled {
  background: var(--md-sys-color-primary) !important;
  color: #ffffff !important;
  opacity: 0.85;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* M3 Outlined Button */
.onco-btn-outline {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--onco-outline);
}

.onco-btn-outline:hover {
  background: rgba(0,106,98,0.08);
  text-decoration: none;
  color: var(--md-sys-color-primary);
}

.onco-btn-outline:disabled,
.onco-btn-outline[aria-disabled="true"] {
  color: rgba(25,28,28,0.38);
  border-color: rgba(25,28,28,0.12);
  cursor: not-allowed;
  pointer-events: none;
}

/* M3 Tonal Button (used for secondary actions) */
.onco-btn-tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.onco-btn-tonal:hover {
  box-shadow: var(--md-sys-elevation-level1);
  text-decoration: none;
}

.onco-btn-lg {
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--md-sys-typescale-body-large-size);
}

.onco-btn-full {
  width: 100%;
  justify-content: center;
}

/* F-1 FIX: .onco-btn-disabled replaces inline style on fully-booked buttons */
.onco-btn-disabled,
.onco-btn-disabled:hover,
.onco-btn-disabled:focus {
  background: var(--md-sys-color-surface-container-high) !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
  cursor: not-allowed !important;
  pointer-events: none;
  opacity: 0.75;
}

.onco-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button inner spinner */
.onco-btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  animation: onco-rotate 0.8s linear infinite;
}

/* ============================================================
   WORKSHOP SINGLE PAGE
   ============================================================ */
.onco-workshop-single {
  font-family: var(--onco-font);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--sp-4);
  color: var(--md-sys-color-on-surface);
}

/* M3 Hero — uses tertiary container gradient */
.onco-workshop-hero {
  background: linear-gradient(135deg, #7a0e8e 0%, #975be5 100%);
  border-radius: var(--onco-radius-xl);
  padding: var(--sp-6) var(--sp-8);
  color: #fff;
  margin-bottom: var(--sp-4);
  position: relative;
  overflow: hidden;
}

/* Decorative orb for depth */
.onco-workshop-hero::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  bottom: -80px;
  right: -60px;
  pointer-events: none;
}

.onco-workshop-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: var(--sp-2) 0 var(--sp-1);
  line-height: 1.2;
  letter-spacing: var(--md-sys-typescale-headline-tracking);
}

.onco-workshop-tagline {
  font-size: 14px;
  opacity: 0.9;
  color: rgba(255,255,255,0.92);
  margin: 0;
  line-height: 1.5;
  max-width: 640px;
}

.onco-workshop-meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.onco-duration-badge {
  background: rgba(255,255,255,0.2);
  color: #fff;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--onco-radius-full);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: 0.05em;
}

/* Workshop body: single-column */
.onco-workshop-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ============================================================
   INFO STRIP — M3 Surface Container card
   ============================================================ */
.onco-info-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--md-sys-color-surface-container-lowest);
  background-image: linear-gradient(var(--md-elevation-tint-1), var(--md-elevation-tint-1));
  border: 1px solid var(--onco-outline-var);
  border-radius: var(--onco-radius-lg);
  box-shadow: var(--md-sys-elevation-level1);
  overflow: hidden;
}

.onco-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  flex: 1;
  min-width: 130px;
  border-right: 1px solid var(--onco-outline-var);
}

.onco-info-item:last-child { border-right: none; }

.onco-info-icon {
  font-size: 1.5em;
  flex-shrink: 0;
  line-height: 1;
}

.onco-info-label {
  display: block;
  font-size: 11px;
  font-weight: var(--md-sys-typescale-label-medium-weight);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 2px;
}

.onco-info-value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  word-break: break-all;
  overflow-wrap: anywhere;
}

.onco-info-value a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

.onco-info-value a:hover { text-decoration: underline; }

.onco-fee            { color: var(--md-sys-color-primary); }
.onco-seats-low      { color: #B45309; }
.onco-seats-full     { color: var(--md-sys-color-error); }
.onco-seats-urgent   { color: var(--md-sys-color-error); font-size: 0.85em; }

/* ============================================================
   CONTENT SECTIONS
   ============================================================ */
.onco-section {
  margin-bottom: var(--sp-4);
}

.onco-section-title {
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: 600;
  color: var(--md-sys-color-tertiary);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--md-sys-color-primary-container);
  letter-spacing: var(--md-sys-typescale-title-tracking);
}

.onco-full-description {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: 1.8;
  color: var(--md-sys-color-on-surface-variant);
  letter-spacing: var(--md-sys-typescale-body-tracking);
}

/* Schedule Table */
.onco-schedule-table-wrap { overflow-x: auto; }

.onco-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--md-sys-typescale-body-medium-size);
}

.onco-schedule-table th,
.onco-schedule-table td {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--onco-outline-var);
  text-align: left;
}

.onco-schedule-table th {
  background: var(--md-sys-color-surface-container);
  font-weight: var(--md-sys-typescale-label-large-weight);
  color: var(--md-sys-color-on-surface-variant);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--md-sys-typescale-label-medium-size);
}

/* ============================================================
   REGISTRATION SECTION — M3 Elevated Card (Level 1)
   ============================================================ */
.onco-registration-section {
  background: var(--md-sys-color-surface-container-lowest);
  background-image: linear-gradient(var(--md-elevation-tint-1), var(--md-elevation-tint-1));
  border: 1px solid var(--onco-outline-var);
  border-radius: var(--onco-radius-xl);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--md-sys-elevation-level1);
}

/* ============================================================
   REGISTRATION FORM
   ============================================================ */
.onco-form {
  max-width: 600px;
}

.onco-form-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-4);
}

/* Children of form-row also need padding-top for their labels */
.onco-form-row .onco-form-group {
  margin-bottom: 0;
}

/* M3 Filled Text Field — with theme-override protection */
.onco-workshop-single .onco-input,
.onco-workshop-single .onco-select,
.onco-workshop-single textarea.onco-input {
  width: 100%;
  padding: 12px var(--sp-4) 10px;
  border: 1.5px solid #d8c4e8;
  border-radius: 8px;
  font-family: var(--onco-font) !important;
  font-size: 15px !important;
  letter-spacing: var(--md-sys-typescale-body-tracking);
  color: #1a1a2e !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  transition:
    border-color var(--onco-transition),
    box-shadow var(--onco-transition),
    background var(--onco-transition);
  box-sizing: border-box;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  min-height: 46px;
}

/* Also apply to bare class selectors for compatibility */
.onco-input,
.onco-select {
  width: 100%;
  padding: 12px var(--sp-4) 10px;
  border: 1.5px solid #d8c4e8;
  border-radius: 8px;
  font-family: var(--onco-font);
  font-size: 15px;
  letter-spacing: var(--md-sys-typescale-body-tracking);
  color: #1a1a2e;
  background: #ffffff;
  transition:
    border-color var(--onco-transition),
    box-shadow var(--onco-transition),
    background var(--onco-transition);
  box-sizing: border-box;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  min-height: 46px;
}

/* Override browser autofill dark background (Chrome, Edge, Safari) */
.onco-input:-webkit-autofill,
.onco-input:-webkit-autofill:hover,
.onco-input:-webkit-autofill:focus,
.onco-input:-webkit-autofill:active,
.onco-workshop-single input:-webkit-autofill,
.onco-workshop-single input:-webkit-autofill:hover,
.onco-workshop-single input:-webkit-autofill:focus,
.onco-workshop-single input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100px #ffffff inset !important;
  box-shadow: 0 0 0 100px #ffffff inset !important;
  -webkit-text-fill-color: #1a1a2e !important;
  color: #1a1a2e !important;
  background-color: #ffffff !important;
  transition: background-color 99999s ease-in-out 0s;
}

/* Force white background on ANY input inside the workshop wrapper
   — this defeats most WP theme dark-mode overrides */
.onco-workshop-single input[type],
.onco-workshop-single input:not([type]),
.onco-workshop-single select,
.onco-workshop-single textarea {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #1a1a2e !important;
  -webkit-text-fill-color: #1a1a2e !important;
}

/* Focus state — purple brand border + very light purple bg */
.onco-workshop-single .onco-input:focus,
.onco-workshop-single .onco-select:focus,
.onco-input:focus,
.onco-select:focus {
  border-color: #9912b1;
  border-width: 2px;
  background: #fdfaff !important;
  background-color: #fdfaff !important;
  box-shadow: 0 0 0 3px rgba(153,18,177,0.12);
  color: #1a1a2e !important;
  outline: none;
  padding-bottom: 9px; /* compensate 2px border */
}

/* Error state */
.onco-input[aria-invalid="true"],
.onco-select[aria-invalid="true"] {
  border-color: var(--md-sys-color-error);
  border-width: 2px;
}

/* Hover state */
.onco-input:hover:not(:focus):not([aria-invalid="true"]),
.onco-select:hover:not(:focus):not([aria-invalid="true"]) {
  border-color: #7a6f88;
  background: #fdfaff !important;
  background-color: #fdfaff !important;
}

/* Dropdown arrow */
.onco-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239912b1'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--sp-3) center !important;
  background-size: 20px !important;
  cursor: pointer;
}

/* M3 Textarea */
.onco-textarea {
  resize: vertical;
  min-height: 100px;
  padding-top: 12px;
}

/* ============================================================
   FIELD LABELS — Static above-field labels
   Replaces the floating label pattern to prevent overlap with
   placeholder text and autocomplete-filled values.

   The label sits ABOVE the input at all times:
     - .onco-label rests at top:0, displayed as static text
     - The .onco-form-group uses padding-top to accommodate it
   ============================================================ */

/* Make the form group a positioned container for the label */
.onco-form-group {
  position: relative;
  padding-top: 20px; /* reserve space above input for the label */
  margin-bottom: var(--sp-5);
}

.onco-label {
  position: absolute;
  top: 2px;
  left: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #7a6f88;
  pointer-events: none;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* No animation needed — static labels never move */
  transition: color 0.15s ease;
}

/* Label turns purple when input is focused */
.onco-form-group:focus-within .onco-label {
  color: #9912b1;
}

/* Label turns red on error */
.onco-form-group:has(.onco-input[aria-invalid="true"]) .onco-label,
.onco-form-group:has(.onco-select[aria-invalid="true"]) .onco-label {
  color: var(--md-sys-color-error);
}

/* Select: label is identical — always visible above the select */
.onco-label-select {
  position: absolute;
  top: 2px;
  left: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #9912b1;
  pointer-events: none;
  line-height: 1.2;
}

/* Textarea: label also always above */
.onco-form-group:has(.onco-textarea) .onco-label {
  position: absolute;
  top: 2px;
  left: 0;
  font-size: 12px;
  font-weight: 600;
  color: #7a6f88;
}

/* Override — old floating label triggers no longer needed
   These selectors are kept for safety but effectively no-op
   since the label position is now always the same */
.onco-input:focus ~ .onco-label,
.onco-input:not(:placeholder-shown) ~ .onco-label,
.onco-select:focus ~ .onco-label {
  top: 2px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #9912b1;
}

/* Error label color */
.onco-input[aria-invalid="true"] ~ .onco-label,
.onco-select[aria-invalid="true"] ~ .onco-label {
  color: var(--md-sys-color-error);
}

.onco-required {
  color: var(--md-sys-color-error);
  margin-left: 2px;
}

/* ============================================================
   FIELD ERROR + HELP TEXT (M3 supporting text)
   ============================================================ */
.onco-field-error {
  color: var(--md-sys-color-error);
  font-size: var(--md-sys-typescale-body-small-size);
  letter-spacing: var(--md-sys-typescale-label-tracking);
  margin-top: var(--sp-1);
  padding-left: var(--sp-4);
  display: none;
  align-items: center;
  gap: var(--sp-1);
}

.onco-field-error.visible {
  display: flex;
}

.onco-help-text {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: var(--sp-1);
  padding-left: var(--sp-4);
  letter-spacing: var(--md-sys-typescale-label-tracking);
}

/* ============================================================
   FIELDSETS (Radio / Checkbox groups)
   ============================================================ */
.onco-fieldset {
  border: 1px solid var(--onco-outline-var);
  border-radius: var(--onco-radius-sm);
  padding: var(--sp-3) var(--sp-4);
  margin: 0;
}

.onco-legend {
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  color: var(--md-sys-color-primary);
  padding: 0 var(--sp-1);
  letter-spacing: var(--md-sys-typescale-label-tracking);
}

.onco-radio-group,
.onco-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.onco-radio-label,
.onco-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
  /* M3 state layer on label hover */
  padding: var(--sp-1) 0;
  border-radius: var(--onco-radius-xs);
  transition: background var(--onco-transition);
}

.onco-radio-label:hover,
.onco-checkbox-label:hover {
  background: rgba(153,18,177,0.06);
  padding-left: var(--sp-2);
}

.onco-radio-label input[type="radio"],
.onco-checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--md-sys-color-primary);
  cursor: pointer;
}

/* ============================================================
   FORM DIVIDER / SECTION TITLE
   ============================================================ */
.onco-udf-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-5);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.onco-udf-divider::before,
.onco-udf-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--onco-outline-var);
}

/* ============================================================
   SUBMIT AREA
   ============================================================ */
.onco-submit-row {
  margin-top: var(--sp-7);
}

.onco-btn-full.onco-btn-lg {
  width: 100%;
  justify-content: center;
  min-height: 48px;
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: 600;
  letter-spacing: 0.1px;
}

/* ============================================================
   FORM MESSAGE BOX — M3 Filled tonal banner style
   ============================================================ */
.onco-form-message {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--onco-radius-sm);
  margin-top: var(--sp-4);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.6;
  display: none;
}

.onco-form-message.onco-msg-error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border-left: 4px solid var(--md-sys-color-error);
}

.onco-form-message.onco-msg-success {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-left: 4px solid var(--md-sys-color-primary);
}

.onco-form-message.onco-msg-pending {
  background: #FFF3CD;
  color: #6B4C00;
  border-left: 4px solid #D68910;
}

/* ============================================================
   PAYMENT OVERLAY — M3 Scrim + Dialog Card
   ============================================================ */
.onco-payment-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.50);   /* M3 scrim: 50% */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.onco-payment-overlay-inner {
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--onco-radius-xl);
  padding: var(--sp-10);
  text-align: center;
  max-width: 340px;
  width: 90%;
  box-shadow: var(--md-sys-elevation-level5);
  color: var(--md-sys-color-on-surface);
  font-family: var(--onco-font);
}

.onco-processing-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--md-sys-color-surface-container-highest);
  border-top-color: var(--md-sys-color-primary);
  border-radius: 50%;
  animation: onco-rotate 0.8s linear infinite;
  margin: 0 auto var(--sp-5);
}

.onco-payment-overlay-inner p {
  font-size: var(--md-sys-typescale-body-large-size);
  font-weight: 500;
  margin: 0 0 var(--sp-2);
}

.onco-payment-overlay-inner small {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
}

/* ============================================================
   NOTICE BLOCKS — M3 Banner/Alert style
   ============================================================ */
.onco-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--onco-radius-lg);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.6;
  font-family: var(--onco-font);
}

.onco-notice-warning {
  background: #FFF3CD;
  border-left: 4px solid #D68910;
  color: #6B4C00;
}

.onco-notice-danger {
  background: var(--md-sys-color-error-container);
  border-left: 4px solid var(--md-sys-color-error);
  color: var(--md-sys-color-on-error-container);
}

.onco-notice-info {
  background: var(--md-sys-color-tertiary-container);
  border-left: 4px solid var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary-container);
}

.onco-notice-success {
  background: var(--md-sys-color-primary-container);
  border-left: 4px solid var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary-container);
}

.onco-notice-icon {
  font-size: 1.5em;
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.onco-empty-state {
  text-align: center;
  padding: var(--sp-16) var(--sp-6);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--onco-font);
}

.onco-empty-icon {
  font-size: 3.5em;
  margin-bottom: var(--sp-4);
  display: block;
  line-height: 1;
}

.onco-empty-state h3 {
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin: 0 0 var(--sp-2);
}

.onco-empty-state p {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.6;
}

/* ============================================================
   BADGES (small chips) — used in payment-return.php
   ============================================================ */
.onco-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--onco-radius-full);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.onco-badge--success   { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.onco-badge--warning   { background: #FFF3CD; color: #6B4C00; }
.onco-badge--danger    { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.onco-badge--secondary { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
.onco-badge--info      { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.onco-badge--error     { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

/* ============================================================
   PAYMENT RETURN PAGE
   ============================================================ */
.onco-payment-return {
  font-family: var(--onco-font);
}

/* ============================================================
   RECAPTCHA
   ============================================================ */
.onco-recaptcha-wrap {
  margin-bottom: var(--sp-4);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes onco-rotate {
  to { transform: rotate(360deg); }
}

@keyframes onco-ripple {
  0%   { transform: scale(0); opacity: 0.3; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes onco-spin {
  to { transform: rotate(360deg); }
}

.onco-spin {
  animation: onco-spin 0.8s linear infinite;
  display: inline-block;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.onco-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.onco-btn:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.onco-input:focus-visible,
.onco-select:focus-visible {
  outline: none; /* bottom border indicator handles focus */
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   M3 Adaptive Design: 3 breakpoints
     768px  — Tablet / landscape phone
     480px  — Portrait phone
     360px  — Small phone (Galaxy S, etc.)
   ============================================================ */

/* ── 768px: Tablet ─────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Workshops List ── */
  .onco-workshops-wrap {
    padding: var(--sp-3);
    max-width: 100%;
  }

  .onco-workshops-grid {
    grid-template-columns: 1fr;          /* single column */
    gap: var(--sp-4);
    margin-top: var(--sp-4);
  }

  .onco-card-header {
    padding: var(--sp-5);
  }

  .onco-card-body {
    padding: var(--sp-4);
  }

  .onco-card-footer {
    padding: var(--sp-3) var(--sp-4);
  }

  /* ── Workshop Single ── */
  .onco-workshop-single {
    padding: var(--sp-3);
    max-width: 100%;
  }

  .onco-workshop-hero {
    padding: var(--sp-6) var(--sp-5);
    border-radius: var(--onco-radius-lg);
    margin-bottom: var(--sp-5);
  }

  .onco-workshop-hero::after {
    width: 180px;
    height: 180px;
    bottom: -50px;
    right: -40px;
  }

  .onco-workshop-title {
    font-size: var(--md-sys-typescale-headline-small-size); /* 24px */
  }

  .onco-workshop-tagline {
    font-size: var(--md-sys-typescale-body-medium-size);
  }

  /* ── Info Strip: stack vertically ── */
  .onco-info-strip {
    flex-direction: column;
  }

  .onco-info-item {
    border-right: none;
    border-bottom: 1px solid var(--onco-outline-var);
    min-width: 0;
    padding: var(--sp-4) var(--sp-5);
  }

  .onco-info-item:last-child {
    border-bottom: none;
  }

  /* ── Schedule Table: horizontal scroll ── */
  .onco-schedule-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .onco-schedule-table {
    min-width: 420px;   /* prevents table squishing */
  }

  /* ── Registration Section ── */
  .onco-registration-section {
    padding: var(--sp-5) var(--sp-4);
    border-radius: var(--onco-radius-lg);
  }

  /* ── Form: phone row stacks ── */
  .onco-form-row {
    grid-template-columns: 1fr;          /* country code + mobile stack vertically */
    gap: var(--sp-3);
  }

  .onco-form {
    max-width: 100%;
  }

  /* ── Buttons ── */
  .onco-btn {
    /* M3: min 48px touch target on mobile */
    min-height: 48px;
  }

  /* ── Notices ── */
  .onco-notice {
    flex-direction: column;
    gap: var(--sp-2);
  }

  /* ── Payment Return ── */
  .onco-return-container {
    margin: var(--sp-6) auto;
    padding: 0 var(--sp-3);
  }

  .onco-return-details-card {
    padding: var(--sp-5);
  }

  .onco-details-label {
    width: 38%;
    font-size: 0.85rem;
  }

  /* ── Body gap ── */
  .onco-workshop-body {
    gap: var(--sp-5);
  }
}

/* ── 480px: Portrait phone ─────────────────────────────────── */
@media (max-width: 480px) {

  /* ── Root font scale ── */
  :root {
    --md-sys-typescale-headline-small-size: 20px;
    --md-sys-typescale-title-large-size:    18px;
    --md-sys-typescale-body-large-size:     15px;
  }

  /* ── Workshops list ── */
  .onco-workshops-wrap {
    padding: var(--sp-2);
  }

  .onco-workshops-grid {
    gap: var(--sp-3);
  }

  /* ── Hero ── */
  .onco-workshop-single {
    padding: var(--sp-2);
  }

  .onco-workshop-hero {
    padding: var(--sp-5) var(--sp-4);
    margin-bottom: var(--sp-4);
  }

  .onco-workshop-title {
    font-size: 20px;
  }

  /* ── Form padding ── */
  .onco-registration-section {
    padding: var(--sp-4) var(--sp-3);
    border-radius: var(--onco-radius);
  }

  .onco-form-group {
    margin-bottom: var(--sp-4);
  }

  /* Floating label inputs: increase tap target */
  .onco-input,
  .onco-select,
  .onco-textarea {
    font-size: 16px;   /* prevents iOS auto-zoom on focus */
    min-height: 48px;
  }

  /* ── Button ── */
  .onco-btn-lg {
    padding: var(--sp-3) var(--sp-5);
  }

  /* Submit button full-width on small screens */
  .onco-submit-btn {
    width: 100%;
    min-height: 52px;
  }

  /* ── Payment return table: two-column → single column stack ── */
  .onco-details-table,
  .onco-details-table tbody,
  .onco-details-table tr,
  .onco-details-table td {
    display: block;
    width: 100%;
  }

  .onco-details-label {
    width: 100%;
    padding-bottom: 2px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-sys-color-on-surface-variant);
  }

  .onco-details-value {
    padding-top: 0;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--md-sys-color-surface-container-highest);
  }

  .onco-details-table tr:last-child .onco-details-value {
    border-bottom: none;
  }

  .onco-return-details-card {
    padding: var(--sp-4);
    border-radius: var(--onco-radius-lg);
  }

  /* ── UDF / custom fields ── */
  .onco-udf-field textarea {
    min-height: 80px;
    font-size: 16px;
  }

  /* ── Schedule table ── */
  .onco-schedule-table th,
  .onco-schedule-table td {
    padding: var(--sp-2) var(--sp-3);
    font-size: 12px;
  }

  /* ── Section title ── */
  .onco-section-title {
    font-size: 17px;
  }

  /* ── Polling spinner: center on mobile ── */
  .onco-polling-spinner-wrap {
    display: flex;
    justify-content: center;
  }

  /* ── Return container margin ── */
  .onco-return-container {
    margin: var(--sp-4) auto;
    padding: 0 var(--sp-2);
  }
}

/* ── 360px: Small phone (Galaxy S, budget devices) ─────────── */
@media (max-width: 360px) {

  .onco-workshops-wrap,
  .onco-workshop-single {
    padding: var(--sp-2);
  }

  .onco-workshop-hero {
    padding: var(--sp-4) var(--sp-3);
  }

  .onco-workshop-title {
    font-size: 18px;
  }

  .onco-card-header {
    padding: var(--sp-4);
  }

  .onco-registration-section {
    padding: var(--sp-3);
  }

  /* Ensure emoji country code select doesn't overflow */
  .onco-select {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* Status badge wrapping */
  .onco-status-badge {
    font-size: 10px;
    padding: 2px var(--sp-2);
  }

  .onco-btn {
    font-size: 13px;
    padding: 10px var(--sp-4);
  }
}



/* ============================================================
   PAYMENT RETURN PAGE — M3 CSS CLASSES (M-10 fix)
   Replaces all inline styles that were on payment-return.php
   ============================================================ */

.onco-payment-return {
  font-family: var(--md-sys-typescale-body-large-font);
}

.onco-return-container {
  max-width: 680px;
  margin: var(--sp-10) auto;
  padding: 0 var(--sp-4);
}

/* Return page — notice headings */
.onco-return-heading {
  margin: 0 0 var(--sp-2);
  font-size: var(--md-sys-typescale-headline-small-size, 1.375rem);
  font-weight: 700;
  color: inherit;
}

.onco-return-subtext {
  margin: 0;
  font-size: var(--md-sys-typescale-body-large-size, 1rem);
  color: inherit;
  opacity: 0.92;
}

/* Notice body flex child */
.onco-notice-body {
  flex: 1;
}

/* Registration details card (CONFIRMED state) */
.onco-return-details-card {
  margin-top: var(--sp-6);
  background: var(--md-sys-color-surface-container-lowest, #FFFFFF);
  border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
  border-radius: var(--onco-radius-xl, 16px);
  padding: var(--sp-7) var(--sp-8);
  box-shadow: var(--onco-elevation-2);
}

/* Details table */
.onco-details-table {
  width: 100%;
  border-collapse: collapse;
}

.onco-details-table tr + tr td {
  border-top: 1px solid var(--md-sys-color-surface-container-highest, #E2E8E7);
}

.onco-details-label {
  padding: var(--sp-2) 0;
  color: var(--md-sys-color-on-surface-variant, #49454F);
  font-size: 0.9rem;
  width: 40%;
  vertical-align: middle;
}

.onco-details-value {
  padding: var(--sp-2) 0;
  font-weight: 600;
  vertical-align: middle;
  color: var(--md-sys-color-on-surface, #191C1C);
}

/* Reference code — monospace + primary color */
.onco-ref-code {
  font-family: 'Courier New', Courier, monospace;
  color: var(--md-sys-color-primary, #006A62);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

/* Amount paid — primary + larger */
.onco-amount-paid {
  color: var(--md-sys-color-primary, #006A62);
  font-size: 1.15rem;
}

/* Footer note */
.onco-return-footnote {
  margin-top: var(--sp-5);
  font-size: 0.87rem;
  color: var(--md-sys-color-on-surface-variant, #49454F);
}

/* ---- Polling spinner (PENDING state) ---- */
.onco-polling-spinner-wrap {
  margin-top: var(--sp-3);
}

/* M3 Circular Progress Indicator */
.onco-polling-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(214, 137, 16, 0.25);
  border-top-color: #d68910;
  border-radius: 50%;
  display: inline-block;
  animation: onco-rotate 0.8s linear infinite;
}

/* onco-rotate keyframe already defined in registration form section;
@keyframes onco-rotate {
  to { transform: rotate(360deg); }
}


/* ============================================================
   PREMIUM PAYMENT RETURN PAGE — Oncophysio Brand
   Used by the new onco-return-page/onco-return-card markup
   ============================================================ */

.onco-return-page {
  font-family: var(--onco-font);
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-4);
}

/* ── Card base ─────────────────────────────────────────────── */
.onco-return-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 48px 40px;
  max-width: 600px;
  width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 40px hsla(291,84%,18%,0.12);
}

/* ── Card state variants ───────────────────────────────────── */
.onco-return-card--success {
  border-top: 4px solid #9912b1;
  background: linear-gradient(160deg, #ffffff 0%, #faf2fd 100%);
}

.onco-return-card--pending {
  border-top: 4px solid #d68910;
  background: linear-gradient(160deg, #ffffff 0%, #fffbf0 100%);
}

.onco-return-card--failed {
  border-top: 4px solid #BA1A1A;
  background: linear-gradient(160deg, #ffffff 0%, #fff8f7 100%);
}

.onco-return-card--refunded,
.onco-return-card--cancelled {
  border-top: 4px solid #975be5;
  background: linear-gradient(160deg, #ffffff 0%, #faf2fd 100%);
}

.onco-return-card--unknown {
  border-top: 4px solid #6b7280;
  background: #f9f9fb;
}

/* ── Icon area ─────────────────────────────────────────────── */
.onco-return-icon {
  margin: 0 auto var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  line-height: 1;
}

.onco-return-icon--pending {
  /* no bg — spinner sits here */
}

/* ── Pending spinner (purple brand) ───────────────────────── */
.onco-return-spinner {
  width: 56px;
  height: 56px;
  border: 5px solid rgba(153,18,177,0.18);
  border-top-color: #9912b1;
  border-radius: 50%;
  animation: onco-rotate 0.9s linear infinite;
}

/* ── Title ─────────────────────────────────────────────────── */
.onco-return-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 var(--sp-3);
  line-height: 1.2;
}

/* ── Description ───────────────────────────────────────────── */
.onco-return-desc {
  font-size: 16px;
  color: #4a3f58;
  line-height: 1.7;
  margin: 0 0 var(--sp-6);
}

.onco-return-desc strong {
  color: #1a1a2e;
}

/* ── Reference pill ────────────────────────────────────────── */
.onco-return-ref-pill {
  display: inline-block;
  background: #f0d4f8;
  color: #2d0040;
  border-radius: 100px;
  padding: var(--sp-2) var(--sp-5);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: var(--sp-5);
}

.onco-return-ref-pill strong {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.06em;
}

/* ── Note text ─────────────────────────────────────────────── */
.onco-return-note {
  font-size: 13.5px;
  color: #6b7280;
  line-height: 1.6;
  margin: var(--sp-4) 0 var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(153,18,177,0.05);
  border-radius: 10px;
  border-left: 3px solid #9912b1;
  text-align: left;
}

.onco-return-note strong {
  color: #2d0040;
}

/* ── Details table ─────────────────────────────────────────── */
.onco-return-details {
  background: #fdf8ff;
  border: 1px solid #e8d8f5;
  border-radius: 16px;
  padding: var(--sp-6);
  margin: var(--sp-6) 0;
  text-align: left;
}

.onco-return-details__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9912b1;
  margin: 0 0 var(--sp-4);
}

.onco-return-table {
  width: 100%;
  border-collapse: collapse;
}

.onco-return-table tr + tr td {
  border-top: 1px solid #ecdff5;
}

.onco-return-table td {
  padding: var(--sp-2) 0;
  vertical-align: middle;
}

.onco-return-table__label {
  color: #6b7280;
  font-size: 13px;
  width: 38%;
  padding-right: var(--sp-3);
}

.onco-return-table__value {
  color: #1a1a2e;
  font-weight: 600;
  font-size: 14px;
}

.onco-return-table__ref {
  font-family: 'Courier New', Courier, monospace;
  color: #7a0e8e;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.onco-return-table__amount {
  color: #9912b1;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ── PAID badge ─────────────────────────────────────────────── */
.onco-return-badge {
  display: inline-block;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
}

.onco-return-badge--paid {
  background: #d4f8e0;
  color: #0a5c29;
}

/* ── Action buttons ─────────────────────────────────────────── */
.onco-return-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: linear-gradient(135deg, #9912b1 0%, #975be5 100%);
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease-out;
  box-shadow: 0 4px 16px hsla(291,84%,38%,0.30);
  margin-top: var(--sp-2);
}

.onco-return-btn:hover,
.onco-return-btn:focus-visible {
  background: linear-gradient(135deg, #7a0e8e 0%, #7a40cc 100%);
  box-shadow: 0 8px 28px hsla(291,84%,38%,0.40);
  transform: translateY(-2px);
  color: #ffffff !important;
  text-decoration: none !important;
}

.onco-return-btn--outline {
  background: transparent;
  color: #9912b1 !important;
  border: 2px solid #9912b1;
  box-shadow: none;
}

.onco-return-btn--outline:hover {
  background: #f0d4f8;
  color: #7a0e8e !important;
  box-shadow: none;
  transform: translateY(-1px);
}

.onco-return-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

/* ── Success confetti burst ─────────────────────────────────── */
.onco-return-confetti {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  overflow: hidden;
  height: 120px;
}

.onco-return-confetti span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: onco-confetti-fall 2.5s ease-out forwards;
  opacity: 0;
}

.onco-return-confetti span:nth-child(1) { background: #9912b1; left: 10%; animation-delay: 0.1s; transform: rotate(15deg); }
.onco-return-confetti span:nth-child(2) { background: #975be5; left: 25%; animation-delay: 0.2s; width: 6px; height: 6px; border-radius: 50%; }
.onco-return-confetti span:nth-child(3) { background: #f0d4f8; left: 40%; animation-delay: 0.05s; transform: rotate(-20deg); }
.onco-return-confetti span:nth-child(4) { background: #7a0e8e; left: 55%; animation-delay: 0.3s; width: 10px; height: 10px; }
.onco-return-confetti span:nth-child(5) { background: #975be5; left: 70%; animation-delay: 0.15s; transform: rotate(45deg); }
.onco-return-confetti span:nth-child(6) { background: #9912b1; left: 82%; animation-delay: 0.25s; width: 5px; height: 5px; border-radius: 50%; }
.onco-return-confetti span:nth-child(7) { background: #f0d4f8; left: 15%; animation-delay: 0.4s; transform: rotate(-10deg); }
.onco-return-confetti span:nth-child(8) { background: #7a0e8e; left: 92%; animation-delay: 0.1s; width: 7px; height: 7px; }

@keyframes onco-confetti-fall {
  0%   { opacity: 1; transform: translateY(-20px) rotate(0deg); }
  100% { opacity: 0; transform: translateY(110px) rotate(360deg); }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .onco-return-card {
    padding: 36px 24px;
    border-radius: 18px;
  }

  .onco-return-title {
    font-size: 22px;
  }

  .onco-return-desc {
    font-size: 14px;
  }

  .onco-return-details {
    padding: var(--sp-4);
  }

  .onco-return-table__label {
    width: 42%;
    font-size: 12px;
  }

  .onco-return-table__value {
    font-size: 13px;
  }

  .onco-return-table__amount {
    font-size: 14px;
  }
}

@media (max-width: 400px) {
  .onco-return-card {
    padding: 28px 16px;
  }

  /* Stack label/value on tiny screens */
  .onco-return-table,
  .onco-return-table tbody,
  .onco-return-table tr,
  .onco-return-table td {
    display: block;
    width: 100%;
  }

  .onco-return-table__label {
    width: 100%;
    padding-bottom: 2px;
    color: #9912b1;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .onco-return-table__value {
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid #ecdff5;
  }

  .onco-return-table tr:last-child .onco-return-table__value {
    border-bottom: none;
  }

  .onco-return-table__amount {
    flex-wrap: wrap;
  }

  .onco-return-btn {
    width: 100%;
    padding: 14px;
  }
}