/* RPS Sticky Sidebar — front-end styles (tickets 86bb9n76u / 86bb9n785) */

/* Sidebar disabled on this page: collapse its column so content goes full width */
.elementor-column:has(.rps-ssb-off) {
  display: none;
}

.elementor-container:has(.rps-ssb-off) > .elementor-column:not(:has(.rps-ssb-off)),
.elementor-section .elementor-container:has(.rps-ssb-off) > .elementor-column.elementor-col-66 {
  width: 100%;
}

.e-con > .elementor-widget-rps_sticky_sidebar:has(.rps-ssb-off) {
  display: none;
}

.rps-ssb {
  background: #fff;
  border: 3px solid #8e8e93; /* gray per mockup (client 2026-08-13, ticket 86bb9n75p) */
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5;
}

.rps-ssb__header {
  background: #8e8e93; /* gray header per mockup (client 2026-08-13, ticket 86bb9n75p) */
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px 16px;
}

.rps-ssb__body {
  padding: 8px 22px 22px;
}

/* Collapse toggle (86bb9n785, client 2026-08-18): mobile/tablet only —
   hidden by default so desktop never shows it. */
.rps-ssb__toggle {
  display: none;
}

.rps-ssb__item {
  padding: 18px 0;
  border-bottom: 1px solid #e3e3e3;
}

.rps-ssb__item:last-child,
.rps-ssb__closing {
  border-bottom: 0;
}

.rps-ssb__heading {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #14181f;
}

.rps-ssb__num {
  margin-right: 2px;
}

.rps-ssb__text {
  color: #333;
  margin-bottom: 12px;
}

.rps-ssb__text p {
  margin: 0 0 8px;
}

.rps-ssb__text p:last-child {
  margin-bottom: 0;
}

.rps-ssb__btn {
  display: inline-block;
  background: #fd5d14; /* matches content-section buttons */
  color: #fff !important;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 24px;
  border-radius: 8px;
  text-decoration: none;
  text-transform: uppercase; /* match site buttons (client 2026-08-14, ticket 86bb9n75p) */
  letter-spacing: 0.02em;
  transition: background 0.2s ease;
  margin: 0 auto;
}

.rps-ssb__item {
  text-align: left;
}

.rps-ssb__item .rps-ssb__btn {
  display: table;
  margin: 0 auto;
}

.rps-ssb__btn:hover {
  background: #dd4b0a;
  color: #fff;
}

.rps-ssb__btn-arrow {
  margin-right: 8px;
}

.rps-ssb__contact {
  color: #14181f;
}

.rps-ssb__contact--phone {
  text-decoration: none;
}

.rps-ssb__contact--email {
  text-decoration: underline;
}

.rps-ssb__contact:hover {
  color: #f47b20;
}

/* ---- Floating behavior (desktop) — ticket 86bb9n785 ----
   Handled by assets/js/sidebar.js: the widget is fixed on the right as the
   page scrolls (independent of content sections) and stops above the footer.
   v1.4.1: the card is never scrolled internally — when taller than the
   viewport it scrolls with the page (client 2026-08-14). */

/* ---- Floating state (v1.3.6) ----
   While the card floats (body.rps-ssb-float, toggled by sidebar.js on
   desktop), its now-empty source column collapses so the sibling columns
   spread over the full content width — no dead white gap between the page
   content and the floating card. */
body.rps-ssb-float .elementor-column:has(.elementor-widget-rps_sticky_sidebar) {
  width: 0%;
  min-width: 0;
}

body.rps-ssb-float .elementor-column:has(.elementor-widget-rps_sticky_sidebar) > .elementor-widget-wrap {
  padding: 0;
}

body.rps-ssb-float .elementor-container:has(.elementor-widget-rps_sticky_sidebar) > .elementor-column:not(:has(.elementor-widget-rps_sticky_sidebar)) {
  width: 100%;
}

/* ---- Mobile stacking — ticket 86bb9n785 ---- */
@media (max-width: 1024px) {
  .rps-ssb {
    position: static;
    max-height: none;
    overflow-y: visible;
    margin: 24px 0;
  }

  /* Tablet included: stack the sidebar section's columns full-width so the
     card sits above/below the content instead of in a narrow side column
     (Elementor only stacks columns at its own mobile breakpoint). */
  .elementor-container:has(.elementor-widget-rps_sticky_sidebar) {
    flex-wrap: wrap;
  }

  .elementor-container:has(.elementor-widget-rps_sticky_sidebar) > .elementor-column {
    width: 100%;
  }

  .e-con:has(> .elementor-widget-rps_sticky_sidebar) {
    flex-direction: column;
  }

  /* "Above content": pull the widget's column to the top of the section.
     Works with Elementor flex containers and legacy column rows.
     Fallback: use Elementor's responsive column reordering. */
  .e-con:has(.rps-ssb--mobile-above),
  .elementor-column:has(.rps-ssb--mobile-above) {
    order: -1;
  }

  /* Collapsible card (86bb9n785): tapping the header bar collapses the box
     down to just the bar. The whole header is the tap target; the chevron is
     the visual affordance. Desktop keeps the card always expanded. */
  .rps-ssb__header {
    position: relative;
    cursor: pointer;
    padding-left: 48px;  /* keep the centered title clear of the chevron */
    padding-right: 48px;
  }

  /* .rps-ssb prefix + explicit resets: the Elementor kit styles all buttons
     (.elementor-kit-439 button — orange bg, 18px/30px padding, radius) with
     higher specificity than a lone class. */
  .rps-ssb .rps-ssb__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
  }

  /* Keep the header's gray showing through in every interaction state — the
     Elementor kit paints button hover/focus/active orange. */
  .rps-ssb .rps-ssb__toggle:hover,
  .rps-ssb .rps-ssb__toggle:focus,
  .rps-ssb .rps-ssb__toggle:focus-visible,
  .rps-ssb .rps-ssb__toggle:active {
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: none;
  }

  /* Keyboard users still get a visible (subtle, on-gray) focus ring. */
  .rps-ssb .rps-ssb__toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: -6px;
  }

  .rps-ssb__chevron {
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(2px) rotate(-135deg); /* points up: tap to collapse */
    transition: transform 0.2s ease;
  }

  .rps-ssb--collapsed .rps-ssb__chevron {
    transform: translateY(-2px) rotate(45deg); /* points down: tap to expand */
  }

  .rps-ssb--collapsed .rps-ssb__body {
    display: none;
  }

  /* Tighten the space above the card (86bb9n785 QA 2026-08-18): the card's
     own top margin, plus — on Support, where the sidebar shares the page's
     first section — that section's desktop top padding/margin, all stack
     above the header bar once the sidebar column is ordered first. A small
     margin stays so the bar doesn't sit flush against the nav. */
  .rps-ssb--mobile-above {
    margin-top: 16px;
  }

  /* !important: Elementor's generated per-page CSS targets the section with
     higher specificity (.elementor-N .elementor-element-XXX). */
  .elementor-top-section:has(.rps-ssb--mobile-above) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}