/*
 * ============================================================
 * CALC-FACTOR.CSS — PERSONAL SITE VERSION
 * Based on calc-repo.css (WordPress repo version)
 *
 * ── CODE NOTES (apply to BOTH personal site and repo versions) ──
 *
 * 1. PURCHASE PRICE FONT SIZE: Both versions control the
 *    font-size of the label Purchase Price: before the output field via an
 *    inline style injected in script.js (~line 1566) or search for font-size: 15px
 *    if line number shifts. CSS alone could not override the site theme's
 *    inherited font-size on that field, so the fix lives in JS.
 *
 * 2. PANEL POSITION: Both versions use left: -11px on
 *    .chevron-method .chevron-content so the dropdown panel
 *    intentionally sits just over the "D" in "Valuation Date"
 *    when open, aligning it closer to the Calculate button.
 *
 * ── DIFFERENCES FROM REPO VERSION (calc-repo.css) ──
 *
 * 1. FONTS: @font-face replaces @import (Google Fonts).
 *    Self-hosted Work Sans and Rubik served from:
 *    /wp-content/themes/hello-blocks-child/fonts/
 *
 * 2. :root COLOR BLOCK: All hardcoded hex values replaced
 *    with aliases pointing to factor-root.css variables
 *    (e.g. --text-indigo: var(--indigo-cta)).
 *    factor-root.css MUST be enqueued before this file.
 *
 * 3. PANEL FONT SIZE: .chevron-content uses font-size: 14px
 *    !important. Site body inherits ~18-19px from theme,
 *    causing dropdown panels to overlap the payment table.
 *
 * 4. PANEL WIDTH: .chevron-method min-width reduced from
 *    420px → 340px, max-width from 620px → 520px to
 *    prevent overlap on the site's narrower plugin container.
 *
 * 5. H2 CENTERING: Handled via inline style on the <h2>
 *    in calculator.php, not in this CSS. Site theme
 *    specificity overrides any class-based text-align rules.
 * ============================================================
 */
