/* =============================================================
   URR WCAG - Global Accessibility Styles
   Covers: skip links, focus rings, gallery thumbnails,
           lightbox, session timeout modal, Q/A block,
           body offset for fixed navbar.

   Companion files:
     urr-nav.css      - navbar, dropdowns, mobile panel, sidenav
     urr-nav.js       - navigation controller
     urr-lightbox.js  - lightbox controller
     urr-questions.js - Q/A collapsible block logic
     urr-timeout.js   - session timeout modal logic
============================================================= */

/* -- SKIP LINKS - WCAG 2.4.1 Bypass Blocks ------------------
   Visually hidden until focused; snaps to top-left on focus.  */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  background: #fff;
  color: #000;
  padding: 8px 16px;
  font-weight: bold;
  text-decoration: none;
}
.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  outline: 3px solid #4C2F51;
}

/* -- FOCUS RINGS - WCAG 2.4.7 Focus Visible -----------------
   Footer sits on purple background -- uses white ring (same as
   navbar). All other elements use purple ring on white/light
   backgrounds. Both :focus and :focus-visible needed to
   override W3.CSS button/link defaults.                        */
footer a:focus,
footer a:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 2px !important;
}
a:focus, button:focus {
  outline: 3px solid #572b7a;
  outline-offset: 2px;
}

/* -- GALLERY - Thumbnail list --------------------------------
   Flex layout keeps thumbnails in a row with consistent
   spacing. display:block on <img> removes the inline
   descender gap that causes a white bar below the image.       */
.gallery {
  list-style: none;
  padding: 0;
  margin: 0 0 1em 0;   /* bottom: 1em = one line of breathing room below gallery */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.gallery li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 400px;
  height: 270px;
  background-color: #000;
  overflow: hidden;
}
.gallery img {
  max-width: 400px;
  max-height: 270px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 600px) {
  .gallery li {
    flex: 0 0 100%;
    height: auto;
    min-height: 200px;
  }
  .gallery img {
    max-width: 100%;
    max-height: 300px;
  }
}

/* -- GALLERY - Zoom button wrapper ---------------------------
   Wraps each thumbnail <img>. Provides focus ring and
   hover opacity feedback for sighted mouse users.
   Used by urr-lightbox.js -- trigger class: .urr-zoom-btn      */
.urr-zoom-btn {
  background: none;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  position: relative;
}
.urr-zoom-btn:hover img,
.urr-zoom-btn:focus img { opacity: 0.85; }
.urr-zoom-btn:focus {
  outline: 3px solid #572b7a;
  outline-offset: 2px;
  border-color: #572b7a;
}

/* -- LIGHTBOX - Full-screen image viewer ---------------------
   Single reusable shell populated by urr-lightbox.js on click.
   src and alt are read from the thumbnail <img> -- no
   duplicate image references in HTML required.

   Z-index stack:
     navbar           = 100
     sidenav          = 300
     lightbox         = 9000
     lightbox close   = 9001
     timeout modal    = 10000                                   */
#urrLightbox {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.88);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow-y: auto;
  padding: 44px 0 16px;  /* 44px top clears fixed close btn */
  box-sizing: border-box;
}
#urrLightbox.urr-lb-open { display: flex; }

#urrLightbox .urr-lb-wrap {
  position: relative;
  display: inline-flex;
  max-width: 90vw;
  flex-shrink: 0;
}
#urrLightbox .urr-lb-wrap img {
  max-width: 90vw;
  max-height: calc(100vh - 120px); /* leaves room for close btn + caption */
  min-width: min(500px, 90vw);     /* ensures small images render >= card width */
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

#urrLightbox .urr-lb-close {
  position: fixed;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.80);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 4px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 9001;
}
#urrLightbox .urr-lb-close:hover { background: #000; }
#urrLightbox .urr-lb-close:focus {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* -- TIMEOUT MODAL -------------------------------------------
   Shown by urr-timeout.js after 8 hours of inactivity.       */
#timeoutModal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.65);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
#timeoutModal[style*="display: block"],
#timeoutModal[style*="display:block"] {
  display: flex !important;
}
.timeout-modal-inner {
  background: #fff;
  border-radius: 6px;
  padding: 32px 40px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.timeout-modal-inner h2 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  color: #3a1a55;
}
.timeout-modal-inner p {
  margin: 0 0 24px;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}
#yesBtn, #noBtn {
  display: inline-block;
  padding: 10px 32px;
  margin: 0 8px;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#yesBtn { background: #572b7a; color: #fff; }
