/*
Theme Name: UM Portal Simple
Theme URI: https://example.com/um-portal-simple
Author: You
Author URI: https://example.com
Description: Modern portal theme in Microsoft Teams colours with force-override CSS.
Version: 1.4.5
License: GPL-2.0-or-later
Text Domain: um-portal-simple
*/

/* ================= Color Palette (Microsoft Teams) — forced ================= */
:root,
.wp-site-blocks,
.editor-styles-wrapper {
  --primary: #4851B1 !important;     /* Teams Purple */
  --secondary: #3F46A0 !important;   /* Darker purple */
  --accent: #B9BEFF !important;      /* Soft lavender accent */
  --bg: #F9FAFB !important;          /* Off White */
  --text: #111827 !important;        /* Charcoal */
  --muted: #EEF1FF !important;       /* Light lavender */
  --border: #D7DAF6 !important;      /* Bluish border */
  --divider: #E6E8FA !important;     /* Table row divider */
  --focus: #8A90E6 !important;       /* Accessible focus ring */

  --pane-gap: 24px !important;
  --sidebar-w: 280px !important;
  --radius-sm: 8px !important;
  --radius-md: 12px !important;
  --radius-lg: 20px !important;

  --shadow-1: 0 1px 2px rgba(0,0,0,.05) !important;
  --shadow-2: 0 4px 12px rgba(0,0,0,.08) !important;
  --shadow-3: 0 8px 24px rgba(0,0,0,.12) !important;

  --maxw: 1200px !important;
  --gutter: 20px !important;
  --lh: 1.65 !important;

  /* Global button lock */
  --btn-solid: #4851B1 !important;
  --btn-text: #FFFFFF !important;

  /* Map WP global style presets -> Teams palette */
  --wp--preset--color--primary: #4851B1 !important;
  --wp--preset--color--secondary: #3F46A0 !important;
  --wp--preset--color--foreground: #111827 !important;
  --wp--preset--color--background: #F9FAFB !important;
}

/* ================= Base & Typography ================= */
* { box-sizing: border-box !important; }
html, body { background: var(--bg) !important; color: var(--text) !important; }
body {
  margin: 0 !important;
  line-height: var(--lh) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji" !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  -webkit-text-size-adjust: 100% !important;
}
:where(h1,h2,h3){ letter-spacing: .2px !important; }
h1{ font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem) !important; line-height: 1.25 !important; margin: 0 0 .6em !important; }
h2{ font-size: clamp(1.25rem, 1.1rem + 1.2vw, 1.6rem) !important; line-height: 1.3 !important; margin: 1.2em 0 .5em !important; }
p, ul, ol { margin: 0 0 1em !important; }
a { color: var(--primary) !important; text-decoration: none !important; }
a:hover { color: var(--secondary) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }
img, video { max-width: 100% !important; height: auto !important; border-radius: var(--radius-sm) !important; }

/* Screen reader utility + visible on focus */
.screen-reader-text{
  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;
}
.screen-reader-text:focus{
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  white-space: normal !important;
  padding: .5rem .75rem !important;
  background: #fff !important;
  outline: 3px solid var(--focus) !important;
  border-radius: 6px !important;
}

/* ================= Header / Footer ================= */
.site-header, .site-footer { padding: 14px 0 !important; }
.site-title { font-size: 1.4rem !important; font-weight: 700 !important; margin: 0 !important; letter-spacing: .2px !important; }
.site-description { margin: 4px 0 0 !important; color: #6B7280 !important; }

/* Header brand block (logo + text) */
.site-header .layout{
  display: grid !important;
  grid-template-columns: 1fr !important; /* header uses single column */
  align-items: center !important;
  gap: 0 !important;
  padding: 0 var(--gutter) !important;
}
.brand{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}
.custom-logo-link{ display: inline-flex !important; align-items: center !important; }
.custom-logo-link img,
.custom-logo{
  display: block !important;
  max-height: 56px !important;
  height: auto !important;
  width: auto !important;
  border-radius: 0 !important; /* keep logos crisp even if global img is rounded */
}
.brand-text{ min-width: 0 !important; }
@media (max-width: 768px){
  .custom-logo-link img,
  .custom-logo{ max-height: 48px !important; }
}

/* ================= Layout ================= */
.layout{
  display: grid !important;
  grid-template-columns: var(--sidebar-w) 1fr !important;
  gap: var(--pane-gap) !important;
  align-items: start !important;
  max-width: var(--maxw) !important;
  margin: 0 auto !important;
  padding: 0 var(--gutter) 40px !important;
}

/* ================= Sidebar (Left) ================= */
.sidebar{
  position: sticky !important;
  top: 0 !important;
  max-height: 100dvh !important;
  overflow: auto !important;
  border: 1px solid var(--border) !important;
  background: #FFFFFF !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1), var(--shadow-2) !important;
  z-index: 10 !important;
}

/* WordPress menu structure */
.side-nav-wrap { display: block !important; }
.side-nav-wrap .menu,
.side-nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 10px !important;
}
.side-nav-wrap .menu > li,
.side-nav > li { margin: 0 0 8px 0 !important; }
.side-nav-wrap .menu > li:last-child,
.side-nav > li:last-child { margin-bottom: 0 !important; }

