/* ==============================================
   ASM International Portal Skin
   Generated: 2026-04-17
   Source: https://www.asminternational.org/

   IMPORTANT ARCHITECTURE NOTE:
   This file is loaded as the main_site_theme (replacing default.css).
   Rules that compete with default.css theme rules MUST be unscoped
   (no #main_body prefix) and use !important to win.
   Rules for our own skin elements use #main_body scoping.
   ============================================== */

/* === BRAND TOKENS === */
:root {
  --skin-primary:        #002F6C;
  --skin-primary-hover:  #001d45;
  --skin-accent:         #40B7E7;
  --skin-accent-hover:   #1a9fd4;
  --skin-text:           #53565A;
  --skin-font:           'Source Sans 3', 'Source Sans Pro', sans-serif;
  --skin-header-main-bg: url('https://cdn-prd-main.asm-media.cloud/uploads/2023/03/1.png') center/cover no-repeat #0d1f2d;
  --skin-footer-top-bg:  #53565A;
  --skin-footer-main-bg: url('https://cdn-prd-main.asm-media.cloud/uploads/2023/03/Footer-Background-Image.png') center/cover no-repeat #0d1f2d;
  --skin-footer-aff-bg:  #EEEEEE;
  --skin-footer-link:    #40B7E7;
  --skin-border:         #dddddd;
}

/* ============================================================
   UNSCOPED THEME OVERRIDES
   These replace default.css rules directly. No #main_body
   prefix needed — this file IS the theme.
   ============================================================ */

/* Hide built-in portal status bar */
.login-status { display: none !important; }

/* Body background — matches sidebar so the gray column extends
   seamlessly below the sidebar to the footer. */
html { background-color: #53565A !important; }
body { background-color: #53565A !important; }

/* ------------------------------------------------------------
   Site Template Panel — kill Bootstrap col-md-12 gutter gaps
   The CMS injects the skin header/footer inside
   #main_pnlSiteTemplateHeader / #main_pnlSiteTemplateFooter,
   each a .col-md-12 panel with 15px of side padding. That
   padding shows as white/dark slivers on the left and right
   of the header strip. Zero it out so the skin reaches the
   viewport edges flush.
   ------------------------------------------------------------ */
#main_pnlSiteTemplateHeader,
.site-template-header,
#main_pnlSiteTemplateFooter,
.site-template-footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Sidebar background — neutral gray */
.page-sidebar { background-color: #53565A !important; }

/* Sidebar search */
.page-sidebar .sidebar-search input {
  background-color: #53565A !important;
  color: rgba(255,255,255,0.85) !important;
}
.page-sidebar .sidebar-search .input-box {
  border-bottom: 1px solid rgba(255,255,255,0.25) !important;
}

/* Hamburger toggler */
.sidebar-toggler {
  background-color: #53565A !important;
}

/* Closed flyout sub-menu */
.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
  background-color: #53565A !important;
}
.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
  background-color: #53565A !important;
}

/* Nav link borders and colors */
ul.page-sidebar-menu > li > a,
ul.page-sidebar-menu > li > span > a {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.82) !important;
}
ul.page-sidebar-menu > li a i { color: rgba(255,255,255,0.55) !important; }

/* Hover state */
ul.page-sidebar-menu > li.open > a,
ul.page-sidebar-menu > li > a:hover,
ul.page-sidebar-menu > li:hover > a,
ul.page-sidebar-menu > li.open > span > a,
ul.page-sidebar-menu > li > span > a:hover,
ul.page-sidebar-menu > li:hover > span > a {
  background: rgba(255,255,255,0.07) !important;
  color: #ffffff !important;
}

/* Active item — light gray surface; text/icon switch to dark for contrast */
ul.page-sidebar-menu > li.active > a,
ul.page-sidebar-menu > li.active > span > a {
  background: #D0D0CE !important;
  color: #2c2e30 !important;
  border-top-color: transparent !important;
}
ul.page-sidebar-menu > li.active > a i,
ul.page-sidebar-menu > li.active > span > a i {
  color: #2c2e30 !important;
}

