@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');
/* Theme IMECE2026 */
 /* Style Attributes */
.pcp-header
{
padding-top: 30px;
padding-bottom: 30px;
padding-left: 5;
padding-right: 5;
display: none;
}
.pcp-page #pcp-topmenu-regular, #pcp-topmenu-mobile
{
border-radius: 12px;
}
.pcp-page .regular-menu-wrapper .pcp-topmenu-regular, .pcp-page .mobile-menu-wrapper .pcp-topmenu-mobile
{
background: none;
box-shadow: none;
border: none;
}
.pcp-page .regular-menu-wrapper .pcp-topmenu-regular.internal-page, .mobile-menu-wrapper .pcp-topmenu-mobile.internal-page
{
position: relative !important;
}
.pcp-page .regular-menu-wrapper .pcp-topmenu-regular.ui.menu .item, .pcp-page .mobile-menu-wrapper .pcp-topmenu-mobile.ui.menu .item, .pcp-page .regular-menu-wrapper .pcp-topmenu-regular.ui.menu .item > a.text, .pcp-page .mobile-menu-wrapper .pcp-topmenu-mobile.ui.menu .item > a.text, .pcp-page .regular-menu-wrapper .pcp-topmenu-regular.ui.menu .item > i.dropdown, .pcp-page .mobile-menu-wrapper .pcp-topmenu-mobile.ui.menu .item > i.dropdown
{
color: #5A0904;
}

 /* Standard Content */
/*
╔══════════════════════════════════════════════════════════════════════════════╗
║                                                                              ║
║   IMECE INDIA 2026 — b-com Portal MASTER THEME CSS                         ║
║   Single file. Paste entire content into:                                   ║
║   b-com Admin → Website Settings → Theme CSS → Save                        ║
║                                                                              ║
║   Overrides: BCom.css + BCom1/BCom.css (loads after both)                  ║
║   Brand: ASME IMECE 2026 — asme-india.org/2026                             ║
║   Last updated: March 2026 — v3 MASTER (merged)                            ║
║                                                                              ║
║   SECTIONS:                                                                  ║
║    1.  Google Fonts Import                                                   ║
║    2.  Custom Font Face (RotisSemiSerifStd)                                  ║
║    3.  Design Tokens — single unified :root                                  ║
║    4.  Global Reset & Base                                                   ║
║    5.  Typography                                                            ║
║    6.  Page Wrapper & Background                                             ║
║    7.  Logo Area                                                             ║
║    8.  Wizard Step Bar (exact b-com selectors)                               ║
║    9.  Main Content Card (.main-content.ui.segment)                         ║
║   10.  Registration Introduction Component                                   ║
║   11.  Contact Us Button (#contactUsButton)                                  ║
║   12.  Start Registration Button (#signupButton — welcome page)             ║
║   13.  Login & Signup Forms                                                  ║
║   14.  Navigation Bottom (Next / Back)                                      ║
║   15.  Buttons — Global Semantic UI Overrides                                ║
║   16.  Forms — Inputs, Labels, Dropdowns, Checkboxes                        ║
║   17.  Tables & Data Grids                                                   ║
║   18.  Cards, Panels, Segments                                               ║
║   19.  Alerts, Messages & Validation                                         ║
║   20.  Session & Event Components                                            ║
║   21.  Modals (Session Refresh, Duplicate Contact)                           ║
║   22.  Cookie Consent Banner                                                 ║
║   23.  Navigation Header (pcp-header)                                        ║
║   24.  Footer                                                                ║
║   25.  Animations & Transitions                                              ║
║   26.  Responsive / Mobile-First                                             ║
║   27.  Accessibility & Focus                                                 ║
║   28.  Print Styles                                                          ║
║                                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝
*/


/* ============================================================================
   1. GOOGLE FONTS IMPORT
   ============================================================================ */



/* ============================================================================
   2. CUSTOM FONT FACE — RotisSemiSerifStd (ASME brand serif)
   ============================================================================ */

@font-face {
  font-family: 'RotisSemiSerifStd';
  src: url('https://tv.b-com.hosting/Image.axd?FileID=d0842b06-7333-4c23-9a03-c0a189b263c5') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RotisSemiSerifStd';
  src: url('https://tv.b-com.hosting/Image.axd?FileID=d0842b06-7333-4c23-9a03-c0a189b263c5') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}


/* ============================================================================
   3. DESIGN TOKENS — Single unified :root
   (Merges all previous conflicting :root blocks into one)
   ============================================================================ */

:root {
  /* ── ASME Brand Colors ── */
  --color-primary:        #D32F2F;   /* ASME Red */
  --color-primary-dark:   #B71C1C;   /* Hover / active red */
  --color-primary-light:  #FFCDD2;   /* Red wash */
  --color-accent:         #284992;   /* ASME Navy */
  --color-accent-dark:    #1A2F66;   /* Deep navy */
  --color-accent-light:   #EEF2FA;   /* Navy wash */
  --color-accent-mid:     #D9E2F7;   /* Navy tint for borders */
  --color-gold:           #C8961A;   /* Engineering gold */
  --color-gold-light:     #FFF3CD;   /* Gold wash */

  /* ── Neutral Palette ── */
  --color-bg:             #F3F5FA;   /* Page background */
  --color-surface:        #FFFFFF;   /* Cards / panels */
  --color-surface-2:      #F0F2F7;   /* Alternate surface */
  --color-border:         #DDE1EA;   /* Default border */
  --color-border-focus:   #284992;   /* Focus ring */
  --color-text:           #1A1E2E;   /* Primary text */
  --color-text-body:      #2A3040;   /* Body copy */
  --color-text-muted:     #5A6270;   /* Secondary / helper */
  --color-text-faint:     #8A92AA;   /* Timestamps, metadata */
  --color-text-inverse:   #FFFFFF;   /* Text on dark bg */
  --color-divider:        #EAEDF5;   /* Horizontal rules */

  /* ── Typography ── */
  --font-serif:   'RotisSemiSerifStd', Georgia, 'Times New Roman', serif;
  --font-sans:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --fs-xs:    0.6875rem;   /* 11px */
  --fs-sm:    0.8125rem;   /* 13px */
  --fs-base:  0.9375rem;   /* 15px */
  --fs-md:    1rem;        /* 16px */
  --fs-lg:    1.125rem;    /* 18px */
  --fs-xl:    1.375rem;    /* 22px */
  --fs-2xl:   1.625rem;    /* 26px */
  --fs-3xl:   2rem;        /* 32px */

  --lh:       1.65;
  --lh-tight: 1.25;

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* ── Radii ── */
  --r-sm:   0.25rem;
  --r:      0.5rem;
  --r-md:   0.75rem;
  --r-lg:   1rem;
  --r-xl:   1.5rem;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 3px rgba(26,30,46,0.07);
  --shadow-sm:  0 2px 8px rgba(26,30,46,0.09);
  --shadow:     0 4px 18px rgba(26,30,46,0.11);
  --shadow-md:  0 8px 26px rgba(26,30,46,0.13);
  --shadow-lg:  0 16px 40px rgba(26,30,46,0.15);
  --shadow-red: 0 4px 18px rgba(211,47,47,0.28);
  --shadow-navy:0 4px 18px rgba(40,73,146,0.22);

  /* ── Motion ── */
  --t-fast: 0.15s ease;
  --t:      0.25s ease;
  --t-slow: 0.4s ease;

  /* ── Safe areas (PWA) ── */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}


/* ============================================================================
   4. GLOBAL RESET & BASE
   ============================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--color-text-body);
  background: var(--color-bg) !important;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--color-primary);
}

hr {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: var(--sp-6) 0;
}

::selection {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* Scrollbar */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: var(--color-surface-2); }
::-webkit-scrollbar-thumb        { background: var(--color-border); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover  { background: var(--color-accent); }

/* Global italic killer — BCom.css applies italic broadly */
.community-registration p,
.community-registration li,
.community-registration span,
.community-registration div,
.community-registration label,
.community-registration a,
.introduction-content *,
.component-welcome * {
  font-style: normal !important;
}

/* Restore italic only for real <em> */
.community-registration em { font-style: italic !important; }


/* ============================================================================
   5. TYPOGRAPHY
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--color-accent);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  margin: 0 0 var(--sp-4);
  font-weight: bold;
  font-style: normal;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl);  }
h3 { font-size: var(--fs-lg);  }
h4 { font-size: var(--fs-md);  }
h5 { font-size: var(--fs-base);}
h6 { font-size: var(--fs-sm);  }

p  { font-size: var(--fs-base); margin: 0 0 var(--sp-4); color: var(--color-text-body); }

small { font-size: var(--fs-sm); color: var(--color-text-muted); }


/* ============================================================================
   6. PAGE WRAPPER & BACKGROUND
   Target: div#page.community-registration
   ============================================================================ */

#page.community-registration,
.community-registration {
  background: var(--color-bg) !important;
  min-height: 100vh;
}

#aspnetForm {
  opacity: 1;
}


/* ============================================================================
   7. LOGO AREA
   Target: div.logo-container > img#communityLogo.logo-header
   ============================================================================ */

.logo-container {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  clear: both;
}

.logo-container img.logo-header,
img#communityLogo {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 300px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Hidden focuser element — must not add layout space or show focus ring */
.focuser[tabindex="0"][aria-hidden="true"] {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  outline: none !important;     /* Prevent red focus ring on page load */
  border: none !important;
  opacity: 0 !important;
}


/* ============================================================================
   8. WIZARD STEP BAR
   Exact b-com HTML: .navbar > div.ui.steps.nav
                     > span.step.active | a.step.disabled
   ============================================================================ */

