/* ============================================================
   Magnus Empty Miles Calculator — magnus-style.css v2.0.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=DM+Sans:wght@400;500;600&display=swap');

/* --- Tokens ------------------------------------------------- */
:root {
    --mag-bg:            #0d0f14;
    --mag-surface:       #13161d;
    --mag-surface-2:     #1b1f28;
    --mag-border:        rgba(255, 255, 255, 0.07);
    --mag-accent:        #e8c468;
    --mag-accent-dim:    rgba(232, 196, 104, 0.15);
    --mag-accent-glow:   rgba(232, 196, 104, 0.35);
    --mag-text:          #e8eaf0;
    --mag-text-muted:    #6b7280;
    --mag-text-dim:      #9ca3af;
    --mag-font-display:  'Sora', sans-serif;
    --mag-font-body:     'DM Sans', sans-serif;
    --mag-radius:        12px;
    --mag-radius-lg:     20px;
    --mag-transition:    0.18s ease;
}

/* --- Container --------------------------------------------- */
.magnus-calc-container {
    font-family:      var(--mag-font-body);
    background:       var(--mag-bg);
    color:            var(--mag-text);
    max-width:        680px;
    margin:           0 auto;
    border-radius:    var(--mag-radius-lg);
    overflow:         hidden;
    border:           1px solid var(--mag-border);
    box-shadow:       0 32px 80px rgba(0, 0, 0, 0.6),
                      0 0 0 1px rgba(232, 196, 104, 0.04);
}

/* --- Header ------------------------------------------------- */
.magnus-calc-header {
    background:    var(--mag-surface);
    padding:       40px 48px 36px;
    border-bottom: 1px solid var(--mag-border);
    position:      relative;
    overflow:      hidden;
}

.magnus-calc-header::before {
    content:        '';
    position:       absolute;
    top:            -60px;
    right:          -60px;
    width:          240px;
    height:         240px;
    background:     radial-gradient(circle, var(--mag-accent-glow) 0%, transparent 70%);
    pointer-events: none;
}

.magnus-eyebrow {
    font-family:    var(--mag-font-display);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.18em;
    color:          var(--mag-accent);
    text-transform: uppercase;
    margin-bottom:  14px;
}

.magnus-title {
    font-family:    var(--mag-font-display);
    font-size:      clamp(28px, 5vw, 40px);
    font-weight:    700;
    line-height:    1.1;
    color:          var(--mag-text);
    margin:         0 0 14px;
    letter-spacing: -0.02em;
    white-space:    pre-line;
}

.magnus-subtitle {
    font-size:   14px;
    color:       var(--mag-text-dim);
    line-height: 1.6;
    margin:      0;
    max-width:   420px;
}

/* --- Body / Fields ----------------------------------------- */
.magnus-calc-body {
    padding:        36px 48px;
    display:        flex;
    flex-direction: column;
    gap:            32px;
}

.magnus-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.magnus-field-header {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             12px;
}

.magnus-label {
    font-family: var(--mag-font-display);
    font-size:   14px;
    font-weight: 600;
    color:       var(--mag-text);
    cursor:      default;
}

.magnus-field-value {
    font-family:    var(--mag-font-display);
    font-size:      20px;
    font-weight:    700;
    color:          var(--mag-accent);
    white-space:    nowrap;
    flex-shrink:    0;
    min-width:      60px;
    text-align:     right;
    letter-spacing: -0.01em;
}

.magnus-field-desc {
    font-size:   12px;
    color:       var(--mag-text-muted);
    line-height: 1.5;
}

/* --- Sliders ----------------------------------------------- */
.magnus-slider-track {
    padding: 4px 0;
}

.magnus-slider {
    -webkit-appearance: none;
    appearance:         none;
    width:              100%;
    height:             4px;
    border-radius:      99px;
    background:         linear-gradient(
                            to right,
                            var(--mag-accent) 0%,
                            var(--mag-accent) var(--fill-pct, 50%),
                            rgba(255, 255, 255, 0.08) var(--fill-pct, 50%),
                            rgba(255, 255, 255, 0.08) 100%
                        );
    cursor:             pointer;
    outline:            none;
}

.magnus-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:         none;
    width:              20px;
    height:             20px;
    border-radius:      50%;
    background:         var(--mag-accent);
    border:             3px solid var(--mag-bg);
    box-shadow:         0 0 0 2px var(--mag-accent),
                        0 4px 12px rgba(232, 196, 104, 0.4);
    cursor:             pointer;
    transition:         box-shadow var(--mag-transition), transform var(--mag-transition);
}

.magnus-slider::-moz-range-thumb {
    width:         20px;
    height:        20px;
    border-radius: 50%;
    background:    var(--mag-accent);
    border:        3px solid var(--mag-bg);
    box-shadow:    0 0 0 2px var(--mag-accent),
                   0 4px 12px rgba(232, 196, 104, 0.4);
    cursor:        pointer;
    transition:    box-shadow var(--mag-transition), transform var(--mag-transition);
}

.magnus-slider:hover::-webkit-slider-thumb,
.magnus-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px var(--mag-accent),
                0 4px 20px rgba(232, 196, 104, 0.6);
    transform:  scale(1.1);
}

.magnus-slider-bounds {
    display:         flex;
    justify-content: space-between;
    font-size:       11px;
    color:           var(--mag-text-muted);
    margin-top:      4px;
}

