/* ...is me going through css file to css file and modyfying them to fit the new classes.css standart considered Website natiolisation? like, with the british railways where they generalized everything? Fuck if I know. If anything the label might stick since I also had to remove many old comments from here. Oh well :( */



/* Originally, i intended to use these two for commision status only. But i realized i can also use them for the rules lists */
.commissions-open {
    background-color: green;
    color: white;
}

.commissions-closed {
    background-color: red;
    color: white;
}

/* -------------------------------------------------------------------------- */
/*                                 WELCOME ROW                                */
/* -------------------------------------------------------------------------- */

/*Just because i have these fellas up here doesnt mean i have to copy-paste text stuff. there's a reason i have .commissions-status */
.commissions-status {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

/* -------------------------------------------------------------------------- */
/*                              INTRODUCTION ROWS                             */
/* -------------------------------------------------------------------------- */
.text-sections a {
    color: var(--text-main);
    font-weight: bold;
}

/* -------------------------------------------------------------------------- */
/*                                 GALLERY ROW                                */
/* -------------------------------------------------------------------------- */
/*Under the pricing, there is an link to the gallery. Its so people can see the examples of my art and know what they are getting into. */
.gallery-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 32px;
    font-size: 20px;
}

.gallery-link:hover {
    background-color: var(--bghover);
}

/* -------------------------------------------------------------------------- */
/*                              CALCULATOR ROW V2                             */
/* -------------------------------------------------------------------------- */

/* yes, i had to redo the entire css and html for the calc. oh well. it was fun actually! */

/* ----------------------------- DISPLAY SETTING ---------------------------- */
.human-calculator,
.train-calculator {
    display: none;
}

:root:has(#human-calc:checked) .human-calculator {
    display: block;
}

:root:has(#train-calc:checked) .train-calculator {
    display: block;
}

.side1 {
    flex: 1;
}

.side2 {
    flex: 2;
}

.button:has(input:checked) {
    background-color: var(--bghover);
    border: 2px solid var(--accent);
    font-weight: bold;
}

/* get rid of the default radio buttons */
.button input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


#total-price {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-align: center;
}

/* ------------------------- EXTRA CHARACTER BUTTONS ------------------------ */
/* counters class is just for the look of the extra characters button and count display. */
.counters {
    border: 2px solid var(--border);
    background-color: var(--bgbox);
    color: var(--text-main);
    padding: 15px;
    text-align: center;
    width: 100%;
    font-size: 26px;
}

.char-count-button:hover {
    background-color: var(--bghover);
    cursor: pointer;
    transition: 0.2s;
}

.char-count-button:active {
    border: 2px solid var(--accent);
    font-weight: bold;
}

@media (max-width: 600px) {

    /* flex-row automatically turns into column when phones. but that also acts on the calculator buttons for extra chars. so, this is a prevention. */
    .character-counters {
        flex-direction: row;
    }

    .calculator {
        flex-direction: column-reverse;
    }
}