/* Application CSS variables*/

:root {
    /* Brand colors */
    --bs-primary: #E34234;
    --bs-primary-2: #FAD9D7;
    --bs-primary-3: #47474B;
    --bs-secondary: #BEBEC7;
    --bs-success: #2ec4b6;
    --bs-danger: #e63946;
    --bs-background: #D9D9D9;

    /* Typography */
    --bs-body-font-family: 'Inter', system-ui, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;

    /* Layout */
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;

    /* Links */
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #3c096c;

    /* Background */
    --bs-body-bg: #D9D9D9;
    --bs-body-color: #E34234;
}



/* Application default theme*/

.app-wrapper {
    max-width: 520px;   /* mobile feel */
    width: 100%;
    min-height: 100vh;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
}

.barDiv {
    background-color: var(--bs-primary);

}

.barDiv i {
    align-self: center;
    color: var(--bs-background);
    font-size: 2.35rem;
}

.verLogText {
    font-family: Texturina, "Grenze Gotisch",'Lato','Oswald','Montserrat', sans-serif;
    font-size: 0.45rem;
    letter-spacing: 0.1rem;
}

.titleDiv h6 {
    font-size: 1.14rem;
}


/* Navigation theme*/

.nav-pills {
    background-color: #BEBEC755;
    position: fixed;   /* removes it from normal flow */
    bottom: 5%;            /* sticks to bottom */
    left: 0;
    width: 85%;
    max-width: 520px;
    color: white;
    z-index: 1000;        /* ensures it stays on top */
}

.nav-pills i {
    font-size: 1.15rem;
    font-weight: bolder;
}


/* Login and Sign Up theme*/

.hero-banner {
    background-image: url('../images/background.png'); /* relative to CSS file */
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 300px;
}

.welcomeBtn, .welcomeBtn1 {
    width: 80%;
    padding: 5px;
    margin: 10px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); /* bottom shadow */
    transition: all 0.2s ease;
}

.welcomeBtnDiv {
    padding-top: 140%;
}


.welcomeBtn {
    width: 80%;
    background-color: #D9D9D9;
}


.welcomeBtn1 {
    width: 80%;
    background-color: #EF8E86;
    color: #FFFFFF;
}

.registerBtn {
    width: 80%;
    padding: 7px;
    margin: 10px;
    background-color: var(--bs-primary);
    color: white;
    box-shadow: 0 4px 10px rgba(227, 66, 52, 0.6); /* bottom glow */
    transition: all 0.3s ease;
}

.joinUsBtn {
    padding: 7px;
    font-size: 0.90rem;
    margin-right: 5px;
    margin-top: 10px;
    background-color: var(--bs-background);;
    color: var(--bs-primary);
    box-shadow: 0 4px 10px rgba(227, 66, 52, 0.6); /* bottom glow */
    transition: all 0.3s ease;
}

a:hover, a:after {
    text-decoration: none;
    color: transparent;
}


.loginHeroBanner {
    background-image: url('../images/loginHeroBanner.png'); /* relative to CSS file */
    background-size: cover;
    background-position: center;
    width: 100%;
    background-repeat: no-repeat;
    background-color: var(--bs-background);
}

.signUpHeroBanner {
    background-image: url('../images/signUpHeroBanner.png'); /* relative to CSS file */
    background-size: cover;
    background-position: center;
    width: 100%;
    background-repeat: no-repeat;
    background-color: var(--bs-background);
}

.acctP {
    color: #A3A3BB;
    font-size: 0.77rem;
}

.acctP3 {
    color: #A3A3BB;
    font-size: 0.67rem;
    text-indent: 55%;
}

.acctP2 {
    color: var(--bs-primary);
    font-size: 0.77rem;
}

.welcomeA, .welcomeA:hover, .welcomeA:active, .welcomeA:visited {
    color: var(--bs-primary);
    text-decoration: none;

}