.navbar {
  background: #EAEDF5 !important;
  border-bottom: 2px solid #D0D5E5 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.navbar .ui.steps.nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* All steps — shared base */
.navbar .ui.steps.nav .step,
.navbar .ui.steps.nav a.step,
.navbar .ui.steps.nav span.step {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 0.8rem 1.25rem !important;
  flex: 1 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 0 !important;
  transition: background var(--t-fast), color var(--t-fast) !important;
}

/* ACTIVE step */
.navbar .ui.steps.nav span.step.active {
  background: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.12) !important;
}

/* INACTIVE / DISABLED steps */
.navbar .ui.steps.nav a.step,
.navbar .ui.steps.nav a.step.disabled {
  background: transparent !important;
  color: #6B7591 !important;
  cursor: not-allowed !important;
  text-decoration: none !important;
}

.navbar .ui.steps.nav a.step.disabled:hover {
  background: rgba(40,73,146,0.06) !important;
  color: #4A5570 !important;
}

/* Chevron connectors — Semantic UI uses ::after for arrow shapes */
.navbar .ui.steps.nav .step::after {
  border-color: transparent !important;
  border-left-color: #D0D5E5 !important;
  background: transparent !important;
  /* Slim down the chevron size */
  width: 1.15em !important;
  height: 1.15em !important;
  top: 50% !important;
  margin-top: -0.575em !important;
  z-index: 2 !important;
}

.navbar .ui.steps.nav span.step.active::after {
  border-left-color: var(--color-primary) !important;
}

/* Also remove the before pseudo which creates the white fill */
.navbar .ui.steps.nav .step::before {
  display: none !important;
}


/* ============================================================================
   9. MAIN CONTENT CARD
   Target: div.main-content.ui.segment  (exact class combo from HTML)
   IMPORTANT: Reset nested segments so border doesn't cascade inward
   ============================================================================ */

.main-content.ui.segment {
  border: none !important;
  border-top: 4px solid var(--color-primary) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 24px rgba(26,30,46,0.09) !important;
  background: #ffffff !important;
  padding: 2.25rem 2.5rem 2.5rem !important;
  margin: 0 !important;
}

/* Reset: nested segments must NOT inherit red border */
.main-content.ui.segment .ui.segment,
.main-content.ui.segment .ui.form.segment,
.main-content.ui.segment .ui.dimmer,
.main-content.ui.segment .ui.form {
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Loader inside card */
.main-content.ui.segment .ui.large.dimmer.inverted {
  background: rgba(255,255,255,0.85) !important;
  border-radius: 0 0 14px 14px !important;
}

.main-content.ui.segment .ui.text.loader {
  color: var(--color-accent) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}


/* ============================================================================
   10. REGISTRATION INTRODUCTION COMPONENT
   Target: .component-registration-introduction
   HTML: h1.ui.dividing.header (has INLINE uppercase+color — we override)
         .introduction-content p, ul, li
         .ui.relaxed.stackable.grid
   ============================================================================ */

.component-registration-introduction {
  padding: 0 !important;
}

/* ── PAGE HEADING — overrides inline style="text-transform:uppercase; color:#535548" ── */
.component-registration-introduction h1.ui.dividing.header {
  font-family: var(--font-serif) !important;
  color: var(--color-accent) !important;          /* overrides inline #535548 */
  text-transform: none !important;                /* overrides inline uppercase */
  font-size: var(--fs-2xl) !important;
  font-weight: bold !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  border-bottom: 2px solid var(--color-divider) !important;
  padding-bottom: var(--sp-4) !important;
  margin-bottom: var(--sp-5) !important;
  font-style: normal !important;
}

/* Red underline accent bar */
.component-registration-introduction h1.ui.dividing.header::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-primary);
  border-radius: var(--r-full);
  margin-top: 0.6rem;
}

/* ── DATE SUBTITLE — .sub.header ── */
.component-registration-introduction h1.ui.dividing.header .sub.header {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  color: var(--color-text-faint) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-top: 0.4rem !important;
  font-style: normal !important;
}

/* ── BODY TEXT — .introduction-content ──
   BCom.css applies italic + justify to this class — we fully reset */
.component-registration-introduction .introduction-content,
.component-registration-introduction .introduction-content p {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  font-style: normal !important;
  line-height: 1.75 !important;
  color: var(--color-text-body) !important;
  text-align: left !important;
  margin-bottom: var(--sp-3) !important;
}

/* ── "Important information:" bold label ── */
.component-registration-introduction .introduction-content p b,
.component-registration-introduction .introduction-content p strong {
  display: inline-block !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  background: var(--color-accent-light) !important;
  padding: 0.3rem 0.75rem !important;
  border-left: 3px solid var(--color-accent) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  margin-bottom: var(--sp-2) !important;
  font-style: normal !important;
}

/* ── BULLET LIST ── */
.component-registration-introduction .introduction-content ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: var(--sp-2) 0 var(--sp-4) !important;
}

.component-registration-introduction .introduction-content ul li {
  position: relative !important;
  padding: 0.5rem 0 0.5rem 1.875rem !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  font-style: normal !important;
  color: var(--color-text-body) !important;
  line-height: 1.65 !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(220,225,235,0.5) !important;
}

.component-registration-introduction .introduction-content ul li:last-child {
  border-bottom: none !important;
}

/* Red diamond bullet marker */
.component-registration-introduction .introduction-content ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0.3rem !important;
  top: 0.9rem !important;
  width: 9px !important;
  height: 9px !important;
  background: var(--color-primary) !important;
  transform: rotate(45deg) !important;
  border-radius: 1px !important;
}

/* ── GRID LAYOUT (12-col text + 4-col button) ──
   Override Semantic UI "stackable" which collapses at ≤768px.
   Force CSS Grid so Contact Us stays top-right at ALL viewport sizes. */
.component-registration-introduction .ui.relaxed.stackable.grid,
.component-registration-introduction .ui.stackable.grid {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 1rem 1.5rem !important;
  margin: 0 !important;
  align-items: start !important;
  width: 100% !important;
}

/* Left column (12-wide → takes remaining space) */
.component-registration-introduction .ui.relaxed.stackable.grid > .twelve.wide.column,
.component-registration-introduction .ui.stackable.grid > .twelve.wide.column {
  width: auto !important;
  padding: 0 !important;
  float: none !important;
}

/* Right column (4-wide → auto-width, top-right) */
.component-registration-introduction .ui.relaxed.stackable.grid > .four.wide.column,
.component-registration-introduction .ui.relaxed.stackable.grid > .four.wide.right.aligned.column,
.component-registration-introduction .ui.stackable.grid > .four.wide.column {
  width: auto !important;
  padding: 0 !important;
  float: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  white-space: nowrap !important;
}


/* ============================================================================
   11. CONTACT US BUTTON
   Target: a#contactUsButton.large.blue.ui.labeled.icon.button
   "blue" is Semantic UI colour class — must override specifically
   ============================================================================ */

a#contactUsButton,
a#contactUsButton.ui.button,
a#contactUsButton.blue.ui.button,
a#contactUsButton.large.blue.ui.labeled.icon.button {
  background: var(--color-accent) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--r) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  /* Uniform padding on all sides — no separate icon box */
  padding: 0.75rem 1.25rem !important;
  box-shadow: var(--shadow-navy) !important;
  transition: background var(--t), box-shadow var(--t), transform var(--t) !important;
  text-decoration: none !important;
  /* Collapse Semantic UI's "labeled icon" layout into simple flex */
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  /* Prevent Semantic UI from adding left padding for icon box */
  padding-left: 1.25rem !important;
}

a#contactUsButton:hover {
  background: var(--color-accent-dark) !important;
  box-shadow: 0 6px 20px rgba(40,73,146,0.38) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Collapse Semantic UI's icon container box entirely */
a#contactUsButton i.icon,
a#contactUsButton i.mail.outline.icon {
  position: static !important;     /* remove Semantic UI absolute positioning */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,0.9) !important;
  background: transparent !important;  /* no separate icon background box */
  border: none !important;
  border-radius: 0 !important;
  font-size: 1rem !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}


/* ============================================================================
   12. WELCOME TEXT & START REGISTRATION BUTTON
   HTML: div[style="text-align:center; margin-top:50px;"]
         button#signupButton.huge.red.ui.right.labeled.icon.button
   ============================================================================ */

/* Welcome message */
.component-welcome div[style*="text-align:center"] b,
.component-welcome div[style*="text-align:center"] strong,
.component-welcome div[style*="text-align:center"] div {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: var(--color-text-muted) !important;
  letter-spacing: 0.01em !important;
}

/* START REGISTRATION button (welcome page version)
   Note: HTML has inline style="margin-top:30px; margin-bottom:80px; padding:10px;"
   All three must be overridden with !important */
button#signupButton,
button#signupButton.huge.red.ui.right.labeled.icon.button {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 0.9rem 2.5rem !important;     /* overrides inline padding:10px */
  margin-top: 1.5rem !important;          /* overrides inline margin-top:30px */
  margin-bottom: 2rem !important;         /* overrides inline margin-bottom:80px */
  min-width: 220px !important;
  min-height: 52px !important;
  box-shadow: var(--shadow-red) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important;
  transition: all var(--t) !important;
  position: relative !important;
  overflow: hidden !important;
  animation: imece-cta-pulse 2.5s ease-in-out infinite !important;
}

button#signupButton::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.55s ease !important;
}