/* Sub-menu links */
ul.page-sidebar-menu li > ul.sub-menu > li > a,
ul.page-sidebar-menu li > span > ul.sub-menu > li > a {
  color: rgba(255,255,255,0.6) !important;
}
ul.page-sidebar-menu > li > ul.sub-menu > li.active > a,
ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover,
ul.page-sidebar-menu > li > span > ul.sub-menu > li.active > a,
ul.page-sidebar-menu > li > span > ul.sub-menu > li > a:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.07) !important;
}

/* Arrow indicators */
ul.page-sidebar-menu > li > a .arrow::before,
ul.page-sidebar-menu > li > a .arrow.open::before,
ul.page-sidebar-menu > li > span > a .arrow::before,
ul.page-sidebar-menu > li > span > a .arrow.open::before {
  color: rgba(255,255,255,0.5) !important;
}
ul.page-sidebar-menu > li.active > a .arrow::before,
ul.page-sidebar-menu > li.active > a .arrow.open::before,
ul.page-sidebar-menu > li.active > span > a .arrow::before,
ul.page-sidebar-menu > li.active > span > a .arrow.open::before {
  color: rgba(0,0,0,0.65) !important;
}
ul.page-sidebar-menu > li > ul.sub-menu a .arrow::before,
ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open::before {
  color: rgba(255,255,255,0.4) !important;
}

/* Mobile sidebar (≤991px) */
@media (max-width: 991px) {
  .page-sidebar { background-color: #53565A !important; }
  ul.page-sidebar-menu > li > a,
  ul.page-sidebar-menu > li > span > a {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }
}

/* ============================================================
   SCOPED SKIN STYLES
   Everything below is scoped to #main_body to prevent
   bleeding into portal components we don't own.
   ============================================================ */

/* --- Typography --- */
#main_body {
  font-family: var(--skin-font);
  color: var(--skin-text);
}
#main_body h1, #main_body h2, #main_body h3,
#main_body h4, #main_body h5, #main_body h6 {
  font-family: var(--skin-font);
}
#main_body a { color: var(--skin-primary); }
#main_body a:hover { color: var(--skin-primary-hover); }

/* --- Header wrapper --- */
#main_body .rm-skin-header { width: 100%; position: relative; z-index: 1000; }

/* Utility bar — plain links with thin pipe dividers, right-aligned
   so the items end at the same x-coordinate as the phone number
   in the main header below.
   "Become A Member" is plain text, not a colored button. */
#main_body .rm-skin-header .asm-util-bar {
  background-color: #000000;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 24px;
}
#main_body .rm-skin-header .asm-util-bar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0;
  display: flex; align-items: center; justify-content: flex-end; height: 34px;
}
#main_body .rm-skin-header .asm-util-bar ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center;
}
#main_body .rm-skin-header .asm-util-bar ul li {
  position: relative;
}
/* Pipe divider between items (left side of every item except the first) */
#main_body .rm-skin-header .asm-util-bar ul li + li::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 1px; height: 14px; margin-top: -7px;
  background-color: rgba(255,255,255,0.25);
}
#main_body .rm-skin-header .asm-util-bar ul li a {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 34px;
  color: #ffffff !important; text-decoration: none !important;
  font-family: var(--skin-font); font-size: 16px; font-weight: 400;
  white-space: nowrap; background-color: transparent !important;
  transition: color 0.15s ease;
}
#main_body .rm-skin-header .asm-util-bar ul li a:hover {
  color: var(--skin-accent) !important;
}
/* "Become A Member" reads as plain text — no orange button styling */
#main_body .rm-skin-header .asm-util-bar ul li.asm-util-join a {
  background-color: transparent !important;
  color: #ffffff !important;
  font-weight: 400;
  padding: 0 14px;
}
#main_body .rm-skin-header .asm-util-bar ul li.asm-util-join a:hover {
  background-color: transparent !important;
  color: var(--skin-accent) !important;
}

/* Main header bar — two rows: logo full-height on left, content column on right.
   Mirrors the footer's container pattern: 24px horizontal padding on the outer
   bar, centered 1280px inner, so the header logo aligns with the footer logo. */
