/* ==========================================================================
   Slatt Capital — Market Rates Page (v3)
   ========================================================================== */

/* -----  CSS Custom Properties (tokens)  ---------------------------------- */
.slatt-rates-page {
    --slatt-navy:        #0E2B4E;
    --slatt-navy-dark:   #08203D;
    --slatt-green:       #7DB249;
    --slatt-green-dark:  #5C8F32;
    --slatt-green-soft:  #E8F1DC;
    --slatt-green-hover: #F0F6E8;
    --slatt-orange:      #E97B2F;
    --slatt-text:        #333333;
    --slatt-muted:       #6B7280;
    --slatt-border:      #E5E7EB;
    --slatt-bg-soft:     #F7F9F6;
    --slatt-up:          #2E7D32;
    --slatt-down:        #C62828;
    --slatt-flat:        #9E9E9E;
    --slatt-radius:      6px;
    --slatt-shadow:      0 2px 12px rgba(14, 43, 78, 0.08);

    --slatt-font-body:   'Open Sans', -apple-system, BlinkMacSystemFont,
                         'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --slatt-font-head:   'Open Sans', -apple-system, BlinkMacSystemFont,
                         'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* -----  Page wrapper  ---------------------------------------------------- */
.slatt-rates-page {
    font-family: var(--slatt-font-body);
    color: var(--slatt-text);
    background: #ffffff;
    padding: 40px 0 60px;
    line-height: 1.5;
}

.slatt-rates-page .slatt-rates-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* -----  Header row: title + CTA tile  ------------------------------------ */
.slatt-rates-page .slatt-rates-header {
    margin-bottom: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.slatt-rates-page .slatt-rates-header > [class*="col-"] {
    float: none;
}

.slatt-rates-page .slatt-rates-title {
    font-family: var(--slatt-font-head);
    font-size: 42px;
    font-weight: 700;
    color: var(--slatt-navy);
    margin: 0 0 12px 0;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.slatt-rates-page .slatt-rates-subtitle {
    font-size: 18px;
    color: var(--slatt-text);
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.slatt-rates-page .slatt-rates-intraday {
    font-size: 14px;
    color: var(--slatt-muted);
    margin: 0;
    font-style: italic;
}

/* -----  CTA tile  -------------------------------------------------------- */
.slatt-rates-page .slatt-rates-cta {
    background: var(--slatt-navy);
    color: #ffffff;
    padding: 22px 24px 24px;
    border-radius: var(--slatt-radius);
    box-shadow: var(--slatt-shadow);
    text-align: left;
}

.slatt-rates-page .slatt-rates-cta-title {
    font-family: var(--slatt-font-head);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.slatt-rates-page .slatt-rates-cta-text {
    font-size: 14px;
    color: #D9E2EE;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.slatt-rates-page .slatt-rates-cta-btn {
    display: inline-block;
    background: var(--slatt-green);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: var(--slatt-radius);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
    border: none;
    cursor: pointer;
}

.slatt-rates-page .slatt-rates-cta-btn:hover,
.slatt-rates-page .slatt-rates-cta-btn:focus {
    background: var(--slatt-green-dark);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* -----  Widget wrapper  -------------------------------------------------- */
.slatt-rates-page .slatt-rates-widget-wrap {
    background: var(--slatt-bg-soft);
    border: 1px solid var(--slatt-border);
    border-radius: var(--slatt-radius);
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: var(--slatt-shadow);
    overflow: hidden;
}

/* ==========================================================================
   WIDGET OVERRIDES
   Using #TID0400208362 to match the widget's own specificity. No Grid.
   We accept their flex layout and only override colors, spacing, type.
   ========================================================================== */

/* Container — let it keep its flex-flow: row wrap behavior */
.slatt-rates-page #TID0400208362.widgetContainer {
    font-family: var(--slatt-font-body);
    background: transparent;
    color: var(--slatt-text);
    /* Keep widget's own row-wrap flex layout */
}

/* Title bar — hide; our H1 already says "Market Rates" */
.slatt-rates-page #TID0400208362 .titleContainer {
    display: none !important;
}

/* -----  Group header pseudo-elements ("Rates" / "Change since")  --------
   Suppress at every breakpoint. Match widget's exact selector specificity
   plus !important. */
.slatt-rates-page #TID0400208362 #TableHeaderRow::before,
.slatt-rates-page #TID0400208362 #TableHeaderRow::after {
    content: none !important;
    display: none !important;
}

/* The widget reserves padding-top:25px on header row for the pseudo labels.
   Reclaim it. */
.slatt-rates-page #TID0400208362 #TableHeaderRow {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 1.3 !important;
}

/* -----  Chart container  ----------------------------------------------- */
.slatt-rates-page #TID0400208362 #chartContainer {
    background: #ffffff !important;
    border: 1px solid var(--slatt-border) !important;
    border-radius: var(--slatt-radius) !important;
    padding: 16px !important;
    margin: 0 !important;
    box-shadow: none !important;
    /* Honor the widget's order: 2 and width: 50% at desktop */
}

.slatt-rates-page #TID0400208362 #chartTD {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.slatt-rates-page #TID0400208362 #chartTD a,
.slatt-rates-page #TID0400208362 #chartTD img,
.slatt-rates-page #TID0400208362 #chartImage {
    border: none !important;
    outline: none !important;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* -----  Timeframe buttons  --------------------------------------------- */
.slatt-rates-page #TID0400208362 #timeframeButtons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px;
    margin-top: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    width: 100%;
}