/* Links (with dot space) */
.side-nav-wrap .menu a,
.side-nav a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  padding-left: 36px !important;   /* room for the dot */
  position: relative !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  color: var(--text) !important;
  border: 1px solid transparent !important;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease !important;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0) !important;
}
.side-nav-wrap .menu a:hover,
.side-nav a:hover{
  background: var(--muted) !important;
  color: var(--secondary) !important;
  box-shadow: inset 0 -1px 0 var(--divider) !important;
}

/* Active item + Teams accent dot */
.side-nav-wrap .menu .current-menu-item > a,
.side-nav-wrap .menu .current_page_item > a,
.side-nav a[aria-current="page"]{
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  position: relative !important;
  box-shadow: inset 0 0 0 1px var(--primary) !important;
}
.side-nav-wrap .menu .current-menu-item > a::before,
.side-nav-wrap .menu .current_page_item > a::before,
.side-nav a[aria-current="page"]::before{
  content: "" !important;
  position: absolute !important;
  left: 16px !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 6px !important; height: 6px !important; border-radius: 999px !important;
  background: var(--accent) !important;
}

/* ================= Content (Right) ================= */
.content{ min-width: 0 !important; }
.entry{
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-1), var(--shadow-2) !important;
}
.entry + .entry{ margin-top: 20px !important; }
.entry-title{ margin-top: 0 !important; }

.blog .entry, .archive .entry {
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.blog .entry:hover, .archive .entry:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-2), var(--shadow-3) !important;
  border-color: var(--primary) !important;
}

/* ================= Mobile: Left Drawer ================= */
.menu-toggle{
  display: none !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  margin: 10px 0 10px var(--gutter) !important;
  width: auto !important;
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-1) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.menu-toggle:hover{
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-2) !important;
}
.menu-toggle .menu-icon{
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
  width: 14px !important; height: 14px !important;
}
.menu-toggle .menu-icon span{
  display: block !important;
  height: 2px !important; width: 100% !important;
  background: currentColor !important; border-radius: 2px !important;
}
.menu-toggle .menu-text{ font-size: 0.9rem !important; letter-spacing: 0.3px !important; }

.backdrop{ display: none !important; }

@media (max-width: 768px){
  .layout{ grid-template-columns: 1fr !important; padding: 0 14px 30px !important; gap: 16px !important; }
  .menu-toggle{ display: inline-flex !important; }
  .sidebar{
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(86vw, 340px) !important;
    max-width: 92vw !important;
    transform: translateX(-100%) !important;
    transition: transform .25s ease !important;
    z-index: 100 !important;
    box-shadow: 0 0 0 1px var(--border), 12px 0 24px rgba(0,0,0,.10) !important;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important;
  }
  html.menu-open .sidebar{ transform: translateX(0) !important; }

  .backdrop{
    position: fixed !important;
    inset: 0 !important;
    background: rgba(17,24,39,.35) !important;
    backdrop-filter: blur(1px) !important;
    z-index: 90 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease !important;
  }
  html.menu-open .backdrop{ display: block !important; opacity: 1 !important; pointer-events: auto !important; }

  .side-nav-wrap .menu a,
  .side-nav a{ padding: 12px 16px !important; }
}