#yesBtn:hover, #yesBtn:focus {
  background: #3a1a55;
  outline: 3px solid #3a1a55;
  outline-offset: 2px;
}
#noBtn { background: #e0e0e0; color: #333; }
#noBtn:hover, #noBtn:focus {
  background: #bbb;
  outline: 3px solid #555;
  outline-offset: 2px;
}

/* -- Q/A BLOCK -----------------------------------------------
   Collapsible logic managed by urr-questions.js.              */
.section-intro {
  font-size: 1.05rem;
  font-weight: 600;
  color: #3a1a55;
  margin: 1em 0;
}
.collapsible {
  background-color: #333;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  font-size: 15px;
  margin-top: 16px;
}
.collapsible:hover,
.collapsible.active { background-color: #222; }
.question_num {
  float: right;
  text-align: right;
}
.content {
  padding: 18px;
  display: none;
  overflow: hidden;
  background-color: #d9d9d9;
  margin-bottom: 16px;
}

/* -- BODY OFFSET ---------------------------------------------*/
body {
  padding-top: 46px;
  overflow-x: hidden;
}

/* -- REFERENCE LIST - PRE block responsive wrap -------------*/
pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* -- VIDEO CONTAINER -----------------------------------------*/
.video_container {
  margin: 20px auto 60px auto;
  text-align: center;
  width: 720px;
}
.video_file video {
  width: 720px;
  height: 480px;
}
.video_caption {
  overflow: hidden;
  width: 720px;
  font-style: italic;
  font-size: 0.9em;
  color: #555;
  margin-top: 8px;
}
@media (max-width: 760px) {
  .video_container { width: 100%; }
  .video_file video { width: 100%; height: auto; }
  .video_caption { width: 100%; }
}

/* -- FA-COMPAT: X (TWITTER) ICONS ---------------------------
   Font Awesome 4.7 does not include the X (formerly Twitter)
   logo. These rules backfill both plain and square variants
   using official SVG paths from Font Awesome Free 7.2.0.

   Usage (keep fa base class for sizing/alignment):
     Plain:  <i class="fa fa-x-twitter" aria-hidden="true"></i>
     Square: <i class="fa fa-x-twitter-square" aria-hidden="true"></i>

   No whitespace between adjacent icon <a> tags in HTML --
   whitespace renders as a visible gap character.

   Source: fontawesome-free-7.2.0-web/svgs/brands/
   License: CC BY 4.0 (Font Awesome Free)                      */
.fa-x-twitter:before,
.fa-x-twitter-square:before {
  content: '' !important;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
/* Plain X logo */
.fa-x-twitter:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M357.2 48L427.8 48 273.6 224.2 455 464 313 464 201.7 318.6 74.5 464 3.8 464 168.7 275.5-5.2 48 140.4 48 240.9 180.9 357.2 48zM332.4 421.8l39.1 0-252.4-333.8-42 0 255.3 333.8z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M357.2 48L427.8 48 273.6 224.2 455 464 313 464 201.7 318.6 74.5 464 3.8 464 168.7 275.5-5.2 48 140.4 48 240.9 180.9 357.2 48zM332.4 421.8l39.1 0-252.4-333.8-42 0 255.3 333.8z'/%3E%3C/svg%3E");
}
/* Square X logo -- matches fa-facebook-square style */
.fa-x-twitter-square:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm297.1 84l-103.8 118.6 122.1 161.4-95.6 0-74.8-97.9-85.7 97.9-47.5 0 111-126.9-117.1-153.1 98 0 67.7 89.5 78.2-89.5 47.5 0zM323.3 367.6l-169.9-224.7-28.3 0 171.8 224.7 26.4 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm297.1 84l-103.8 118.6 122.1 161.4-95.6 0-74.8-97.9-85.7 97.9-47.5 0 111-126.9-117.1-153.1 98 0 67.7 89.5 78.2-89.5 47.5 0zM323.3 367.6l-169.9-224.7-28.3 0 171.8 224.7 26.4 0z'/%3E%3C/svg%3E");
}

