/* =========================================================================
   ELS Membership Calculator — styles
   All rules are scoped under .els-calculator-wrapper so NOTHING leaks onto
   the rest of your Elementor / WordPress page (no global body or * resets).
   Nothing here is position:sticky/fixed except the (hidden) info modal.
   ========================================================================= */

.els-calculator-wrapper {
    /* ---- Light theme tokens (match the live EL-SCIENCE look) ---- */
    --bg-page:    #f4f6f8;
    --bg-panel:   #ffffff;
    --bg-raised:  #f7f9fb;
    --bg-input:   #ffffff;

    --text-main:  #1a1a2e;
    --text-muted: #4a5160;
    --text-dim:   #6b7280;

    --accent:      #6ec1e4;
    --accent-dark: #4aa8d0;
    --accent-light:#e8f6fc;
    --accent-mid:  #b8e2f5;

    --t-bronze: #cd7f32;
    --t-silver: #6ec1e4;
    --t-gold:   #c9a227;

    --border:       #e8ecf1;
    --border-light: #f0f3f6;

    --success: #1f9d68;
    --danger:  #e84545;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 22px;

    position: static;          /* never sticky */
    color: var(--text-main);
    font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background: var(--bg-page);
    border-radius: var(--r-xl);
    padding: 14px;
    width: 100%;
}

.els-calculator-wrapper *,
.els-calculator-wrapper *::before,
.els-calculator-wrapper *::after {
    box-sizing: border-box;
}

.els-calculator-wrapper h1,
.els-calculator-wrapper h2,
.els-calculator-wrapper h3,
.els-calculator-wrapper p { margin: 0; }

/* -------------------------------------------------------------------------
   Layout — two columns on desktop, stacks on tablet/mobile.
   NO sticky panels and NO internal scrollbars.
   ------------------------------------------------------------------------- */
.els-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 410px) minmax(0, 1fr);
    gap: 16px;
    max-width: 1500px;
    margin: 0 auto;
    align-items: start;
}
@media (max-width: 1024px) {
    .els-dashboard { grid-template-columns: 1fr; }
}

.els-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 6px 18px rgba(20, 30, 50, 0.05);
    overflow: hidden;
}

/* Profit header (static — not pinned) */
.els-profit-header {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    padding: 13px 18px;
    text-align: center;
    color: #fff;
}
.els-profit-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; opacity: 0.92; }
.els-profit-values { margin-top: 3px; display: flex; align-items: baseline; justify-content: center; gap: 9px; flex-wrap: wrap; }
.els-profit-annual { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.5px; }
.els-profit-monthly { font-size: 0.82rem; opacity: 0.92; }

.els-panel-body { padding: 14px; }

.els-section-title { font-size: 0.98rem; font-weight: 700; color: var(--text-main); margin-bottom: 9px; }
.els-sub-header { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); margin: 2px 0 8px; }

/* Inputs */
.els-hardware-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; margin-bottom: 14px;
    background: var(--accent-light); border: 1px solid var(--accent-mid); border-radius: var(--r-md);
}
.els-hardware-row label { font-weight: 600; font-size: 0.88rem; color: var(--text-main); }

.els-input-group {
    background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: var(--r-md);
    padding: 11px 12px; margin-bottom: 9px;
}
.els-input-group-title { font-size: 0.84rem; font-weight: 600; color: var(--text-main); margin-bottom: 8px; }
.els-input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.els-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.els-field-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); }
.els-field-row { display: flex; align-items: center; gap: 4px; }

.els-calculator-wrapper input[type="number"] {
    width: 100%; background: var(--bg-input); border: 1.5px solid var(--border); color: var(--text-main);
    border-radius: var(--r-sm); padding: 8px 10px; font-size: 14px; font-family: inherit; text-align: right;
    transition: border-color 0.15s ease, box-shadow 0.15s ease; -moz-appearance: textfield; min-width: 0;
}
.els-calculator-wrapper input[type="number"]:focus {
    outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(110, 193, 228, 0.25);
}
.els-hardware-row input[type="number"] { max-width: 130px; border-color: var(--accent-mid); }

