/* ==========================================================================
   Riddle Brothers - Financing page support styles
   ==========================================================================
   The page itself is built in Elementor (page 2272). Section backgrounds,
   padding, layout, typography and colour all live in Elementor settings so the
   client can edit them in the panel - do NOT restyle those here.

   This file covers only the three things Elementor cannot express:
     1. the lender Apply button, which is a <button> inside a POST form
        (a plain link to apply.svcfin.com is rejected), so no Button widget
        can be used;
     2. the payment calculator, which is one interactive component;
     3. the FAQ open/closed behaviour - the questions and answers themselves
        are Elementor containers and stay editable there.

   Compliance: no annual rate appears in this file, by design. The calculator
   works from a monthly periodic rate only.
   ========================================================================== */

:root{ --red:#C71310; --navy:#061F35; --bone:#F9F9F9; --ink:#393939; --body:#667085;
      --line:#D0D5DD; }

[class*="rbf-"] *,[class*="rbf-"] *::before,[class*="rbf-"] *::after{ box-sizing:border-box; }

/* Text Editor widgets carry rbf-txt so the theme paragraph margins do not
   fight the spacing set on the widget in Elementor. */
.rbf-txt p{ margin:0; }

/* Measure limits that have no Elementor control of their own. */
.rbf-w768{ max-width:768px; }
.rbf-w900{ max-width:900px; }
.rbf-w980{ max-width:980px; }
.rbf-w780c{ max-width:780px; margin-left:auto; margin-right:auto; }

/* ---- lender Apply button (POST form) -----------------------------------
   Every selector here is scoped under .rbf-apply on purpose. The Hello
   Elementor theme's reset.css carries
       [type="button"],[type="submit"],button { color:#C36; border:1px solid #C36 }
   which has the same specificity as a single class AND loads after this file,
   so a bare .rbf-btn rule loses and the button renders pink. The extra
   ancestor puts these at (0,2,0) and settles it without !important. */
form.rbf-apply{ display:inline; margin:0; }
.rbf-apply .rbf-btn{ display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 30px; border-radius:6px; font-size:15px; font-weight:600;
  line-height:18px; font-family:Montserrat,-apple-system,"Segoe UI",Roboto,sans-serif;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease; }
.rbf-apply .rbf-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.rbf-apply .rbf-btn--ghost-red{ background:transparent; color:var(--red); border-color:var(--red); }
.rbf-apply .rbf-btn--ghost-red:focus{ background:rgba(199,19,16,.06); color:var(--red); }
@media (hover:hover) and (pointer:fine){
  .rbf-apply .rbf-btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }
  /* colour pinned too: the theme reset forces #fff on hover, which was white
     text on a near-white fill */
  .rbf-apply .rbf-btn--ghost-red:hover{ background:rgba(199,19,16,.06); color:var(--red); }
}
.rbf-apply .rbf-btn:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }
.rbf-apply .rbf-btn--ghost:focus-visible{ outline-color:#fff; }

/* ---- payment calculator ------------------------------------------------ */
.rbf-calc__card{ background:#fff; border-radius:12px; padding:40px;
  font-family:Montserrat,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-shadow:0 1px 2px rgba(6,31,53,.04), 0 18px 40px -28px rgba(6,31,53,.18); }
.rbf-calc__row{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.rbf-calc__label{ font-size:17px; font-weight:600; line-height:21px; color:var(--ink); margin:0; }
.rbf-calc__price{ font-size:30px; font-weight:700; line-height:37px; color:var(--navy);
  margin:0; font-variant-numeric:tabular-nums; }

.rbf-slider{ margin-top:30px; }
.rbf-slider input[type=range]{ width:100%; height:6px; -webkit-appearance:none; appearance:none;
  background:var(--line); border-radius:99px; outline:none; margin:0; }
.rbf-slider input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:24px; height:24px; border-radius:50%; background:var(--red); border:3px solid #fff;
  box-shadow:0 1px 4px rgba(6,31,53,.35); cursor:pointer; }
.rbf-slider input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%;
  background:var(--red); border:3px solid #fff; box-shadow:0 1px 4px rgba(6,31,53,.35); cursor:pointer; }
.rbf-slider input[type=range]:focus-visible{ outline:3px solid var(--red); outline-offset:6px; }
.rbf-slider__bounds{ display:flex; justify-content:space-between; margin-top:12px;
  font-size:13px; font-weight:500; line-height:16px; color:var(--body); }

.rbf-terms{ margin-top:30px; }
.rbf-terms__set{ display:flex; gap:12px; margin-top:14px; border:0; padding:0; }
/* Scoped under .rbf-terms__set for the same reason as .rbf-btn above - the
   theme reset's `button` rule would otherwise win on the unselected terms and
   paint them pink. (The selected one already survived, because its
   [aria-checked] selector was specific enough.) */
.rbf-terms__set .rbf-term{ flex:1 1 0; height:52px; border-radius:8px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-size:16px; font-weight:500; line-height:20px;
  font-family:inherit; cursor:pointer; transition:background-color .18s ease, color .18s ease, border-color .18s ease; }
.rbf-terms__set .rbf-term[aria-checked="true"]{ background:var(--red); border-color:var(--red); color:#fff; font-weight:700; }
.rbf-terms__set .rbf-term:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }
/* Hello Elementor's reset.css also carries
   `[type=button]:hover, button:hover { background-color:#CC3366; color:#fff }`.
   The BASE state was already scoped past it above; the hover state was not, so
   hovering a term flashed magenta (Preston caught it). Overridden here with the
   slider's own grey, per his suggestion. Focus is included because the theme
   rule covers :focus too. */
@media (hover:hover) and (pointer:fine){
  .rbf-terms__set .rbf-term:not([aria-checked="true"]):hover{
    border-color:var(--navy); background:var(--line); color:var(--ink); }
}
.rbf-terms__set .rbf-term:not([aria-checked="true"]):focus{
  background:var(--line); color:var(--ink); }
.rbf-terms__set .rbf-term[aria-checked="true"]:hover,
.rbf-terms__set .rbf-term[aria-checked="true"]:focus{
  background:var(--red); color:#fff; }

.rbf-calc__divider{ height:1px; background:var(--line); border:0; margin:30px 0 0; }
.rbf-result{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; margin-top:31px; flex-wrap:wrap; }
.rbf-result__label{ font-size:11px; font-weight:700; line-height:13px; letter-spacing:1.7px;
  text-transform:uppercase; color:var(--red); margin:0; }
.rbf-payment{ display:flex; align-items:baseline; gap:6px; margin-top:8px; }
.rbf-payment__figure{ font-size:68px; font-weight:700; line-height:72px; color:var(--navy);
  font-variant-numeric:tabular-nums; }
.rbf-payment__per{ font-size:24px; font-weight:500; line-height:29px; color:var(--body); }
/* The compliance strip. Sits directly beneath the payment and stays readable -
   it is deliberately not shrunk into fine print. */
/* Summary under the payment figure. Replaces the old "Total of payments"
   column (updated Figma 2026-09-08): price, rate, number of payments. */
.rbf-summary{ font-size:14px; font-weight:500; line-height:22px;
  color:var(--body); margin:14px 0 0; }

.rbf-strip{ display:flex; align-items:center; justify-content:space-between; gap:36px;
  margin-top:30px; flex-wrap:wrap; }
.rbf-strip__text{ font-size:12px; font-weight:400; line-height:20px; color:var(--body);
  margin:0; max-width:820px; }
/* Lender logo, 132x53 per the wireframe. The asset is 300x120, so it renders at
   just over 2x for high-density screens. flex:0 0 auto stops the strip's
   space-between squeezing it. */
.rbf-strip__logo{ flex:0 0 auto; width:132px; height:auto; }
.rbf-calc__apply{ margin-top:32px; }

/* ---- FAQ open / closed ------------------------------------------------- */
/* The rows are Elementor containers; only the toggle lives here. */
.rbf-faq__q{ cursor:pointer; }
/* The +/- sign is a real Elementor heading widget so it stays visible and
   editable in the panel. A ::before cannot be used here: Elementor drives its
   container background overlay off .e-con::before, and that rule loads after
   this file - it forces the pseudo to position:absolute and blanks its
   content, which silently broke the closed state. Its 22px column width is
   set natively in Elementor (Advanced > Custom Width) for the same reason:
   a flex rule here loses to Elementor's own widget-width CSS. */
.rbf-faq__item[data-open="false"] > .rbf-faq__a{ display:none; }
.rbf-faq__q:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }

/* ---- responsive (calculator only - the rest is set in Elementor) -------- */
@media (max-width:1100px){
  .rbf-payment__figure{ font-size:58px; line-height:62px; }
}
@media (max-width:860px){
  .rbf-calc__card{ padding:24px; }
  .rbf-payment__figure{ font-size:48px; line-height:52px; }
  .rbf-result{ gap:18px; }
    .rbf-terms__set{ flex-direction:column; }
}
@media (max-width:520px){
  .rbf-calc__apply .rbf-btn,.rbf-calc__apply form.rbf-apply{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  [class*="rbf-"],[class*="rbf-"] *{ transition:none !important; animation:none !important; }
}

/* ---- header nav over this page's navy hero -----------------------------
   The site header (template 1139) has no background of its own, and on desktop
   its nav row sits directly on top of the hero. Every other page opens on a
   light hero, so the menu's black text is right there - but on this one it is
   black on navy.

   Elementor drives the whole menu off one custom property and the header sets
   --n-menu-title-color-normal to the global Text colour (#000). Hover and the
   current item are already #FFF, so the non-active resting state is the only
   thing that needs changing; overriding the property rather than the colour
   rules keeps Elementor's hover, active and icon behaviour untouched.

   Desktop only, on purpose. At <=1024px the menu collapses into the hamburger
   panel, where each item carries its OWN white background and is coloured by
   this same property - whitening it there would turn the mobile menu invisible.
   Page-scoped for the same reason: this is a property of this hero, not of the
   header. */
@media (min-width:1025px){
  body.page-id-2272 .elementor-location-header .elementor-widget-n-menu{
    --n-menu-title-color-normal:#000000;
  }
}