:root {
    --buttons-background-yellow: #FFFBF0;
    --buttons-background-yellow-hover: #FDD623;
    --buttons-border-radius: 6px;
    --buttons-border-yellow: #ECC61B;
    --buttons-border-yellow-hover: #D9AD15;
    --buttons-font-family: 'Nunito Sans', sans-serif;
    --buttons-font-size-label: 16px;
    --buttons-font-style-medium: normal;
    --buttons-font-weight-medium: 600;
    --buttons-green: #3CAA36;
    --buttons-height: clamp(48px, 6vw, 52px);
    --buttons-letter-spacing-medium: 0.15000000596046448px;
    --buttons-line-height-medium: 24px;
    --buttons-padding: 10px 24px;
    --buttons-text-black: #212121;
    --buttons-white: #FFFFFF;
}

/* ============================================
   Button GREEN-GREEN-WHITE
   ============================================ */
.button-GGW-container {
    align-items: center;
    background-color: var(--buttons-green);
    border: 1px solid var(--buttons-green);
    border-radius: var(--buttons-border-radius);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: var(--buttons-height);
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.button-GGW-container .button-GGW-container-state-layer {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 1;
    flex-grow: 1;
    gap: 8px;
    justify-content: center;
    padding: var(--buttons-padding);
    position: relative;
    width: 100%;
}

    .button-GGW-container:hover {
        background-color: #80C87C;
        border-color: #80C87C;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

.button-GGW-container .button-GGW-container-label-text {
    color: var(--buttons-white);
    font-family: var(--buttons-font-family);
    font-size: var(--buttons-font-size-label);
    font-style: var(--buttons-font-style-medium);
    font-weight: var(--buttons-font-weight-medium);
    letter-spacing: var(--buttons-letter-spacing-medium);
    line-height: var(--buttons-line-height-medium);
    position: relative;
    white-space: nowrap;
    width: fit-content;
}

/* ============================================
   Button GREEN-WHITE-GREEN
   ============================================ */
.button-GWG-container {
    align-items: center;
    background-color: var(--buttons-white);
    border: 1px solid var(--buttons-green);
    border-radius: var(--buttons-border-radius);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: var(--buttons-height);
    justify-content: center;
    overflow: hidden;
    position: relative;
}

    .button-GWG-container:hover {
        background-color: var(--buttons-green);
        box-shadow: 0px 2px 4px 0px #00000040;
    }

.button-GWG-container .button-GWG-container-state-layer {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 1;
    flex-grow: 1;
    gap: 8px;
    justify-content: center;
    padding: var(--buttons-padding);
    position: relative;
    width: 100%;
}

.button-GWG-container .button-GWG-container-label-text {
    color: var(--buttons-green);
    font-family: var(--buttons-font-family);
    font-size: var(--buttons-font-size-label);
    font-style: var(--buttons-font-style-medium);
    font-weight: var(--buttons-font-weight-medium);
    letter-spacing: var(--buttons-letter-spacing-medium);
    line-height: var(--buttons-line-height-medium);
    position: relative;
    white-space: nowrap;
    width: fit-content;
}

.button-GWG-container:hover .button-GWG-container-label-text {
    color: var(--buttons-white);
}

/* ============================================
   Button YELLOW-WHITE-BLACK
   ============================================ */
.button-YWB-container {
    align-items: center;
    background-color: var(--buttons-white);
    border: 1px solid var(--buttons-border-yellow);
    border-radius: var(--buttons-border-radius);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: var(--buttons-height);
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.button-YWB-container:hover {
    background: var(--buttons-background-yellow);
    border-color: var(--buttons-border-yellow-hover);
}

.button-YWB-container .button-YWB-state-layer {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 1;
    flex-grow: 1;
    gap: 8px;
    justify-content: center;
    padding: var(--buttons-padding);
    position: relative;
    width: 100%;
}

.button-YWB-container .button-YWB-label-text {
    color: var(--buttons-text-black);
    font-family: var(--buttons-font-family);
    font-size: var(--buttons-font-size-label);
    font-style: var(--buttons-font-style-medium);
    font-weight: var(--buttons-font-weight-medium);
    letter-spacing: var(--buttons-letter-spacing-medium);
    line-height: var(--buttons-line-height-medium);
    position: relative;
    white-space: nowrap;
    width: fit-content;
}

/* ============================================
   Help Button
   ============================================ */
.help-button-container {
    display: flex;
    justify-content: center;
}

.help-button-container .btn-help {
    align-items: center;
    background: var(--buttons-white);
    border: 1px solid var(--buttons-border-yellow);
    border-radius: var(--buttons-border-radius);
    color: var(--buttons-text-black);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--buttons-font-family);
    font-size: var(--buttons-font-size-label);
    font-weight: var(--buttons-font-weight-medium);
    height: var(--buttons-height);
    justify-content: center;
    letter-spacing: 0.15px;
    padding: var(--buttons-padding);
    text-decoration: none;
    transition: all 0.2s;
    width: clamp(300px, 40vw, 592px);
}

    .help-button-container .btn-help:hover {
        background: var(--buttons-background-yellow-hover);
        border-color: var(--buttons-background-yellow-hover);
        transform: translateY(-2px);
        box-shadow: 0px 2px 4px 0px #00000040;
    }

.help-button-container .btn-help:active {
    transform: translateY(0);
}

/* ============================================
   Print Styles
   ============================================ */
        @media print {

            .help-button-container .btn-help {
                display: none !important;
            }
        }

        @media (max-width: 480px) {

            .help-button-container {
                width: 100%;
            }
        }