#main_body .rm-skin-header .asm-header-main {
  background: var(--skin-header-main-bg);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  padding: 0 24px;
}
#main_body .rm-skin-header .asm-header-main-inner {
  max-width: 1280px; margin: 0 auto; padding: 12px 0;
  display: flex; flex-direction: row;
  align-items: stretch; gap: 24px;
}

/* Logo — flush left edge, fills the full header height across both rows */
#main_body .rm-skin-header .asm-logo-link {
  flex-shrink: 0;
  display: flex; align-items: center;
  text-decoration: none !important;
  padding-left: 0;
}
#main_body .rm-skin-header .asm-logo-link img {
  height: 110px; width: auto; display: block;
}

/* Right-side content column holds the two stacked rows */
#main_body .rm-skin-header .asm-header-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}

/* Top row: phone right-aligned */
#main_body .rm-skin-header .asm-header-row-top {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 20px; width: 100%; min-height: 38px;
}
#main_body .rm-skin-header .asm-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--skin-font); font-size: 15px; font-weight: 600;
  color: #ffffff !important; text-decoration: none !important;
  white-space: nowrap; flex-shrink: 0; transition: color 0.15s ease;
}
#main_body .rm-skin-header .asm-phone svg {
  width: 18px; height: 18px; fill: var(--skin-accent); flex-shrink: 0;
}
#main_body .rm-skin-header .asm-phone:hover { color: var(--skin-accent) !important; }

/* Bottom row: nav (left) + portal utils + mobile button (right) */
#main_body .rm-skin-header .asm-header-row-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 56px; width: 100%;
}

/* Primary nav */
#main_body .rm-skin-header .asm-nav { height: 56px; display: flex; align-items: center; flex: 1; }
#main_body .rm-skin-header .asm-nav-items {
  list-style: none; margin: 0; padding: 0; display: flex; align-items: center; height: 56px;
}
#main_body .rm-skin-header .asm-nav-item {
  position: relative; height: 56px; display: flex; align-items: center;
}
#main_body .rm-skin-header .asm-nav-item > a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 15px; height: 56px;
  color: #ffffff !important; text-decoration: none !important;
  font-family: var(--skin-font); font-size: 15px; font-weight: 600;
  white-space: nowrap; border-bottom: 3px solid transparent; box-sizing: border-box;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
#main_body .rm-skin-header .asm-nav-item > a:hover,
#main_body .rm-skin-header .asm-nav-item.is-open > a {
  background-color: rgba(255,255,255,0.08);
  border-bottom-color: var(--skin-accent);
  color: #ffffff !important;
}
#main_body .rm-skin-header .asm-has-dropdown > a::after {
  content: ''; display: inline-block; width: 0; height: 0; margin-left: 5px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid currentColor; vertical-align: middle; flex-shrink: 0;
}

/* Dropdown panels */
#main_body .rm-skin-header .asm-dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 240px; background-color: #ffffff;
  border-top: 3px solid var(--skin-accent);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18); z-index: 1100; padding: 12px 0;
}
#main_body .rm-skin-header .asm-dropdown.asm-mega { min-width: 700px; padding: 20px 0 16px; }
#main_body .rm-skin-header .asm-mega-cols { display: flex; }
#main_body .rm-skin-header .asm-mega-col {
  flex: 1; padding: 0 20px; border-right: 1px solid #eeeeee;
}
#main_body .rm-skin-header .asm-mega-col:last-child { border-right: none; }
#main_body .rm-skin-header .asm-has-dropdown:hover > .asm-dropdown,
#main_body .rm-skin-header .asm-has-dropdown.is-open > .asm-dropdown { display: block; }
#main_body .rm-skin-header .asm-has-dropdown:hover > .asm-mega,
#main_body .rm-skin-header .asm-has-dropdown.is-open > .asm-mega { display: flex; }
#main_body .rm-skin-header .asm-dropdown h4 {
  margin: 8px 20px 4px; padding: 0 0 5px;
  font-family: var(--skin-font); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px; color: #999999;
  border-bottom: 1px solid #eeeeee;
}
#main_body .rm-skin-header .asm-mega-col h4 { margin: 0 0 4px; padding: 0 0 5px; }
#main_body .rm-skin-header .asm-dropdown ul { list-style: none; margin: 0; padding: 0; }
#main_body .rm-skin-header .asm-dropdown ul li a {
  display: block; padding: 5px 20px;
  color: #333333 !important; text-decoration: none !important;
  font-family: var(--skin-font); font-size: 13px; font-weight: 400; line-height: 1.4;
  transition: background-color 0.1s ease, color 0.1s ease;
}
#main_body .rm-skin-header .asm-mega-col ul li a { padding: 4px 0; }
#main_body .rm-skin-header .asm-dropdown ul li a:hover {
  background-color: #f5f5f5; color: var(--skin-primary) !important;
}
#main_body .rm-skin-header .asm-mega-col ul li a:hover {
  background-color: transparent; color: var(--skin-primary) !important;
}
#main_body .rm-skin-header .asm-dd-divider { height: 1px; background: #eeeeee; margin: 8px 20px; }
#main_body .rm-skin-header .asm-mega-col .asm-dd-divider { margin: 8px 0; }

