/**
 * Design System v2 — Tools Calculator (Shared)
 * bitarabi.com
 *
 * Shared CSS for 8 financial calculators. Each uses its own prefix
 * (swc-, pvc-, fpc-, ppc-, psc-, trc-, aspc-, apc-) that maps to the
 * generic calc component vocabulary defined here.
 *
 * Used by: swap, pip-value, forex-profit, pivot-point,
 *          position-size, trade-return,
 *          average-stock-price, accumulated-profit calculators.
 *
 * NOTE: lot-size (lotc-) has its own standalone stylesheet and is NOT
 * scoped by this file. Currency-converter (cc-) is a landing page, not
 * a calculator, and has its own stylesheet.
 *
 * 2026-04-19 — CV-069: REFACTOR from [class*=…] attribute-selector scope to
 * explicit enumerated class selectors. The old attribute-match pattern
 * leaked into any class containing -hero / -card / -btn / -input etc.
 * substrings — including cc-hero, cc-card, cc-rate-card, cc-tool-card,
 * cc-hero-badges on currency-converter. Root fix (Rule 44) — behaviour
 * identical for the 8 intended calculators, all collateral bleed removed.
 */

/* Calc shell — every shared calculator gets RTL direction. */
.swc-modern,
.pvc-modern,
.fpc-modern,
.ppc-modern,
.psc-modern,
.trc-modern,
.aspc-modern,
.apc-modern { direction: rtl; }

/* Layout Aliases — supports both legacy and modern blade structures */
.swc-grid, .pvc-grid, .fpc-grid, .ppc-grid, .psc-grid, .trc-grid, .aspc-grid, .apc-grid,
.swc-form-grid, .pvc-form-grid, .fpc-form-grid, .ppc-form-grid, .psc-form-grid, .trc-form-grid, .aspc-form-grid, .apc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.swc-col, .pvc-col, .fpc-col, .ppc-col, .psc-col, .trc-col, .aspc-col, .apc-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.swc-layout, .pvc-layout, .fpc-layout, .ppc-layout, .psc-layout, .trc-layout, .aspc-layout, .apc-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
}
@media (max-width: 991px) {
    .swc-layout, .pvc-layout, .fpc-layout, .ppc-layout, .psc-layout, .trc-layout, .aspc-layout, .apc-layout {
        grid-template-columns: 1fr;
    }
}

/* ── HERO ── */
.swc-hero, .pvc-hero, .fpc-hero, .ppc-hero, .psc-hero, .trc-hero, .aspc-hero, .apc-hero {
    position: relative;
    background: radial-gradient(ellipse at top right, rgba(31,207,201,0.12) 0%, transparent 50%), 
                radial-gradient(ellipse at bottom left, rgba(229,168,58,0.08) 0%, transparent 50%), 
                linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
    border-radius: 16px;
    padding: 64px 40px;
    margin-bottom: 32px;
    color: var(--text-on-navy, #fff);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.swc-hero::before, .pvc-hero::before, .fpc-hero::before, .ppc-hero::before, .psc-hero::before, .trc-hero::before, .aspc-hero::before, .apc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05) 1px, transparent 1px), 
                      radial-gradient(circle at 70% 60%, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 100px 100px, 80px 80px;
    pointer-events: none;
}
.swc-hero-eyebrow, .pvc-hero-eyebrow, .fpc-hero-eyebrow, .ppc-hero-eyebrow, .psc-hero-eyebrow, .trc-hero-eyebrow, .aspc-hero-eyebrow, .apc-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--teal-bright, var(--teal-light));
    text-transform: uppercase;
    margin-bottom: 16px;
    background: rgba(31,207,201,0.1);
    padding: 4px 12px;
    border-radius: 999px;
    position: relative;
    z-index: 1;
}
.swc-hero h1, .pvc-hero h1, .fpc-hero h1, .ppc-hero h1, .psc-hero h1, .trc-hero h1, .aspc-hero h1, .apc-hero h1 {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px;
    color: #fff;
    position: relative;
    z-index: 1;
}
.swc-hero p, .pvc-hero p, .fpc-hero p, .ppc-hero p, .psc-hero p, .trc-hero p, .aspc-hero p, .apc-hero p {
    font-size: clamp(15px, 1.8vw, 19px);
    color: var(--text-muted);
    max-width: 800px;
    margin: 0;
    line-height: 1.7;
    position: relative;
    z-index: 1;
    opacity: 0.9;
}