@font-face {
    font-family: 'Work Sans';
    src: url('/wp-content/themes/hello-blocks-child/fonts/WorkSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rubik';
    src: url('/wp-content/themes/hello-blocks-child/fonts/Rubik-SemiBold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* =============================================================
   CALCULATOR VARIABLE ALIASES
   Maps calculator shorthand names → factor-root.css variables.
   Requires factor-root.css enqueued before this file.
   All rules below are identical to the standalone version.
============================================================= */
:root {

  /* BACKGROUNDS */
  --calculator-bg:         var(--lavender-mist);
  --chevron-panel-bg:      var(--floral-white);
  --modal-overlay:         var(--modal-overlay-bg);
  --table-header-bg:       var(--secondary-honeydew);

  /* TEXT */
  --text-heading:          var(--onyx-headings);
  --text-indigo:           var(--indigo-cta);
  --text-primary:          var(--carbon-body-text);
  --text-white:            var(--h1-white);

  /* BUTTONS */
  --delete-btn-icon:       var(--trash-icon-grey);
  --primary-button-bg:     var(--primary-dark-spruce);
  --primary-button-hover:  var(--dark-spruce-hover);
  --recalc-button-bg:      var(--recalc-button-rusty-spice);
  --recalc-button-hover:   var(--recalc-button-hover-amber-earth);
  --secondary-button-bg:   var(--slate-grey);
  --secondary-button-hover: var(--dim-grey-hover);

  /* FIELD STATES */
  --disabled-field-bg:         var(--alabaster-grey);
  --disabled-field-border:     var(--cola-input-border-silver);
  --field-border:              var(--dust-grey);
  --flash-highlight:           var(--highlight-flash-yellow);
  --input-field-bg:            var(--h1-white);
  --required-highlight-border: var(--required-border-amber-glow);

  /* ERROR STATES */
  --error-background:  var(--error-background-pink);
  --error-border:      var(--error-border-red);

  /* AMORTIZATION TABLE */
  --amortization-diagonal-stripe: var(--diagonal-stripe-honeydew);
  --amortization-row-band:        var(--indigo-row-band);

  /* EFFECTS */
  /* --chevron-hover-bg is defined identically in factor-root.css — no alias needed */
  --focus-ring-glow:  var(--indigo-focus-glow);
  --row-hover-bg:     var(--indigo-row-hover);
  --modal-shadow:     var(--modal-box-shadow);

  /* SPECIAL BORDERS */
  --calculator-border: var(--light-apricot);

}

/* Apply fonts */
body, .ss-calc-wrapper, input, select, button {
    font-family: 'Work Sans', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, 
.ss-calc-wrapper h2, 
.ss-calc-wrapper h3 {
    font-family: 'Rubik', Arial, sans-serif;
    font-weight: bold;
}

/* =========================================================
   MASTER LABEL STYLE — ALL CALCULATOR LABELS
========================================================= */
.ss-calc-wrapper label,
.ss-calc-wrapper .valuation-item span {
  font-size: 1.0625rem;   /* 17px */
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.3;
}

/* Force valuation labels to be bold (overcome theme) */
.valuation-row .valuation-item span {
  font-weight: 700 !important;
}

/* Purchase Price label - explicit targeting */
.top-controls-row strong {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.3;
}

/* ===== CALCULATOR CONTAINER ===== */
.ss-calc-wrapper {
    font-family: 'Work Sans', Arial, sans-serif;
    padding: 30px;
    background: var(--calculator-bg);
    color: var(--text-primary);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    border: 2px solid var(--calculator-border);
    border-radius: 5px;
}

/* ===== FORCE H2 TO CENTER ===== */
/* SITE VERSION: site theme h2 styling overrides generic rule — increased specificity */
.ss-calc-wrapper h2,
.ss-calc-wrapper .wp-block-heading,
body .ss-calc-wrapper h2 {
    text-align: center !important;
    margin-bottom: 2.5rem;
    width: 100%;
    display: block;
}

/* ===== MOVE H3 "PAYMENTS" CLOSER TO TABLE ===== */
h3[style*="color: #141414"] {
    margin-bottom: 0.5rem;
}

/* =========================================================
   TOP CONTROLS ROW — FINAL LAYOUT
========================================================= */

.top-controls-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  margin-bottom: 1.25rem;
}

/* Left controls */
.top-controls-row > div:first-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Right chevrons group — responsive */
.chevrons-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  margin-left: 1.5rem;
  padding-right: 12px;
}

/* Chevron containers */
.chevron-method,
.chevron-howto {
  position: relative;
  flex-shrink: 0;
}

/* Chevron triggers */
.chevron {
  cursor: pointer;
  color: var(--text-indigo) !important;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 17px;
}

.chevron:hover {
  background: var(--chevron-hover-bg);
}

/* =========================================================
   DROPDOWN PANELS — CONTENT SIZED (NO FIXED WIDTH)
========================================================= */


/* ── CHEVRON PANEL ANIMATIONS ── */
@keyframes panelFadeSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes panelFadeSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}
.chevron-content.panel-open {
  display: block;
  animation: panelFadeSlideIn 0.3s ease !important;
}
.chevron-content.panel-closing {
  display: block !important;
  animation: panelFadeSlideOut 0.22s ease forwards !important;
  pointer-events: none;
}

.chevron-content {
  display: none;
  position: absolute;
  top: 100%;
  margin-top: 5px;
  padding: 12px;

  background: var(--chevron-panel-bg);
  border: 1px solid var(--field-border);
  border-radius: 4px;
  box-shadow: 0 4px 8px var(--modal-shadow);

  width: fit-content;   /* grows naturally based on content */
  min-width: 260px;     /* keeps small panels readable */
  max-width: 600px;     /* allows wider panels (method panel) */
  min-height: 180px;    /* adjust visually */

  white-space: normal;
  z-index: 100;

  /* SITE VERSION: panel text inherits ~18-19px from site body — reduced to 14px
     to prevent overlap with payment table */
  font-size: 14px !important;
}

/* ===== CHEVRON PANEL POSITION + SIZE ===== */

/* Calculation Method — left aligned, opens right */
/* SITE VERSION: min-width reduced from 420px to 340px to prevent overlap */
/* Shifted 11px left so panel sits just over the "D" in "Valuation Date" when open */
.chevron-method .chevron-content {
  left: -11px;
  min-width: 340px;
  max-width: 520px;
}

/* How to Use — right aligned, opens right */
.chevron-howto .chevron-content {
  right: 0;
  min-width: 260px;
  max-width: 360px;
}

/* ===== RATES CHEVRON - attached to Nominal Rate field ===== */
.nominal-rate-container {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.rates-chevron-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.rates-chevron {
  font-size: 1.2rem;
  padding: 0.25rem 0.25rem;
  cursor: pointer;
  color: var(--text-indigo) !important;
}

/* Rates panel - left-aligned under the chevron */
.rates-content {
  left: 0;
  top: 100%;
  margin-top: 0.3125rem;
  white-space: nowrap;
  min-width: auto;
  font-size: 0.9rem; /* slightly smaller for entire panel */
}

/* Ensure numbers in rates panel are not bold */
.rates-content span {
  font-weight: normal;
}

/* ===== VALUATION ROW ===== */
.valuation-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 1.25rem 0;
  width: 100%;
}

.valuation-item {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
}

/* ===== TABLE ===== */
table { 
  width: 100%; 
  border-collapse: collapse; 
  margin-top: 0.625rem;
  min-width: 900px;
}

th, td { 
  border: 1px solid var(--field-border);
  padding: 0.375rem;
  text-align: center;
}

th { 
  background: var(--table-header-bg);
  color: var(--text-heading);
  font-weight: bold;
}

input[type="text"], 
input[type="number"], 
input[type="date"], 
select { 
  padding: 0.25rem;
  border: 1px solid var(--field-border);
  box-sizing: border-box;
  color: var(--text-primary);
  background: var(--input-field-bg);
}

/* ===== PAYMENT TABLE - NO GRID LINES ===== */
#cashFlowTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625rem;
  min-width: 900px;
}

