/*
Theme Name: Mortgage Spot
Author: Laszlo Tallai
Author URI: https://tallai.us
Description: Mortgage Spot theme built using The7.
Version: 1.0.1
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/

/* CLS fix: establish accordion's final (collapsed) state before JS init.
   Opening on click still works — The7/jQuery applies inline styles that
   override this rule. */
html {
  scroll-behavior: smooth;
}

.x-scroll-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}

.x-scroll-table table {
  min-width: 600px; /* adjust depending on your content */
  border-collapse: collapse;
}

/* Add padding to the first (left) and last (right) columns */
.x-scroll-table table td:first-child,
.x-scroll-table table th:first-child {
  padding-left: 10px;
}

.x-scroll-table table td:last-child,
.x-scroll-table table th:last-child {
  padding-right: 10px;
}

.rate-table tbody tr:nth-child(odd) {
  background-color: #fafdfe;
}
.rate-table tbody tr:nth-child(even) {
  background-color: #ffffff;
}

/* Remove ligature from heading fonts */

h1, h2, h3, h4, h5, h6 {
  font-variant-ligatures: none !important;
  font-feature-settings: "liga" 0, "clig" 0 !important;
}

/* CTA buttons inside Elementor text editors (FAQ accordions etc.) */
.elementor-widget-text-editor a.box-button,
.elementor-widget-text-editor a.box-button:hover,
.elementor-widget-text-editor a.box-button:focus,
.elementor-widget-text-editor a.box-button:visited {
  text-decoration: none;
}

.elementor-widget-text-editor a.box-button {
  display: inline-block;
  padding: 10px 22px;
}

/* Apply default font across all Formidable form elements */

.frm_forms {
    font-family: "Noto Sans", Arial, sans-serif !important;
}

.frm_forms input[type="text"],
.frm_forms input[type="email"],
.frm_forms input[type="number"],
.frm_forms input[type="url"],
.frm_forms input[type="password"],
.frm_forms select,
.frm_forms textarea,
.frm_forms label,
.frm_forms legend,
.frm_forms .frm_description,
.frm_forms .frm_section_heading,
.frm_submit input[type="submit"],
.frm_submit button {
    font-family: "Noto Sans", Arial, sans-serif !important;
    
    font-weight: 500 !important;
}

/* Bring mobile menu close icon to the front via z-index. */

#elementor-popup-modal-4761 .dialog-close-button {
  z-index: 999999 !important;
  color: #003E7A !important;
}

#elementor-popup-modal-4761 .dialog-close-button i {
  color: #003E7A !important;
}

/* CLS fix: establish accordion's final (collapsed) state before JS init.
   Opening on click still works — The7/jQuery applies inline styles that
   override this rule. */
.elementor-accordion .elementor-tab-content {
    display: none;
}

html {
   scrollbar-gutter: stable;
}

/* Accordion icons: fixed box, identical for closed/open states.
   Prevents (a) 300x150 default-SVG flash before Elementor's icon CSS
   applies, and (b) reflow when the chevron swaps for the angle. */
.elementor-accordion .elementor-accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}
.elementor-accordion .elementor-accordion-icon svg {
  width: 100%;
  height: 100%;
}

.ms-card a,
a.ms-card,
.ms-card {
  color: inherit;
  text-decoration: none;
}

.ms-mobile-menu .dialog-widget-content {
  height: 100dvh;
  max-height: 100dvh;
}