/* ================= Buttons — GLOBAL LOCK (IDLE + ALL STATES) ================= */
/* BASE/IDLE — force solid #4851B1 + white text on every button type */
:is(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .button, a.button,
  .wp-block-button__link, a.wp-block-button__link,
  .wp-element-button, .wp-block-button .wp-block-button__link,
  .um .um-button, a.um-button,
  .elementor-button, a.elementor-button,
  .elementor a.elementor-button-link .elementor-button,
  .btn, .button-primary, .button-secondary,
  .sr-btn, .sr-quick .sr-btn, .sr-plans .sr-btn,
  /* WooCommerce */
  .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
  .woocommerce #respond input#submit, .woocommerce a.button.alt,
  .woocommerce button.button.alt, .woocommerce input.button.alt,
  .woocommerce a.added_to_cart,
  /* Gravity Forms */
  .gform_button, .gform_next_button, .gform_previous_button, .gform_save_link,
  /* Anchor role buttons */
  a[role="button"]
){
  background: var(--btn-solid) !important;
  background-image: none !important;
  color: var(--btn-text) !important;
  border: 1px solid var(--btn-solid) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  text-decoration: none !important;
  text-transform: none !important;

  /* Uniform sizing */
  border-radius: 999px !important;
  padding: 12px 18px !important;
  min-height: 48px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .2px !important;
  cursor: pointer !important;
}

/* STATES — keep the same look on hover/focus/active/visited */
:is(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .button, a.button,
  .wp-block-button__link, a.wp-block-button__link,
  .wp-element-button, .wp-block-button .wp-block-button__link,
  .um .um-button, a.um-button,
  .elementor-button, a.elementor-button,
  .elementor a.elementor-button-link .elementor-button,
  .btn, .button-primary, .button-secondary,
  .sr-btn, .sr-quick .sr-btn, .sr-plans .sr-btn,
  .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
  .woocommerce #respond input#submit, .woocommerce a.button.alt,
  .woocommerce button.button.alt, .woocommerce input.button.alt,
  .woocommerce a.added_to_cart,
  .gform_button, .gform_next_button, .gform_previous_button, .gform_save_link,
  a[role="button"]
):where(:link, :visited, :hover, :focus, :active, :focus-visible){
  background: var(--btn-solid) !important;
  background-image: none !important;
  color: var(--btn-text) !important;
  border: 1px solid var(--btn-solid) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-decoration: none !important;
}

/* Outline / “ghost” variants must also be solid purple */
:is(
  .button-outline,
  .um .um-button.button-outline,
  a.um-button.button-outline,
  .is-style-outline .wp-block-button__link,
  .elementor-button--outline,
  .button-secondary
){
  background: var(--btn-solid) !important;
  color: var(--btn-text) !important;
  border-color: var(--btn-solid) !important;
}

/* Focus ring (accessibility) */
:is(
  button,
  input[type="button"],
  input[type="submit"],
  .um .um-button, a.um-button,
  .wp-block-button__link, .elementor-button,
  .sr-btn, .sr-quick .sr-btn, .sr-plans .sr-btn,
  .woocommerce a.button, .woocommerce button.button,
  .woocommerce input.button, .woocommerce #respond input#submit
):focus-visible{
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
}

/* Disabled */
:is(
  button, .um .um-button, a.um-button,
  .sr-btn, .sr-quick .sr-btn, .sr-plans .sr-btn,
  .woocommerce a.button, .woocommerce button.button,
  .woocommerce input.button, .woocommerce #respond input#submit
)[disabled],
[aria-disabled="true"]{
  opacity: .6 !important;
  cursor: not-allowed !important;
}

/* ================= Tables ================= */
.entry-content table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  background: #FFFFFF !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-1) !important;
}
.entry-content thead th{
  background: #FFFFFF !important;
  color: var(--secondary) !important;
  font-weight: 700 !important;
  text-align: left !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 12px !important;
  white-space: nowrap !important;
  font-size: 1rem !important;
}
.entry-content tbody td{
  border-top: 1px solid var(--divider) !important;
  padding: 12px 12px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  font-size: 1rem !important;
}
.entry-content tbody tr:nth-child(even) td{ background: var(--bg) !important; }

/* Nested tables */
.entry-content table table,
.um .um-profile .um-profile-body table table {
  max-width: 100% !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-1) !important;
}
.entry-content table table th,
.entry-content table table td,
.um .um-profile .um-profile-body table table th,
.um .um-profile .um-profile-body table table td {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  padding: 10px 12px !important;
}