.pageTitle2 {
    color: var(--bs-primary-3);
    font-weight: bold;
}

.welIcons {
    background-color: var(--bs-primary);
    color: var(--bs-background);
    border: solid 1px var(--bs-primary);
    opacity: 0.85;
}

.loginDiv input {
    background-color: var(--bs-background);
    color: var(--bs-primary);
    font-size: 15px;
    padding: 12px;
    border: solid 1px var(--bs-primary);
    opacity: 0.85;
}

.loginDiv input::placeholder {
    color: var(--bs-primary);
}



/* Home stats theme*/

.statsDiv {
    border: none;
    border-radius: 7px;
    background-color: indianred;
    height: 128px;
    width: 90px;
    margin: 10px 9px;
    color: #47474B;
}

.statsDiv .bi {
    transform: scale(1.8);
}

.statsValue{

}

.statsLbl {
    font-size: 10px;
    margin-bottom: 10px;
}

.statsColour1 {
    background-color: #FFD7D7;
}

.statsColour2 {
    background-color: #EFE4FC;
}

.statsColour3 {
    background-color: #E2E7FA;
}

.statsColour4 {
    background-color: #f5cc5b;
}

.statsColour5 {
    background-color: #D4D3DF;
}

.statsColour6 {
    background-color: #F2A19A;
}

.statsColour7 {
    background-color: #f8954d;
}

.statsColour8 {
    background-color: #BEE0EC;
}

.statsColour9 {
    background-color: #e6ed4b;
}


/* Enter stats theme*/

.buttonDiv {
    color: black;
    background-color: #fdf7fe;
    border-radius: 7px;
    box-shadow: 0 4px 10px rgba(253, 247, 254, 0.3); /* bottom glow */
    transition: all 0.3s ease;
}

.enterBtn {
    background-color: #ebe6ef;
    padding: 12px;
    align-items: center;
    display: flex;
}

.enterDiv {
    padding: 12px;
}

.minDiv {
    font-size: 13px;
    margin-top: 5px;
}



/* Tier Card design*/

.cardTile {
    background-color: #f7f1f7;
    padding: 5px 7px;
    border-radius: 9px 9px 0 0;
    margin: 0;
}

.cardTile i {
    color: #EC7B72;
}

.tierNameDiv, .tierStarsDiv {
    color: #1D1B20;
    padding: 10px;
}

.hallOfFameTierDiv {
    font-size: 10px;
    margin-top: 2px;
}

.cardTile2 {
    background-color: #f7f1f7;
    border-radius: 0 0 9px 9px;
    margin: 0;
    padding: 7px 5px 10px;
}

.tierRewardDiv, .tierHolderDiv {
    color: #1D1B20;
    margin: 10px 0;
    font-size: 16px;
}

.tierParaDiv {
    color: #49454F;
    font-size: 15px;
}

.tierJoinBtn {
    border-radius: 15px;
    background-color: transparent;
    border: 1px solid #49454F;
    color: #49454F;
    padding: 1px;
    margin: 4px;
    font-size: 14px;
}

.tierLeadBtn {
    color: #F7C6C2;
    border-radius: 15px;
    background-color: #E44235;
    border: none;
    padding: 7px;
    margin: 4px;
    font-size: 14px;
}

.tierTournamentBtn {
    color: #F7C6C2;
    border-radius: 15px;
    background-color: #E44235;
    border: none;
    padding: 7px;
    margin: 4px;
    font-size: 14px;
}

.cardTile3 {
    padding: 7px 5px 10px 10px;
}

.carouselNavIcon i {
    color: #E4423590;
}


/* Table Theme*/

.tableDiv {
    background-color: var(--bs-primary-2);
    border-radius: 20px 20px 0 0;
}

.tableRow {
    font-size: 12px;
    border-radius: 10px;
    background-color: var(--bs-background);
    color: #3E3E3E;
}