/* --- Revenue per Mile input -------------------------------- */
.magnus-rpm-input-wrap {
    display:       flex;
    align-items:   center;
    gap:           8px;
    background:    var(--mag-surface-2);
    border:        1px solid var(--mag-border);
    border-radius: var(--mag-radius);
    padding:       10px 16px;
    width:         fit-content;
    min-width:     140px;
    transition:    border-color var(--mag-transition), box-shadow var(--mag-transition);
}

.magnus-rpm-input-wrap:focus-within {
    border-color: var(--mag-accent);
    box-shadow:   0 0 0 3px var(--mag-accent-dim);
}

.magnus-currency-symbol {
    font-family: var(--mag-font-display);
    font-size:   18px;
    font-weight: 600;
    color:       var(--mag-accent);
    line-height: 1;
}

.magnus-rpm-input {
    background:       transparent;
    border:           none;
    outline:          none;
    font-family:      var(--mag-font-display);
    font-size:        18px;
    font-weight:      600;
    color:            var(--mag-text);
    width:            80px;
    -moz-appearance:  textfield;
}

.magnus-rpm-input::-webkit-outer-spin-button,
.magnus-rpm-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.magnus-rpm-input::placeholder {
    color: var(--mag-text-muted);
}

/* --- Results panel ----------------------------------------- */
.magnus-results {
    background:    var(--mag-surface);
    border-top:    1px solid var(--mag-border);
    padding:       40px 48px;
    position:      relative;
    overflow:      hidden;
}

.magnus-results::before {
    content:        '';
    position:       absolute;
    bottom:         -80px;
    left:           -80px;
    width:          320px;
    height:         320px;
    background:     radial-gradient(circle, rgba(232, 196, 104, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.magnus-results.hidden {
    display: none;
}

.magnus-results-eyebrow {
    font-family:    var(--mag-font-display);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.18em;
    color:          var(--mag-text-muted);
    text-transform: uppercase;
    margin-bottom:  12px;
}

.magnus-results-primary {
    display:       flex;
    align-items:   baseline;
    gap:           4px;
    line-height:   1;
    margin-bottom: 6px;
}

.magnus-results-dollar,
#display_lost_revenue {
    font-family:    var(--mag-font-display);
    font-size:      clamp(32px, 6vw, 52px);
    font-weight:    700;
    color:          var(--mag-accent);
    letter-spacing: -0.03em;
}

.magnus-results-label {
    font-size:     13px;
    color:         var(--mag-text-muted);
    margin-bottom: 20px;
    font-weight:   500;
}

.magnus-results-context {
    font-size:     13px;
    color:         var(--mag-text-dim);
    line-height:   1.7;
    margin:        0 0 28px;
    padding:       16px;
    background:    rgba(255, 255, 255, 0.03);
    border-left:   3px solid var(--mag-border);
    border-radius: 0 8px 8px 0;
}

/* --- Math breakdown ---------------------------------------- */
.magnus-math-breakdown {
    background:    var(--mag-surface-2);
    border:        1px solid var(--mag-border);
    border-radius: var(--mag-radius);
    overflow:      hidden;
    margin-bottom: 28px;
}

.magnus-math-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         12px 18px;
    border-bottom:   1px solid var(--mag-border);
    gap:             16px;
}

.magnus-math-row:last-child {
    border-bottom: none;
}

.magnus-math-row.highlight {
    background: var(--mag-accent-dim);
}

.magnus-math-label {
    font-size:   13px;
    color:       var(--mag-text-dim);
    flex-shrink: 0;
}

.magnus-math-value {
    font-family: var(--mag-font-display);
    font-size:   14px;
    font-weight: 600;
    color:       var(--mag-text);
    text-align:  right;
}

.magnus-math-row.highlight .magnus-math-label,
.magnus-math-row.highlight .magnus-math-value {
    color: var(--mag-accent);
}

/* --- CTA --------------------------------------------------- */
.magnus-cta {
    text-align:    center;
    margin-bottom: 20px;
}

.magnus-cta-body {
    font-size:     13px;
    color:         var(--mag-text-dim);
    line-height:   1.6;
    margin-bottom: 16px;
}

.magnus-cta-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      var(--mag-accent);
    color:           #0d0f14;
    font-family:     var(--mag-font-display);
    font-size:       14px;
    font-weight:     700;
    letter-spacing:  0.02em;
    padding:         14px 32px;
    border-radius:   var(--mag-radius);
    text-decoration: none;
    transition:      background var(--mag-transition),
                     box-shadow var(--mag-transition),
                     transform var(--mag-transition);
    box-shadow:      0 4px 20px rgba(232, 196, 104, 0.3);
}

.magnus-cta-btn:hover {
    background:  #f0d080;
    box-shadow:  0 8px 32px rgba(232, 196, 104, 0.5);
    transform:   translateY(-1px);
}

.magnus-cta-btn:active {
    transform:  translateY(0);
    box-shadow: 0 4px 12px rgba(232, 196, 104, 0.3);
}

/* --- Disclaimer -------------------------------------------- */
.magnus-disclaimer {
    text-align: center;
}

.magnus-disclaimer small {
    font-size:   11px;
    color:       var(--mag-text-muted);
    line-height: 1.6;
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 600px) {
    .magnus-calc-header,
    .magnus-calc-body,
    .magnus-results {
        padding-left:  24px;
        padding-right: 24px;
    }

    .magnus-calc-header {
        padding-top: 28px;
    }
}