/* ── CARD ── */
.swc-card, .pvc-card, .fpc-card, .ppc-card, .psc-card, .trc-card, .aspc-card, .apc-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(11,31,58,0.1);
    overflow: hidden;
    margin-bottom: 40px;
}
.swc-card-header, .pvc-card-header, .fpc-card-header, .ppc-card-header, .psc-card-header, .trc-card-header, .aspc-card-header, .apc-card-header {
    padding: 32px 32px 24px;
    border-bottom: 1px solid var(--border-soft);
}
.swc-card-title, .pvc-card-title, .fpc-card-title, .ppc-card-title, .psc-card-title, .trc-card-title, .aspc-card-title, .apc-card-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 6px;
}
.swc-card-sub, .pvc-card-sub, .fpc-card-sub, .ppc-card-sub, .psc-card-sub, .trc-card-sub, .aspc-card-sub, .apc-card-sub {
    font-size: 14px;
    color: var(--text-muted);
}
.swc-card-body,
.pvc-card-body,
.fpc-card-body,
.ppc-card-body,
.psc-card-body,
.trc-card-body,
.aspc-card-body,
.apc-card-body { padding: 0 28px 28px }

/* Generic field grouping (deprecated in favor of grid/col aliases above) */

.swc-form-full,
.pvc-form-full,
.fpc-form-full,
.ppc-form-full,
.psc-form-full,
.trc-form-full,
.aspc-form-full,
.apc-form-full { grid-column: 1 / -1 }
.swc-field,
.pvc-field,
.fpc-field,
.ppc-field,
.psc-field,
.trc-field,
.aspc-field,
.apc-field { display: flex; flex-direction: column; gap: 6px }
.swc-field-label,
.pvc-field-label,
.fpc-field-label,
.ppc-field-label,
.psc-field-label,
.trc-field-label,
.aspc-field-label,
.apc-field-label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--navy-deep);
}

.swc-section-label, .pvc-section-label, .fpc-section-label, .ppc-section-label, .psc-section-label, .trc-section-label, .aspc-section-label, .apc-section-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--teal);
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
}

.swc-info-dot, .pvc-info-dot, .fpc-info-dot, .ppc-info-dot, .psc-info-dot, .trc-info-dot, .aspc-info-dot, .apc-info-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--teal);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--teal);
}
.swc-hint,
.pvc-hint,
.fpc-hint,
.ppc-hint,
.psc-hint,
.trc-hint,
.aspc-hint,
.apc-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: -2px;
}
.swc-input, .swc-select,
.pvc-input, .pvc-select,
.fpc-input, .fpc-select,
.ppc-input, .ppc-select,
.psc-input, .psc-select,
.trc-input, .trc-select,
.aspc-input, .aspc-select,
.apc-input, .apc-select {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    transition: all .2s ease;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.swc-input:focus, .swc-select:focus,
.pvc-input:focus, .pvc-select:focus,
.fpc-input:focus, .fpc-select:focus,
.ppc-input:focus, .ppc-select:focus,
.psc-input:focus, .psc-select:focus,
.trc-input:focus, .trc-select:focus,
.aspc-input:focus, .aspc-select:focus,
.apc-input:focus, .apc-select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 4px var(--teal-bg);
    background: #fff;
}
.swc-select,
.pvc-select,
.fpc-select,
.ppc-select,
.psc-select,
.trc-select,
.aspc-select,
.apc-select {
    display: none;
}

