/* ============================================
HLT PAGE — FAQ ICON SPAN OVERRIDE
Suppresses the global ::after icon and styles
the explicit .faq-icon span used on the
Home Loan Timeline page
============================================ */
.hlt-page .faq-question::after {
display: none;
}

.hlt-page .faq-icon {
font-size: 1.3rem;
color: var(--color-gold);
min-width: 20px;
text-align: center;
margin-left: 12px;
flex-shrink: 0;
transition: transform 0.2s;
display: inline-block;
}

.hlt-page .faq-item.open .faq-icon {
transform: rotate(45deg);
}

/* ============================================
   HLT PAGE — FAQ QUESTION BUTTON HARD RESET
   Ensures Astra/WordPress button normalization
   does not override the transparent button
   treatment on the .hlt-page wrapper
   ============================================ */
.hlt-page .faq-question {
  outline: none;
  padding: 18px 8px 18px 0;
  font-size: 1rem;
}

.hlt-page .faq-question:hover {
  color: var(--color-gold);
  background: none;
}

/* ============================================
HLT PAGE — SPEED BANNER
============================================ */
.hlt-page .speed-banner {
background: #000;
border: 2px solid var(--color-border);
border-left: 4px solid var(--color-gold);
border-radius: 0 8px 8px 0;
padding: 16px 20px;
margin: 24px 0 32px;
text-align: left;
}

.hlt-page .speed-banner p {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: var(--color-gold);
}

.hlt-page .speed-banner span {
font-weight: 400;
color: var(--color-body);
}
/* ============================================
HLT PAGE — LOAN TYPE SELECTOR (TAB SYSTEM)
============================================ */
.hlt-page .loan-selector {
margin: 32px 0 40px;
text-align: left;
}

.hlt-page .selector-label {
font-size: 0.85rem;
font-weight: 800;
color: var(--color-gold);
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
text-align: left;
}

.hlt-page .tab-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 28px;
}

.hlt-page .tab-btn {
padding: 11px 26px;
border: 2px solid var(--color-gold);
background: #000;
color: var(--color-gold);
border-radius: 20px;
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}

.hlt-page .tab-btn:hover,
.hlt-page .tab-btn.active {
background: var(--color-gold);
color: var(--color-bg);
}

.hlt-page .tab-panel {
display: none;
text-align: left;
}

.hlt-page .tab-panel.active {
display: block;
}

.hlt-page .default-message {
font-style: italic;
color: var(--color-body);
text-align: left;
}

/* ============================================
   HLT PAGE — TAB BUTTON ASTRA RESET
   Prevents Astra global button styles from
   overriding the tab button appearance
   ============================================ */
.hlt-page .tab-btn:focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.hlt-page button.tab-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
}

/* ============================================
HLT PAGE — TIMELINE (UL-BASED STEP LIST)
Scoped to .hlt-page to avoid conflict with
the .tl-step timeline used on other pages
============================================ */
.hlt-page .timeline {
list-style: none;
padding: 0;
margin: 20px 0 0;
position: relative;
}

.hlt-page .timeline::before {
content: '';
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-gold);
opacity: 0.3;
border-radius: 2px;
}

.hlt-page .timeline li {
position: relative;
padding: 4px 0 22px 60px;
text-align: left;
color: var(--color-body);
font-size: 17px;
line-height: 1.75;
margin-bottom: 0;
}

.hlt-page .timeline li:last-child {
padding-bottom: 0;
}

.hlt-page .timeline .step-number {
position: absolute;
left: 0;
top: 4px;
width: 42px;
height: 42px;
background: #000;
border: 2px solid var(--color-gold);
color: var(--color-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1rem;
flex-shrink: 0;
z-index: 1;
}

.hlt-page .timeline .step-title {
font-weight: 700;
color: var(--color-cream);
font-size: 1rem;
margin-bottom: 4px;
text-align: left;
display: block;
}

.hlt-page .timeline .step-duration {
display: inline-block;
background: #000;
color: var(--color-gold);
border: 1px solid var(--color-gold);
border-radius: 20px;
padding: 2px 10px;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 6px;
letter-spacing: 0.02em;
}

.hlt-page .timeline .step-desc {
font-size: 0.94rem;
color: var(--color-body);
text-align: left;
margin: 0;
line-height: 1.7;
display: block;
}
/* ============================================
HLT PAGE — TOTAL BAR + PANEL NOTE
============================================ */
.hlt-page .total-bar {
background: #000;
border: 2px solid var(--color-gold);
border-radius: 10px;
padding: 14px 20px;
margin-top: 24px;
font-weight: 700;
font-size: 1rem;
text-align: left;
color: var(--color-cream);
}

.hlt-page .total-bar span {
color: var(--color-gold);
}

.hlt-page .panel-note {
background: #000;
border: 2px solid var(--color-border);
border-left: 4px solid var(--color-gold);
border-radius: 0 8px 8px 0;
padding: 13px 18px;
margin-top: 18px;
font-size: 0.92rem;
color: var(--color-body);
text-align: left;
}

/* ============================================
   HLT PAGE — PANEL NOTE PARAGRAPH RESET
   Prevents global p margin from adding
   unwanted space inside .panel-note
   ============================================ */
.hlt-page .panel-note p {
  margin: 0;
  color: var(--color-body);
  font-size: 0.92rem;
}

/* ============================================
   HLT PAGE — LINK UNDERLINE RESTORE
   The global .hlt-page a rule inherits
   text-decoration: none from the site-wide
   anchor rule. This page intends body links
   to be underlined for readability.
   ============================================ */
.hlt-page a {
  text-decoration: underline;
}

.hlt-page .tab-btn {
  text-decoration: none;
}

/* ============================================
HLT PAGE — COMPARISON TABLE
============================================ */
.hlt-page .comparison-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0 32px;
font-size: 0.9rem;
text-align: left;
border: 2px solid var(--color-border);
border-radius: 12px;
overflow: hidden;
}