button#signupButton:hover {
  background: linear-gradient(135deg, #C62828 0%, var(--color-primary-dark) 100%) !important;
  box-shadow: 0 10px 28px rgba(211,47,47,0.48) !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}

button#signupButton:hover::before {
  transform: translateX(100%) !important;
}

button#signupButton:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(211,47,47,0.3) !important;
  animation: none !important;
}

/* Fix: Semantic UI "right labeled icon button" absolutely positions the icon
   to the right edge with its own background box. Reset everything to static
   so our inline-flex centres it perfectly with the text. */
button#signupButton i.icon,
button#signupButton i.sign.in.icon {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 1rem !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  top: auto !important;
  right: auto !important;
  opacity: 1 !important;
}

@keyframes imece-cta-pulse {
  0%,100% { box-shadow: 0 6px 20px rgba(211,47,47,0.32); }
  50%      { box-shadow: 0 8px 28px rgba(211,47,47,0.52), 0 0 0 6px rgba(211,47,47,0.07); }
}


/* ============================================================================
   13. LOGIN & SIGNUP FORMS
   Target: .component-login, .component-signup, #login-signup-container
   ============================================================================ */

/* Section headings */
.component-login .ui.header,
.component-signup .ui.header {
  font-family: var(--font-serif) !important;
  font-size: 1.25rem !important;
  color: var(--color-accent) !important;
  font-style: normal !important;
  margin-bottom: var(--sp-3) !important;
}

/* Intro text */
.component-login p,
.component-signup p {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-size: var(--fs-sm) !important;
  color: var(--color-text-muted) !important;
}

/* Labels */
.component-login .field label span,
.component-signup .field label span,
.component-login .field label,
.component-signup .field label {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--color-accent) !important;
  font-style: normal !important;
}

/* Text inputs */
.component-login .ui.input input,
.component-signup .ui.input input,
.component-login input[type="text"],
.component-login input[type="password"],
.component-signup input[type="text"],
.component-signup input[type="email"] {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--r) !important;
  padding: 0.625rem 1rem !important;
  color: var(--color-text) !important;
  background: #fff !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}

.component-login .ui.input input:focus,
.component-signup .ui.input input:focus,
.component-login input:focus,
.component-signup input:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(40,73,146,0.12) !important;
  outline: none !important;
}

/* Login button */
button#loginButton,
button#loginButton.large.green.ui.button,
button#loginButton.large.green.ui.right.labeled.icon {
  background: var(--color-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 1.75rem !important;
  min-height: 44px !important;
  box-shadow: var(--shadow-navy) !important;
  transition: all var(--t) !important;
  cursor: pointer !important;
}

button#loginButton:hover {
  background: var(--color-accent-dark) !important;
  transform: translateY(-1px) !important;
}

/* Signup Continue button (inside form — no pulse, cleaner) */
.component-signup button#signupButton {
  animation: none !important;
  background: var(--color-primary) !important;
  min-width: unset !important;
  padding: 0.75rem 1.75rem !important;
  min-height: 44px !important;
  font-size: var(--fs-sm) !important;
}

/* OR divider */
.ui.vertical.divider.welcome-or {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  color: #AAB0C4 !important;
  letter-spacing: 0.12em !important;
}

/* Forgot password */
.component-login .forgotten-password a {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  color: var(--color-primary) !important;
  font-style: normal !important;
  text-decoration: none !important;
  transition: color var(--t-fast) !important;
}

.component-login .forgotten-password a:hover {
  color: var(--color-primary-dark) !important;
  text-decoration: underline !important;
}

/* Required asterisk corner label */
.ui.corner.label {
  border-color: var(--color-primary) transparent transparent !important;
}

.ui.corner.label i.asterisk.icon {
  color: #fff !important;
}

/* Validation inline error labels */
.ui.red.label.pointing.semantic-validation-message {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  border-radius: var(--r) !important;
  font-style: normal !important;
}

/* External login logos */
.externalcommunity-list {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-4) 0;
}

.externalcommunity-item {
  cursor: pointer;
  transition: transform var(--t-fast), opacity var(--t-fast);
}

.externalcommunity-item:hover {
  transform: scale(1.05);
  opacity: 0.85;
}


/* ============================================================================
   14. NAVIGATION BOTTOM — Next / Back buttons
   Target: .navigation-bottom
   ============================================================================ */

.navigation-bottom {
  padding-top: var(--sp-5) !important;
  margin-top: var(--sp-5) !important;
  border-top: 1px solid var(--color-divider) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: var(--sp-4) !important;
  overflow: hidden !important;
}

/* NEXT button */
.navigation-bottom button.next,
.navigation-bottom .ui.green.icon.right.labeled.button.next {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background: var(--color-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 0.75rem 1.75rem !important;
  min-height: 44px !important;
  box-shadow: var(--shadow-red) !important;
  transition: all var(--t) !important;
  cursor: pointer !important;
  float: right !important;
}

.navigation-bottom button.next:hover {
  background: var(--color-primary-dark) !important;
  box-shadow: 0 6px 20px rgba(211,47,47,0.4) !important;
  transform: translateY(-1px) !important;
}

/* BACK button */
.navigation-bottom button.back,
.navigation-bottom .ui.labeled.icon.button.back {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: transparent !important;
  color: var(--color-accent) !important;
  border: 2px solid var(--color-accent) !important;
  border-radius: var(--r) !important;
  padding: 0.75rem 1.75rem !important;
  min-height: 44px !important;
  box-shadow: none !important;
  transition: all var(--t) !important;
  cursor: pointer !important;
}

.navigation-bottom button.back:hover {
  background: var(--color-accent-light) !important;
  box-shadow: 0 2px 8px rgba(40,73,146,0.15) !important;
}


/* ============================================================================
   15. BUTTONS — Global Semantic UI overrides
   Covers all remaining Semantic UI colour classes throughout the portal
   ============================================================================ */

/* Base button reset */
.ui.button,
.button {
  font-family: var(--font-sans) !important;
  border-radius: var(--r) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  transition: all var(--t) !important;
  cursor: pointer !important;
  min-height: 40px !important;
}

/* Primary / blue → ASME Navy */
.ui.primary.button,
.ui.blue.button,
.ui.teal.button,
.ui.primary.buttons .button,
.ui.blue.buttons .button {
  background: var(--color-accent) !important;
  color: #fff !important;
  border-color: var(--color-accent) !important;
  box-shadow: var(--shadow-navy) !important;
}

.ui.primary.button:hover,
.ui.blue.button:hover,
.ui.teal.button:hover {
  background: var(--color-accent-dark) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* Green → ASME Navy (b-com uses green for proceed actions) */
.ui.green.button,
.ui.green.buttons .button {
  background: var(--color-accent) !important;
  color: #fff !important;
  box-shadow: var(--shadow-navy) !important;
}

.ui.green.button:hover {
  background: var(--color-accent-dark) !important;
  color: #fff !important;
}

/* Red buttons stay red */
.ui.red.button,
.ui.red.buttons .button {
  background: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: var(--shadow-red) !important;
}

.ui.red.button:hover {
  background: var(--color-primary-dark) !important;
  color: #fff !important;
}

/* Basic / ghost */
.ui.basic.button {
  background: transparent !important;
  box-shadow: 0 0 0 1.5px var(--color-accent) inset !important;
  color: var(--color-accent) !important;
}

.ui.basic.button:hover {
  background: var(--color-accent-light) !important;
}

/* Disabled state */
.ui.button:disabled,
.ui.button.disabled {
  opacity: 0.42 !important;
  pointer-events: none !important;
  transform: none !important;
  animation: none !important;
}

/* Icon inside any button */
.ui.button i.icon {
  background: transparent !important;
}


/* ============================================================================
   16. FORMS — Inputs, Labels, Select, Dropdowns, Checkboxes
   ============================================================================ */

/* Global label reset — excludes checkbox/radio labels */
.ui.form label:not(.ui.checkbox label):not(.ui.radio label),
label:not(.ui.checkbox label):not(.ui.radio label) {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--color-accent) !important;
  font-style: normal !important;
  display: block !important;
  margin-bottom: var(--sp-1) !important;
}

/* All text inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="search"],
input[type="url"],
textarea,
.ui.input > input {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  color: var(--color-text) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--r) !important;
  padding: 0.625rem 1rem !important;
  width: 100% !important;
  min-height: 44px !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
  -webkit-appearance: none;
  appearance: none;
  font-style: normal !important;
}

input:hover, textarea:hover { border-color: var(--color-accent) !important; }

input:focus, textarea:focus, .ui.input > input:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(40,73,146,0.12) !important;
  background: #fff !important;
}

input[readonly], textarea[readonly] {
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted) !important;
  cursor: not-allowed !important;
}

textarea {
  min-height: 110px !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}

/* Select */
select {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  color: var(--color-text) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--r) !important;
  padding: 0.625rem 2.5rem 0.625rem 1rem !important;
  width: 100% !important;
  min-height: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23284992' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}

select:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(40,73,146,0.12) !important;
}

/* Semantic UI Dropdown */
.ui.selection.dropdown {
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--r) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

.ui.selection.dropdown:hover { border-color: var(--color-accent) !important; }

.ui.selection.dropdown:focus,
.ui.selection.dropdown.active {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(40,73,146,0.12) !important;
}

.ui.selection.dropdown .menu {
  border: 1.5px solid var(--color-border) !important;
  border-radius: 0 0 var(--r) var(--r) !important;
  box-shadow: var(--shadow-md) !important;
}