/* ── SELECT2 OVERRIDES ── */
.select2-container--default .select2-selection--single {
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    transition: all .2s;
    position: relative;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--teal);
    box-shadow: 0 0 0 4px var(--teal-bg);
    background: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--navy);
    font-weight: 700;
    line-height: 52px;
    padding: 0 !important;
    width: 100%;
}
/* RTL specific rendering fixes */
.select2-container--rtl .select2-selection--single .select2-selection__rendered {
    text-align: right;
    padding-left: 30px !important; /* Space for arrow on the left */
    padding-right: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 52px;
    width: 34px;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.select2-container--rtl .select2-selection--single .select2-selection__arrow {
    left: 8px;
    right: auto;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-muted) transparent transparent transparent;
    border-width: 6px 5px 0 5px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--teal) transparent;
    border-width: 0 5px 6px 5px;
}
.select2-dropdown {
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(11,31,58,0.15);
    overflow: hidden;
    z-index: 99999; /* Higher z-index to stay above modals/cards */
    direction: rtl;
    text-align: right;
}
.select2-results__option {
    padding: 12px 16px;
    font-size: 14px;
    direction: rtl;
    text-align: right;
}
.select2-results__option--highlighted[aria-selected] {
    background-color: var(--teal-bg) !important;
    color: var(--teal) !important;
}
.select2-search--dropdown {
    padding: 8px;
    direction: rtl;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    direction: rtl;
    text-align: right;
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--teal);
    outline: none;
}

/* ── DIRECTION TOGGLE ── */
.swc-direction-toggle,
.pvc-direction-toggle,
.fpc-direction-toggle,
.ppc-direction-toggle,
.psc-direction-toggle,
.trc-direction-toggle,
.aspc-direction-toggle,
.apc-direction-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 4px;
}
.swc-direction-toggle button,
.pvc-direction-toggle button,
.fpc-direction-toggle button,
.ppc-direction-toggle button,
.psc-direction-toggle button,
.trc-direction-toggle button,
.aspc-direction-toggle button,
.apc-direction-toggle button {
    padding: 10px;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 800;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all .15s;
}
.swc-direction-toggle button.active.long,
.pvc-direction-toggle button.active.long,
.fpc-direction-toggle button.active.long,
.ppc-direction-toggle button.active.long,
.psc-direction-toggle button.active.long,
.trc-direction-toggle button.active.long,
.aspc-direction-toggle button.active.long,
.apc-direction-toggle button.active.long {
    background: var(--teal);
    color: #fff;
}
.swc-direction-toggle button.active.short,
.pvc-direction-toggle button.active.short,
.fpc-direction-toggle button.active.short,
.ppc-direction-toggle button.active.short,
.psc-direction-toggle button.active.short,
.trc-direction-toggle button.active.short,
.aspc-direction-toggle button.active.short,
.apc-direction-toggle button.active.short {
    background: #d40000;
    color: #fff;
}