#cashFlowTable th, 
#cashFlowTable td { 
  border: none;
  padding: 0.375rem;
  text-align: center;
}

#cashFlowTable th { 
  background: var(--table-header-bg);
  color: var(--text-heading);
  font-weight: bold;
}

/* ===== PAYMENT TABLE HEADERS - Rectangle around header row only ===== */
#cashFlowTable thead tr {
    outline: 2px solid var(--field-border);
    outline-offset: -1px;
}

#cashFlowTable thead th {
    font-size: 1.0625rem !important;
    font-weight: 700;
    color: var(--text-heading);
    background: var(--table-header-bg);
    padding: 0.375rem;
    border: none;
    white-space: nowrap;
}

/* ===== PAYMENT TABLE INPUT FONT SIZES - ALL 15px ===== */
#cashFlowTable input[type="text"],
#cashFlowTable input[type="number"],
#cashFlowTable input[type="date"],
#cashFlowTable select,
#cashFlowTable input[disabled] {
    font-size: 15px;
    height: auto;
    padding: 4px;
}

/* Make # of Payments field wider for 4 digits */
#cashFlowTable input[name*="numPayments"] {
    width: 70px;
}

/* Ensure date inputs and their calendar icons use 15px */
#cashFlowTable input[type="date"] {
    font-size: 15px;
    min-height: 30px;
}

/* ===== POWERED BY LINK ===== */
.powered-by a {
    color: var(--text-indigo) !important;
    text-decoration: none;
    font-weight: 500;
}

.powered-by a:hover {
    text-decoration: underline !important;
    color: var(--text-indigo) !important;
}