/* Portal utils (cart + profile) */
#main_body .rm-portal-utils {
  display: flex; align-items: center; gap: 2px; margin-left: 6px;
}

/* CART — the portal's <li> is moved into here by JS. It keeps its
   Bootstrap dropdown wiring (data-toggle, onclick, dropdown-menu sibling),
   so clicking the anchor opens the cart-items dropdown natively. CSS
   below skins the moved element to fit the header. */
#main_body .rm-portal-utils .rm-portal-cart-host {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: inline-flex; align-items: center;
}
#main_body .rm-portal-utils .rm-portal-cart-host > a.page-header-user-cart,
#main_body .rm-portal-utils .rm-portal-cart {
  display: inline-flex !important; align-items: center; gap: 6px;
  padding: 6px 10px;
  color: #ffffff !important; text-decoration: none !important;
  font-family: var(--skin-font); font-size: 13px;
  white-space: nowrap; cursor: pointer; position: relative;
  background-color: transparent !important; border: none !important;
  transition: color 0.2s ease;
}
/* Defensively hide the "Cart" text label in case stale markup ships it */
#main_body .rm-portal-utils .rm-cart-label { display: none !important; }
#main_body .rm-portal-utils .rm-portal-cart-host > a:hover,
#main_body .rm-portal-utils .rm-portal-cart:hover {
  color: var(--skin-accent) !important;
}
#main_body .rm-portal-utils .rm-portal-cart-host > a svg,
#main_body .rm-portal-utils .rm-portal-cart svg {
  width: 18px; height: 18px;
  stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
#main_body .rm-portal-utils .rm-cart-label { font-family: var(--skin-font); font-size: 13px; }
#main_body .rm-portal-utils .rm-cart-badge {
  position: absolute; top: -6px; right: -8px;
  background-color: var(--skin-accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--skin-primary);
  pointer-events: none;
}
/* Empty-state: keep the 0 visible but mute it so a full cart pops. */
#main_body .rm-portal-utils .rm-cart-badge.is-empty {
  background-color: rgba(255, 255, 255, 0.25); color: #fff;
}

/* Cart dropdown menu — the portal's <ul.dropdown-menu.extended.cart>
   inside the moved cart li. Bootstrap shows it when .rm-portal-cart-host
   gets the .open class on click. */