.els-clear-btn {
    flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 0; color: var(--danger); cursor: pointer; border-radius: 4px; line-height: 0; opacity: 0.65;
}
.els-clear-btn:hover { opacity: 1; background: rgba(232, 69, 69, 0.1); }
.els-clear-btn[hidden] { display: none; }

.els-need { font-size: 0.7rem; font-weight: 600; color: var(--danger); min-height: 13px; }

/* Recommended badge */
.els-reco-wrap { text-align: center; margin: 13px 0 2px; }
.els-reco-badge {
    display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 0.75rem; font-weight: 800; letter-spacing: 1px;
    background: var(--bg-raised); border: 1px solid var(--border);
}

/* Upsell / mixer box */
.els-upsell { margin-top: 14px; background: var(--bg-raised); border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 14px; animation: els-fade-in 0.4s ease; }
.els-upsell.is-ready { border-color: var(--success); }
.els-upsell.is-gold { border-color: var(--t-gold); }

.els-upsell-head { text-align: center; margin-bottom: 12px; }
.els-upsell-title { font-size: 1.02rem; font-weight: 800; margin-bottom: 4px; }
.els-upsell-sub { font-size: 0.88rem; color: var(--text-muted); }
.els-upsell-hint { font-size: 0.76rem; color: var(--text-dim); margin-top: 7px; }
.els-upsell hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

.els-strong-success { color: var(--success); font-weight: 800; }
.els-strong-danger  { color: var(--danger);  font-weight: 800; }

.els-autofill-box { font-size: 0.84rem; background: var(--accent-light); border: 1px solid var(--accent-mid); padding: 12px; border-radius: var(--r-md); text-align: center; }
.els-autofill-box p { margin-bottom: 9px; }

.els-mini-btn {
    background: var(--accent-dark); color: #fff; border: none; padding: 7px 14px; border-radius: var(--r-sm);
    font-weight: 600; font-size: 0.78rem; font-family: inherit; cursor: pointer; transition: filter 0.15s ease, transform 0.1s ease;
}
.els-mini-btn:hover { filter: brightness(1.06); }
.els-mini-btn:active { transform: scale(0.97); }

.els-new-profit { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.els-new-profit .lbl { font-size: 0.78rem; color: var(--text-dim); }
.els-new-profit .val { font-size: 1.45rem; font-weight: 800; color: var(--success); }
.els-new-profit .mo  { font-size: 0.78rem; color: var(--text-dim); }

/* Caption explaining what the Apply button does */
.els-apply-caption { font-size: 0.78rem; color: var(--text-dim); text-align: center; margin-top: 12px; line-height: 1.45; }
.els-apply-caption b { color: var(--text-muted); }
.els-apply-caption[hidden] { display: none; }

.els-apply-btn {
    width: 100%; margin-top: 8px; background: var(--success); color: #fff; border: none; padding: 13px; border-radius: var(--r-md);
    font-weight: 800; font-size: 0.95rem; letter-spacing: 0.3px; font-family: inherit; cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease; animation: els-pulse 1.8s infinite;
}
.els-apply-btn:hover { filter: brightness(1.06); }
.els-apply-btn:active { transform: translateY(1px); }
.els-apply-btn.is-done { animation: none; background: var(--accent-dark); }

/* Flash applied volumes so the user SEES them land at the top */
.els-flash { animation: els-flash 1s ease; }

/* Matrix / tier comparison table */
.els-matrix-scroll { width: 100%; overflow-x: auto; }
.els-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.84rem; min-width: 520px; }
.els-matrix th, .els-matrix td { padding: 11px 12px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--border-light); }
.els-matrix thead th {
    background: var(--bg-panel); color: var(--text-main); font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
    border-bottom: 2px solid var(--accent-mid); padding: 15px 12px;
}
.els-matrix thead .medal { font-size: 1rem; display: block; }
.els-matrix td:first-child, .els-matrix th:first-child { text-align: left; width: 34%; color: var(--text-muted); }
.els-matrix .els-cat td { background: var(--accent-light); color: var(--accent-dark); font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; font-size: 0.68rem; text-align: left; padding: 13px 12px 7px; }
.els-matrix .els-fee td { font-weight: 700; background: var(--bg-raised); }
.els-matrix td.col { transition: background 0.25s ease, color 0.25s ease; }
.els-matrix td.col.inactive { color: var(--text-dim); }
.els-matrix th.col.active, .els-matrix td.col.active { background: var(--accent-light); }
.els-matrix th.col-bronze.active { color: var(--t-bronze); }
.els-matrix th.col-silver.active { color: var(--t-silver); }
.els-matrix th.col-gold.active   { color: var(--t-gold);   }
.els-matrix td.col.active { font-weight: 600; color: var(--text-main); }

