/*
 * Gold Savings Calculator widget.
 * All visual tokens are CSS custom properties (--gp-sc-*). Sensible defaults live here so the
 * widget looks correct even if a value isn't overridden; each module instance overrides the
 * ones it needs via an inline <style> block scoped to its own unique widget id (see tmpl/default.php).
 */
.gp-savings-widget {
    --gp-sc-bg: #0b0f1a;
    --gp-sc-bg-gradient-end: transparent;
    --gp-sc-bg-alt: #10162a;
    --gp-sc-border: #1e2740;
    --gp-sc-heading: #e6e9f0;
    --gp-sc-label: #8892a6;
    --gp-sc-stat-value: #ffffff;
    --gp-sc-accent: #f0b429;
    --gp-sc-accent-text: #1a1206;
    --gp-sc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --gp-sc-heading-size: 20px;
    --gp-sc-label-size: 13px;
    --gp-sc-stat-value-size: 20px;
    --gp-sc-font-weight-bold: 700;
    --gp-sc-max-width: 720px;
    --gp-sc-padding: 24px;
    --gp-sc-card-radius: 16px;
    --gp-sc-card-border-width: 1px;
    --gp-sc-box-radius: 12px;
    --gp-sc-gap: 14px;

    /* Container query context: the sliders/stats layout below responds to THIS element's own
       rendered width (container queries), not the browser viewport - a correct default,
       since a widget in a narrow sidebar on a wide desktop must collapse to fewer columns
       just like it would on an actual phone, and shouldn't stay cramped just because the
       viewport itself happens to be wide. */
    container-type: inline-size;
    container-name: gp-sc;

    box-sizing: border-box;
    width: 100%;
    max-width: var(--gp-sc-max-width);
    margin: 0 auto;
    padding: var(--gp-sc-padding);
    background: var(--gp-sc-bg);
    background-image: linear-gradient(160deg, var(--gp-sc-bg), var(--gp-sc-bg-gradient-end));
    border: var(--gp-sc-card-border-width) solid var(--gp-sc-border);
    border-radius: var(--gp-sc-card-radius);
    font-family: var(--gp-sc-font-family);
    color: var(--gp-sc-heading);
}

.gp-savings-widget *,
.gp-savings-widget *::before,
.gp-savings-widget *::after {
    box-sizing: border-box;
}

.gp-sc-heading {
    margin: 0 0 calc(var(--gp-sc-gap) * 1.3);
    font-size: var(--gp-sc-heading-size);
    font-weight: var(--gp-sc-font-weight-bold);
    color: var(--gp-sc-heading);
}

/* ---------- Sliders ---------- */

.gp-sc-sliders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gp-sc-gap);
    margin-bottom: var(--gp-sc-gap);
}

.gp-sc-slider-group {
    display: flex;
    flex-direction: column;
    /* Grid/flex items default to min-width:auto, which refuses to shrink below the intrinsic
       width of their content (e.g. the "RM10 ... RM5,000" marks row) even when the grid track
       itself is narrower - the classic cause of a column silently overflowing its card. Force it
       to actually respect the track width it's given. */
    min-width: 0;
}

.gp-sc-slider-label {
    font-size: var(--gp-sc-label-size);
    color: var(--gp-sc-label);
    margin-bottom: 8px;
}

.gp-sc-slider-value {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    background: var(--gp-sc-bg-alt);
    border: 1px solid var(--gp-sc-border);
    border-radius: var(--gp-sc-box-radius);
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: calc(var(--gp-sc-stat-value-size) * 0.9);
    font-weight: var(--gp-sc-font-weight-bold);
    color: var(--gp-sc-stat-value);
}

.gp-sc-value-affix {
    flex-shrink: 0;
    color: var(--gp-sc-stat-value);
}

/* Typed, freely-editable amount - the range slider below remains as a quick-pick shortcut that
   writes into this field; typing here is the source of truth for the calculation.
   Selector is deliberately over-specific AND backed by !important on every property: this widget
   installs onto arbitrary Joomla templates, many of which carry their own global
   `input[type="text"]` reset (e.g. Themis's `input[type="text"]:not(.form-control)` at
   specificity 0,2,1 - higher than a plain single class). Without this, the widget's colors are at
   the mercy of whatever the host template happens to do to bare text inputs. */
.gp-savings-widget .gp-sc-slider-value input.gp-sc-value-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    font: inherit !important;
    color: inherit !important;
    padding: 0 !important;
}

.gp-savings-widget .gp-sc-slider-value input.gp-sc-value-input.gp-sc-align-right {
    text-align: right !important;
}

.gp-savings-widget .gp-sc-slider-value input.gp-sc-value-input.gp-sc-align-left {
    text-align: left !important;
}

.gp-savings-widget .gp-sc-slider-value input.gp-sc-value-input:focus {
    color: var(--gp-sc-accent) !important;
}

.gp-sc-slider-value .gp-sc-chevron {
    color: var(--gp-sc-label);
    font-size: 12px;
}

.gp-savings-widget input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    height: 6px;
    border-radius: 3px;
    background: var(--gp-sc-border);
    outline: none;
    accent-color: var(--gp-sc-accent);
    cursor: pointer;
}

.gp-savings-widget input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gp-sc-accent);
    border: 3px solid var(--gp-sc-bg);
    box-shadow: 0 0 0 1px var(--gp-sc-accent);
    cursor: pointer;
}