.calculate-btn { 
  background-color: var(--primary-button-bg);
  color: var(--text-white);
  border: 1px solid var(--primary-button-bg);
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.clear-btn {
  background-color: var(--secondary-button-bg);
  color: var(--text-white);
  border: 1px solid var(--secondary-button-bg);
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.clear-btn:hover {
  background-color: var(--secondary-button-hover);
}

.amort-btn {
  background-color: var(--text-heading);
  color: var(--text-white);
  border: 1px solid var(--text-heading);
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.add-payment-btn {
  background-color: var(--primary-button-bg);
  color: var(--text-white);
  border: 1px solid var(--primary-button-bg);
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-weight: bold;
  margin-top: 0.8125rem;
}

.add-payment-btn::before {
  content: "+";
  color: var(--text-white);
  margin-right: 0.25rem;
  font-weight: bold;
}

.recalc { 
  background-color: var(--recalc-button-bg);
  color: var(--text-white);
  font-weight: bold; 
  font-size: 1rem;
  display: none;
  padding: 0.375rem 0.75rem;
  border: 2px solid var(--flash-highlight);
  border-radius: 0.25rem;
  margin-left: 0.25rem;
  cursor: pointer;
  transition: all 0.3s;
  align-items: center;
  gap: 0.375rem;
}

.recalc:hover {
  background-color: var(--recalc-button-hover);
  transform: scale(1.05);
}

/* ===== INPUT FIELD STYLES ===== */
.purchase-price { 
  width: 150px; 
  font-size: 1rem; 
  border: 1px solid var(--field-border);
  background: var(--input-field-bg);
  color: var(--text-primary);
}

.aggregate-field {
  width: 150px;
  font-size: 1rem;
  border: 1px solid var(--field-border);
  background-color: var(--input-field-bg);
  color: var(--text-primary);
  cursor: text;
}

#nomRate { 
  width: 105px; 
  font-size: 1rem;
  border: 1px solid var(--field-border);
  background: var(--input-field-bg);
  color: var(--text-primary);
}

#valDate { 
  border: 1px solid var(--field-border);
  font-size: 1rem;
  background: var(--input-field-bg);
  color: var(--text-primary);
}


/* ── ACCESSIBILITY: focus ring ── */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus {
  outline: 2px solid var(--text-indigo);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
}

/* ── BUTTON PRESS MICRO-ANIMATION ── */
.calculate-btn:active,
.clear-btn:active,
.amort-btn:active,
.add-payment-btn:active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

/* ── AMORTIZATION CLOSE BUTTON ── */
.amort-close-btn {
  background: none;
  border: none;
  color: var(--text-indigo);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  margin-left: auto;
  transition: background 0.15s ease;
}
.amort-close-btn:hover {
  background: var(--chevron-hover-bg);
}

/* ===== COLA FIELDS ===== */
.cola-input { 
  width: 68px; 
  background: var(--disabled-field-bg) !important;
  color: var(--text-primary);
  border: 1px solid var(--disabled-field-border) !important;
  pointer-events: none;
  text-align: center;
} 

.cola-input.editable {
  background: var(--input-field-bg) !important;
  color: var(--text-primary);
  pointer-events: auto;
  border: 1px solid var(--field-border) !important;
}

.cola-input::-webkit-outer-spin-button,
.cola-input::-webkit-inner-spin-button {
  -webkit-appearance: auto;
  opacity: 1;
}
.cola-input { -moz-appearance: number-input; }

.periods-input { 
  width: 60px; 
  background: var(--disabled-field-bg);
  border: 1px solid var(--disabled-field-border);
  pointer-events: none; 
  color: var(--text-primary);
  text-align: center;
}

.periods-input:not([disabled]) {
  background: var(--input-field-bg);
  pointer-events: auto;
  border: 1px solid var(--field-border);
}

.num-payments-input { 
  width: 56px; 
  border: 1px solid var(--field-border);
}

.amount-input { 
  width: 150px; 
  border: 1px solid var(--field-border);
}

/* ===== FLASH HIGHLIGHTS ===== */
.flash {
  background-color: var(--flash-highlight) !important;
  transition: background-color 1s ease;
}

.aggregate-flash {
  background-color: var(--flash-highlight) !important;
  transition: background-color 1s ease;
}

.required-highlight {
    background-color: var(--flash-highlight) !important;
    border: 2px solid var(--required-highlight-border) !important;
}

/* Red error styling for rate cap exceeded */
.rate-cap-error {
    border: 2px solid var(--error-border) !important;
    background-color: var(--error-background) !important;
    font-size: 12.5px !important;
    font-weight: bold !important;
}

.date-error {
    border: 2px solid var(--error-border) !important;
    background-color: var(--error-background) !important;
}

/* ===== DELETE BUTTON ===== */
.delete-btn { 
  cursor: pointer; 
  color: var(--delete-btn-icon);
  font-size: 1.1rem; 
  background: none; 
  border: none; 
  padding: 0.125rem 0.375rem;
}

.delete-btn:hover {
  background-color: rgba(153, 153, 153, 0.1);
  border-radius: 0.1875rem;
}

/* ===== COLA POPUP ===== */
.colaPopup {
  background: var(--flash-highlight);
  border: 1px solid var(--secondary-button-bg);
  padding: 0.375rem;
  font-size: 0.9rem;
  margin-top: 0.3125rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.1875rem;
}

.reset-cola-btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  margin-left: 0.25rem;
  background-color: var(--secondary-button-bg);
  color: var(--text-white);
  border: none;
  border-radius: 0.125rem;
  cursor: pointer;
}

