:root {
    --themeColor: #ff0000;
    --themeHoverColor: #ff0000;
    --tof-contribution-default-padding: 60px;
    -tof-black-color-1: #000;
    --tof-black-color-2: #222;
    --tof-black-color-3: #333;
    --tof-black-color-4: #444;
    --tof-black-color-5: #555;
    --tof-black-color-9: #999;
    --tof-black-color-10: #aaa;
    --tof-black-color-11: #bbb;
    --tof-black-color-12: #ccc;
    --tof-black-color-13: #ddd;
    --tof-black-color-14: #eee;
    --tof-red-color-1: #FF0000;
    --tof-red-color-9: #F7CACA;
    --tof-default-bg: #FCFCFF;
    --tof-default-bg-hover: #F2F2FD;
    --tof-default-bg-active: #E0E0FC;
    --tof-input-bg: #fff;
    --tof-tool-input-outline: #FBE3DA;
    --tof-tool-info-sec-title: #222;
    --tof-coffee-sec-bg: #fff;
    --tof-coffee-sec-shadow: #f2f2f2;
    --tof-coffee-sec-des: #555;
    --tof-stripe-donate-border: #ddd;
    --tof-tool-contriutor-bg: #f9f9f9
}

[data-theme=dark] {
    --tof-black-color-1: #fff;
    --tof-black-color-2: #ddd;
    --tof-black-color-3: #ccc;
    --tof-black-color-4: #bbb;
    --tof-black-color-5: #aaa;
    --tof-black-color-9: #999;
    --tof-black-color-10: #888;
    --tof-black-color-11: #777;
    --tof-black-color-12: #666;
    --tof-black-color-13: #272B35;
    --tof-black-color-14: #444;
    --tof-red-color-1: #B78D8D;
    --tof-default-bg: #1A1C21;
    --tof-default-bg-hover: #25282F;
    --tof-default-bg-active: #373B45;
    --tof-input-bg: #1A1C21;
    --tof-tool-input-outline: #343841;
    --tof-tool-info-sec-title: #eee;
    --tof-coffee-sec-bg: #1A1C21;
    --tof-coffee-sec-shadow: #111;
    --tof-coffee-sec-des: #aaa;
    --tof-stripe-donate-border: #222;
    --tof-tool-contriutor-bg: #1A1C21
}

.tof-coffee-contributor-section {
    width: 100%;
    box-sizing: border-box;
    padding: 70px var(--tof-contribution-default-padding);
    background: var(--tof-tool-contriutor-bg)
}

.tof-coffee-contributor-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1100px;
    margin: auto;
    font-family: Inter,sans-serif
}

.tof-donate-card-wrapper {
    width: 50%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 45px;
    padding: 45px 25px;
    background: var(--themeMode);
    border: 1px dashed var(--tof-stripe-donate-border);
    border-radius: 10px;
    min-height: 243px;
    box-sizing: border-box
}

.tof-donate-card-wrapper * {
    font-family: Inter,sans-serif
}

.tof-donate-content {
    width: 100%;
    max-width: 300px;
    padding: 0 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.tof-donate-heading {
    margin-bottom: 10px;
    font-size: 17px;
    color: var(--tof-black-color-4)
}

.tof-donate-input-wrapper {
    border: 1px solid var(--tof-black-color-13);
    background: var(--tof-input-bg);
    border-radius: 7px;
    padding: 8px 0;
    width: 100%;
    outline: 3px solid transparent;
    transition: .4s;
    cursor: text;
    user-select: none
}

.tof-donate-input-wrapper input {
    border: none;
    width: 100px;
    font-size: 30px;
    font-weight: 700;
    color: var(--tof-black-color-3);
    background: var(--tof-input-bg);
    font-family: Inter,sans-serif
}

.tof-donate-input-wrapper:has(input:focus) {
    outline: 3px solid var(--tof-tool-input-outline);
    border-color: var(--themeColor)
}

.tof-donate-input-wrapper input::placeholder {
    color: var(--tof-black-color-3)
}

.tof-donate-input-currency {
    color: var(--tof-black-color-3);
    font-weight: 700;
    font-size: 30px
}

.tof-donate-supported-method-text {
    font-size: 13px;
    color: var(--tof-black-color-9);
    font-weight: 300;
    margin-top: 13px;
    margin-bottom: 10px
}

input::-webkit-inner-spin-button,input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

.tof-donate-button-wrapper {
    width: 100%
}

.tof-donate-button {
    width: 100%;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
    background: var(--themeColor);
    border: 1px solid var(--themeColor);
    border-radius: 5px;
    margin-top: 25px;
    color: #fff;
    cursor: pointer;
    transition: .3s;
    outline-offset: 2px;
    outline-width: 2px;
    outline-style: solid;
    outline-color: transparent
}

.tof-donate-button.active {
    outline-color: var(--themeColor)
}

.tof-coffee-contributor-info {
    flex: 1
}

.tof-coffee-contributor-info-title {
    font-size: 28px;
    font-weight: 500;
    line-height: 40px;
    color: var(--tof-tool-info-sec-title)
}

.tof-coffee-contributor-info-highlight {
    font-weight: 600;
    color: var(--themeColor)
}

.tof-coffee-contributor-des {
    font-size: 16px;
    line-height: 30px;
    margin: 10px 0 0 0;
    color: var(--tof-coffee-sec-des);
    font-family: Inter,sans-serif
}

.tof-coffee-contributor-button {
    margin: 25px 0 0 0
}

.tof-coffee-contributor-button {
    margin: 20px 0 0 0
}

.tof-coffee-contributor-button a {
    text-decoration: none
}

@media only screen and (max-width: 1000px) {
    :root {
        --tof-contribution-default-padding:20px
    }

    .tof-coffee-contributor-wrapper {
        flex-direction: column
    }

    .tof-coffee-contributor-info {
        max-width: 90%;
        margin: auto
    }

    .tof-donate-card-wrapper {
        width: 90%;
        margin: 55px auto 0 auto
    }

    .tof-coffee-contributor-user {
        max-width: 250px
    }
}

@media only screen and (max-width: 600px) {
    .tof-donate-card-wrapper {
        width:100%
    }

    .tof-coffee-contributor-slide-button {
        display: none
    }

    .tof-coffee-contributor-info {
        max-width: 90%
    }

    .tof-coffee-contributor-button {
        display: flex;
        align-items: center;
        justify-content: flex-start
    }
}

@media only screen and (max-width: 400px) {
    .tof-coffee-contributor-user {
        max-width:200px
    }

    .tof-coffee-contributor-count-wrapper {
        flex-direction: row-reverse
    }

    .tof-coffee-count-cross {
        display: none
    }

    .tof-coffee-count {
        margin: 0 20px 0 0
    }
}

@media only screen and (max-width: 350px) {
    .tof-coffee-image {
        display:none
    }

    .tof-coffee-count {
        margin: 0
    }

    .tof-coffee-contributor-user {
        max-width: 150px
    }
}