.ui.selection.dropdown .menu .item:hover,
.ui.selection.dropdown .menu .item.selected {
  background: var(--color-accent-light) !important;
  color: var(--color-accent) !important;
}

/* Checkboxes & radios */
/* ── Checkboxes — Global v5 Native Input Approach ──
   Same technique as consent page (Section 29): hide Semantic UI's
   fake label::before box and label::after tick, make the native
   <input> visible. accent-color drives the tick colour in ASME Red.
   Excludes: .toggle (cookie banner toggles), .slider, .radio (Section 30). */

/* Step 1 — Hide Semantic UI fake visuals for all standard checkboxes */
.ui.checkbox:not(.toggle):not(.slider) label::before,
.ui.checkbox:not(.toggle):not(.slider) label::after {
  display: none !important;
  content: none !important;
}

/* Step 2 — Make native checkbox visible */
.ui.checkbox:not(.toggle):not(.slider) input[type="checkbox"] {
  opacity: 1 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: var(--color-primary) !important;
  z-index: auto !important;
}

/* Step 3 — Flex row: native checkbox + label sit side by side */
.ui.checkbox:not(.toggle):not(.slider):not(.radio) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
}

/* Step 4 — Label: remove Semantic UI's built-in left padding
   (it was there to make space for the now-hidden fake box) */
.ui.checkbox:not(.toggle):not(.slider):not(.radio) label {
  padding-left: 0 !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  color: var(--color-text) !important;
}

/* ── Standalone native inputs (outside .ui.checkbox containers) ── */
input[type="checkbox"]:not(.ui.checkbox input),
input[type="radio"]:not(.ui.checkbox input) {
  width: 1.125rem !important;
  height: 1.125rem !important;
  accent-color: var(--color-primary) !important;
  cursor: pointer !important;
  min-height: unset !important;
}

/* Field group spacing */
.ui.form .field {
  margin-bottom: var(--sp-5) !important;
}

/* Error state */
.field.error input,
.field.error textarea,
.field.error select {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(211,47,47,0.1) !important;
}

/* File input */
input[type="file"] {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  padding: var(--sp-2) !important;
  border: 2px dashed var(--color-border) !important;
  border-radius: var(--r) !important;
  background: var(--color-surface-2) !important;
  cursor: pointer !important;
  min-height: unset !important;
}

input[type="file"]:hover {
  border-color: var(--color-accent) !important;
  background: var(--color-accent-light) !important;
}


/* ============================================================================
   17. TABLES & DATA GRIDS
   SCOPED to .community-registration to prevent bleeding into the
   Progressive Portal dashboard (.pcp-page) pages.
   ============================================================================ */

.community-registration table,
.community-registration .ui.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.community-registration thead,
.community-registration .ui.table thead {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #fff;
}

.community-registration thead th,
.community-registration .ui.table thead th {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: #fff;
  white-space: nowrap;
}

.community-registration tbody tr {
  border-bottom: 1px solid var(--color-divider);
  transition: background var(--t-fast);
}

.community-registration tbody tr:last-child { border-bottom: none; }
.community-registration tbody tr:nth-child(even) { background: var(--color-surface-2); }
.community-registration tbody tr:hover { background: var(--color-accent-light) !important; }

.community-registration tbody td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--color-text-body);
  vertical-align: middle;
}

.community-registration tfoot td {
  padding: var(--sp-3) var(--sp-4);
  font-weight: 700;
  background: var(--color-surface-2);
  border-top: 2px solid var(--color-border);
}

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}

/* ── Progressive Portal dashboard — reset our aggressive overrides ──
   The .pcp-page is the participant dashboard loaded after registration.
   Our global table, card, and h2 rules must NOT bleed into it. */

/* Reset table styles */
.pcp-page table,
.pcp-page .ui.table {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.pcp-page thead,
.pcp-page .ui.table thead {
  background: transparent !important;
  color: inherit !important;
}
.pcp-page thead th,
.pcp-page .ui.table thead th {
  color: inherit !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: inherit !important;
}
.pcp-page tbody tr {
  border-bottom: none !important;
}
.pcp-page tbody tr:hover {
  background: transparent !important;
}

/* Reset card styles */
.pcp-page .ui.card {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: none !important;
  transition: box-shadow var(--t), transform var(--t) !important;
}
.pcp-page .ui.card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Reset h2 heading styles — keep font but remove border-left/border-bottom */
.pcp-page h2,
.pcp-page .ui.header {
  border-left: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  background: transparent !important;
  text-transform: none !important;
}

/* Keep body background consistent */
.pcp-page {
  background: var(--color-bg) !important;
}


/* ============================================================================
   18. CARDS, PANELS, SEGMENTS (non-registration ones)
   ============================================================================ */

/* Generic card — not the main-content segment */
.ui.card:not(.main-content) {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--color-border) !important;
  transition: box-shadow var(--t), transform var(--t) !important;
}

.ui.card:not(.main-content):hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Info box utility */
.info-box {
  background: var(--color-accent-light);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}

/* Warning box utility */
.warning-box {
  background: var(--color-gold-light);
  border-left: 4px solid var(--color-gold);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}


/* ============================================================================
   19. ALERTS, MESSAGES & VALIDATION
   ============================================================================ */

.ui.message {
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-style: normal !important;
}

/* Validation errors box */
#validationErrorsBox.ui.negative.message,
.ui.error.message {
  background: #FFEBEE !important;
  border: 1px solid #EF9A9A !important;
  border-left: 4px solid var(--color-primary) !important;
  border-top: none !important;
  border-radius: 0 var(--r) var(--r) 0 !important;
  color: var(--color-primary-dark) !important;
}

.ui.success.message {
  background: #E8F5E9 !important;
  border: 1px solid #A5D6A7 !important;
  border-left: 4px solid #388E3C !important;
  color: #1B5E20 !important;
  border-top: none !important;
}

.ui.warning.message {
  background: var(--color-gold-light) !important;
  border: 1px solid #FFD54F !important;
  border-left: 4px solid var(--color-gold) !important;
  color: #7A5300 !important;
  border-top: none !important;
}

.ui.info.message {
  background: var(--color-accent-light) !important;
  border: 1px solid #90CAF9 !important;
  border-left: 4px solid var(--color-accent) !important;
  color: var(--color-accent-dark) !important;
  border-top: none !important;
}

/* Loader */
.ui.loader,
.ui.text.loader {
  color: var(--color-accent) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}

/* Progress bar */
.ui.progress {
  border-radius: var(--r-full) !important;
  background: var(--color-surface-2) !important;
  height: 0.5rem !important;
  overflow: hidden !important;
}

.ui.progress .bar {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent)) !important;
  border-radius: var(--r-full) !important;
  transition: width var(--t-slow) !important;
}


/* ============================================================================
   20. SESSION & EVENT COMPONENTS
   ============================================================================ */

/* Session type badge */
.event-session-type-container {
  background: var(--color-accent) !important;
  color: var(--color-text-inverse) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: var(--sp-2) var(--sp-4) !important;
  border-radius: var(--r-full) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--sp-1) !important;
  box-shadow: var(--shadow-navy) !important;
  transition: background var(--t), transform var(--t) !important;
}

.event-session-type-container:hover {
  background: var(--color-accent-dark) !important;
  transform: translateY(-1px) !important;
}

/* Hide auto-generated "Description:" label */
.titled-div.eventsession-view-description > span:first-child {
  display: none !important;
}

/* Mobile menu logo */
#pcp-topmenu-mobile .pcp-topmenu-mobile-logo {
  display: none !important;
}

/* Circular icon ring */
i.circular.icon {
  box-shadow: 0 0 0 0.1em rgba(40,73,146,0.4) inset !important;
}


/* ============================================================================
   21. MODALS
   Target: .session-refresher-modal, .component-duplicatecontactcheckdialog
   ============================================================================ */

/* Session refresh modal */
.session-refresher-modal .header,
.ui.modal .header {
  font-family: var(--font-serif) !important;
  color: var(--color-accent) !important;
  font-style: normal !important;
  font-size: 1.125rem !important;
}

.session-refresher-modal .ui.green.button {
  background: var(--color-primary) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  border-radius: var(--r) !important;
}

/* Duplicate contact dialog */
.component-duplicatecontactcheckdialog .ui.modal .header {
  font-family: var(--font-serif) !important;
  color: var(--color-accent) !important;
  font-size: 1.125rem !important;
  font-style: normal !important;
}

.component-duplicatecontactcheckdialog .ui.items .item .content .name {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  font-style: normal !important;
}

.component-duplicatecontactcheckdialog .ui.items .item .content .description {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  color: var(--color-text-muted) !important;
  font-style: normal !important;
}

.component-duplicatecontactcheckdialog .ui.green.button,
.component-duplicatecontactcheckdialog .ui.button {
  border-radius: var(--r) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}

.component-duplicatecontactcheckdialog .ui.green.button {
  background: var(--color-accent) !important;
  color: #fff !important;
}


/* ============================================================================
   22. COOKIE CONSENT BANNER
   ============================================================================ */

.cookie-consent-banner {
  font-family: var(--font-sans) !important;
  background: #fff !important;
  border-top: 3px solid var(--color-primary) !important;
  box-shadow: 0 -4px 20px rgba(26,30,46,0.12) !important;
  color: var(--color-text-body) !important;
}

.cookie-consent-banner-header {
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  font-style: normal !important;
  font-family: var(--font-sans) !important;
}

.cookie-consent-banner .ui.button {
  font-family: var(--font-sans) !important;
  border-radius: var(--r) !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
}

.cookie-consent-banner .ui.green.button {
  background: var(--color-accent) !important;
  color: #fff !important;
}