.calc-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    align-items: stretch;
}
.calc-reset-btn {
    background: var(--bg);
    border: 1.5px solid var(--border);
    color: var(--text-mid);
    padding: 0 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.calc-reset-btn:hover {
    background: var(--bg-muted);
    border-color: var(--border-strong);
    color: var(--navy);
}

/* ── HALAL TOGGLE ── */
.swc-halal-toggle,
.pvc-halal-toggle,
.fpc-halal-toggle,
.ppc-halal-toggle,
.psc-halal-toggle,
.trc-halal-toggle,
.aspc-halal-toggle,
.apc-halal-toggle {
    margin-top: 20px;
    padding: 16px;
    background: var(--teal-bg);
    border: 1.5px solid var(--teal);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all .15s;
}
.swc-halal-toggle:hover,
.pvc-halal-toggle:hover,
.fpc-halal-toggle:hover,
.ppc-halal-toggle:hover,
.psc-halal-toggle:hover,
.trc-halal-toggle:hover,
.aspc-halal-toggle:hover,
.apc-halal-toggle:hover { background: rgba(14,124,123,.12) }
.swc-halal-toggle input,
.pvc-halal-toggle input,
.fpc-halal-toggle input,
.ppc-halal-toggle input,
.psc-halal-toggle input,
.trc-halal-toggle input,
.aspc-halal-toggle input,
.apc-halal-toggle input {
    width: 20px;
    height: 20px;
    accent-color: var(--teal);
    cursor: pointer;
}
.swc-halal-toggle-text,
.pvc-halal-toggle-text,
.fpc-halal-toggle-text,
.ppc-halal-toggle-text,
.psc-halal-toggle-text,
.trc-halal-toggle-text,
.aspc-halal-toggle-text,
.apc-halal-toggle-text { flex: 1 }
.swc-halal-toggle-text strong,
.pvc-halal-toggle-text strong,
.fpc-halal-toggle-text strong,
.ppc-halal-toggle-text strong,
.psc-halal-toggle-text strong,
.trc-halal-toggle-text strong,
.aspc-halal-toggle-text strong,
.apc-halal-toggle-text strong {
    display: block;
    color: var(--teal);
    font-size: 16px;
    margin-bottom: 2px;
}
.swc-halal-toggle-text span,
.pvc-halal-toggle-text span,
.fpc-halal-toggle-text span,
.ppc-halal-toggle-text span,
.psc-halal-toggle-text span,
.trc-halal-toggle-text span,
.aspc-halal-toggle-text span,
.apc-halal-toggle-text span {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ── CALCULATE BUTTON ── */
.swc-calculate-btn, .pvc-calculate-btn, .fpc-calculate-btn, .ppc-calculate-btn, .psc-calculate-btn, .trc-calculate-btn, .aspc-calculate-btn, .apc-calculate-btn {
    flex: 1;
    background: var(--teal);
    color: #fff;
    border: none;
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 800;
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 4px 12px rgba(14,124,123,0.25);
}
.swc-calculate-btn:hover, .pvc-calculate-btn:hover, .fpc-calculate-btn:hover, .ppc-calculate-btn:hover, .psc-calculate-btn:hover, .trc-calculate-btn:hover, .aspc-calculate-btn:hover, .apc-calculate-btn:hover {
    background: var(--teal-light);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(14,124,123,0.3);
}
.swc-calculate-btn:active,
.pvc-calculate-btn:active,
.fpc-calculate-btn:active,
.ppc-calculate-btn:active,
.psc-calculate-btn:active,
.trc-calculate-btn:active,
.aspc-calculate-btn:active,
.apc-calculate-btn:active { transform: translateY(0) }

/* ── RESULT ── */
.swc-result, .pvc-result, .fpc-result, .ppc-result, .psc-result, .trc-result, .aspc-result, .apc-results {
    background: var(--teal-bg);
    border: 1px solid rgba(14,124,123,0.15);
    border-inline-start: 4px solid var(--teal);
    border-radius: 14px;
    padding: 24px;
    transition: all .3s;
}
.swc-result.show,
.pvc-result.show,
.fpc-result.show,
.ppc-result.show,
.psc-result.show,
.trc-result.show,
.aspc-result.show,
.apc-result.show { opacity: 1; max-height: 900px; padding: 24px }
.swc-result-label,
.pvc-result-label,
.fpc-result-label,
.ppc-result-label,
.psc-result-label,
.trc-result-label,
.aspc-result-label,
.apc-result-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 4px;
}
/* ── PIVOT POINT RESULTS ── */
.ppc-results-wrapper {
    margin-top: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.ppc-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ppc-results-table th {
    background: var(--bg-muted);
    color: var(--navy);
    font-weight: 800;
    padding: 14px 20px;
    text-align: right;
    border-bottom: 2px solid var(--border);
}
.ppc-results-table td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-mid);
    font-feature-settings: "tnum";
}
.ppc-results-table tr:last-child td { border-bottom: none }

.ppc-resistance td:last-child { color: var(--danger); font-weight: 700; }
.ppc-support td:last-child { color: var(--success); font-weight: 700; }
.ppc-pivot td { background: var(--teal-bg); font-weight: 800; color: var(--navy); }
.ppc-pivot td:last-child { color: var(--teal); }

