/* Yes / No */
    /* CSS rules are kept repetitive so that you can get CSS rules for each button easily :) */

        .toggle-button-cover
        {
            display: table-cell;
            position: relative;
            width: 200px;
            height: 140px;
            box-sizing: border-box;
        }

        .button-cover
        {
            height: 100px;
            margin: 20px;
            background-color: #fff;
            box-shadow: 0 10px 20px -8px #c5d6d6;
            border-radius: 4px;
        }

        .button-cover:before
        {
            counter-increment: button-counter;
            content: counter(button-counter);
            position: absolute;
            right: 0;
            bottom: 0;
            color: #d7e3e3;
            font-size: 12px;
            line-height: 1;
            padding: 5px;
        }

        .button-cover, .knobs, .layer
        {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .button
        {
            position: relative;
            top: 50%;
            width: 74px;
            height: 36px;
            overflow: hidden;
        }

        .button.r, .button.r .layer
        {
            border-radius: 100px;
        }

        .button.b2
        {
            border-radius: 2px;
        }

        .checkbox
        {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 3;
        }

        .knobs
        {
            z-index: 2;
        }

        .layer
        {
            width: 100%;
            background-color: #ebf7fc;
            transition: 0.3s ease all;
            z-index: 1;
        }


        /* Button 4 */
        #button-4 .knobs:before, #button-4 .knobs:after
        {
            position: absolute;
            top: 4px;
            left: 4px;
            width: 20px;
            height: 10px;
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            text-align: center;
            line-height: 1;
            padding: 9px 4px;
            background-color: #03A9F4;
            border-radius: 50%;
            transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
        }

        #button-4 .knobs:before
        {
            content: 'YES';
        }

        #button-4 .knobs:after
        {
            content: 'NO';
        }

        #button-4 .knobs:after
        {
            top: -28px;
            right: 4px;
            left: auto;
            background-color: #F44336;
        }

        #button-4 .checkbox:checked + .knobs:before
        {
            top: -28px;
        }

        #button-4 .checkbox:checked + .knobs:after
        {
            top: 4px;
        }

        #button-4 .checkbox:checked ~ .layer
        {
            background-color: #fcebeb;
        }


        #ytd-url {
        display: block;
        position: fixed;
        right: 0;
        bottom: 0;
        padding: 10px 14px;
        margin: 20px;
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        background-color: #143240;
        border-radius: 4px;
        box-shadow: 0 10px 20px -5px rgba(20, 50, 64, 0.76);
        }


    /* Slider */
    .range input{
        -webkit-appearance:none;
        width:400px;
        height:4px;
        border-radius:5px;
        background-color:#ba3950;
        outline:none;
    }
    .range input::-webkit-slider-thumb{
        -webkit-appearance:none;
        width:20px;
        height:20px;
        border-radius:50%;
        background-color:#a83348;
    }
    .range span{
        position:absolute;
        margin-left:14px;
        width:100px;
        height:30px;
        background-color:#222;
        color:#fff;
        border-radius:3px;
        text-align:center;
        line-height:30px;
    }
    .range span:before{
        content:'';
        position:absolute;
        border-right:9px solid transparent;
        border-left:9px solid transparent;
        border-bottom:12px solid #222;
        left:-10px;
        top:50%;
        transform:translateY(-50%) rotate(-90deg);
    }
    
    
/* ====================================================================
   GameTeam site theme override — maps blue brand to pink/purple palette
   ==================================================================== */
:root{
    --bs-primary:#f74a87;
    --bs-primary-rgb:247,74,135;
    --bs-link-color:#f74a87;
    --bs-link-hover-color:#5a56f5;
}
/* Primary blue (#175cff) → site pink (#f74a87) */
.bg-primary,
.btn-primary{ background-color:#f74a87 !important; border-color:#f74a87 !important; color:#fff !important; }
.bg-primary-soft{ background-color:rgba(247,74,135,.2) !important; }
.bg-primary-light{ background-color:rgba(247,74,135,.75) !important; }
.bg-primary-dark{ background-color:#d63a76 !important; }
.text-primary,
.link-primary,
.link-primary:hover,
.link-primary:focus{ color:#f74a87 !important; }
.btn-outline-primary{ color:#f74a87 !important; border-color:#f74a87 !important; background:transparent !important; }
.btn-outline-primary:hover,
.btn-primary:hover,
.btn-primary:focus{ background-color:#5a56f5 !important; border-color:#5a56f5 !important; color:#fff !important; }
.border-primary{ border-color:#f74a87 !important; }

/* Brand dark blue (#0b163f) → site dark (#090b12) */
.bg-dark{ background-color:#090b12 !important; }
.bg-dark-light{ background-color:#151824 !important; }
.bg-dark-dark{ background-color:#000 !important; }

/* Brand gradients → pink-to-purple */
.primary-bg-gradient,
[class*="bg-gradient-primary"]{ background:linear-gradient(90deg,#f74a87 0%,#5a56f5 100%) !important; }

/* Generic anchor accent */
a:not(.btn):not(.nav-link):not(.dropdown-item){ color:#f74a87; }
a:not(.btn):not(.nav-link):not(.dropdown-item):hover{ color:#5a56f5; }