.slatt-rates-page #TID0400208362 .timeframeButton {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--slatt-navy) !important;
    border: 1.5px solid var(--slatt-navy) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: var(--slatt-font-body) !important;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    margin: 0 !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    display: inline-block !important;
    opacity: 1 !important;
    /* Widget gives buttons flex-grow: 1 — defeat that so they're pill-sized */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    white-space: nowrap;
    min-width: 0;
}

.slatt-rates-page #TID0400208362 .timeframeButton:hover {
    background: var(--slatt-green-soft) !important;
    background-color: var(--slatt-green-soft) !important;
    color: var(--slatt-navy-dark) !important;
}

.slatt-rates-page #TID0400208362 .timeframeButton.pushed {
    background: var(--slatt-navy) !important;
    background-color: var(--slatt-navy) !important;
    color: #ffffff !important;
    border-color: var(--slatt-navy) !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Rate table — work WITH the widget's flex layout
   ========================================================================== */

.slatt-rates-page #TID0400208362 #TableRows {
    background: #ffffff;
    border: 1px solid var(--slatt-border);
    border-radius: var(--slatt-radius);
    overflow: hidden;
    /* Widget gives it width:50% at desktop, 100% at <=850px. Honor that. */
}

/* Header row */
.slatt-rates-page #TID0400208362 #TableHeaderRow {
    background: var(--slatt-navy) !important;
    background-color: var(--slatt-navy) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.4px;
    border-bottom: none !important;
}

.slatt-rates-page #TID0400208362 #TableHeaderRow .widgetTableCell {
    color: #ffffff !important;
    line-height: 1.3 !important;
}

/* Data rows */
.slatt-rates-page #TID0400208362 .TableRow {
    border-bottom: 1px solid var(--slatt-border);
    font-size: 14px;
    padding: 8px 12px !important;
    transition: background-color 0.1s ease;
    margin: 0 !important;
    align-items: center !important;
}

.slatt-rates-page #TID0400208362 .TableRow:last-child {
    border-bottom: none;
}

/* Cells — keep widget's flex, just fix sizing and prevent truncation */
.slatt-rates-page #TID0400208362 .widgetTableCell {
    padding: 2px 6px !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    /* Prevent the digit-truncation issue: min-width on numeric cells */
    min-width: 0;
}

/* Numeric data cells — set a sensible min-width so 3-decimal percentages
   don't clip. "x.xxx%" + sign = ~7 chars. */
.slatt-rates-page #TID0400208362 .widgetTableCell.col2,
.slatt-rates-page #TID0400208362 .widgetTableCell.col3,
.slatt-rates-page #TID0400208362 .widgetTableCell.col4,
.slatt-rates-page #TID0400208362 .widgetTableCell.col5 {
    min-width: 4.2em;
    white-space: nowrap;
}

/* Delta cells — same, allow a bit more for "-" sign */
.slatt-rates-page #TID0400208362 .widgetTableCell.col6,
.slatt-rates-page #TID0400208362 .widgetTableCell.col7,
.slatt-rates-page #TID0400208362 .widgetTableCell.col8 {
    min-width: 4.5em;
    white-space: nowrap;
}

/* Label column — left aligned, more breathing room. Widget already sets
   min-width: 10em on col1; we soften that for narrow viewports below. */
.slatt-rates-page #TID0400208362 .widgetTableCell.col1 {
    min-width: 9em;
    padding-left: 4px !important;
    text-align: left !important;
    justify-content: flex-start !important;
    color: var(--slatt-text);
}

.slatt-rates-page #TID0400208362 .widgetTableCell.col1 strong,
.slatt-rates-page #TID0400208362 .widgetTableCell.field1 strong {
    color: var(--slatt-navy);
    font-weight: 700;
}

/* Zebra striping */
.slatt-rates-page #TID0400208362 .TableRow.odd {
    background: #ffffff;
}

.slatt-rates-page #TID0400208362 .TableRow.even {
    background: var(--slatt-bg-soft);
}