.ms-mobile-menu .ms-menu-cta {
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* ============================================
   MORTGAGE SPOT — Rate Manager skin v3
   "Quiet Card Pro" — final
   Scope: .ms-rates container
   Contract: a.ob-rates-details + data-h untouched
   Column assumption: Product | Rate | Points | APR
   ============================================ */

/* wpautop empty <p> cleanup around embeds */
.ms-rates p:empty { display: none; }

/* ---- Card shells ---- */
.ms-rates .ob-rates,
.ms-rates .curm-table-wrap {
  background: #fff;
  border: 1px solid #D8E4EE;
  border-radius: 14px;
  overflow: hidden;
}

/* Optional OB title bar */
.ms-rates .ob-rates__title {
  background: #E4F0F9;
  color: #2F6E9E;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 14px 20px;
  margin: 0;
}

/* ---- Table base (all renderer families) ---- */
.ms-rates table.rate-table,
.ms-rates table.curm-table,
.ms-rates table.ob-rates__table,
table.mortgagespot-rates {
  width: 100%;
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  color: #4A4F52;
}

/* ---- Column headers: brand blue ---- */
.ms-rates thead th {
  background: #fff;
  color: #2F6E9E;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: left;
  padding: 18px 20px 11px;
  border-bottom: 1px solid #D8E4EE;
}

/* ---- Rows ---- */
.ms-rates td {
  background: #fff;              /* paints over any inherited tr zebra */
  padding: 17px 20px;
  border-bottom: 1px solid #EDF2F7;
}
.ms-rates tbody tr:last-child td { border-bottom: none; }
.ms-rates tbody td:first-child { font-weight: 600; color: #363636; }

/* ---- Popup links: rate chip / plain dashed APR ----
   Position-scoped because both anchors share one class.
   If the renderer ever reorders columns, revisit. */
.ms-rates .ob-rates__table td:nth-child(2) a.ob-rates-details {
  display: inline-block;
  background: #E4F0F9;
  color: #2F6E9E;
  font-weight: 800;
  border-radius: 8px;
  padding: 5px 12px;
  text-decoration: none;
}
.ms-rates .ob-rates__table td:nth-child(2) a.ob-rates-details:hover {
  background: #D4E9F6;
}

.ms-rates .ob-rates__table td:nth-child(4) a.ob-rates-details {
  color: #363636;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px dashed #B9C6CF;
  padding-bottom: 1px;
}
.ms-rates .ob-rates__table td:nth-child(4) a.ob-rates-details:hover {
  color: #D4623F;
  border-bottom-color: #D4623F;
}

.ms-rates a.ob-rates-details:focus-visible {
  outline: 2px solid #2F6E9E;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Fallback styling for popup links outside the OB table (sheet tables) */
.ms-rates table.rate-table a.ob-rates-details:not(.ob-rates__table a),
.ms-rates table.curm-table a.ob-rates-details {
  color: #2F6E9E;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed #7FA8C6;
}

/* Inline OB spans */
.ms-rates .ob-rate { font-weight: 700; color: #363636; }
.ms-rates .ob-rate--apr,
.ms-rates .ob-rate--points { font-weight: 600; color: #6F7377; }

/* ---- Fine print: tinted footer band ---- */
.ms-rates .ob-rates__updated,
.ms-rates .ob-rates__footer {
  background: #F2F8FC;
  margin: 0;
}
.ms-rates .ob-rates__updated {
  border-top: 1px solid #D8E4EE;
  padding: 13px 20px 0;
}
.ms-rates .ob-rates__footer { padding: 4px 20px 16px; }

.ms-rates .ob-rates__updated small {
  font-size: 13px;
  color: #2F6E9E;
  font-weight: 600;
  line-height: 1.6;
}
.ms-rates .ob-rates__footer small {
  font-size: 12.5px;
  color: #6F7377;
  line-height: 1.65;
}

/* Sheet-table disclosures keep the quiet treatment */
.ms-rates .curm-disclosure {
  font-size: 12.5px;
  color: #6F7377;
  line-height: 1.65;
  padding: 12px 20px 16px;
  margin: 0;
}
.ms-rates .curm-footnotes {
  font-size: 12.5px;
  color: #6F7377;
  padding: 0 20px 16px 36px;
}
.ms-rates .curm-footnotes li { margin: 4px 0; }

/* ---- N/A + empty/error states ---- */
.ms-rates .curm-na { color: #9AA0A5; font-weight: 600; }
.ms-rates .curm-empty,
.ms-rates .ob-rate-missing {
  display: block;
  background: #F2F8FC;
  border: 1.5px dashed #D8E4EE;
  border-radius: 10px;
  padding: 14px 18px;
  color: #6F7377;
  font-size: 13.5px;
}

/* ---- Mobile ---- */
.ms-rates .curm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ms-rates .curm-table { min-width: 640px; }

@media (max-width: 640px) {
  .ms-rates thead th { padding: 12px 12px 9px; font-size: 11.5px; }
  .ms-rates td { padding: 13px 12px; font-size: 13px; }
  .ms-rates .ob-rates__table td:nth-child(2) a.ob-rates-details { padding: 4px 9px; }
  .ms-rates .ob-rates__title { font-size: 14px; padding: 12px 16px; }
  .ms-rates .ob-rates__updated { padding: 11px 14px 0; }
  .ms-rates .ob-rates__footer { padding: 4px 14px 14px; }
}
/* ---- Theme content-table neutralizer ---- */
.ms-rates .ob-rates__table {
  margin: 0;
  border: 0;
  border-spacing: 0;
}

.ms-rates .ob-rates__table th,
.ms-rates .ob-rates__table td {
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

/* re-assert the only two strokes this design wants */
.ms-rates .ob-rates__table thead th { border-bottom: 1px solid #D8E4EE; }
.ms-rates .ob-rates__table td { border-bottom: 1px solid #EDF2F7; }
.ms-rates .ob-rates__table tbody tr:last-child td { border-bottom: 0; }

/* whitespace-only <p> before the card — :empty can't catch it */
.ms-rates p:has(+ .ob-rates) { display: none; }

/* Rate teaser superscript: stop line-box inflation, keep the link intact */
.ms-rate-teaser sup {
  vertical-align: baseline;  /* opt out of browser sup baseline math */
  position: relative;
  top: -0.45em;              /* lift, relative to the small text itself */
  line-height: 1.4;            /* not 0 — that was causing the weirdness */
  font-size: 13px !important;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 5px !important;
}

/* ============================================
   MORTGAGE SPOT — Formidable Forms skin
   Scope: .frm_forms inside .ms-contact-form wrapper
   Palette: Mulberry #A0397F CTA · Plum #87346C hover
   ============================================ */

.ms-contact-form .frm_forms {
  font-family: 'Noto Sans', -apple-system, sans-serif;
}

/* Labels */
.ms-contact-form .frm_forms .frm_primary_label {
  font-size: 18px;
  font-weight: 700;
  color: #363636;
  letter-spacing: .2px;
  margin-bottom: 6px;
}
.ms-contact-form .frm_forms .frm_required {
  color: #A0397F;
}

/* Inputs, selects, textarea */
.ms-contact-form .frm_forms input[type="text"],
.ms-contact-form .frm_forms input[type="email"],
.ms-contact-form .frm_forms input[type="tel"],
.ms-contact-form .frm_forms select,
.ms-contact-form .frm_forms textarea {
  width: 100%;
  background: #fff;
  border: 1px solid #D8E4EE;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  color: #363636;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.ms-contact-form .frm_forms input::placeholder,
.ms-contact-form .frm_forms textarea::placeholder {
  color: #9AA6B2;
}
.ms-contact-form .frm_forms input:focus,
.ms-contact-form .frm_forms select:focus,
.ms-contact-form .frm_forms textarea:focus {
  outline: none;
  border-color: #A0397F;
  box-shadow: 0 0 0 3px rgba(160, 57, 127, .18);
}
.ms-contact-form .frm_forms textarea { min-height: 110px; resize: vertical; }

/* Field spacing + two-column rows (frm6 classes on Name/Email, Phone/Topic) */
.ms-contact-form .frm_forms .frm_form_field { margin-bottom: 16px; }

/* Disclaimer */
.ms-contact-form .ms-form-disclaimer {
  font-size: 12.5px;
  color: #6F7377;
  line-height: 1.6;
  margin: 2px 0 0;
}

.ms-contact-form .frm_forms .frm_blank_field input,
.ms-contact-form .frm_forms .frm_blank_field select,
.ms-contact-form .frm_forms .frm_blank_field textarea {
  border-color: #B34C2E;
}
.ms-contact-form .frm_forms .frm_error_style {
  background: #FDF1EC;
  border: 1px solid #E8C4B5;
  border-radius: 10px;
  color: #B34C2E;
  padding: 12px 16px;
  font-size: 13.5px;
}

/* Success message — Blue 50 card */
.ms-contact-form .frm_message {
  background: #F2F8FC;
  border: 1px solid #D8E4EE;
  border-radius: 12px;
  color: #363636;
  font-size: 14.5px;
  padding: 16px 18px;
}

/* Mobile: stack the half-width fields */
@media (max-width: 640px) {
  .ms-contact-form .frm_forms .frm6 {
    grid-column: span 12 / span 12;
    width: 100%;
  }
}

.ms-contact-form .frm_forms select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236F7377' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* ============================================================
   Mortgage Spot — Quiz Form Styling (mortgage-myths-quiz)
   Target: Formidable form rendered inside The7/Elementor page.
   Install: child theme stylesheet (preferred) or
   Formidable → Styles → Custom CSS. Scoped to this form only
   via the form's container class so nothing leaks to the
   contact form or other Formidable forms.
   Brand: Blue 500 #4B9CD3 · Ink #363636 · Mulberry #A0397F ·
   Plum #87346C · Teal #49A397 · Muted #5E6E7C
   Note: Brother 1816 minimum 16px site rule applies here too.
   ============================================================ */

/* Scope everything to this form. Replace 400 with the form's
   real post-import ID if the importer reassigned it
   (check the shortcode: [formidable id=XXX]). */
.frm_forms.quiz-scope,
form.frm-show-form.quiz-scope { }

/* --- Question label ------------------------------------------------ */
.quiz-scope .frm_primary_label {
  font-family: "brother-1816", "Noto Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;              /* never below 16px */
  color: #363636;
  line-height: 1.35;
  margin-bottom: 14px;
  display: block;
}
.quiz-scope .frm_required { color: #A0397F; }

/* --- Space between questions --------------------------------------- */
.quiz-scope .frm_form_field { margin-bottom: 30px; }

/* --- Radio options as tappable cards (mockup treatment) ------------ */
/* Formidable markup: .frm_radio > label > input + text                */
.quiz-scope .frm_radio { margin: 0 0 10px 0; }
.quiz-scope .frm_radio label {
  display: block;
  background: #fff;
  border: 1px solid #C9D6E2;
  border-radius: 8px;
  padding: 14px 16px 14px 46px;
  font-size: 16px;
  color: #363636;
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.quiz-scope .frm_radio label:hover { border-color: #4B9CD3; }

/* Custom radio dot */
.quiz-scope .frm_radio input[type="radio"] {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  accent-color: #4B9CD3;
}

/* Selected card state — mirrors the mockups' blue-tint fill */
.quiz-scope .frm_radio label:has(input:checked) {
  border-color: #4B9CD3;
  background: #EDF5FB;
  box-shadow: 0 0 0 1px #4B9CD3 inset;
}

/* --- Progress bar (enable pagination rootline in form settings) ---- */
.quiz-scope .frm_rootline_group { margin-bottom: 26px; }
.quiz-scope .frm_rootline .frm_rootline_single button {
  background: #E3EAF0;
  border: none;
}
.quiz-scope .frm_rootline .frm_current_page button { background: #A0397F; }
.quiz-scope .frm_rootline .frm_page_completed button { background: #4B9CD3; }
.quiz-scope .frm_progress_line .frm_progress_active { background: #4B9CD3; }

/* Simple percent-style progress bar variant, if used instead */
.quiz-scope .frm_percent_complete { background: #E3EAF0; border-radius: 4px; }
.quiz-scope .frm_percent_complete .frm_percent_colored {
  background: #4B9CD3; border-radius: 4px;
}

/* --- Submit button — full-width Mulberry, mockup radius ------------ */
.quiz-scope .frm_submit { margin-top: 8px; }
.quiz-scope .frm_button_submit {
  display: block;
  width: 100%;
  background: #A0397F !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: "brother-1816", "Noto Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  padding: 15px 0 !important;
  cursor: pointer;
  transition: background .15s ease;
}
.quiz-scope .frm_button_submit:hover,
.quiz-scope .frm_button_submit:active {
  background: #87346C !important;   /* Plum: hover/pressed only */
}

/* Hide the duplicate label that renders above the submit button */
.quiz-scope .frm_submit .frm_primary_label,
.quiz-scope .frm_form_field.frm_field_type_submit .frm_primary_label {
  display: none;
}

/* --- Prev/back button on paginated steps --------------------------- */
.quiz-scope .frm_prev_page {
  background: transparent;
  border: none;
  color: #5E6E7C;
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Success / confirmation message -------------------------------- */
.quiz-scope + .frm_message,
.frm_message.quiz-scope {
  background: #F4F8FB;
  border: 1px solid #DCE7F0;
  border-left: 4px solid #49A397;
  border-radius: 8px;
  padding: 18px;
  font-size: 16px;
  color: #363636;
}

/* --- Error state ----------------------------------------------------*/
.quiz-scope .frm_error {
  color: #A0397F;
  font-size: 14px;
  margin-top: 6px;
}
.quiz-scope .frm_blank_field label:has(input) { border-color: #A0397F; }

/* ============================================================
   Entry form (quiz-giveaway-entry) — shares the scope class.
   ============================================================ */
.quiz-scope input[type="text"],
.quiz-scope input[type="email"] {
  border: 1px solid #C9D6E2;
  border-radius: 8px;
  padding: 13px 14px;
  font-size: 16px;
  width: 100%;
  color: #363636;
}
.quiz-scope input[type="text"]:focus,
.quiz-scope input[type="email"]:focus {
  border-color: #4B9CD3;
  outline: 2px solid #EDF5FB;
}
.quiz-scope .frm_checkbox label {
  font-size: 15px;
  line-height: 1.45;
  color: #363636;
}
.quiz-scope .frm_checkbox input[type="checkbox"] {
  accent-color: #4B9CD3;
  width: 18px;
  height: 18px;
  margin-right: 8px;
}