.ppc-error-msg {
    background: var(--danger-bg);
    color: var(--danger);
    padding: 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}
.swc-result-value, .pvc-result-value, .fpc-result-value, .ppc-result-value, .psc-result-value, .trc-result-value, .aspc-result-value, .apc-result-value {
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 800;
    color: var(--teal);
    margin-bottom: 20px;
    line-height: 1;
    font-feature-settings: "tnum";
}
.swc-result-value.neg,
.pvc-result-value.neg,
.fpc-result-value.neg,
.ppc-result-value.neg,
.psc-result-value.neg,
.trc-result-value.neg,
.aspc-result-value.neg,
.apc-result-value.neg { color: #d40000 }
.swc-result-value.pos,
.pvc-result-value.pos,
.fpc-result-value.pos,
.ppc-result-value.pos,
.psc-result-value.pos,
.trc-result-value.pos,
.aspc-result-value.pos,
.apc-result-value.pos { color: var(--teal) }
.swc-result-value.halal,
.pvc-result-value.halal,
.fpc-result-value.halal,
.ppc-result-value.halal,
.psc-result-value.halal,
.trc-result-value.halal,
.aspc-result-value.halal,
.apc-result-value.halal { color: var(--teal) }
.swc-result-grid,
.pvc-result-grid,
.fpc-result-grid,
.ppc-result-grid,
.psc-result-grid,
.trc-result-grid,
.aspc-result-grid,
.apc-result-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(14,124,123,.25);
}
.swc-result-grid .k, .pvc-result-grid .k, .fpc-result-grid .k, .ppc-result-grid .k, .psc-result-grid .k, .trc-result-grid .k, .aspc-result-grid .k, .apc-result-grid .k {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.swc-result-grid .v, .pvc-result-grid .v, .fpc-result-grid .v, .ppc-result-grid .v, .psc-result-grid .v, .trc-result-grid .v, .aspc-result-grid .v, .apc-result-grid .v {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy);
    font-feature-settings: "tnum";
}
.swc-halal-note,
.pvc-halal-note,
.fpc-halal-note,
.ppc-halal-note,
.psc-halal-note,
.trc-halal-note,
.aspc-halal-note,
.apc-halal-note {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-card);
    border-inline-end: 4px solid var(--teal);
    border-radius: 6px;
    font-size: var(--text-sm);
    color: var(--text);
    display: none;
}
.swc-halal-note.show,
.pvc-halal-note.show,
.fpc-halal-note.show,
.ppc-halal-note.show,
.psc-halal-note.show,
.trc-halal-note.show,
.aspc-halal-note.show,
.apc-halal-note.show { display: block }
.swc-halal-note strong,
.pvc-halal-note strong,
.fpc-halal-note strong,
.ppc-halal-note strong,
.psc-halal-note strong,
.trc-halal-note strong,
.aspc-halal-note strong,
.apc-halal-note strong { color: var(--teal) }
.swc-formula,
.pvc-formula,
.fpc-formula,
.ppc-formula,
.psc-formula,
.trc-formula,
.aspc-formula,
.apc-formula {
    margin-top: 16px;
    padding: 12px;
    background: rgba(11,30,63,.04);
    border-radius: 6px;
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
    direction: ltr;
    text-align: left;
}

/* ── ERROR ── */
.swc-error-msg,
.pvc-error-msg,
.fpc-error-msg,
.ppc-error-msg,
.psc-error-msg,
.trc-error-msg,
.aspc-error-msg,
.apc-error-msg {
    text-align: center;
    color: #d40000;
    font-weight: 600;
    font-size: var(--text-sm);
    padding: 16px;
    background: rgba(239,68,68,.05);
    border-radius: var(--radius);
    margin-top: 24px;
    border: 1px solid rgba(220,38,38,.1);
}