.reset-cola-btn:hover {
  background-color: var(--secondary-button-hover);
}

/* ===== AMORTIZATION CONTAINER ===== */
.amortization-container {
  margin-top: 1.5rem;
  background: var(--chevron-panel-bg);
  border: 1px solid var(--calculator-border);
  border-radius: 5px;
  padding: 1rem 1.25rem 1.25rem;
  display: none;
}

.amortization-container h3 {
  margin-bottom: 0.625rem;
  color: var(--text-heading);
}

/* =========================================================
   AMORTIZATION TABLE — RESTORED ORIGINAL LOOK
========================================================= */

.amortization-table {
  width: 100%;
  table-layout: fixed !important;
  border-collapse: collapse;
  margin-top: 5px;
  font-size: 0.9em;
}
.amortization-table .line-num-col { width: 5% !important; text-align: center; font-weight: bold; }
.amortization-table .date-col     { width: 22% !important; text-align: center; }
.amortization-table th, .amortization-table td { border: 1px solid var(--field-border); padding: 4px 6px; text-align: right; color: var(--text-primary); }
.amortization-table thead th { background: var(--table-header-bg); text-align: center; color: var(--text-heading); font-weight: bold; font-size: 1.1em; }
.amortization-table thead th:not(:last-child) { border-right: none; }
.amortization-table thead th:not(:first-child) { border-left: none; }
.amortization-table .amort-val-row td { background: var(--table-header-bg); font-weight: bold; font-size: 1.05em; }
.amortization-table .amort-val-row td:not(:last-child) { border-right: none; }
.amortization-table .amort-val-row td:not(:first-child) { border-left: none; }
.amortization-table .amort-val-row td:last-child { font-weight: bold; }
.amortization-table tbody tr:nth-child(even):not(.amort-val-row):not(.year-total-row):not(.grand-total-row) { background: var(--amortization-row-band); }
.amortization-table tbody tr:not(.amort-val-row):not(.year-total-row):not(.grand-total-row):not(.year-separator) { transition: background 0.15s ease; }
.amortization-table tbody tr:not(.amort-val-row):not(.year-total-row):not(.grand-total-row):not(.year-separator):hover { background: var(--row-hover-bg) !important; }
.year-separator td { height: 12px; padding: 0 !important; background-color: var(--chevron-panel-bg); border: none !important; }
.year-total-row td { background: var(--table-header-bg) !important; font-weight: bold; }
.year-total-row td:first-child {
  background: repeating-linear-gradient(45deg, var(--table-header-bg), var(--table-header-bg) 8px, var(--amortization-diagonal-stripe) 8px, var(--amortization-diagonal-stripe) 16px) !important;
}
.year-total-row td:last-child { border-right: none !important; }
.grand-total-row td { background: var(--chevron-panel-bg) !important; font-weight: bold; border-top: 2px solid var(--text-heading) !important; border-bottom: 2px solid var(--text-heading) !important; border-left: none !important; border-right: none !important; padding: 10px 6px !important; vertical-align: middle; }
.grand-total-row td:first-child { background: var(--chevron-panel-bg) !important; border-left: 2px solid var(--text-heading) !important; }
.grand-total-row td:last-child { border-right: 2px solid var(--text-heading) !important; }
.grand-total-label { font-size: 1.05em; }
.diagonal-stripe { background: repeating-linear-gradient(45deg, var(--table-header-bg), var(--table-header-bg) 8px, var(--amortization-diagonal-stripe) 8px, var(--amortization-diagonal-stripe) 16px) !important; }