#main_body .rm-portal-utils .rm-portal-cart-host .dropdown-menu {
  display: none;
  position: absolute; top: 100%; right: 0; left: auto;
  min-width: 260px;
  background: #ffffff;
  border: 1px solid var(--skin-border);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  z-index: 1050;
  list-style: none;
  margin: 4px 0 0;
}
#main_body .rm-portal-utils .rm-portal-cart-host.open > .dropdown-menu {
  display: block;
}
#main_body .rm-portal-utils .rm-portal-cart-host .dropdown-menu li {
  list-style: none; padding: 0; margin: 0;
}
#main_body .rm-portal-utils .rm-portal-cart-host .dropdown-menu li p,
#main_body .rm-portal-utils .rm-portal-cart-host .dropdown-menu li a {
  padding: 8px 16px;
  color: var(--skin-text);
  font-family: var(--skin-font); font-size: 13px;
  margin: 0; line-height: 1.4;
}
#main_body .rm-portal-utils .rm-portal-cart-host .dropdown-menu li a {
  display: block; text-decoration: none;
}
#main_body .rm-portal-utils .rm-portal-cart-host .dropdown-menu li a:hover {
  background: #f5f5f5; color: var(--skin-primary);
}
#main_body .rm-portal-utils .rm-portal-profile {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  color: rgba(255,255,255,0.85) !important; cursor: pointer; position: relative;
  font-family: var(--skin-font); font-size: 13px; white-space: nowrap;
  transition: color 0.2s ease;
}
#main_body .rm-portal-utils .rm-portal-profile:hover { color: var(--skin-accent) !important; }
#main_body .rm-portal-utils .rm-portal-profile svg {
  width: 18px; height: 18px; stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
#main_body .rm-portal-utils .rm-profile-name {
  max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
#main_body .rm-portal-utils .rm-caret {
  display: inline-block; width: 0; height: 0; margin-left: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid currentColor; vertical-align: middle;
}
#main_body .rm-portal-utils .rm-profile-dropdown {
  display: none; position: absolute; top: 100%; right: 0;
  min-width: 200px; background: #fff; border: 1px solid var(--skin-border);
  border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 8px 0; z-index: 1050; list-style: none; margin: 0;
}
#main_body .rm-portal-utils .rm-portal-profile.is-open .rm-profile-dropdown { display: block; }
#main_body .rm-portal-utils .rm-profile-dropdown li a {
  display: block; padding: 8px 16px;
  color: var(--skin-text) !important; text-decoration: none !important;
  font-family: var(--skin-font); font-size: 13px;
  transition: background-color 0.1s ease;
}
#main_body .rm-portal-utils .rm-profile-dropdown li a:hover {
  background: #f5f5f5; color: var(--skin-primary) !important;
}
#main_body .rm-portal-utils .rm-dropdown-divider {
  height: 1px; background: var(--skin-border); margin: 4px 0;
}

/* Mobile nav */
#main_body .rm-skin-header .asm-mobile-btn {
  display: none; background: none; border: none; padding: 8px; cursor: pointer;
  color: #ffffff; flex-direction: column; justify-content: center;
  align-items: center; gap: 5px; flex-shrink: 0;
  /* iOS Safari: remove tap highlight flash and skip 300ms delay */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#main_body .rm-skin-header .asm-mobile-btn span {
  display: block; width: 22px; height: 2px; background-color: currentColor; border-radius: 1px;
}
#main_body .rm-skin-header .asm-mobile-nav {
  display: none; background-color: #0d1f2d; border-top: 1px solid rgba(255,255,255,0.1);
}
#main_body .rm-skin-header .asm-mobile-nav.is-open { display: block; }
#main_body .rm-skin-header .asm-mobile-nav ul { list-style: none; margin: 0; padding: 8px 24px 16px; }
#main_body .rm-skin-header .asm-mobile-nav ul li a {
  display: block; padding: 10px 0;
  color: rgba(255,255,255,0.82) !important; text-decoration: none !important;
  font-family: var(--skin-font); font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  /* iOS Safari: skip 300ms delay on nav links */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#main_body .rm-skin-header .asm-mobile-nav ul li:last-child a { border-bottom: none; }
#main_body .rm-skin-header .asm-mobile-nav ul li a:hover { color: var(--skin-accent) !important; }

@media (max-width: 1080px) {
  #main_body .rm-skin-header .asm-nav { display: none; }
  #main_body .rm-skin-header .asm-phone { display: none; }
  #main_body .rm-skin-header .asm-mobile-btn { display: flex; }
  #main_body .rm-portal-utils { display: none; }
}
@media (max-width: 600px) {
  #main_body .rm-skin-header .asm-util-bar { display: none; }
}

/* === BUTTONS — global override
   Per client request: every button across the application uses
   the sidebar gray palette (bg #53565A, text #D0D0CE).
   The footer CTA buttons (.asm-footer-cta-btn) are intentionally
   excluded so they keep their original blue gradient styling.
   ============================================================ */