.cookie-consent-banner-change {
  font-family: var(--font-sans) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
}


/* ============================================================================
   23. PCP HEADER / TOP NAVIGATION (community portal header)
   ============================================================================ */

.pcp-header {
  padding: var(--sp-3) var(--sp-6);
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.93);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: background var(--t), box-shadow var(--t);
}

.pcp-page .regular-menu-wrapper .pcp-topmenu-regular,
.pcp-page .mobile-menu-wrapper .pcp-topmenu-mobile {
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  box-shadow: var(--shadow-navy);
  border-radius: var(--r-md);
}

.pcp-page .regular-menu-wrapper .pcp-topmenu-regular.ui.menu .item,
.pcp-page .mobile-menu-wrapper .pcp-topmenu-mobile.ui.menu .item,
.pcp-page .regular-menu-wrapper .pcp-topmenu-regular.ui.menu .item > a.text,
.pcp-page .mobile-menu-wrapper .pcp-topmenu-mobile.ui.menu .item > a.text {
  color: var(--color-text-inverse) !important;
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
}

.pcp-page .regular-menu-wrapper .pcp-topmenu-regular.ui.menu .item:hover,
.pcp-page .mobile-menu-wrapper .pcp-topmenu-mobile.ui.menu .item:hover {
  background: rgba(255,255,255,0.15) !important;
}

.pcp-page .ui.menu .active.item {
  background: var(--color-primary) !important;
  color: #fff !important;
}


/* ============================================================================
   24. FOOTER
   Covers two footer contexts:
   A) b-com registration footer → #page-footer
   B) Custom injected footer HTML → <footer> with inline styles
      (inline styles are overridden via !important)
   ============================================================================ */

/* ── A: b-com registration page footer ── */
#page-footer {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-bg) !important;
  text-align: center !important;
  padding: 0.5rem 1rem !important;
  margin-top: 0 !important;
  border-top: 1px solid var(--color-divider) !important;
}

#page-footer span,
#page-footer a {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  color: var(--color-accent) !important;
}

#page-footer a:hover {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
}

/* ── Critical override: when <footer> is nested inside #page-footer,
   #page-footer a (specificity 101) beats footer a (specificity 2).
   This selector matches footer links inside page-footer with higher
   specificity to restore the white colour on navy background. ── */
#page-footer footer a {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 600 !important;
}

#page-footer footer a:hover {
  color: var(--color-primary-light) !important;
  opacity: 1 !important;
}

/* ── B: Custom injected <footer> element ──
   Compact text-only footer — no sponsor logos, no columns.
   Inline styles (background-color:#5628a3 etc.) overridden via !important. */

footer {
  background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%) !important;
  background-color: var(--color-accent) !important;   /* fallback */
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  /* Compact padding — this is a text-only footer, not a sponsor/logo footer */
  padding: 0.75rem 1.5rem !important;
  text-align: center !important;
  border-top: 3px solid var(--color-primary) !important;
  /* Sit naturally at bottom of page — do NOT use position:fixed */
  position: static !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Inner wrapper — keep content centred and constrained */
footer > div {
  max-width: 860px !important;
  margin: 0 auto !important;
  text-align: center !important;
  line-height: 1.6 !important;
}

/* All paragraphs */
footer p {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 0.2rem 0 !important;
  font-style: normal !important;
  text-align: center !important;
}

/* Company name — full white, slightly larger */
footer p:first-child {
  color: #FFFFFF !important;
  font-size: var(--fs-base) !important;
  margin-bottom: 0.3rem !important;
}

footer strong,
footer b {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-family: var(--font-sans) !important;
}

/* ── Email link — high contrast, clearly clickable ──
   Previous rgba(255,255,255,0.9) was blending into navy background. */
footer a {
  color: #FFFFFF !important;           /* pure white — max contrast */
  text-decoration: underline !important; /* always underlined so it reads as a link */
  text-underline-offset: 2px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  transition: color var(--t-fast), opacity var(--t-fast) !important;
}

footer a:hover {
  color: var(--color-primary-light) !important;  /* light red on hover */
  text-decoration: underline !important;
  opacity: 1 !important;
}

/* Copyright / bottom line — muted, separated */
footer p:last-child {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: var(--fs-xs) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-top: 0.4rem !important;
  margin-top: 0.4rem !important;
}

/* ── Progressive Portal footer ── */
.pcp-footer,
.site-footer {
  background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent)) !important;
  color: var(--color-text-inverse) !important;
  padding: var(--sp-4) var(--sp-6) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  text-align: center !important;
}

.pcp-footer a,
.site-footer a {
  color: rgba(255,255,255,0.9) !important;
  transition: color var(--t-fast) !important;
}

.pcp-footer a:hover,
.site-footer a:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

.footer-copyright {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.45);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--sp-3);
}


/* ============================================================================
   25. ANIMATIONS & TRANSITIONS
   ============================================================================ */

/* Page entrance */
.pcp-page, .community-registration {
  animation: imece-pageLoad 0.45s ease both;
}

@keyframes imece-pageLoad {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Content slide-in (wizard step transitions) */
.main-content.ui.segment {
  animation: imece-slideIn 0.4s ease both;
}

@keyframes imece-slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-2) 25%,
    var(--color-border) 50%,
    var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: imece-skeleton 1.4s ease infinite;
  border-radius: var(--r);
}