/* Scroll wrappers */
.table-scroll,
.um .um-profile .um-profile-body{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable !important;
  position: relative !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-1) !important;
  background: #FFFFFF !important;
}
.table-scroll::after,
.um .um-profile .um-profile-body::after{
  content: "" !important;
  pointer-events: none !important;
  position: sticky !important;
  right: 0 !important; top: 0 !important; height: 100% !important; width: 24px !important;
  background: linear-gradient(to right, rgba(255,255,255,0), #FFFFFF) !important;
}
.table-scroll table,
.um .um-profile .um-profile-body table.widefat{
  display: inline-table !important;
  width: auto !important;
  min-width: 100% !important;
  table-layout: auto !important;
}
.table-scroll th, .table-scroll td,
.um .um-profile .um-profile-body table.widefat th,
.um .um-profile .um-profile-body table.widefat td{
  padding: 12px 14px !important;
  white-space: nowrap !important;
}

/* Sticky header & first col */
@supports (position: sticky) {
  .table-sticky-first thead th:first-child,
  .table-sticky-first tbody td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    background: #FFFFFF !important;
    box-shadow: 1px 0 0 0 var(--border) !important;
  }
  .table-sticky-head thead th{
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: #FFFFFF !important;
  }
}

.um .um-profile .um-profile-body img { max-width: none !important; height: auto !important; }

/* ================= Fallback Horizontal Nav ================= */
.nav{ display: flex !important; gap: 16px !important; flex-wrap: wrap !important; padding: 8px 0 !important; }
.nav a{ color: var(--primary) !important; text-decoration: none !important; }
.nav a:hover{ color: var(--secondary) !important; text-decoration: underline !important; }
.nav a[aria-current="page"]{ font-weight: 700 !important; }

/* ================= Scrollbars (WebKit) ================= */
.table-scroll::-webkit-scrollbar,
.um .um-profile .um-profile-body::-webkit-scrollbar{ height: 10px !important; }
.table-scroll::-webkit-scrollbar-thumb,
.um .um-profile .um-profile-body::-webkit-scrollbar-thumb{
  background: #cfd2f5 !important;
  border-radius: 999px !important;
  border: 2px solid #FFFFFF !important;
}
.table-scroll::-webkit-scrollbar-track,
.um .um-profile .um-profile-body::-webkit-scrollbar-track{ background: transparent !important; }

/* =================== BACKGROUND-ONLY FADE =================== */
:root{ --fade-strength: .86 !important; }
html.menu-open,
body.menu-open{
  background: linear-gradient(
               rgba(72,81,177,var(--fade-strength)),
               rgba(72,81,177,var(--fade-strength))
             ), var(--bg) !important;
  background-attachment: fixed !important;
}
html.menu-open .wp-site-blocks,
body.menu-open .wp-site-blocks{
  background: linear-gradient(
               rgba(72,81,177,var(--fade-strength)),
               rgba(72,81,177,var(--fade-strength))
             ), var(--bg) !important;
  background-attachment: fixed !important;
}
html.menu-open .entry,
html.menu-open .sidebar,
html.menu-open .site-header,
html.menu-open .site-footer,
html.menu-open .entry-content table,
html.menu-open .table-scroll,
html.menu-open .um .um-profile .um-profile-body{
  background: #FFFFFF !important;
  filter: none !important;
  opacity: 1 !important;
}
html.menu-open .backdrop,
html.menu-open [class*="overlay"],
html.menu-open [id*="overlay"],
.mm-wrapper__blocker, .drawer-overlay, .mfp-bg, .elementor-overlay, #TB_overlay {
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: auto !important;
}
@media (prefers-reduced-motion: no-preference){
  html.menu-open, body.menu-open,
  html.menu-open .wp-site-blocks, body.menu-open .wp-site-blocks{
    transition: background .2s ease !important;
  }
}