#main_body .btn,
#main_body .btn-primary,
#main_body .btn-secondary,
#main_body .btn-success,
#main_body .btn-info,
#main_body .btn-warning,
#main_body .btn-danger,
#main_body .btn-default,
#main_body input[type="button"],
#main_body input[type="submit"],
#main_body input[type="reset"] {
  background-color: #53565A !important;
  background-image: none !important;
  border: 1px solid #53565A !important;
  color: #D0D0CE !important;
  font-family: var(--skin-font) !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#main_body .btn:hover,
#main_body .btn-primary:hover,
#main_body .btn-secondary:hover,
#main_body .btn-success:hover,
#main_body .btn-info:hover,
#main_body .btn-warning:hover,
#main_body .btn-danger:hover,
#main_body .btn-default:hover,
#main_body input[type="button"]:hover,
#main_body input[type="submit"]:hover,
#main_body input[type="reset"]:hover {
  background-color: #3f4144 !important;
  border-color: #3f4144 !important;
  color: #ffffff !important;
}

/* ============================================================
   FOOTER — full-width, sits ABOVE the absolutely-positioned
   page sidebar (z-index: 10) so it spans edge to edge with
   no body-bg sliver on the left.
   ============================================================ */
#main_body .rm-skin-footer {
  font-family: var(--skin-font);
  position: relative !important;
  z-index: 10 !important;
  margin-left: 0 !important;
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* CTA bar */
#main_body .rm-skin-footer .asm-footer-cta-bar {
  background-color: var(--skin-footer-top-bg); padding: 20px 24px; box-sizing: border-box;
}
#main_body .rm-skin-footer .asm-footer-cta-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex !important; gap: 16px; justify-content: center; flex-wrap: wrap;
}
#main_body .rm-skin-footer .asm-footer-cta-btn {
  flex: 1 1 200px; max-width: 340px;
  display: flex !important; align-items: center; justify-content: center;
  padding: 14px 24px;
  background: linear-gradient(135deg, #1a9fd4 0%, #40B7E7 100%);
  color: #ffffff !important; text-decoration: none !important;
  font-family: var(--skin-font); font-size: 16px; font-weight: 600;
  border-radius: 3px; transition: filter 0.15s ease; box-sizing: border-box;
}
#main_body .rm-skin-footer .asm-footer-cta-btn:hover { filter: brightness(1.1); color: #ffffff !important; }

/* Main footer */
#main_body .rm-skin-footer .asm-footer-main {
  background: var(--skin-footer-main-bg); padding: 44px 24px 36px; box-sizing: border-box;
}
#main_body .rm-skin-footer .asm-footer-main-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  gap: 48px; align-items: flex-start;
}

/* Brand column — matches live asminternational.org with right divider.
   Width 280px + box-sizing:border-box ensures the long
   "memberservicecenter@asminternational.org" email fits inside
   the column instead of bleeding under the right border. */
#main_body .rm-skin-footer .asm-footer-brand {
  flex: 0 0 280px !important; min-width: 0;
  box-sizing: border-box !important;
  display: flex !important; flex-direction: column !important; gap: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.67);
  padding-right: 32px;
}
#main_body .rm-skin-footer .asm-footer-logo { display: block; text-decoration: none !important; }
#main_body .rm-skin-footer .asm-footer-logo img { height: 52px; width: auto; display: block; }
#main_body .rm-skin-footer .asm-footer-address {
  font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.65); margin: 0;
}
#main_body .rm-skin-footer .asm-footer-contact a {
  display: block; color: var(--skin-footer-link) !important; text-decoration: none !important;
  font-size: 13px; margin-bottom: 3px; transition: color 0.15s ease;
}
#main_body .rm-skin-footer .asm-footer-contact a:hover { color: #7acfee !important; }