@keyframes imece-skeleton {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Spin (loaders) */
@keyframes imece-spin {
  to { transform: rotate(360deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  button#signupButton { animation: none !important; }
}


/* ============================================================================
   26. RESPONSIVE / MOBILE-FIRST
   ============================================================================ */

/* ── Tablet and below (< 768px) ── */
@media (max-width: 767px) {

  .main-content.ui.segment {
    padding: 1.25rem 1rem 1.5rem !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  .component-registration-introduction h1.ui.dividing.header {
    font-size: 1.25rem !important;
  }

  .navbar .ui.steps.nav .step,
  .navbar .ui.steps.nav a.step,
  .navbar .ui.steps.nav span.step {
    font-size: 0.625rem !important;
    padding: 0.625rem 0.375rem !important;
    letter-spacing: 0.01em !important;
  }

  a#contactUsButton {
    width: 100% !important;
    justify-content: center !important;
    margin-top: var(--sp-4) !important;
  }

  /* On mobile, stack the intro grid vertically */
  .component-registration-introduction .ui.relaxed.stackable.grid,
  .component-registration-introduction .ui.stackable.grid {
    grid-template-columns: 1fr !important;
  }

  .component-registration-introduction .ui.relaxed.stackable.grid > .four.wide.column,
  .component-registration-introduction .ui.relaxed.stackable.grid > .four.wide.right.aligned.column {
    justify-content: flex-start !important;
  }

  .component-welcome button#signupButton {
    width: 100% !important;
    min-width: unset !important;
  }

  .navigation-bottom {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  .navigation-bottom button.next,
  .navigation-bottom button.back {
    width: 100% !important;
    justify-content: center !important;
    float: none !important;
  }

  .ui.two.column.relaxed.grid {
    display: block !important;
  }

  .ui.vertical.divider.welcome-or {
    display: none !important;
  }
}

/* ── Mobile (< 480px) ── */
@media (max-width: 479px) {

  body { font-size: 0.875rem; }

  .navbar .ui.steps.nav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .navbar .ui.steps.nav::-webkit-scrollbar { display: none !important; }

  .navbar .ui.steps.nav .step {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: max-content !important;
  }

  .component-registration-introduction h1.ui.dividing.header {
    font-size: 1.125rem !important;
  }
}

/* ── Desktop (> 1024px) ── */
@media (min-width: 1024px) {
  /* Card matches banner width — no max-width constraint */
  .main-content.ui.segment {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 0 0 0 !important;  /* Full-width = no rounded corners needed */
  }
}


/* ============================================================================
   27. ACCESSIBILITY & FOCUS
   ============================================================================ */

:focus-visible {
  outline: 3px solid var(--color-primary) !important;
  outline-offset: 3px !important;
  border-radius: var(--r-sm) !important;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  background: var(--color-primary);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  border-radius: 0 0 var(--r) var(--r);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
  transition: top var(--t-fast);
}

.skip-link:focus { top: 0; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ============================================================================
   28. PRINT STYLES
   ============================================================================ */

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  .navbar, .pcp-header, .navigation-bottom,
  #bcom-ios-install, a#contactUsButton,
  .cookie-consent-banner, .skip-link {
    display: none !important;
  }

  .main-content.ui.segment {
    box-shadow: none !important;
    border: 1pt solid #ccc !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1cm !important;
    border-radius: 0 !important;
    animation: none !important;
  }

  a { color: #000 !important; text-decoration: underline; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    color: #000 !important;
  }

  table { border-collapse: collapse; page-break-inside: auto; }
  tr    { page-break-inside: avoid; }
}


/* ============================================================================
   29. CONSENT PAGE — v5 FINAL
   HTML (simplified new structure):
     .component-consent > .ui.form
       .field > div > h2                              — section headings
       .field.required > .ui.checkbox                 — mandatory checkboxes
       .field > .ui.checkbox                          — optional checkboxes
       .field > div > p                               — body/disclaimer text
     div#consentNavigation                            — Back + Next buttons
   ============================================================================ */

/* ── Visited step (Sign Up) — navy tint ── */
.navbar .ui.steps.nav a.step:not(.disabled) {
  background: var(--color-accent-light) !important;
  color: var(--color-accent) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.navbar .ui.steps.nav a.step:not(.disabled):hover {
  background: var(--color-accent-mid) !important;
}

/* ── Consent wrapper ── */
.component-consent {
  padding: 0 !important;
}
.component-consent .ui.form {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Global text fixes inside consent ── */
.component-consent p,
.component-consent li,
.component-consent div,
.component-consent span {
  text-align: left !important;
  font-style: normal !important;
}

/* ── h2 headings — BCom applies uppercase; override explicitly ── */
.component-consent h2,
.component-consent .field > div > h2,
.component-consent .field div h2 {
  font-family: var(--font-serif) !important;
  font-size: var(--fs-xl) !important;
  font-weight: bold !important;
  color: var(--color-accent) !important;
  text-transform: none !important;
  margin: 1.5rem 0 1rem !important;
  padding: 0.625rem 0.875rem !important;
  border-left: 4px solid var(--color-primary) !important;
  border-bottom: 1px solid var(--color-divider) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  background: transparent !important;
}
.component-consent .field:first-child h2,
.component-consent .field:first-of-type h2 {
  margin-top: 0 !important;
}

/* ── h3 headings (legacy long-form consent) ── */
.component-consent h3 {
  font-family: var(--font-serif) !important;
  font-size: var(--fs-lg) !important;
  font-weight: bold !important;
  color: var(--color-accent) !important;
  text-transform: none !important;
  margin: 1.5rem 0 0.75rem !important;
  padding: 0.5rem 0.75rem !important;
  border-left: 4px solid var(--color-primary) !important;
  border-bottom: 1px solid var(--color-divider) !important;
  line-height: 1.3 !important;
}
.component-consent .field:first-child h3 {
  margin-top: 0 !important;
}

/* ── Body text / disclaimer ── */
.component-consent .field > div p {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  line-height: 1.75 !important;
  color: var(--color-text-body) !important;
  text-align: left !important;
  font-style: normal !important;
  margin-bottom: 0.75rem !important;
}
.component-consent .field > div p strong,
.component-consent .field > div p b {
  font-weight: 700 !important;
  color: var(--color-text) !important;
}
.component-consent .field > div p a {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
}

/* ── Fix inline style="color:purple" on preferences.asme.org link ──
   This link in the marketing disclaimer has a hardcoded purple colour.
   Override it to our ASME Red link style. */
.component-consent .field > div p a[href*="preferences.asme.org"],
.component-consent a[style*="color: purple"],
.component-consent a[style*="color:purple"] {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
}

/* ── GDPR: Required field badge ──
   Adds a small "REQUIRED" label after mandatory consent checkboxes
   so registrants know immediately what must be ticked. */
.component-consent .field.required > .ui.checkbox::before {
  content: 'REQUIRED' !important;
  display: block !important;
  position: absolute !important;
  top: -0.75rem !important;
  right: 0.875rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: var(--color-primary) !important;
  background: var(--color-primary-light) !important;
  padding: 0.125rem 0.5rem !important;
  border-radius: var(--r-full) !important;
  border: none !important;
  line-height: 1.4 !important;
}

/* ── Tighten heading-only .field boxes ──
   The intro "Before continuing..." and "Stay Connected" headings
   are wrapped in .field divs that get the full white card treatment,
   creating excess whitespace. Reduce their padding. */
.component-consent .field:has(h2):not(:has(.ui.checkbox)) {
  padding: 0.5rem 0 0.25rem !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-left: none !important;
  margin-bottom: 0.25rem !important;
}

/* ── OL numbered list ── */
.component-consent ol {
  list-style: decimal !important;
  padding-left: 1.5rem !important;
  margin: 0.75rem 0 1rem !important;
}
.component-consent ol > li {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  color: var(--color-text-body) !important;
  line-height: 1.7 !important;
  padding: 0 0 0 0.5rem !important;
  margin-bottom: 1rem !important;
  list-style-type: decimal !important;
}
.component-consent ol > li > p {
  margin-top: 0 !important;
  margin-bottom: 0.25rem !important;
}
.component-consent ol > li::before {
  display: none !important;
  content: none !important;
}

/* ── Nested UL bullets ── */
.component-consent ol ul,
.component-consent .field > div ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0.5rem 0 0.75rem !important;
}
.component-consent ol ul li,
.component-consent .field > div ul li {
  position: relative !important;
  padding: 0.3rem 0 0.3rem 1.5rem !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  color: var(--color-text-body) !important;
  text-align: left !important;
  line-height: 1.6 !important;
  border-bottom: none !important;
}
.component-consent ol ul li::before,
.component-consent .field > div ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0.25rem !important;
  top: 0.75rem !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--color-accent) !important;
  border-radius: 50% !important;
  transform: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   CHECKBOX — v5 FINAL (bypass Semantic UI pseudo-elements entirely)

   After 4 iterations fighting Semantic UI's label::before/::after system,
   the definitive fix is:
     1. Make native <input type="checkbox"> VISIBLE  (opacity:1, position:static)
     2. HIDE Semantic UI's fake checkbox (label::before, label::after)
     3. Use flexbox on .ui.checkbox for reliable alignment
   This works correctly with all browsers and all b-com content.
   ════════════════════════════════════════════════════════════════════════ */

/* Container: flex row */
.component-consent .field > .ui.checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0.875rem !important;
  padding: 1rem 1.25rem !important;
  background: var(--color-accent-light) !important;
  border-left: 4px solid var(--color-accent) !important;
  border-radius: 0 var(--r) var(--r) 0 !important;
  margin: 0.625rem 0 !important;
  position: relative !important;
  cursor: pointer !important;
  transition: background var(--t-fast) !important;
}
.component-consent .field > .ui.checkbox:hover {
  background: var(--color-accent-mid) !important;
}
.component-consent .field.required > .ui.checkbox {
  background: #FDECEA !important;
  border-left-color: var(--color-primary) !important;
}
.component-consent .field.required > .ui.checkbox:hover {
  background: #FBDBD8 !important;
}

/* Native input — VISIBLE */
.component-consent .ui.checkbox input[type="checkbox"] {
  opacity: 1 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  flex-shrink: 0 !important;
  margin: 0.2rem 0 0 !important;
  cursor: pointer !important;
  accent-color: var(--color-primary) !important;
  border: none !important;
  z-index: auto !important;
}

/* Hide Semantic UI's fake checkbox visuals */
.component-consent .ui.checkbox label::before,
.component-consent .ui.checkbox label::after {
  display: none !important;
  content: none !important;
}

/* Label — flex item, no Semantic UI left-padding */
.component-consent .ui.checkbox label {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--color-accent) !important;
  cursor: pointer !important;
  line-height: 1.6 !important;
  padding-left: 0 !important;
  margin: 0 !important;
  display: block !important;
  flex: 1 !important;
}
.component-consent .ui.checkbox label b,
.component-consent .ui.checkbox label strong {
  font-weight: 700 !important;
  color: var(--color-accent) !important;
}
.component-consent .ui.checkbox label p {
  margin: 0 !important;
  font-style: normal !important;
}
.component-consent .ui.checkbox label a {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

/* Remove ALL floating asterisks */
.component-consent .field.required::after,
.component-consent .field.required > .ui.checkbox::after,
.component-consent .field.required > label::after {
  display: none !important;
  content: none !important;
}

/* Field spacing */
.component-consent .ui.form .field {
  margin-bottom: 0.25rem !important;
}

/* ── CONSENT NAVIGATION BUTTONS ── */
#consentNavigation {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid var(--color-divider) !important;
  flex-wrap: wrap !important;
}
#consentNavigation .ui.button:not(.green):not(.approve):not(.cancel) {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: transparent !important;
  color: var(--color-accent) !important;
  border: 2px solid var(--color-accent) !important;
  border-radius: var(--r) !important;
  padding: 0.75rem 1.75rem !important;
  min-height: 44px !important;
  transition: all var(--t) !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
#consentNavigation .ui.button:not(.green):not(.approve):not(.cancel):hover {
  background: var(--color-accent-light) !important;
}
#consentNavigation .ui.green.button,
#consentNavigation .ui.green.icon.labeled.button {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: var(--color-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 0.75rem 1.75rem !important;
  min-height: 44px !important;
  box-shadow: var(--shadow-red) !important;
  transition: all var(--t) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
#consentNavigation .ui.green.button:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-1px) !important;
}
#consentNavigation .ui.green.button i.icon,
#consentNavigation .ui.green.icon.labeled.button i.icon {
  position: static !important;
  background: transparent !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 1rem !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1 !important;
}

/* ── Marketing modal ── */
#marketing-consent-modal .header {
  font-family: var(--font-serif) !important;
  color: var(--color-accent) !important;
  font-size: var(--fs-lg) !important;
}
#marketing-consent-modal .content p {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  color: var(--color-text-body) !important;
  text-align: left !important;
}
#marketing-consent-modal .ui.cancel.button {
  background: transparent !important;
  color: var(--color-accent) !important;
  border: 2px solid var(--color-accent) !important;
  border-radius: var(--r) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}
#marketing-consent-modal .ui.approve.button {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--r) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
}

/* Responsive */
@media (max-width: 767px) {
  #consentNavigation {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }
  #consentNavigation .ui.button,
  #consentNavigation .ui.green.button {
    width: 100% !important;
    justify-content: center !important;
  }
  .component-consent h2 {
    font-size: var(--fs-lg) !important;
  }
  .component-consent h3 {
    font-size: var(--fs-md) !important;
  }
}