/* Hover */
.slatt-rates-page #TID0400208362 .TableRow:hover {
    background: var(--slatt-green-hover);
    cursor: pointer;
}

/* Selected row — soft green with inset left accent.
   Crucially: neutralize the widget's potential margin: .4em on .selected
   so the row doesn't visually break out of the table. */
.slatt-rates-page #TID0400208362 .TableRow.selected,
.slatt-rates-page #TID0400208362 .TableRow.odd.selected,
.slatt-rates-page #TID0400208362 .TableRow.even.selected {
    background: var(--slatt-green-soft) !important;
    box-shadow: inset 3px 0 0 0 var(--slatt-green) !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--slatt-border) !important;
    font-weight: 400 !important;
}

.slatt-rates-page #TID0400208362 .TableRow.selected .widgetTableCell {
    color: var(--slatt-text);
}

/* Preserve up/down/flat color on selected row deltas */
.slatt-rates-page #TID0400208362 .TableRow.selected .up {
    color: var(--slatt-up) !important;
}
.slatt-rates-page #TID0400208362 .TableRow.selected .down {
    color: var(--slatt-down) !important;
}
.slatt-rates-page #TID0400208362 .TableRow.selected .flat {
    color: var(--slatt-flat) !important;
}

/* -----  Section break rows  -------------------------------------------- */
.slatt-rates-page #TID0400208362 .Section > .sectionBreakRow,
.slatt-rates-page #TID0400208362 .Section > .sectionBreak,
.slatt-rates-page #TID0400208362 div.sectionBreakRow.sectionBreak {
    background: var(--slatt-green) !important;
    background-color: var(--slatt-green) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 12px !important;
    padding: 8px 12px !important;
    border-bottom: none !important;
    border-top: none !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Widget has .Section { margin: .4em 0 } commented out, but could be active.
   Force section blocks to sit flush. */
.slatt-rates-page #TID0400208362 .Section {
    margin: 0 !important;
    box-shadow: none !important;
}

/* -----  Delta cells — up / down / flat states  ------------------------- */
.slatt-rates-page #TID0400208362 .widgetTableCell.up {
    color: var(--slatt-up) !important;
    font-weight: 600;
}

.slatt-rates-page #TID0400208362 .widgetTableCell.down {
    color: var(--slatt-down) !important;
    font-weight: 600;
}

.slatt-rates-page #TID0400208362 .widgetTableCell.flat {
    color: var(--slatt-flat) !important;
}

.slatt-rates-page #TID0400208362 .material-symbols-outlined {
    font-variation-settings: 'wght' 600;
    font-size: inherit;
    vertical-align: baseline;
}

/* -----  Disclaimer / copyright  ----------------------------------------- */
.slatt-rates-page #TID0400208362 #Disclaimer,
.slatt-rates-page #TID0400208362 #copyright,
.slatt-rates-page #TID0400208362 #copyrightContainer {
    font-size: 11px !important;
    color: var(--slatt-muted) !important;
    text-align: center !important;
    margin-top: 12px !important;
    padding: 8px !important;
    background: transparent !important;
    width: 100%;
}

.slatt-rates-page #TID0400208362 #copyrightContainer {
    justify-content: center !important;
}

.slatt-rates-page #TID0400208362 #DisclaimerLink {
    color: var(--slatt-navy) !important;
    text-decoration: underline;
}

.slatt-rates-page #TID0400208362 .footerLine {
    border: 0;
    border-top: 1px solid var(--slatt-border);
    margin: 12px 0 8px;
}

.slatt-rates-page #TID0400208362 #footerLineContainer {
    width: 100%;
    order: 4;
}

/* ==========================================================================
   Widget-internal breakpoint adjustments
   The widget already handles column hiding at 1250 / 1050 / 850 / 549 / 399.
   We just need to fix the group-label leftovers and any layout issues.
   ========================================================================== */

/* At <=850px the widget stacks chart on top, table below. The chart
   container gets padding: 0 .4em — give it our padding instead. */
@media (max-width: 850px) {
    .slatt-rates-page #TID0400208362 #chartContainer {
        padding: 16px !important;
        order: 1 !important;
        margin-bottom: 16px !important;
    }
    .slatt-rates-page #TID0400208362 #TableRows {
        order: 2 !important;
    }
}

/* At <=549px the widget hides col4 and col7. Our min-widths need to relax
   so the remaining columns don't overflow. */