/* ============================================================
   PURPPURCHBUTTON -- Purchase/CTA button
   Copied from global.css for use in new VPAT template pages
============================================================ */
.PurpPurchButton {
  -moz-box-shadow: inset 1px 1px 7px 5px #e184f3;
  -webkit-box-shadow: inset 1px 1px 7px 5px #e184f3;
  box-shadow: inset 1px 1px 7px 5px #e184f3;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #572B7A), color-stop(1, #572B7A));
  background: -moz-linear-gradient(center top, #c123de 5%, #572B7A 100%);
  background-color: #c123de;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #a511c0;
  display: inline-block;
  color: #ffffff;
  font-family: arial;
  font-size: 22px;
  font-weight: bold;
  padding: 30px 34px;
  text-decoration: none;
  text-shadow: 2px 3px 0px #8d0fa6;
}
.PurpPurchButton:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a20dbd), color-stop(1, #c123de));
  background: -moz-linear-gradient(center top, #a20dbd 5%, #c123de 100%);
  background-color: #a20dbd;
}
.PurpPurchButton:active {
  position: relative;
  top: 1px;
}
a.PurpPurchButton:link { color: #ffffff; }
a.PurpPurchButton:visited { color: #ffffff; }


/* ============================================================
   BACK TO TOP BUTTON
   Button HTML injected by urr-nav.js -- styles here.
   JS handles: scroll threshold, lightbox hide, fullscreen hide,
   sidenav shift via body.sidenav-open class.
============================================================ */
#urrBackToTop {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #572B7A;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, right 0.3s ease, background 0.15s ease;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
#urrBackToTop.urr-btt-visible {
  opacity: 1;
  visibility: visible;
}
#urrBackToTop:hover,
#urrBackToTop:focus {
  background: #4C2F51;
  outline: 2px solid #f9c51a;
  outline-offset: 2px;
}
/* Shift left when sidenav is open on private pages */
body.sidenav-open #urrBackToTop {
  right: 324px;
}
@media (max-width: 600px) {
  #urrBackToTop {
    bottom: 16px;
    right: 16px;
  }
  body.sidenav-open #urrBackToTop {
    right: 16px;
  }
}