select {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--field-border);
    border-radius: 0.1875rem;
    background-color: var(--input-field-bg);
    min-width: 120px;
    color: var(--text-primary);
}

/* ===== ERROR MODAL ===== */
.error-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-overlay);
    align-items: center;
    justify-content: center;
}

.error-modal-content {
    background-color: var(--text-white);
    padding: 1.5625rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px var(--modal-shadow);
    width: 90%;
    max-width: 28.125rem;
    animation: modalFadeIn 0.3s;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-1.25rem); }
    to { opacity: 1; transform: translateY(0); }
}

.error-modal h3 {
    margin-top: 0;
    color: var(--primary-button-bg);
    padding-bottom: 0.9375rem;
    border-bottom: 2px solid var(--primary-button-bg);
    font-size: 1.25rem;
    margin-bottom: 0.9375rem;
}

.error-modal p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5625rem;
    color: var(--text-primary);
}

.error-modal-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.error-modal-ok {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 5rem;
    transition: all 0.2s;
    background-color: var(--primary-button-bg);
    color: var(--text-white);
}

.error-modal-ok:hover {
    background-color: var(--primary-button-hover);
}

.powered-by {
    text-align: center;
    margin-top: 0.9375rem;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.powered-by a {
    color: var(--text-indigo) !important;
    text-decoration: none;
    font-weight: 500;
}

.powered-by a:hover {
    text-decoration: underline !important;
}

.icon-svg {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
  display: inline-block;
}

/* ========================================================================== */
/* MOBILE RESPONSIVE */
/* ========================================================================== */
@media screen and (max-width: 768px) {
  h2 {
    font-size: 1.3rem;
  }
  
  h3 {
    font-size: 1.1rem;
    margin-top: 1.5625rem;
  }
  
  .top-controls-row {
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  
  .left-controls-group {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .left-controls-group > * {
    flex: 1 1 auto;
  }
  
  .purchase-price,
  #nomRate,
  #valDate,
  .aggregate-field {
    width: 100% !important;
  }
  
  /* Mobile chevron adjustments */
  .chevron-method,
  .chevron-howto {
    display: block;
    width: 100%;
    text-align: left;
  }
  
  .chevron-content {
    position: static;
    width: 100%;
    transform: none;
    left: auto;
    right: auto;
    max-width: 100%;
    margin-top: 0.3125rem;
  }
  
  .nominal-rate-container {
    width: 100%;
  }
  
  .rates-chevron-container {
    display: inline-flex;
  }

  #cashFlowTable {
    margin-top: 1.5625rem;
  }
  
  #cashFlowTable thead {
    display: none;
  }
  
  #cashFlowTable,
  #cashFlowTable tbody,
  #cashFlowTable tr {
    display: block;
    width: 100%;
  }
  
  #cashFlowTable tr {
    margin-bottom: 0.9375rem;
    border: 2px solid var(--field-border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: var(--text-white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  #cashFlowTable td {
    display: block;
    width: 100%;
    border: none;
    padding: 0.5rem 0;
    text-align: left !important;
  }
  
  #cashFlowTable td * {
    text-align: left !important;
  }
  
  #cashFlowTable td:first-child {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--primary-button-bg);
    border-bottom: 1px solid var(--field-border);
    margin-bottom: 0.5rem;
  }
  
  #cashFlowTable td:first-child::before {
    content: "Payment #";
  }
  
  #cashFlowTable td:last-child {
    text-align: center !important;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--field-border);
  }
  
  #cashFlowTable td:not(:first-child):not(:last-child)::before {
    content: attr(data-label);
    font-weight: bold;
    display: inline-block;
    width: 8.75rem;
    color: var(--text-heading);
  }
  
  #cashFlowTable td:nth-child(2)::before { content: "Type: "; }
  #cashFlowTable td:nth-child(3)::before { content: "Start Date: "; }
  #cashFlowTable td:nth-child(4)::before { content: "Amount: "; }
  #cashFlowTable td:nth-child(5)::before { content: "# Payments: "; }
  #cashFlowTable td:nth-child(6)::before { content: "COLA %: "; }
  #cashFlowTable td:nth-child(7)::before { content: "# of Periods: "; }
  #cashFlowTable td:nth-child(8)::before { content: "End Date: "; }

  .add-payment-btn {
    width: 100%;
    margin-top: 1.25rem;
  }
  
  .amortization-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .amortization-table {
    min-width: 37.5rem;
  }
}