/* ============================================================================
   30. REGISTRATION PAGE — v2 (corrected from actual outerHTML)
   
   Component structure:
     .component-contact-information > h2            "Contact Details"
       .ui.form.segment > .fields                   form grid
     .component-address-information > h3            "Main Address"
     .contact-info-requiredfields > span            "Required fields..."
     .information-component > h2                    "Registration"
       div[data-bind="html: content"] > p / ul      info body text
     .component-service-reservation > h2            "Registration Types"
       .ui.form.segment > .ui.input.serviceLine
         .ui.checkbox.radio > input[type=radio] + label  ← class ORDER matters
   .navigation-bottom > button.next + button.back
   ============================================================================ */

/* ── Fix 1: h2 section headings (Contact Details, Registration, Reg Types) ──
   BCom applies text-transform:uppercase to h2 globally. These components use
   h2 for their section titles. Match our ASME serif heading style. */
.component-contact-information h2,
.information-component h2,
.component-service-reservation h2 {
  font-family: var(--font-serif) !important;
  font-size: var(--fs-xl) !important;
  font-weight: bold !important;
  color: var(--color-accent) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  margin: 1.5rem 0 1rem !important;
  padding: 0.5rem 0.875rem !important;
  border-left: 4px solid var(--color-primary) !important;
  border-bottom: 1px solid var(--color-divider) !important;
  line-height: 1.3 !important;
  background: transparent !important;
}

.component-contact-information h2:first-child,
.information-component h2:first-child,
.component-service-reservation h2:first-child {
  margin-top: 0 !important;
}

/* ── Fix 2: "Main Address" — h3 inside .component-address-information ── */
.component-address-information h3,
.component-address-information h3 span {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-md) !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 1.5rem 0 0.875rem !important;
  padding: 0.375rem 0 0.375rem 0.875rem !important;
  border-left: 3px solid var(--color-accent-mid) !important;
  border-bottom: none !important;
  line-height: 1.4 !important;
  background: transparent !important;
}

/* ── Fix 3: "Required fields" note ── */
.contact-info-requiredfields {
  margin: 1rem 0 0.25rem !important;
}
.contact-info-requiredfields span {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  color: var(--color-text-muted) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* ── Fix 4: Registration info body text ──
   .information-component > div contains raw <p>, <ul>, <li> from html binding.
   BCom bleeds serif italic into these. Reset to DM Sans. */
.information-component p,
.information-component li,
.information-component span:not(.servicePrice) {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-size: var(--fs-base) !important;
  color: var(--color-text-body) !important;
  line-height: 1.75 !important;
}

.information-component strong,
.information-component b {
  font-weight: 700 !important;
  color: var(--color-text) !important;
  font-style: normal !important;
}

.information-component a {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
}

/* Bullet list inside information component */
.information-component ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0.5rem 0 1rem !important;
}

.information-component ul li {
  position: relative !important;
  padding: 0.25rem 0 0.25rem 1.5rem !important;
  border-bottom: none !important;
}

.information-component ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0.3rem !important;
  top: 0.72rem !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--color-primary) !important;
  border-radius: 50% !important;
  transform: none !important;
}

/* ── Fix 5: Phone icon — .ui.left.labeled.icon.input ──
   The phone icon is rendered as <i class="ui inverted icon phone size32">.
   Semantic UI's "inverted" class creates a dark background icon.
   We need to make it lighter/transparent to blend with inputs. */
.ui.left.labeled.icon.input > i.icon {
  background: var(--color-bg-alt) !important;
  color: var(--color-text-muted) !important;
  border-right: 1px solid var(--color-border) !important;
  border-radius: var(--r) 0 0 var(--r) !important;
  opacity: 1 !important;
  font-size: 0.9rem !important;
  width: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Fix 6: RADIO BUTTONS — .ui.checkbox.radio (class order matters!) ──
   The actual HTML class is "ui checkbox radio" NOT "ui radio checkbox".
   Same v5 bypass: make native input visible, hide Semantic UI fakes. */

/* serviceLine wrapper — subtle hover, suppress BCom default borders */
.ui.input.serviceLine {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* The radio container */
.ui.checkbox.radio {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.875rem 1rem !important;
  margin: 0.375rem 0 !important;
  cursor: pointer !important;
  background: transparent !important;
  border-radius: var(--r) !important;
  border-left: 3px solid transparent !important;
  transition: background var(--t-fast), border-color var(--t-fast) !important;
  width: 100% !important;
}

.ui.checkbox.radio:hover {
  background: var(--color-accent-light) !important;
  border-left-color: var(--color-accent) !important;
}

/* Native radio input — VISIBLE */
.ui.checkbox.radio input[type="radio"] {
  opacity: 1 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: var(--color-primary) !important;
  z-index: auto !important;
}

/* Hide Semantic UI's fake radio pseudo-elements */
.ui.checkbox.radio label::before,
.ui.checkbox.radio label::after {
  display: none !important;
  content: none !important;
}

/* Radio label — no left padding, flex handles spacing */
.ui.checkbox.radio label {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  cursor: pointer !important;
  padding-left: 0 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

/* Service name span inside label */
.ui.checkbox.radio label > span:first-child {
  flex: 1 !important;
  font-weight: 500 !important;
}

/* Price tag */
.ui.checkbox.radio label .servicePrice,
span.servicePrice {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  font-size: var(--fs-sm) !important;
  background: var(--color-primary-light) !important;
  padding: 0.125rem 0.625rem !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Selected radio row highlight */
.ui.checkbox.radio:has(input:checked) {
  background: var(--color-accent-light) !important;
  border-left-color: var(--color-primary) !important;
}

/* ── Fix 7: NEXT / BACK button positioning ──
   HTML order: <button.next style="float:right"> first, then <button.back>.
   Flex + order overrides float. Back (order:1) goes left, Next (order:2) right. */
.navigation-bottom {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid var(--color-divider) !important;
}

/* NEXT — right side */
.navigation-bottom button.next {
  order: 2 !important;
  float: none !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 0.75rem 1.75rem !important;
  min-height: 44px !important;
  box-shadow: var(--shadow-red) !important;
  cursor: pointer !important;
  display: inline-flex;   /* NO !important — Knockout's display:none must win */
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all var(--t) !important;
}

.navigation-bottom button.next:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-1px) !important;
}

/* NEXT icon — flat, no box */
.navigation-bottom button.next i.icon {
  position: static !important;
  background: transparent !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: 1rem !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  line-height: 1 !important;
}

/* BACK — left side */
.navigation-bottom button.back {
  order: 1 !important;
  float: none !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: transparent !important;
  color: var(--color-accent) !important;
  border: 2px solid var(--color-accent) !important;
  border-radius: var(--r) !important;
  padding: 0.75rem 1.75rem !important;
  min-height: 44px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex;   /* NO !important — Knockout's display:none must win */
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all var(--t) !important;
}

.navigation-bottom button.back:hover {
  background: var(--color-accent-light) !important;
}

/* BACK icon — flat */
.navigation-bottom button.back i.icon {
  position: static !important;
  background: transparent !important;
  color: var(--color-accent) !important;
  font-size: 1rem !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  line-height: 1 !important;
}

/* Responsive */
@media (max-width: 767px) {
  .navigation-bottom {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }
  .navigation-bottom button.next,
  .navigation-bottom button.back {
    width: 100% !important;
    justify-content: center !important;
    order: unset !important;
  }
  .component-contact-information h2,
  .information-component h2,
  .component-service-reservation h2 {
    font-size: var(--fs-lg) !important;
  }
}

/* ── Global navigation-bottom visibility control ──
   b-com has TWO nav systems. Component-specific (#consentNavigation,
   #summaryNavigation) take priority. Hide .navigation-bottom when those
   are present — they handle Back/Next/Confirm for those pages. */
.main-content:has(#consentNavigation) .navigation-bottom,
.main-content:has(#summaryNavigation) .navigation-bottom {
  display: none !important;
}

/* ============================================================================
   31. CONFIRM PAGE — .component-summary
   HTML:
     .component-summary > h2                        "Summary"
     .summary-header.message > span                 instruction text
     table.summary-table                            summary table
       h4.ui.header.red.registrant-summary-name     "Roma Test001"
       td.module-line                               "Registration"
       td.serviceprovider-line                      "Registration Types"
       td.service-line + td.occurrence-price-cell   "Delegate" + "1 x Free"
       tr.total td                                  "Nothing to be paid..."
     div#summaryNavigation > button.ui.button (Back)
                           + button.ui.green.icon.labeled.button (Confirm)
   ============================================================================ */

/* ── h2 "Summary" heading ── */
.component-summary h2 {
  font-family: var(--font-serif) !important;
  font-size: var(--fs-xl) !important;
  font-weight: bold !important;
  color: var(--color-accent) !important;
  text-transform: none !important;   /* override BCom uppercase */
  letter-spacing: 0.01em !important;
  margin: 0 0 1.25rem !important;
  padding: 0.5rem 0.875rem !important;
  border-left: 4px solid var(--color-primary) !important;
  border-bottom: 1px solid var(--color-divider) !important;
  line-height: 1.3 !important;
  background: transparent !important;
}

/* ── Instruction text ── */
.summary-header.message {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  color: var(--color-text-body) !important;
  text-align: left !important;
  font-style: normal !important;
  margin-bottom: 1.5rem !important;
  padding: 0.875rem 1rem !important;
  background: var(--color-bg-alt) !important;
  border-left: 3px solid var(--color-accent) !important;
  border-radius: 0 var(--r) var(--r) 0 !important;
  line-height: 1.6 !important;
}

/* ── Summary table ── */
.summary-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-sans) !important;
  margin-bottom: 1.5rem !important;
}

/* Registrant name — h4.ui.header.red inside td */
.summary-table h4.registrant-summary-name {
  font-family: var(--font-serif) !important;
  font-size: var(--fs-lg) !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  text-transform: none !important;
  margin: 0.75rem 0 0.5rem !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1.3 !important;
  background: transparent !important;
}

/* Module row — "Registration" */
.summary-table td.module-line {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding: 0.625rem 0.75rem !important;
  background: var(--color-accent-light) !important;
  border-bottom: 1px solid var(--color-divider) !important;
  text-decoration: none !important;        /* suppress BCom underline */
}

/* Suppress underline on any span/a inside module-line */
.summary-table td.module-line span,
.summary-table td.module-line a {
  text-decoration: none !important;
  color: var(--color-accent) !important;
}

/* Service provider row — "Registration Types" */
.summary-table td.serviceprovider-line {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--color-text-muted) !important;
  padding: 0.5rem 0.75rem 0.5rem 1.5rem !important;
  border-bottom: 1px solid var(--color-divider) !important;
  font-style: normal !important;
  text-transform: none !important;
}