.hlt-page .comparison-table th {
background: #000;
color: var(--color-gold);
padding: 12px 14px;
text-align: left;
font-weight: 800;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 2px solid var(--color-gold);
}

.hlt-page .comparison-table td {
padding: 11px 14px;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
text-align: left;
background: #000;
color: var(--color-body);
font-size: 0.9rem;
font-weight: 600;
}

.hlt-page .comparison-table tr:nth-child(even) td {
background: var(--color-surface-dark);
}

.hlt-page .comparison-table tr:hover td {
background: var(--color-surface);
}

.hlt-page .comparison-table tr:last-child td {
border-bottom: none;
}
/* ============================================
HLT PAGE — WHY FASTER BOX
============================================ */
.hlt-page .why-faster {
background: #000;
border-radius: 12px;
border: 2px solid var(--color-border);
padding: 24px;
margin: 32px 0;
text-align: left;
}

.hlt-page .why-faster h3 {
margin-top: 0;
text-align: center;
}

.hlt-page .why-faster ul {
margin: 12px 0 0 20px;
line-height: 2;
}

/* ============================================
   HLT PAGE — WHY FASTER BOX LIST ITEMS
   ============================================ */
.hlt-page .why-faster ul li {
  margin-bottom: 0;
  line-height: 2;
  color: var(--color-body);
  font-size: 17px;
}

/* ============================================
HLT PAGE — SCENARIO BOX (DOUBLE-BORDER VARIANT)
Uses .hlt-scenario-box to avoid overriding
the global .scenario-box used on other pages
============================================ */
.hlt-page .hlt-scenario-box {
background: #000;
border-radius: 16px;
border: 4px double var(--color-gold);
padding: 28px;
margin: 32px 0;
text-align: left;
}

.hlt-page .hlt-scenario-box h3 {
margin-top: 0;
text-align: center;
}

.hlt-page .hlt-scenario-box p {
color: var(--color-body);
margin-bottom: 12px;
}

.hlt-page .hlt-scenario-box p:last-child {
margin-bottom: 0;
}
/* ============================================
HLT PAGE — HICCUPS LIST
Replaces inline style on the timeline
hiccups <ul> element
============================================ */
.hlt-page .hlt-hiccups-list {
margin: 0 0 20px 22px;
line-height: 2.1;
padding-left: 0;
}


/* ============================================
   SCORE TAG LABELS
   ============================================ */
.page-wrapper .tag-good {
  color: #7CB87C;
  font-weight: 700;
}

.page-wrapper .tag-ok {
  color: var(--color-gold);
  font-weight: 700;
}

.page-wrapper .tag-hard {
  color: #CF6B6B;
  font-weight: 700;
}



/* ============================================
   RESPONSIVE — MOBILE (max 600px)
   ============================================ */
@media (max-width: 600px) {
  .hlt-page .tab-buttons {
    flex-direction: column;
  }

  .hlt-page .tab-btn {
    width: 100%;
    text-align: center;
  }

  .hlt-page .comparison-table {
    font-size: 0.8rem;
  }

  .hlt-page .comparison-table th,
  .hlt-page .comparison-table td {
    padding: 9px 9px;
  }

  .hlt-page .hlt-scenario-box {
    padding: 22px;
  }

  .hlt-page .timeline .step-number {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }

  .hlt-page .timeline li {
    padding-left: 52px;
  }

  .hlt-page .timeline::before {
    left: 17px;
  }

  .hlt-page .why-faster {
    padding: 18px;
  }

  .hlt-page .total-bar {
    font-size: 0.9rem;
  }
}