/* ── Amortization rounding footnote ── */
.amort-rounding-note {
  font-size: 0.8em;
  font-style: italic;
  color: var(--secondary-button-bg);
  text-align: right;
  margin-top: 0.9375rem;
  padding-right: 2px;
}

/* ========================================================================== */
/* PRINT STYLES                                                               */
/* ========================================================================== */
@page { margin: 0.5in 0.4in; }
@media print {
  body > *, .ss-calc-wrapper > *, .ss-calc-wrapper-inner > * { display: none !important; }
  #amortizationContainer { display: block !important; }
  body, .ss-calc-wrapper, .ss-calc-wrapper-inner { display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; overflow: visible !important; max-width: 100% !important; width: 100% !important; min-width: 0 !important; background: white !important; }
  #amortizationContainer { margin: 0 !important; padding: 0 !important; border: none !important; background: white !important; overflow: visible !important; width: 100% !important; }
  #amortizationContainer h3 { display: block !important; font-size: 0.95rem; margin-bottom: 6px; }
  #amortizationContainer button { display: none !important; }
  #amortizationContainer > div { display: flex !important; }
  .amortization-table { width: 100% !important; min-width: 0 !important; table-layout: fixed !important; border-collapse: collapse !important; font-size: 0.72em; }
  .amortization-table thead { display: table-header-group; background-color: var(--table-header-bg) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .amortization-table tbody tr { page-break-inside: auto; }
  .amortization-table th, .amortization-table td { -webkit-print-color-adjust: exact; print-color-adjust: exact; padding: 3px 4px; }
  .amort-val-row td, .year-total-row td, .grand-total-row td { background-color: var(--table-header-bg) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .diagonal-stripe { background: repeating-linear-gradient(45deg, var(--field-border), var(--field-border) 2px, transparent 2px, transparent 6px) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .amortization-table tbody tr:hover { background: transparent !important; }
  .amort-rounding-note { display: block !important; text-align: right; }
  .amort-close-btn { display: none !important; }
}

/* ========================================================================== */
/* END OF FILE */
/* ========================================================================== */