/* ============================================================
   SHARED INFO PANELS: .urr-info-header / .urr-info-body / .urr-ref-list
   Used on: all reference pages (9 private + public references - Copy.html),
   disclosure, Privacy, otherResources, contributors, contact, about.
   MOVED FROM: inline <style> blocks in each of those pages.
   TO TEST: Open any reference page (e.g. referencesAbd - Copy.html) --
   purple header bar, white body with border, list items with divider lines.
============================================================ */
.urr-info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #572B7A;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px 6px 0 0;
  font-size: 1rem;
  font-weight: bold;
}
.urr-info-header i { font-size: 1.1rem; }
.urr-info-body {
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 16px 20px;
  margin-bottom: 20px;
  background: #fff;
}
.urr-ref-list { list-style: none; padding: 0; margin: 0; }
.urr-ref-list li {
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.urr-ref-list li:last-child { border-bottom: none; padding-bottom: 0; }
.urr-ref-list a { color: #572B7A; word-break: break-all; }

/* ============================================================
   SPECIALTY REGISTRATION ROWS: .urr-reg-row / .urr-reg-slideshow / .urr-reg-content
   Used on: all specialty userReg pages (8 pages):
   abdUserReg, breastUserReg, cardiacUserReg, cardiacUserRegCCI,
   FetalEchoUserReg, OBGYNUserReg, SPIUserReg, vascularUserReg,
   vascularUserRegCCI.
   MOVED FROM: identical inline <style> block in each of those pages.
   TO TEST: Open any userReg page (e.g. abdUserReg - Copy.html) --
   two-column layout: slideshow left, content right. Resize below
   700px -- should stack to single column, slideshow on top.
============================================================ */
.urr-reg-row {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}
.urr-reg-slideshow {
  flex: 0 0 48%;
  max-width: 48%;
  border-radius: 8px;
  overflow: hidden;
}
.urr-reg-content { flex: 1 1 auto; }
@media (max-width: 700px) {
  .urr-reg-row { flex-direction: column; }
  .urr-reg-slideshow { max-width: 100%; flex: 0 0 auto; }
}

/* ============================================================
   REGISTERED USER LOGIN ROWS: .urr-login-row etc.
   Used on: RegisteredUserLogIn222 - Copy.html, RegisteredUserLogIn22 - Copy.html.
   MOVED FROM: inline <style> in those pages.
   TO TEST: Open RegisteredUserLogIn222 - Copy.html -- full-width rows,
   specialty image left (180px), title+buttons right. Resize below 600px --
   title shows first, image second, buttons third (stacked column).
============================================================ */
.urr-login-row {
  display: flex;
  align-items: stretch;
  border: 1px solid #ddd;
  border-left-width: 5px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #fff;
}
.urr-login-row img {
  flex: 0 0 180px;
  width: 180px;
  object-fit: cover;
  display: block;
}
.urr-login-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  text-align: center;
}
.urr-login-title { width: 100%; text-align: center; }
.urr-login-content h2 {
  font-size: 1.2rem;
  color: #333;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.urr-login-content h2 i { font-size: 1.2rem; width: 20px; text-align: center; flex-shrink: 0; }
.urr-login-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.urr-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #572B7A;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: bold;
  white-space: nowrap;
  transition: background 0.15s;
}
.urr-login-btn:hover, .urr-login-btn:focus {
  background: #4C2F51;
  color: #f9c51a;
  outline: 2px solid #f9c51a;
  outline-offset: 2px;
}
/* Specialty left-border + icon colors */
.urr-card-abd  { border-left-color: #9B6FBE; }
.urr-card-echo { border-left-color: #4F81BE; }
.urr-card-br   { border-left-color: #FF99CB; }
.urr-card-fe   { border-left-color: #4473C5; }
.urr-card-ob   { border-left-color: #FFFF4D; }
.urr-card-spi  { border-left-color: #7F8000; }
.urr-card-vasc { border-left-color: #FF5455; }
.urr-card-abd  h2 i { color: #9B6FBE; }
.urr-card-echo h2 i { color: #4F81BE; }
.urr-card-br   h2 i { color: #FF99CB; }
.urr-card-fe   h2 i { color: #4473C5; }
.urr-card-ob   h2 i { color: #FFFF4D; }
.urr-card-spi  h2 i { color: #7F8000; }
.urr-card-vasc h2 i { color: #FF5455; }
@media (max-width: 600px) {
  .urr-login-row { flex-direction: column; }
  .urr-login-row > img    { order: 2; flex: 0 0 auto; width: 100%; height: 140px; }
  .urr-login-title        { order: 1; padding: 14px 14px 8px; }
  .urr-login-btns         { order: 3; flex-direction: column; padding: 8px 14px 14px; }
  .urr-login-btn          { justify-content: center; }
  .urr-login-content      { display: contents; }
}

/* ============================================================
   CME USER LOGIN CARDS: .urr-cme-card etc.
   Used on: CMEUserLogIn - Copy.html.
   MOVED FROM: inline <style> in that page.
   TO TEST: Open CMEUserLogIn - Copy.html -- colored left-border cards,
   icon on left, course title + login button right. Check mobile layout.
============================================================ */
.urr-cme-card {
  display: flex;
  align-items: stretch;
  border: 1px solid #ddd;
  border-left-width: 5px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #fff;
}
.urr-cme-icon-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 14px;
  font-size: 1.8rem;
  flex-shrink: 0;
  background: #faf8fc;
  border-right: 1px solid #eee;
}
.urr-cme-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 18px;
}
.urr-cme-title {
  font-size: 1.05rem;
  font-weight: bold;
  color: #333;
  margin: 0 0 10px;
}
.urr-cme-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #572B7A;
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
  padding: 7px 18px;
  font-size: 0.85rem;
  font-weight: bold;
  align-self: flex-start;
  transition: background 0.15s;
}
.urr-cme-login-btn:hover, .urr-cme-login-btn:focus {
  background: #4C2F51;
  color: #f9c51a;
  outline: 2px solid #f9c51a;
  outline-offset: 2px;
}
.urr-cme-new-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: bold;
  background: #f9c51a;
  color: #333;
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
  margin-left: 6px;
}

/* ============================================================
   CME COURSE EVAL ROWS: .urr-eval-row etc.
   Used on: CMEcourseeval - Copy.html.
   MOVED FROM: inline <style> in that page.
   HTML structure: .urr-eval-row > img (direct) + > a (direct)
     a contains two spans: .urr-eval-title and .urr-eval-btn
   TO TEST: Open CMEcourseeval - Copy.html -- image left (120px),
   course title + pencil button right. Resize below 600px --
   image full width on top, title + button stacked below.
============================================================ */
.urr-eval-row {
  display: flex;
  align-items: stretch;
  border: 1px solid #ddd;
  border-left-width: 5px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #fff;
  text-decoration: none;
}
/* Direct img child -- fixed 120px column. No height set -- flex stretch
   on the parent row handles height, so image always fills the full row. */
.urr-eval-row > img {
  flex: 0 0 120px;
  width: 120px;
  object-fit: cover;
  display: block;
  align-self: stretch;
}
/* Direct a child -- flex fill, holds title + button.
   align-items: center keeps title+button vertically centred
   within whatever height the row grows to. */
.urr-eval-row > a {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
}
.urr-eval-row > a:hover,
.urr-eval-row > a:focus {
  outline: none;
}
/* Specialty left-border colors */
.urr-eval-abd  { border-left-color: #9B6FBE; }
.urr-eval-echo { border-left-color: #4F81BE; }
.urr-eval-br   { border-left-color: #FF99CB; }
.urr-eval-fe   { border-left-color: #4473C5; }
.urr-eval-ob   { border-left-color: #FFFF4D; }
.urr-eval-spi  { border-left-color: #7F8000; }
.urr-eval-vasc { border-left-color: #FF5455; }
/* Extremity Venous Disease -- distinct from Vascular (#FF5455) */
.urr-eval-extven { border-left-color: #B3A1C9; }
.urr-eval-title {
  flex: 1 1 auto;
  font-size: 1rem;
  font-weight: bold;
  color: #333;
}
.urr-eval-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #572B7A;
  color: #fff;
  border-radius: 20px;
  padding: 7px 18px;
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, outline 0.15s;
}
.urr-eval-row > a:hover .urr-eval-btn,
.urr-eval-row > a:focus .urr-eval-btn {
  background: #4C2F51;
  outline: 2px solid #f9c51a;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .urr-eval-row { flex-direction: column; }
  .urr-eval-row > img { width: 100%; height: 100px; flex: 0 0 auto; }
  .urr-eval-row > a { flex-direction: column; align-items: flex-start; }
  .urr-eval-btn { align-self: flex-start; }
}

/* ============================================================
   FAQ ACCORDION: .urr-faq-btn / .urr-faq-panel
   Used on: faqs - Copy.html.
   JS controller: Scripts/urr-faq.js
   MOVED FROM: inline <style> in faqs - Copy.html.
   TO TEST: Open faqs - Copy.html -- purple accordion buttons,
   white panels expand/collapse on click. First question open by default.
============================================================ */
.urr-faq-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #572B7A;
  color: #fff;
  border: none;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  margin-bottom: 2px;
  gap: 10px;
}
.urr-faq-btn:hover, .urr-faq-btn:focus {
  background: #4C2F51;
  outline: 2px solid #f9c51a;
  outline-offset: 2px;
}
.urr-faq-btn .urr-faq-icon { flex-shrink: 0; }
.urr-faq-panel {
  border: 1px solid #ddd;
  border-radius: 0 0 6px 6px;
  padding: 16px 20px;
  margin-bottom: 10px;
  background: #fff;
  display: none;
}
.urr-faq-panel.urr-open { display: block; }
.urr-faq-panel p:last-child { margin-bottom: 0; }
.urr-faq-panel ul { padding-left: 20px; }

/* ============================================================
   PRODUCT REVIEWS FILTER + CARDS: .pr-filter-btn / .pr-card etc.
   Used on: productReviews - Copy.html.
   JS controller: Scripts/urr-reviews.js
   MOVED FROM: inline <style> in productReviews - Copy.html.
   TO TEST: Open productReviews - Copy.html -- pill filter buttons
   across top, review cards below. Click a specialty -- only matching
   cards show. "All" button restores all.
============================================================ */
.pr-filter-btn {
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  cursor: pointer;
  color: #555;
  margin-bottom: 6px;
}
.pr-filter-btn.pr-active {
  background: #4C2F51;
  color: #fff;
  border-color: #4C2F51;
}
.pr-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.pr-spec-badge {
  font-size: 11px;
  background: #f0eaf4;
  color: #4C2F51;
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 8px;
}
.pr-rating {
  float: right;
  font-size: 13px;
  font-weight: bold;
  color: #4C2F51;
}
.pr-name {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 6px;
  color: #333;
}
.pr-text {
  font-size: 13px;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* ============================================================
   CME APPLICATION PAGE: .urr-cme-step-grid / .urr-cme-action-row etc.
   Used on: cmeApplication - Copy.html.
   MOVED FROM: inline <style> in that page.
   TO TEST: Open cmeApplication - Copy.html -- 3-column step grid,
   action row with buttons and text inline. Resize below 700px -- grid
   collapses to 1 column.
============================================================ */
.urr-cme-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.urr-cme-action-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.urr-cme-specialty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
}
@media (max-width: 700px) {
  .urr-cme-step-grid { grid-template-columns: 1fr; }
  .urr-cme-specialty-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME PAGE INDEX ROW: .urr-index-row / .urr-index-slideshow etc.
   Used on: index - Copy.html.
   MOVED FROM: inline <style> in that page.
   TO TEST: Open index - Copy.html -- two-column layout: slideshow
   left, content right. Resize below 700px -- stacks to single column.
============================================================ */
.urr-index-row {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}
.urr-index-slideshow {
  flex: 0 0 48%;
  max-width: 48%;
  border-radius: 8px;
  overflow: hidden;
}
.urr-index-content { flex: 1 1 auto; }
@media (max-width: 700px) {
  .urr-index-row { flex-direction: column; }
  .urr-index-slideshow { max-width: 100%; flex: 0 0 auto; }
}

/* ============================================================
   FETAL ECHO COURSE SYLLABUS GRID: .urr-organ-grid
   Used on: courseSyllabusFetal - Copy.html.
   MOVED FROM: inline <style> in that page.
   TO TEST: Open courseSyllabusFetal - Copy.html -- organ list
   displays as 2-column grid. Resize below 600px -- collapses to 1 column.
============================================================ */
.urr-organ-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
  margin: 0 0 16px 24px;
}
@media (max-width: 600px) {
  .urr-organ-grid { grid-template-columns: 1fr; margin-left: 0; }
}

/* ============================================================
   PHYSICS FRACTION DISPLAY: .frac / .frac-num / .frac-den
   Used on: Physics/SPIinteraction - Copy.html (and future Physics pages).
   MOVED FROM: inline <style> in SPIinteraction - Copy.html.
   NOTE: Also listed as open issue #6 -- add before Physics upload.
   TO TEST: Open Physics/SPIinteraction - Copy.html -- fraction
   expressions should display with numerator above denominator,
   baseline-aligned with surrounding text.
============================================================ */
.frac {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  vertical-align: middle;
  margin: 0 8px;
}
.frac-num { border-bottom: 1px solid currentColor; padding: 0 6px; }
.frac-den { padding: 0 6px; }

/* ============================================================
   VIDEO CONTAINER CENTERING: .video_container
   Used on: all Echo video Copy pages (51 pages), Fetaltrial - Copy.html.
   Ensures video and caption are centered within the content column
   on all screen sizes including mobile.
   NOTE: style="text-align:center;" is also applied inline per-container
   by Convert_Video_Echo_v2.ps1 -- this rule provides the global default.
   TO TEST: Open any Echo video page (e.g. Echo/Afib - Copy.html) on
   mobile -- video should be centered and fit within the viewport.
============================================================ */
.video_container {
  text-align: center;
}

/* ============================================================
   ABBREVIATION LIST: .urr-abbr-list
   Used on: AdultEchoCME/Abbreviations - Copy.html
   Two-column CSS grid layout with alternating row highlight.
   Grid (not column-count) is used so nth-child striping works
   correctly across both columns.
   Abbr term: bold, fixed 90px column. Definition: remaining width.
   TO TEST: Open Abbreviations - Copy.html -- two equal columns of
   abbr/definition pairs, alternating light purple/white rows.
   Resize below 600px -- collapses to single column.
============================================================ */
.urr-abbr-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}
.urr-abbr-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: baseline;
  gap: 0 8px;
  padding: 7px 12px;
  font-size: 0.9rem;
  line-height: 1.4;
  border-bottom: 1px solid #eee;
}
/* Alternating row highlight -- nth-child counts grid cells,
   so odd items (1,3,5...) get the tint regardless of column */
.urr-abbr-list li:nth-child(odd)  { background: #f7f3fa; }
.urr-abbr-list li:nth-child(even) { background: #fff; }
.urr-abbr-list li:last-child,
.urr-abbr-list li:nth-last-child(2) { border-bottom: none; }
.urr-abbr-list li strong {
  color: #4C2F51;
  font-weight: bold;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .urr-abbr-list { grid-template-columns: 1fr; }
}

/* ============================================================
   APA 7 HANGING INDENT: .urr-apa7-list
   Used on: all private reference pages that use APA 7 citation format.
   Applied as a modifier alongside .urr-ref-list:
     <ul class="urr-ref-list urr-apa7-list">
   APA 7 requires the first line of each reference to be flush left,
   with subsequent lines indented 0.5in (approx 1.5em at body size).
   This is the "hanging indent" style standard in APA 7th edition.
   The image/source lists on reference pages do NOT use this class --
   only the main citations block.
   TO TEST: Open any APA7 reference page -- second and subsequent lines
   of each citation should indent approx 1.5em from the left edge.
   First line of each citation should be flush to the container edge.
============================================================ */
.urr-apa7-list li {
  padding-left: 1.5em;
  text-indent: -1.5em;
}

/* ============================================================
   OPTION A FIGURE CARD: .urr-fig / .urr-fig-img / .urr-fig-num /
   .urr-fig-caption / .urr-fig-group / .urr-fig-group-caption
   Used on: AdultEchoCME chapter pages (AE2d - Copy.html and others).
   Each figure is a bordered card: purple number badge overlaid top-left,
   image fills the card body, caption in a grey bar at the bottom.
   Multiple related figures may be placed side by side in .urr-fig-group.
   The lightbox (urr-lightbox.js) reads the caption text from
   .urr-fig-caption and displays it below the enlarged image with a
   collapsible toggle button. See urr-lightbox.js for caption injection.
   TO TEST: Open AE2d - Copy.html -- figure cards render with purple badge,
   click image to open lightbox, caption appears below with toggle button,
   click toggle to collapse/expand the caption text.
============================================================ */

/* -- Standalone figure card --------------------------------- */
.urr-fig {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  margin: 16px 0;
  max-width: 500px;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  vertical-align: top;
}

/* -- Image wrapper inside card -- zoom button fills card ---- */
.urr-fig-img {
  position: relative;
  display: block;
  width: 100%;
  background: #000;
  border: none;
  padding: 0;
  cursor: zoom-in;
  text-align: center;  /* centers images narrower than the card */
}
.urr-fig-img img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;  /* centers image within the full-width button */
  object-fit: contain;
}
.urr-fig-img:hover img,
.urr-fig-img:focus img { opacity: 0.88; }
.urr-fig-img:focus {
  outline: 3px solid #572B7A;
  outline-offset: -3px;
}

/* -- Figure number badge overlaid top-left of image --------- */
.urr-fig-num {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(87,43,122,0.87);
  color: #fff;
  font-size: 0.78rem;
  font-weight: bold;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* -- Caption bar at bottom of card -------------------------- */
.urr-fig-caption {
  background: #f7f7f7;
  border-top: 1px solid #ddd;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: #444;
  line-height: 1.5;
}

/* -- Group: two figures side by side ----------------------- */
.urr-fig-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
}
.urr-fig-group .urr-fig {
  flex: 1 1 280px;
  margin: 0;
  max-width: 500px;
}

/* -- Shared caption below a group -------------------------- */
.urr-fig-group-caption {
  font-size: 0.88rem;
  color: #444;
  line-height: 1.5;
  margin: 0 0 20px;
  padding: 10px 14px;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 8px 8px;
}

@media (max-width: 600px) {
  .urr-fig          { max-width: 100%; }
  .urr-fig-group .urr-fig { flex: 0 0 100%; max-width: 100%; }
}

/* -- Lightbox caption panel (injected by urr-lightbox.js) --- */
/* Caption sits below the image inside the lightbox wrap.      */
/* Toggle button collapses/expands it without hiding the image. */
.urr-lb-caption-wrap {
  max-width: 90vw;
  width: 90vw;
  margin: 4px auto 0;
  background: rgba(0,0,0,0.72);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.urr-lb-caption-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: rgba(87,43,122,0.85);
  color: #fff;
  border: none;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.03em;
}
.urr-lb-caption-toggle:hover,
.urr-lb-caption-toggle:focus {
  background: rgba(72,30,107,0.95);
  outline: 2px solid #f9c51a;
  outline-offset: -2px;
}
/* Icon sits on the right side of the toggle bar */
.urr-lb-caption-toggle .urr-lb-toggle-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
  opacity: 0.9;
}
.urr-lb-caption-text {
  padding: 10px 14px;
  font-size: 0.88rem;
  color: #f0f0f0;
  line-height: 1.6;
}
.urr-lb-caption-text.urr-lb-cap-hidden {
  display: none;
}

/* ============================================================
   PRODUCT PAGES: .urr-prod-hero / .urr-prod-accordion /
   .urr-section-label / .urr-tier-row / .urr-guarantee /
   .urr-viewcart / .urr-trademark
   Used on: abdProducts2, aeardmsProducts2, aecciProducts2,
   brProducts2, OBGYNProducts2, SPIProducts2, vascardmsProducts2,
   vasccciProducts2, FEpurchase2, CMEpurchase2 -- Copy.html pages.
   Also used on RegFormcompleted pages in Missed_Pages subfolders.
   MOVED FROM: inline <style> block in each product page.
   TO TEST: Open abdProducts2 - Copy.html -- purple gradient hero,
   collapsible accordion, section labels, tier rows with featured
   left-border, guarantee panel, view cart centred at bottom.
   Resize below 600px -- tier rows should wrap, price + cart stack
   horizontally below title.
============================================================ */
.urr-prod-hero {
  background: #3C2070;
  background-image: linear-gradient(135deg, #3C2070 0%, #6B3FA0 100%);
  border-radius: 12px;
  padding: 28px 32px;
  color: #E8E0F5;
  margin-bottom: 28px;
}
.urr-prod-hero h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.2;
}
.urr-prod-hero .urr-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  justify-content: center;
}
.urr-hero-tag {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.78rem;
  color: #E8E0F5;
}
.urr-prod-hero .urr-hero-desc {
  font-size: 0.9rem;
  line-height: 1.7;
 /* max-width: 700px; */
}

.urr-prod-accordion {
  background: #fff;
  border: 1px solid #E0D8EC;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.urr-accordion-toggle {
  width: 100%;
  background: #F8F5FC;
  border: none;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}
.urr-accordion-toggle span {
  font-size: 0.95rem;
  font-weight: 600;
  color: #3C1F5A;
}
.urr-accordion-toggle .fa { color: #7F77DD; }
.urr-accordion-body {
  padding: 14px 18px;
  font-size: 0.9rem;
  color: #333;
  line-height: 1.7;
  display: none;
}
.urr-accordion-body.open { display: block; }

.urr-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #E0D8EC;
}

.urr-tier-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #E8E0F5;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
  transition: box-shadow 0.15s;
}
.urr-tier-row:hover { box-shadow: 0 2px 8px rgba(83,74,183,0.10); }
.urr-tier-row.urr-tier-featured {
  border-left: 4px solid #7F77DD;
  background: #FAFAFF;
}

.urr-tier-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #EEEDFE;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.urr-tier-icon .fa { color: #534AB7; font-size: 1.1rem; }

.urr-tier-info { flex: 1; min-width: 0; }
.urr-tier-name {
  font-size: 0.97rem;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
}
.urr-best-badge {
  display: inline-block;
  background: #7F77DD;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.04em;
}
.urr-tier-desc { font-size: 0.82rem; color: #666; margin-top: 2px; }

.urr-tier-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.urr-tier-price {
  font-size: 1.4rem;
  font-weight: 700;
  color: #534AB7;
  line-height: 1;
}
.urr-tier-cart form { margin: 0; }
.urr-tier-cart input[type=image] {
  height: 34px;
  width: auto;
  cursor: pointer;
  display: block;
}

.urr-guarantee {
  border-left: 4px solid #572B7A;
  background: #F4EFF9;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 0.9rem;
  color: #3C1F5A;
  line-height: 1.7;
  margin: 24px 0;
}
.urr-guarantee strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 4px;
}

.urr-viewcart { text-align: center; margin: 28px 0 10px; }
.urr-viewcart p { font-weight: 600; color: #333; margin-bottom: 10px; }
.urr-viewcart a img { height: 44px; width: auto; }

.urr-trademark { font-size: 0.8rem; color: #777; margin-top: 24px; text-align: center; }

@media (max-width: 600px) {
  .urr-prod-hero { padding: 20px 18px; }
  .urr-tier-row { flex-wrap: wrap; }
  .urr-tier-right {
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }
}


/* ============================================================
   VIDEO LINK CARD: .urr-vid-card / .urr-vid-card-icon /
   .urr-vid-card-body / .urr-vid-card-title
   Used on: trial pages that link to a companion video page
   (e.g. cardiacTrialCCI - Copy.html -> cardiacTrial1.html).
   Button inside card uses existing .urr-login-btn class.
   TO TEST: Open cardiacTrialCCI - Copy.html -- yellow card near
   bottom with black film icon left, title + purple button centred.
   Left border accent is site purple (#572B7A). Icon is black (#333).
============================================================ */
.urr-vid-card {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #ddd;
  border-left: 5px solid #572B7A;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px auto;
  max-width: 600px;
  background: #fffcd5;
}
.urr-vid-card-icon {
  font-size: 2rem;
  color: #333;
  flex-shrink: 0;
}
.urr-vid-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
  gap: 8px;
}
.urr-vid-card-title {
  font-weight: bold;
  color: #333;
}
/* ============================================================
   MOST COMMON LIST: .urr-mostcommon-list
   Single-column alternating-color list.
   Same palette as .urr-abbr-list. Used on: BRmostcommon - CopyV2.html
============================================================ */
.urr-mostcommon-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
  border-radius: 0 0 6px 6px;
}
.urr-mostcommon-list li {
  padding: 7px 12px;
  font-size: 1.1rem;
  line-height: 1.5;
  border-bottom: 1px solid #eee;
}
.urr-mostcommon-list li:nth-child(odd)  { background: #f7f3fa; }
.urr-mostcommon-list li:nth-child(even) { background: #ffffff; }
.urr-mostcommon-list li:last-child { border-bottom: none; }