/* Social icons — !important beats global #main_body a color */
#main_body .rm-skin-footer .asm-footer-social {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
  gap: 8px !important; align-items: center !important;
  list-style: none !important; padding: 0 !important; margin: 4px 0 0 0 !important;
}
#main_body .rm-skin-footer .asm-footer-social a {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 30px !important; height: 30px !important;
  min-width: 30px !important; min-height: 30px !important;
  border-radius: 50% !important;
  background-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important; font-size: 0 !important; line-height: 1 !important;
  flex-shrink: 0 !important; transition: background-color 0.15s ease, color 0.15s ease;
}
#main_body .rm-skin-footer .asm-footer-social a:hover {
  background-color: var(--skin-accent) !important; color: #ffffff !important;
}
#main_body .rm-skin-footer .asm-footer-social a svg {
  display: block !important; width: 14px !important; height: 14px !important;
  flex-shrink: 0 !important; overflow: visible !important;
}

/* Columns */
#main_body .rm-skin-footer .asm-footer-cols {
  flex: 1 1 0% !important; min-width: 0;
  display: flex !important; flex-wrap: wrap !important; align-content: flex-start; gap: 0;
}
#main_body .rm-skin-footer .asm-footer-col {
  flex: 0 0 200px !important; min-width: 140px; max-width: 220px;
  padding-right: 24px; box-sizing: border-box;
}
#main_body .rm-skin-footer .asm-footer-col h4 {
  font-family: var(--skin-font); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.7px; color: #ffffff !important;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
#main_body .rm-skin-footer .asm-footer-col ul {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
#main_body .rm-skin-footer .asm-footer-col ul li {
  margin-bottom: 5px !important; list-style: none !important; padding: 0 !important;
}
#main_body .rm-skin-footer .asm-footer-col ul li::before { display: none !important; }
#main_body .rm-skin-footer .asm-footer-col ul li a {
  color: var(--skin-footer-link) !important; text-decoration: none !important;
  font-size: 13px; transition: color 0.15s ease;
}
#main_body .rm-skin-footer .asm-footer-col ul li a:hover { color: #7acfee !important; }

/* Who We Are */
#main_body .rm-skin-footer .asm-footer-who {
  flex-basis: 100% !important; width: 100%;
  padding-top: 20px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.1);
}
#main_body .rm-skin-footer .asm-footer-who h4 {
  font-family: var(--skin-font); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.7px; color: #ffffff !important; margin: 0 0 6px;
}
#main_body .rm-skin-footer .asm-footer-who p {
  color: rgba(255,255,255,0.65); font-size: 13px; line-height: 1.6; margin: 0;
}

/* Affiliate logos */
#main_body .rm-skin-footer .asm-footer-affiliates {
  background-color: var(--skin-footer-aff-bg); padding: 20px 24px; box-sizing: border-box;
}
#main_body .rm-skin-footer .asm-footer-affiliates-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; gap: 14px !important;
}
#main_body .rm-skin-footer .asm-footer-affiliates h5 {
  font-family: var(--skin-font); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.7px; color: #53565A; margin: 0;
}
#main_body .rm-skin-footer .asm-footer-aff-logos {
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 28px; flex-wrap: wrap !important;
}
#main_body .rm-skin-footer .asm-footer-aff-logos a { display: inline-block; text-decoration: none !important; }
#main_body .rm-skin-footer .asm-footer-aff-logos a img {
  height: 38px !important; width: auto !important; display: block; opacity: 0.85;
  transition: opacity 0.15s ease;
}
#main_body .rm-skin-footer .asm-footer-aff-logos a:hover img { opacity: 1; }

/* Copyright */
#main_body .rm-skin-footer .asm-footer-bottom {
  background-color: #000000; padding: 11px 24px; text-align: center; box-sizing: border-box;
}
#main_body .rm-skin-footer .asm-footer-bottom p {
  color: rgba(255,255,255,0.4); font-family: var(--skin-font); font-size: 12px; margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
  #main_body .rm-skin-footer .asm-footer-main-inner { flex-wrap: wrap !important; gap: 32px; }
  #main_body .rm-skin-footer .asm-footer-brand {
    flex-basis: 100% !important; flex: 0 0 100% !important;
    border-right: none !important; padding-right: 0 !important;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.67);
  }
}
@media (max-width: 560px) {
  #main_body .rm-skin-footer .asm-footer-col { flex-basis: 100% !important; max-width: 100% !important; }
}