:root {
    --wagerGreen: #1cad75;
    --backColour: #191919;
    --tabColour: #262626;
    --text: #f1f1f1;
    --muted: #b7b7b7;
    --border: #2b2b2b;
    --card: #1e1e1e;
    --shadow: 0 6px 24px rgba(0, 0, 0, .25);
}

body,
.baseholder {
    background-color: var(--backColour);
    color: var(--text);
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Container & blocks */
.arbCalcCon {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px;
    display: grid;
    gap: 20px;
}

.arb-calc-pic-image {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1000px) {
    .arb-calc-pic-image {
        grid-template-columns: 1fr;
    }

    .arb-banner-image-container {
        order: 2;
    }
}

.banner-image {
    width: 100%;
    max-width: 360px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    opacity: .95;
}

/* Headings */
h1.softwareHeadingPoppins {
    font-weight: 700;

    text-align: center;
    margin: 8px 0 0;
}

.useArbHeading,
.informationHeading {
    font-weight: 600;
    font-size: clamp(1rem, .9rem + .6vw, 1.25rem);
    margin: 0 0 8px;
    color: var(--text);
}

/* Card pattern */
.card {
    background-color: #191919;
}


.calcResultsTab,
.arbButtonResultsContainer,
.arbitrageCalcInfoContainer {
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--card), #181818);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.calcMainContainer {
    display: flex;
    flex-direction: row;
}

/* Form controls */
#calculator-container {
    display: grid;
    gap: 14px;
}

.input-field {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}

.input-field label {
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: 6px;
}

input[type="text"],
select {
    width: 100%;
    max-width: 340px;
    appearance: none;
    background: #151515;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    height: 44px;
    padding: 0 12px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .05s ease;
}

select {
    padding-right: 36px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

input[type="text"]:focus-visible,
select:focus-visible {
    outline: none;
    border-color: color-mix(in oklab, var(--wagerGreen) 70%, white 0%);
    box-shadow: 0 0 0 4px rgba(28, 173, 117, .15);
}

input[type="text"]:hover,
select:hover {
    border-color: #3a3a3a;
}

/* Button */
.arbitrageCalcButton {
    padding: 5px 10px;
    background-color: var(--wagerGreen);
    color: #0d0f0e;
    font-weight: 600;
    border: 1px solid var(--wagerGreen);
    border-radius: 12px;
    font-size: 1rem;
    transition: transform .08s ease, box-shadow .2s ease, background-color .15s ease;
    box-shadow: 0 8px 16px rgba(28, 173, 117, .25);
}

.arbitrageCalcButton:hover {
    background-color: #19b46a;
}

.arbitrageCalcButton:active {
    transform: translateY(1px) scale(.99);
}

.arbitrageCalcButton:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(28, 173, 117, .25);
}

/* Results layout */
.resultsTabContainer {
    padding: 12px;
    border-radius: 12px;
}

.resultsInnerContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.arbitrageInfoDesHeading {
    font-size: 1.25em;
}

@media (max-width: 1020px) {
    .arb-banner-image-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 700px) {
    .resultsInnerContainer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .calcMainContainer {
        flex-direction: column;
    }
    .resultsInnerContainer {
        flex-direction: row;
    }
    input[type="text"], select {
        max-width: 300px;
    }
    .totalResultsContainer {
        min-width: 100px;
    }
}


.resultsOdd {
    background: #121212;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
}

.headingResults .resultsTitle {
    font-size: .85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.resultItemContainer .resultsTitle {
    font-size: .85rem;
    color: var(--muted);
}

.resultsItemValue {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.25rem;
    letter-spacing: .02em;
}

/* Totals row */
.arbButtonResultsContainer {
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.resultsInnerTotals {
    display: flex;
    gap: 12px;
}

.totalResultsContainer {
    background: #121212;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 140px;
}

.totalResultsHeading span {
    color: var(--muted);
    font-size: .85rem;
}

.totalResultsItemValue {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.25rem;
}

/* Info section */
.arbitrageCalcInfoContainer {
    line-height: 1.6;
}

.informationParagrpah,
.informationParagraph,
.orderListForSteps {
    color: #e8e8e8;
}

.orderListForSteps li {
    margin: 6px 0 8px;
}

.arbitrageHyperLink {
    color: var(--wagerGreen);
    text-underline-offset: 2px;
}

.arbitrageHyperLink:hover {
    text-decoration: underline;
}

/* Utility colors for JS to toggle if you want */
.positive {
    color: var(--wagerGreen);
}

.negative {
    color: #ff5b5b;
}

/* Minor cleanups */
.checkbox-container {
    gap: 8px;
}

.calcMainContainer {
    gap: 16px;
}

.calcArbButtonContainer {
    justify-content: flex-start;
}

@media (max-width: 500px) {

    .totalResultsContainer {
        min-width: 100px;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}