/* ── INFO FOOTER ── */
.swc-info-footer,
.pvc-info-footer,
.fpc-info-footer,
.ppc-info-footer,
.psc-info-footer,
.trc-info-footer,
.aspc-info-footer,
.apc-info-footer {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 16px 28px 20px;
    border-top: 1px solid var(--border-soft);
}
.swc-info-item,
.pvc-info-item,
.fpc-info-item,
.ppc-info-item,
.psc-info-item,
.trc-info-item,
.aspc-info-item,
.apc-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: 500;
}

/* ── YMYL DISCLAIMER ── */
.psc-ymyl h4,
.trc-ymyl h4,
.aspc-ymyl h4,
.apc-ymyl h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 8px;
}
.swc-ymyl p,
.pvc-ymyl p,
.fpc-ymyl p,
.ppc-ymyl p,
.psc-ymyl p,
.trc-ymyl p,
.aspc-ymyl p,
.apc-ymyl p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .swc-hero, .pvc-hero, .fpc-hero, .ppc-hero,
    .psc-hero, .trc-hero, .aspc-hero, .apc-hero { padding: 32px 16px 44px; border-radius: 0 0 24px 24px }
    .swc-hero h1, .pvc-hero h1, .fpc-hero h1, .ppc-hero h1,
    .psc-hero h1, .trc-hero h1, .aspc-hero h1, .apc-hero h1 { font-size: 24px }
    .swc-card, .pvc-card, .fpc-card, .ppc-card,
    .psc-card, .trc-card, .aspc-card, .apc-card { margin: -24px 12px 24px; border-radius: 12px }
    .swc-card-header, .pvc-card-header, .fpc-card-header, .ppc-card-header,
    .psc-card-header, .trc-card-header, .aspc-card-header, .apc-card-header { padding: 20px 16px 0 }
    .swc-card-body, .pvc-card-body, .fpc-card-body, .ppc-card-body,
    .psc-card-body, .trc-card-body, .aspc-card-body, .apc-card-body { padding: 0 16px 20px }
    .swc-form-grid, .pvc-form-grid, .fpc-form-grid, .ppc-form-grid,
    .psc-form-grid, .trc-form-grid, .aspc-form-grid, .apc-form-grid { grid-template-columns: 1fr }
    .swc-result-value, .pvc-result-value, .fpc-result-value, .ppc-result-value,
    .psc-result-value, .trc-result-value, .aspc-result-value, .apc-result-value { font-size: 28px }
    .swc-result-grid, .pvc-result-grid, .fpc-result-grid, .ppc-result-grid,
    .psc-result-grid, .trc-result-grid, .aspc-result-grid, .apc-result-grid { grid-template-columns: 1fr; gap: 12px }
    .swc-info-footer, .pvc-info-footer, .fpc-info-footer, .ppc-info-footer,
    .psc-info-footer, .trc-info-footer, .aspc-info-footer, .apc-info-footer { flex-direction: column; align-items: center; gap: 8px }
    .swc-ymyl, .pvc-ymyl, .fpc-ymyl, .ppc-ymyl,
    .psc-ymyl, .trc-ymyl, .aspc-ymyl, .apc-ymyl { margin: 0 12px 24px }
}

@media (max-width: 480px) {
    .swc-hero h1, .pvc-hero h1, .fpc-hero h1, .ppc-hero h1,
    .psc-hero h1, .trc-hero h1, .aspc-hero h1, .apc-hero h1 { font-size: 22px }
}

/* FPC result-value semantic variants — replaces inline conditional color
   on the forex-profit-calculator money result row. JS applies the
   modifier class based on the sign of the profit. */
.fpc-result-card-value--success { color: var(--success); }
.fpc-result-card-value--danger  { color: var(--danger); }

/* CV-044: trade-return-calculator result-row semantic variants — replaces
   inline conditional color on profit-trades / loss-trades cells. Cells are
   injected by JS template literal in trade-return-calculator.blade.php. */
.trc-cell--success { color: var(--success); }
.trc-cell--danger  { color: var(--danger); }