/* Service row — "Delegate (Non-Member)" */
.summary-table td.service-line {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  padding: 0.625rem 0.75rem 0.625rem 2.25rem !important;
  border-bottom: 1px solid var(--color-divider) !important;
  font-style: normal !important;
  text-transform: none !important;
}

/* Price cell — "1 x Free" */
.summary-table td.occurrence-price-cell {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  color: var(--color-text-muted) !important;
  text-align: right !important;
  padding: 0.625rem 0.75rem !important;
  white-space: nowrap !important;
  border-bottom: 1px solid var(--color-divider) !important;
}

/* "Free" / price span inside price cell */
.summary-table td.occurrence-price-cell .occurence-price,
.summary-table td.occurrence-price-cell .occurrence-price {
  font-weight: 700 !important;
  color: var(--color-primary) !important;
}

/* Total row — "There is nothing to be paid" */
.summary-table tr.total td {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--color-text-body) !important;
  text-align: right !important;
  padding: 0.875rem 0.75rem !important;
  background: var(--color-bg-alt) !important;
  border-top: 2px solid var(--color-divider) !important;
  font-style: normal !important;
  text-transform: none !important;
}

/* ── Summary Navigation — #summaryNavigation ── */

/* Collapse empty payment-loader div (always rendered by b-com even when
   no payment is required — default min-height creates a large blank gap) */
.component-summary .payment-loader {
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.component-summary .payment-loader .ui.large.dimmer.inverted.disabled {
  display: none !important;
}
#summaryNavigation {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid var(--color-divider) !important;
  flex-wrap: wrap !important;
}

/* BACK button */
#summaryNavigation .ui.button:not(.green):not(.approve):not(.cancel) {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: transparent !important;
  color: var(--color-accent) !important;
  border: 2px solid var(--color-accent) !important;
  border-radius: var(--r) !important;
  padding: 0.75rem 1.75rem !important;
  min-height: 44px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all var(--t) !important;
}
#summaryNavigation .ui.button:not(.green):hover {
  background: var(--color-accent-light) !important;
}

/* CONFIRM button — ASME Red (override global green → navy mapping) */
#summaryNavigation .ui.green.button,
#summaryNavigation .ui.green.icon.labeled.button {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: var(--color-primary) !important;   /* ASME Red, NOT navy */
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 0.75rem 1.75rem !important;
  min-height: 44px !important;
  box-shadow: var(--shadow-red) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all var(--t) !important;
}
#summaryNavigation .ui.green.button:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-1px) !important;
}

/* Confirm button icon — flat, no box */
#summaryNavigation .ui.green.button i.icon,
#summaryNavigation .ui.green.icon.labeled.button i.icon {
  position: static !important;
  background: transparent !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 1rem !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  line-height: 1 !important;
}

/* Responsive */
@media (max-width: 767px) {
  #summaryNavigation {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }
  #summaryNavigation .ui.button,
  #summaryNavigation .ui.green.button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================================================
   32. CONFIRMATION PAGE — .component-registrationconfirmation
   HTML:
     .component-registrationconfirmation.ui.form.segment
       h2                                             "Thank you for registering!"
       p                                              confirmation message
       .ui.stackable.grid
         .contact-summary > table.ui.basic.table.borderless
           td "Your Identifier:" + td > b "ASMEINDIA-I/49"
           td "Contact information:" + td > dl > dt × 5
         .payment-summary > h2                        "Payment summary"
           table.ui.basic.table.borderless
             td label + td value (Total, To be paid, Received, Balance)
       div#summaryNavigation
         button.new-registration  "New Registration"
         button.registration-finish "Finish"
   NOTE: #summaryNavigation buttons already styled ASME Red by Section 31.
   ============================================================================ */

/* ── Wrapper ── */
.component-registrationconfirmation {
  padding: 0 !important;
}

/* ── ALL h2 headings — suppress BCom uppercase ── */
.component-registrationconfirmation h2 {
  font-family: var(--font-serif) !important;
  font-size: var(--fs-xl) !important;
  font-weight: bold !important;
  color: var(--color-accent) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  margin: 0 0 1rem !important;
  padding: 0.5rem 0.875rem !important;
  border-left: 4px solid var(--color-primary) !important;
  border-bottom: 1px solid var(--color-divider) !important;
  line-height: 1.3 !important;
  background: transparent !important;
}

/* ── Thank you message ── */
.component-registrationconfirmation > p,
.component-registrationconfirmation p {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  font-style: normal !important;
  color: var(--color-text-body) !important;
  line-height: 1.75 !important;
  text-align: left !important;
  margin-bottom: 1.5rem !important;
}

/* ── Contact summary table ── */
.contact-summary {
  margin-bottom: 1.5rem !important;
}

.contact-summary table,
.contact-summary .ui.basic.table {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  border-collapse: collapse !important;
  width: 100% !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Row borders — override BCom's large spacing */
.contact-summary .ui.basic.table tr {
  border-bottom: 1px solid var(--color-divider) !important;
  background: transparent !important;
}
.contact-summary .ui.basic.table tr:last-child {
  border-bottom: none !important;
}
.contact-summary .ui.basic.table tr:hover {
  background: transparent !important;
}

/* Label cell (left column) */
.contact-summary .ui.basic.table td:first-child {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--color-text-muted) !important;
  white-space: nowrap !important;
  vertical-align: top !important;
  padding: 0.75rem 1.5rem 0.75rem 0 !important;
  width: 180px !important;
  text-transform: none !important;
  font-style: normal !important;
}

/* Value cell (right column) */
.contact-summary .ui.basic.table td:last-child {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  color: var(--color-text) !important;
  vertical-align: top !important;
  padding: 0.75rem 0 !important;
  font-style: normal !important;
}

/* Bold identifier value */
.contact-summary .ui.basic.table td b,
.contact-summary .ui.basic.table td strong {
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  font-size: var(--fs-md) !important;
  letter-spacing: 0.02em !important;
}

/* Address <dl><dt> block */
.contact-summary dl {
  margin: 0 !important;
  padding: 0 !important;
}
.contact-summary dl dt {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  font-weight: 400 !important;
  color: var(--color-text-body) !important;
  line-height: 1.65 !important;
  font-style: normal !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Payment summary section ── */
.payment-summary {
  margin-top: 1.5rem !important;
}

.payment-summary h2 {
  font-size: var(--fs-lg) !important;
  margin-bottom: 0.875rem !important;
}

.payment-summary table,
.payment-summary .ui.basic.table {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  border-collapse: collapse !important;
  width: 100% !important;
  box-shadow: none !important;
  background: transparent !important;
}

.payment-summary .ui.basic.table tr {
  border-bottom: 1px solid var(--color-divider) !important;
  background: transparent !important;
}
.payment-summary .ui.basic.table tr:last-child {
  border-bottom: none !important;
}
.payment-summary .ui.basic.table tr:hover {
  background: transparent !important;
}

/* Payment label */
.payment-summary .ui.basic.table td:first-child {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--color-text-muted) !important;
  padding: 0.625rem 1.5rem 0.625rem 0 !important;
  width: 180px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  font-style: normal !important;
  text-transform: none !important;
}

/* Payment value */
.payment-summary .ui.basic.table td:last-child {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  padding: 0.625rem 0 !important;
  vertical-align: middle !important;
  font-style: normal !important;
}

/* ── Stackable grid — remove BCom default margin/padding ── */
.component-registrationconfirmation .ui.stackable.grid {
  margin: 0 !important;
}
.component-registrationconfirmation .ui.stackable.grid .column {
  padding: 0 !important;
}

/* Responsive */
@media (max-width: 767px) {
  .component-registrationconfirmation h2 {
    font-size: var(--fs-lg) !important;
  }
  .contact-summary .ui.basic.table td:first-child,
  .payment-summary .ui.basic.table td:first-child {
    width: 130px !important;
    font-size: var(--fs-xs) !important;
  }
}

/*
╔══════════════════════════════════════════════════════════════════════════════╗
║  END — IMECE INDIA 2026 MASTER THEME CSS                                    ║
║                                                                              ║
║  PASTE ENTIRE CONTENT into:                                                  ║
║  b-com Admin → Website Settings → Theme CSS → Clear all → Paste → Save     ║
║                                                                              ║
║  Hard refresh after saving: Ctrl+Shift+R (Win) / Cmd+Shift+R (Mac)         ║
╚══════════════════════════════════════════════════════════════════════════════╝
*/
/* END Theme IMECE2026 */