.els-info-btn { background: none; border: none; cursor: pointer; padding: 2px; color: var(--text-dim); border-radius: 4px; line-height: 0; vertical-align: middle; margin-left: 4px; }
.els-info-btn:hover { color: var(--accent-dark); background: var(--accent-light); }

/* Hover tooltip (position:fixed so the table's overflow scroll never clips it) */
.els-tooltip {
    position: fixed; z-index: 99998; max-width: 320px; pointer-events: none;
    background: #1a1a2e; color: #fff; border-radius: var(--r-md);
    padding: 11px 13px; box-shadow: 0 12px 30px rgba(15, 25, 45, 0.28);
    font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    animation: els-tip-in 0.14s ease-out;
    --arrow-x: 50%;
}
.els-tooltip[hidden] { display: none; }
.els-tooltip-title { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.3px; margin-bottom: 4px; color: var(--accent); }
.els-tooltip-body  { font-size: 0.78rem; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.els-tooltip::after {
    content: ''; position: absolute; left: var(--arrow-x); bottom: -5px;
    width: 10px; height: 10px; background: #1a1a2e;
    transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
.els-tooltip.is-below::after { bottom: auto; top: -5px; }

@keyframes els-tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.els-level-ping { position: relative; }
.els-level-ping::after { content: ''; position: absolute; inset: 0; border-radius: inherit; animation: els-glow 0.8s ease-out; pointer-events: none; }

/* Modal (feature info) — the ONLY fixed element, and only when open */
.els-modal-overlay {
    position: fixed; inset: 0; z-index: 99999; background: rgba(15, 25, 45, 0.55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.els-modal-overlay[hidden] { display: none; }   /* ensure hidden actually hides it */
.els-modal {
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-lg); width: 100%; max-width: 600px;
    max-height: 85vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(15, 25, 45, 0.3); animation: els-modal-in 0.25s ease-out;
}
.els-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.els-modal-head h3 { font-size: 1.05rem; color: var(--text-main); }
.els-modal-close { background: none; border: none; cursor: pointer; color: var(--text-dim); border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.els-modal-close:hover { background: var(--bg-raised); color: var(--text-main); }
.els-modal-body { padding: 18px 20px; color: var(--text-main); line-height: 1.65; font-size: 0.95rem; }

/* Accessibility */
.els-calculator-wrapper :focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .els-calculator-wrapper *, .els-calculator-wrapper *::before, .els-calculator-wrapper *::after { animation: none !important; transition: none !important; }
}

/* Keyframes */
@keyframes els-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes els-modal-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes els-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 104, 0.5); } 70% { box-shadow: 0 0 0 9px rgba(31, 157, 104, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 104, 0); } }
@keyframes els-flash { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 104, 0); background: var(--bg-input); } 25% { box-shadow: 0 0 0 3px rgba(31, 157, 104, 0.55); background: #e9f9f1; } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 104, 0); background: var(--bg-input); } }
@keyframes els-glow { 0% { box-shadow: inset 0 0 0 0 rgba(110, 193, 228, 0); } 50% { box-shadow: inset 0 0 16px 2px rgba(110, 193, 228, 0.45); } 100% { box-shadow: inset 0 0 0 0 rgba(110, 193, 228, 0); } }