.tableHeader {
    font-size: 13px;
    border-radius: 10px;
    background-color: transparent;
    color: var(--bs-primary);
    font-weight: bold;
}

.tableRow:hover, .tableRow:active {
    font-size: 12px;
    border-radius: 10px;
    background-color: #EC7B72;
    color: #3E3E3E;
}



/* Tournament Theme*/

.tournamentDiv {
    background-color: var(--bs-primary-2);
    border-radius: 20px;
}

.tournamentHeader {
    color: var(--bs-primary);
    font-size: 15px;
}

.tournamentRoundDiv {
    background-image: url('../images/roundBanner.png'); /* relative to CSS file */
    background-size: cover;
    background-position: center;
    color: white;
    background-repeat: no-repeat;
    border-radius: 10px;
}

.roundName {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 13px;
}

.roundScore {
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 5px;
}

.roundHome, .roundAway {
    font-size: 13px;
    margin: 5px 0;
}

.roundTag {
    font-size: 10px;
    margin: 3px 0;
    color: #FFD7D7;
}

.tournamentPlayBtn {
    background-color: #E44235;
    color: white;
    padding: 5px 25px;
    font-size: 10px;
    border-radius: 10px;
    border: none;
}


/* Bracket Theme*/

.bracketText {
    font-size: 12px;
}

#bracket, .modal-body {
    height: 100%;
}


/* Mobile Theme*/
.inputScoreBtn {
    color: whitesmoke;
    border-radius: 15px;
    background-color: #E44235;
    border: none;
    padding: 7px 30px;
    margin: 4px;
    font-size: 14px;
}

.inputScoreInput span, .inputScoreInput input {
    font-size: 12px;
}

.inputScoreInput span {
    background-color: #EF8E86;
    border: none;
    color: whitesmoke;
}

.inputScoreInput input {
    font-size: 15px;
    background-color: transparent;
    border: 1px solid #EF8E86;
    color: var(--bs-primary);
}



/* Chat Theme*/

.chatDiv {
    background-color: #f9e9e8;
    border-radius: 20px 20px 0 0;
}

.chatUserDiv {
    font-size: 12px;
    font-weight: bold;
}

.recDiv .chatDetailsDiv {
    font-size: 12px;
    border-radius: 20px 20px 20px 0;
    background-color: #f5dad8;
}

.senDiv .chatDetailsDiv {
    font-size: 12px;
    background-color: var(--bs-primary);
    border-radius: 20px 20px 0 20px;
    color: white;
}

.chatTimeDiv {
    font-size: 8px;
    color: #7b6d6c;
}

.chatUserImageDiv {
    padding-bottom: 30px;
}

.chatInputDiv input {
    background-color: whitesmoke;
    border: none;
    color: var(--bs-primary);
    font-size: 12px;
}

.chatInputDiv span {
    background-color: transparent;
    color: var(--bs-primary);
    border: none;
}

.custom-fixed {
    position: fixed;
    bottom: 100px;   /* distance from bottom */
    z-index: 100;
}

.chatBlockDiv {
    background-color: #f9e9e8;
    position: fixed;
    bottom: 0;
    height: 158px;
    width: 100%;
    z-index: 80;
}


/* Button Types Theme*/

.buttonType {
    background-color: transparent;
    color: var(--bs-primary);
    border-radius: 13px;
    border: 1px solid var(--bs-primary);
    padding: 6px 22px;
    font-size: 15px;
}

.buttonType1 {
    background-color: var(--bs-primary);
    color: white;
    border-radius: 13px;
    border: none;
    padding: 6px 10px;
    font-size: 15px;
}

.buttonType2 {
    background-color: transparent;
    color: var(--bs-primary);
    border-radius: 13px;
    border: 1px solid var(--bs-primary);
    padding: 6px 10px;
    font-size: 15px;
}


/* Custom Tournament Theme*/