.gp-savings-widget input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gp-sc-accent);
    border: 3px solid var(--gp-sc-bg);
    box-shadow: 0 0 0 1px var(--gp-sc-accent);
    cursor: pointer;
}

.gp-sc-slider-marks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 2px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--gp-sc-label);
}

/* ---------- Stats ---------- */

.gp-sc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gp-sc-gap);
    margin-bottom: var(--gp-sc-gap);
}

/* Fewer stat boxes (e.g. "Future Value" hidden) should still fill the row evenly instead of
   leaving an empty column-shaped gap on the right. */
.gp-sc-stats.gp-sc-stats-2col {
    grid-template-columns: repeat(2, 1fr);
}

.gp-sc-stat-box {
    /* Same min-width:0 defense as .gp-sc-slider-group - a grid item's default min-width:auto
       would otherwise refuse to shrink below a long value's intrinsic width and overflow the card. */
    min-width: 0;
    background: var(--gp-sc-bg-alt);
    border: 1px solid var(--gp-sc-border);
    border-radius: var(--gp-sc-box-radius);
    padding: 14px 12px;
    text-align: center;
}

/* Groups just the label+value pair. Kept separate from .gp-sc-stat-box so the disclaimer
   (a sibling, only present on the "future value" box) never gets pulled into the same flex
   row as the label/value in the narrow single-column layout below - it always renders on its
   own line underneath instead. */
.gp-sc-stat-main {
    display: block;
}

.gp-sc-stat-label {
    /* Reserve space for exactly 2 lines regardless of how many lines this particular label
       actually wraps to, and anchor the text to the bottom of that space. This keeps the value
       below it starting at the same height across every stat box in the row - a 1-line label
       simply gets extra breathing room above it instead of pulling its value out of alignment. */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: calc(var(--gp-sc-label-size) * 1.3 * 2);
    line-height: 1.3;
    font-size: var(--gp-sc-label-size);
    color: var(--gp-sc-label);
    margin-bottom: 6px;
}

.gp-sc-stat-value {
    font-size: var(--gp-sc-stat-value-size);
    font-weight: var(--gp-sc-font-weight-bold);
    color: var(--gp-sc-stat-value);
    line-height: 1.2;
}

.gp-sc-stat-value .gp-sc-unit {
    font-size: 0.6em;
    font-weight: 500;
    color: var(--gp-sc-label);
}

.gp-sc-stat-box.gp-sc-stat-highlight .gp-sc-stat-value {
    color: var(--gp-sc-accent);
}

.gp-sc-disclaimer {
    font-size: 10px;
    color: var(--gp-sc-label);
    margin-top: 6px;
}

/* ---------- CTA ---------- */

.gp-sc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: var(--gp-sc-accent);
    color: var(--gp-sc-accent-text);
    border: none;
    border-radius: var(--gp-sc-box-radius);
    font-size: calc(var(--gp-sc-label-size) + 2px);
    font-weight: var(--gp-sc-font-weight-bold);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.gp-sc-cta:hover,
.gp-sc-cta:focus-visible {
    opacity: 0.9;
    transform: translateY(-1px);
    color: var(--gp-sc-accent-text);
    text-decoration: none;
}

/* ============================================================
   Responsive: tablet-sized viewport
   These two rules style the widget's OWN box (padding, its own font-size), which a container
   query cannot do reliably for the element establishing the container - so they stay
   viewport-based. Everything else below responds to the widget's own rendered width instead.
   ============================================================ */
@media (max-width: 768px) {
    .gp-savings-widget {
        padding: calc(var(--gp-sc-padding) * 0.85);
    }

    .gp-sc-heading {
        font-size: calc(var(--gp-sc-heading-size) * 0.95);
    }
}

@media (max-width: 480px) {
    .gp-savings-widget {
        padding: calc(var(--gp-sc-padding) * 0.7);
        border-radius: calc(var(--gp-sc-card-radius) * 0.75);
    }

    .gp-sc-heading {
        font-size: calc(var(--gp-sc-heading-size) * 0.85);
        margin-bottom: 12px;
    }
}

/* ============================================================
   Container-based: sliders stack before stats do (sliders need more
   horizontal room per column than the stat boxes). Keyed off the widget's own
   width, so a widget squeezed into a narrow sidebar collapses correctly even on
   a wide desktop viewport - not just on an actually-narrow phone screen.
   ============================================================ */
@container gp-sc (max-width: 640px) {
    .gp-sc-sliders {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Container-based: phone-narrow rendered width
   ============================================================ */
@container gp-sc (max-width: 480px) {
    .gp-sc-stats,
    .gp-sc-stats.gp-sc-stats-2col {
        grid-template-columns: 1fr;
    }

    .gp-sc-stat-box {
        /* Column, not row: the label+value pair forms one row (.gp-sc-stat-main below), and the
           disclaimer (when present) stacks as its own full-width line underneath it - never
           squeezed into the same row as the value. */
        display: flex;
        flex-direction: column;
        text-align: left;
        padding: 10px 14px;
    }

    .gp-sc-stat-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
    }

    .gp-sc-disclaimer {
        margin-top: 6px;
    }

    .gp-sc-stat-label {
        /* Boxes stack into full-width rows here (label left, value right) instead of sitting
           side by side in a grid, so the 2-line reserved-height trick is no longer needed. */
        display: block;
        min-height: 0;
        margin-bottom: 0;
    }

    .gp-sc-slider-marks {
        font-size: 10px;
    }

    .gp-sc-cta {
        padding: 12px 16px;
        font-size: var(--gp-sc-label-size);
    }
}