@media (max-width: 549px) {
    .slatt-rates-page #TID0400208362 .widgetTableCell.col1 {
        min-width: 7em;
    }
    .slatt-rates-page #TID0400208362 .widgetTableCell.col2,
    .slatt-rates-page #TID0400208362 .widgetTableCell.col3,
    .slatt-rates-page #TID0400208362 .widgetTableCell.col5,
    .slatt-rates-page #TID0400208362 .widgetTableCell.col6,
    .slatt-rates-page #TID0400208362 .widgetTableCell.col8 {
        min-width: 3.8em;
        font-size: 13px;
    }
}

/* At <=399px the widget hides col6 too. Tighten further. */
@media (max-width: 399px) {
    .slatt-rates-page #TID0400208362 .widgetTableCell.col1 {
        min-width: 6em;
        font-size: 12px;
    }
    .slatt-rates-page #TID0400208362 .widgetTableCell {
        font-size: 12px;
    }
    .slatt-rates-page #TID0400208362 #TableHeaderRow {
        font-size: 10px !important;
    }
}

/* ==========================================================================
   Newsletter section
   ========================================================================== */

.slatt-rates-page .slatt-rates-newsletter {
    background: var(--slatt-navy);
    border-radius: var(--slatt-radius);
    padding: 40px 24px;
    margin: 16px 0 24px;
    box-shadow: var(--slatt-shadow);
}

.slatt-rates-page .slatt-rates-newsletter-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.slatt-rates-page .slatt-rates-newsletter-title {
    font-family: var(--slatt-font-head);
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px 0;
}

.slatt-rates-page .slatt-rates-newsletter-text {
    font-size: 15px;
    color: #D9E2EE;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.slatt-rates-page .slatt-rates-newsletter-form {
    margin: 0;
}

.slatt-rates-page .slatt-rates-newsletter h3,
.slatt-rates-page .slatt-rates-newsletter h4,
.slatt-rates-page .slatt-rates-newsletter label {
    color: #D9E2EE !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 10px 0 !important;
}

.slatt-rates-page .slatt-rates-newsletter-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
}

.slatt-rates-page .slatt-rates-newsletter-email-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
}

.slatt-rates-page .slatt-rates-newsletter-email-row .slatt-rates-newsletter-input {
    flex: 1 1 auto;
}

.slatt-rates-page .slatt-rates-newsletter-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    font-size: 15px;
    font-family: var(--slatt-font-body);
    color: var(--slatt-text);
    outline: none;
    box-sizing: border-box;
}

.slatt-rates-page .slatt-rates-newsletter-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(125, 178, 73, 0.4);
}

.slatt-rates-page .slatt-rates-newsletter-input::placeholder {
    color: var(--slatt-muted);
}

.slatt-rates-page .slatt-rates-newsletter-btn {
    flex: 0 0 auto;
    background: var(--slatt-green);
    color: #ffffff;
    border: none;
    padding: 12px 32px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-family: var(--slatt-font-body);
    transition: background-color 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.slatt-rates-page .slatt-rates-newsletter-btn:hover,
.slatt-rates-page .slatt-rates-newsletter-btn:focus {
    background: var(--slatt-green-dark);
    transform: translateY(-1px);
    outline: none;
}

/* -----  Page-level disclaimer  ----------------------------------------- */
.slatt-rates-page .slatt-rates-disclaimer {
    font-size: 12px;
    color: var(--slatt-muted);
    line-height: 1.5;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 0 0;
    font-style: italic;
}

/* ==========================================================================
   Page-level responsive breakpoints (Slatt page chrome, not widget)
   BS3-aligned: 1200 / 992 / 768 / 480
   ========================================================================== */

/* Tablet — <=992px */
@media (max-width: 991px) {
    .slatt-rates-page .slatt-rates-title {
        font-size: 36px;
    }
    .slatt-rates-page .slatt-rates-cta {
        margin-top: 24px;
    }
}

/* Mobile — <=768px */
@media (max-width: 767px) {
    .slatt-rates-page {
        padding: 24px 0 40px;
    }
    .slatt-rates-page .slatt-rates-title {
        font-size: 30px;
    }
    .slatt-rates-page .slatt-rates-subtitle {
        font-size: 16px;
    }
    .slatt-rates-page .slatt-rates-widget-wrap {
        padding: 16px 12px;
    }
    .slatt-rates-page .slatt-rates-newsletter {
        padding: 28px 16px;
    }
    .slatt-rates-page .slatt-rates-newsletter-title {
        font-size: 22px;
    }
    .slatt-rates-page .slatt-rates-newsletter-fields {
        grid-template-columns: 1fr;
    }
    .slatt-rates-page .slatt-rates-newsletter-email-row {
        flex-direction: column;
    }
}

/* Extra small — <=480px */
@media (max-width: 479px) {
    .slatt-rates-page .slatt-rates-title {
        font-size: 26px;
    }
    .slatt-rates-page .slatt-rates-cta {
        padding: 20px 18px;
    }
}