/* =================== UMS2I BLOCK =================== */
.ums2i-block { text-align: center !important; }
.ums2i-block .ums2i-intro {
  color: #000 !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  line-height: 1.5 !important;
  margin: 0 0 .6rem !important;
  letter-spacing: .2px !important;
}
.ums2i-block .ums2i-usage {
  color: #000 !important;
  font-weight: 600 !important;
  font-size: .98rem !important;
  opacity: 1 !important;
  display: block !important;
  margin: .6rem 0 0 !important;
}
.ums2i-block .um-button.ums2i-w70 {
  width: 70% !important;
  display: inline-flex !important;
  justify-content: center !important;
}
@media (max-width: 480px){
  .ums2i-block .um-button.ums2i-w70 { width: 100% !important; }
}
.entry.um.ums2i-block[role="alert"] p,
.entry.um.ums2i-block[role="alert"] .ums2i-usage { color: #000 !important; }
.ums2i-block .ums2i-actions,
.ums2i-block .ums2i-cta{
  display: flex !important;
  justify-content: center !important;
}
.ums2i-block .ums2i-cta .um-button{
  width: 70% !important;
  display: inline-flex !important;
  justify-content: center !important;
}
@media (max-width: 480px){
  .ums2i-block .ums2i-cta .um-button{ width: 100% !important; }
}

/* =================== SECOND RING PLANS (cards) =================== */
.sr-plans{
  --sr-bg: #FFFFFF !important;
  --sr-text: var(--text) !important;

  display:grid !important;
  gap:1rem !important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
  margin:1rem 0 !important;
}
.sr-card{
  background:var(--sr-bg) !important;
  color:var(--sr-text) !important;
  border:1px solid var(--border) !important;
  border-radius:16px !important;
  padding:1.25rem !important;
  box-shadow:var(--shadow-1), var(--shadow-2) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  position:relative !important;
}
.sr-card h3{ margin:0 0 .5rem 0 !important; font-size:1.15rem !important; line-height:1.2 !important; }
.sr-price{ font-weight:700 !important; font-size:1.25rem !important; margin:.25rem 0 .5rem !important; }
.sr-tag{
  display:inline-block !important;
  background:rgba(72,81,177,0.10) !important;
  color:var(--secondary) !important;
  font-weight:600 !important;
  border-radius:999px !important;
  padding:.25rem .6rem !important;
  margin-bottom:.75rem !important;
  font-size:.85rem !important;
}
.sr-desc{ margin:.25rem 0 .5rem !important; font-size:.95rem !important; opacity:.9 !important; }
.sr-note{ font-size:.85rem !important; color:rgba(17,24,39,0.78) !important; margin-bottom:.35rem !important; }
.sr-card--highlight{ outline:2px solid var(--accent) !important; outline-offset:2px !important; }
.sr-badge{
  position:absolute !important; top:-10px !important; right:14px !important;
  background:var(--accent) !important; color:#052 !important; font-weight:800 !important;
  font-size:.72rem !important; padding:.25rem .5rem !important; border-radius:999px !important;
  box-shadow:0 6px 12px rgba(16,185,129,.25) !important;
}

/* Plans CTA — solid & locked (uses global lock as well) */
.sr-btn{
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:.75rem !important;
  background: var(--btn-solid) !important;
  color:#fff !important; text-decoration:none !important; font-weight:700 !important;
  border-radius:999px !important; padding:.75rem 1rem !important;
  border:1px solid var(--btn-solid) !important;
  box-shadow:none !important;
  transition:none !important;
  min-height: 48px !important;
  font-size: 1rem !important;
}

/* =================== QUICK ACTIONS (VERTICAL) =================== */
.sr-quick{
  display:flex !important;
  flex-direction:column !important;
  gap:22px !important;
  margin:1rem 0 !important;
}
.sr-item{
  text-align:center !important;
  padding: 0 8px !important;
}

/* Description block above each button */
.sr-text--desc{
  display:block !important;
  max-width: 820px !important;
  margin: 0 auto 10px !important;
  padding: 12px 14px !important;
  text-align: left !important;

  background: #F7F8FF !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid #4851B1 !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-1) !important;

  color: #0f172a !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  letter-spacing: .1px !important;
}
.sr-text--desc strong{
  display:block !important;
  margin-bottom: 4px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

/* Quick Action button */
.sr-quick .sr-btn{
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  max-width:480px !important;
  min-height:52px !important;
  padding:12px 20px !important;
  border-radius:999px !important;
  background:#4851B1 !important;
  color:#fff !important;
  border:1px solid #4851B1 !important;
  box-shadow:none !important;
  transition:none !important;
  white-space:normal !important;
  line-height:1.2 !important;
  text-align:center !important;
  margin: 0 auto !important;
  font-size: 1rem !important;
}
/* Force ALL quick action buttons to same purple */
.sr-quick .sr-item:nth-child(even) .sr-btn{
  background:#4851B1 !important;
  border-color:#4851B1 !important;
}

/* Purple divider line under each item */
.sr-item::after{
  content:"" !important;
  display:block !important;
  height:1px !important;
  background:#4851B1 !important;
  margin:12px auto 0 !important;
  max-width: 820px !important;
}

/* Hide any legacy subject labels */
.sr-text{ display:none !important; }

@media (max-width: 820px){
  .sr-text--desc{ max-width: 100% !important; }
  .sr-item::after{ max-width: 100% !important; }
}
@media (max-width:480px){
  .sr-quick{ gap:16px !important; }
  .sr-quick .sr-btn{ min-height:48px !important; max-width:100% !important; }
  .sr-text--desc{ padding: 10px 12px !important; }
  .sr-item::after{ margin-top:10px !important; }
}

/* ================= SR Simple Top-up — Theme-owned styles ================= */
.srs-topup{ max-width: 760px; margin: 16px auto; }

/* Table */
.srs-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  font-size: 1rem !important;
}
.srs-table thead th{
  text-align: left;
  padding: 8px 10px;
  color: var(--secondary);
  font-weight: 700;
  font-size: 1rem !important;
}
.srs-table tbody tr{
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
}
.srs-table tbody td{
  padding: 12px 14px;
  vertical-align: middle;
  font-size: 1rem !important;
}
.srs-table td.pick{ width: 54px; text-align: center; }
.srs-table code{ font-weight: 700; color: var(--text); }

/* Balance colours */
.srb-neg{ color: #991b1b; }
.srb-pos{ color: #065f46; }

/* Actions row */
.srs-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Ensure "Top-up" button matches global size */
.srs-actions .button,
.srs-actions button,
.srs-actions .wp-element-button,
.srs-actions .woocommerce a.button,
.srs-actions .elementor-button{
  padding: 12px 18px !important;
  min-height: 48px !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
}

/* Inputs */
.srs-label{ font-weight: 600; color: var(--text); }
.srs-select,
.srs-input{
  padding: .6rem .8rem !important;
  min-height: 44px !important;
  font-size: 1rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--text) !important;
  outline: none !important;
}
.srs-select:focus,
.srs-input:focus{
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent) !important;
}

/* Stripe badge adopts theme primary */
.srs-stripe-badge{
  background: var(--primary);
  color: #fff;
  padding: .25rem .5rem;
  border-radius: 6px;
  font-weight: 700;
  margin-right: 6px;
}

/* Helper text + errors */
.srs-help{
  color: #6b7280;
  margin-top: 6px;
}
.srs-error{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #fca5a5;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 10px;
}

/* Manual form stack */
.srs-topup--manual .srs-stack{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Buttons inherit global lock: solid #4851B1 with white text */

/* Center the entire signup UI */
.um-portal {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
  text-align: center;
}

/* Nice card container used by your sections */
.um-portal .green {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  margin-bottom: 24px;
}

/* Headings */
.um-portal h3 { margin: 24px 0 16px; font-weight: 700; }

/* Buttons (primary gradient + rounded) */
.um-portal .btn,
.um-portal button,
.um-portal input[type="button"] {
  border-radius: 9999px;
  padding: 12px 20px;
  border: 0;
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.um-portal .btn-link {
  background: transparent;
  color: #4f46e5;
  text-decoration: underline;
}

/* Inputs centered */
.um-portal .form-control { text-align: center; }

/* Progress bar centered and pretty */
.um-portal .progress {
  margin: 16px auto;
  height: 10px;
  max-width: 560px;
  border-radius: 9999px;
  overflow: hidden;
  background: #e5e7eb;
}
.um-portal .progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

/* Navbar tabs centered */
.um-portal #navbar {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* Back link spacing */
.um-portal .header-back-button { display: inline-block; margin: 8px 0 16px; }

/* Helpers */
.um-centered-block { margin: 0 auto; }
.hidden { display: none !important; }

/* Loader + feedback icons placement (no inline styles) */
.has-feedback { position: relative; }
.has-feedback .loader,
.has-feedback .success-sign,
.has-feedback .error-sign {
  position: absolute;
  right: 12px;
  top: 8px;
}
.loader .loader-icon { width: 15px; }

/* Flag images (replace old width/height HTML attrs) */
.um-portal img.flag {
  width: 50px;
  height: 50px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 10px;
}

/* Optional: make input group buttons look tidy */
.um-portal .input-group { display: flex; align-items: stretch; }
.um-portal .input-group .input-group-btn button { margin-left: 8px; }

/* Center selects' displayed text in some browsers */
.um-portal .custom-select,
.um-portal .custom-select2 { text-align-last: center; }

/* If Bootstrap's hidden-xs is present but you want to always show on desktop/tablet, leave as-is.
   If needed, you can override here:
   .hidden-xs { display: none !important; }
*/