.cusTomDetailsDiv {
    background-color: var(--bs-primary-2);
    border-radius: 20px;
    padding: 10px;
    color: #1E1E1E99;
    font-size: 14px;
}

.accordion-button:not(.collapsed) {
    background-color: #E34234; /* your theme color */
    color: white;
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1); /* makes arrow white */
}


/* Contest Theme*/

.contestClosed {
    background-color: forestgreen;
    border-radius: 10px;
    padding: 4px;
    color: whitesmoke;
    border: none;
}

.contestOpen {
    background-color: antiquewhite;
    border-radius: 10px;
    padding: 4px;
    color: var(--bs-primary-3);
    border: none;
}


/* Leaderboard Appearance Theme*/

.leadDiv {
    background-color: var(--bs-primary-2);
    border-radius: 10px;
    padding: 10px 10px;
    width: 100px;
}

.leadTitle {
    font-size: 11px;
    font-weight: bold;
    color: #1E1E1E99;
}

.leadRank {
    font-size: 10px;
    font-weight: bold;
    color: var(--bs-primary);
}

.contestEviDiv label {
    font-size: 14px;
    color: var(--bs-primary-3);
}

.contestEviDiv textarea {
    font-size: 15px;
    color: var(--bs-primary-3);
    background-color: var(--bs-primary-2);
}

.contestEviDiv div {
    font-size: 15px;
    color: var(--bs-primary-3);
    background-color: var(--bs-primary-2);
    padding: 12px;
}

.contestEviDiv .tableRow {
    font-size: 15px;
    color: var(--bs-primary-3);
    background-color: var(--bs-background);
    padding: 12px;
    margin: 10px 0;
}

.contestEviDiv .tableRow:hover {
    background-color: #EC7B72;
}

.contentDiv {
    background-color: var(--bs-primary-2);
    color: #1E1E1E99;
    border-radius: 12px;
    font-size: 15px;
}

.hallOfFameDiv {
    background-color: var(--bs-primary-2);
    color: #1E1E1E99;
    border-radius: 12px;
    font-size: 15px;
}


/* Trophy Room Theme*/
.pageTitle3 {
    color: var(--bs-primary-3);
    font-weight: bold;
    font-size: 15px;
}

.leadDivTrophy {
    background-color: #e7e3ea;
    border-radius: 15px;
}


.hallOfFameDiv .leadDivTrophy {
    box-shadow: 0px 10px 13px -7px #000000, 2px 3px 16px 14px rgba(250,217,215,0);
}


/* Mobile Theme*/

@media (min-width: 521px) { /* tablets and up */
    .nav-pills {
        position: absolute;   /* footer sticks at page bottom, scrollable */
        bottom: 5%;
        left: 50%;
        transform: translateX(-55%); /* center in viewport */
        max-width: 500px;     /* match your mobile wrapper width */
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
        margin-left: auto;
        margin-right: auto;
    }
}


@media (min-height: 600px) { /* tablets and up */
    .welcomeBtnDiv {
        padding-top: 95%;
    }

    .loginDivWrapper {
        padding-top: 95%;
    }

    .signUpDivWrapper {
        padding-top: 20%;
    }
}

@media (min-height: 700px) { /* tablets and up */
    .welcomeBtnDiv {
        padding-top: 110%;
    }
}

@media (min-height: 800px) { /* tablets and up */
    .welcomeBtnDiv {
        padding-top: 140%;
    }

    .loginDivWrapper {
        padding-top: 115%;
    }

    .signUpDivWrapper {
        padding-top: 30%;
    }
}

@media (min-height: 900px) { /* tablets and up */
    .welcomeBtnDiv {
        padding-top: 130%;
    }

    .loginDivWrapper {
        padding-top: 95%;
    }

    .statsDiv {
        height: 148px;
    }
}

@media (min-height: 1000px) { /* tablets and up */
    .welcomeBtnDiv {
        padding-top: 160%;
    }
}