@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&family=Inter:wght@300;400;600&display=swap');



:root {

    --bs-body: #f1efef;

    --bs-heading: #646464;

    --bs-primary: #0067b7;

    --bs-link-color: #043a63;

    --bs-link-hover-color: #043a63;

    --bs-text-color: #9d9d9d;

    --bs-text-white: #fff;

    --bs-desc-color: #7c7c7c;

    --bs-box-shadow-color: #535252;

    --bs-dark-color: #000;

    --bs-red-color: #b10505;

    --bs-green-color: #048339;

    --gray: #555;

    --purple: #4e65ff;

    --green-blue: #92effd;

    --white: #fff;

    --fonts: "DM Sans", sans-serif;

    --fonts-title: "Figtree", sans-serif;

}



.tournamentcard_wrap {

    width: 100%;

    height: auto;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 2%;

}



.tournament_card {

    background-color: var(--white);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0px 0px 5px 0px var(--bs-box-shadow-color);

    border: 1px solid transparent;

    margin-bottom: 2%;

    cursor: pointer;

    transition: 0.3s;

}



.tournament_card:hover {

    border: 1px solid var(--bs-primary);

}



.tournament_card.box {

    width: 23.5%;

    height: auto;

}



.tournament_card .image {

    width: 100%;

    height: 30vh;

}



.tournament_card .image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: top center;

}



.tournament_card .content {

    padding: 15px;

}



.tournament_card .name {

    font-size: 125%;

    font-weight: 600;

    color: var(--bs-heading);

    padding: 0;

    margin-bottom: 10px;

}



.tournament_card p:last-child {

    padding: 0;

    margin: 0;

}



/*****/

.tournament_Details {

    width: 100%;

    height: auto;

}



.tournament_Details .image {

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius: 4px;

    box-shadow: 0px 0px 5px 0px var(--bs-box-shadow-color);

}



.tournament_Details .image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.tournament_Details .name {

    font-size: 150%;

    font-weight: 700;

    color: var(--bs-heading);

}



.tournament_Details .desc {

    margin-bottom: 15px;

}



.tournament_Details .content {

    width: 100%;

    height: auto;

    padding-top: 15px;

}



.datelocation {

    width: 100%;

    display: flex;

    align-items: start;

    gap: 10px;

    margin-bottom: 10px;

}



.datelocation i {

    color: #e17603;

}



.datelocation span {

    color: var(--bs-heading);

    font-weight: 500;

}



.tournament_Details .amount {

    font-size: 105%;

    font-weight: 600;

    color: var(--bs-heading);

    padding: 0;

    margin-bottom: 5px;

}





/******/



.form-group {

    margin-bottom: 15px;

}



.form-group label {

    display: block;

    margin-bottom: 5px;

    font-weight: 600;

    color: var(--bs-text-color);

}



.form-group input {

    width: 100%;

    padding: 10px;

    border: 1px solid #ccc;

    border-radius: 6px;

    font-size: 85%;

}



.form-group input:focus {

    outline: none;

    border: 1px solid var(--bs-primary);

}



.player-section {

    margin-top: 25px;

    padding-top: 15px;

    border-top: 1px solid #e0e0e0;

}



.player-section h4 {

    margin-bottom: 15px;

}



.checkbox-wrap {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 5px;

}



.checkbox-wrap input {

    width: auto;

}



.tournamentdet_modal .form-group {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 12px;

}



.tournamentdet_modal .form-group label {

    white-space: nowrap;

    font-size: 85%;

}





/********************

****player-Hub*******

*********************/

.playerhub_sec {

    /* background: radial-gradient(circle at top, #0f172a, #020617); */

    background-color: var(--bs-body);

    font-family: 'Inter', sans-serif;

    /* color: #e5e7eb; */

    width: 100%;

    height: auto;

}



.playerhub_sec .wraper {

    width: 100%;

    border-radius: 20px;

    padding: 20px;

    /* background: rgba(15, 23, 42, 0.7); */

    color: #e5e7eb;

    backdrop-filter: blur(20px);

    box-shadow: 0 0 40px rgba(56, 189, 248, .25);

    border: 2px solid rgba(56, 189, 248, .3);

}



/* ===== HEADER ===== */

.playerhub_sec .header_box {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

    background: linear-gradient(90deg, #0ea5e9, #1e293b);

    padding: 15px 20px;

    border-radius: 12px;

    font-family: 'Orbitron';

}



.playerhub_sec .header_box span {

    font-size: 13px;

    /* opacity: .9; */

    display: flex;

    align-items: center;

    gap: 6px;

}



.playerhub_sec .header_box span i {

    font-size: 150%;

}



/* ===== GRID ===== */

.playerhub_sec .main-grid {

    display: grid;

    grid-template-columns: 300px 1fr 300px;

    gap: 20px;

    margin-top: 20px;

}



/* ===== PANELS ===== */

.playerhub_sec .panel {

    background: rgba(2, 6, 23, .75);

    border-radius: 14px;

    padding: 16px;

    border: 1px solid rgba(148, 163, 184, .2);

    box-shadow: inset 0 0 20px rgba(15, 23, 42, .8);

}



.playerhub_sec .panel h3 {
    font-size: 16px;
    margin-bottom: 12px;
    text-transform: uppercase;
    color: #93c5fd;
    font-weight: 700;
    text-align: center;
}



.playerhub_sec p {

    font-size: 10px;

    margin-bottom: 10px;

}

.playerhub_sec .panel.right-panel h3{
    text-align: left;
}



/* ===== Dossier card css ===== */



/* Actions */

.dossierCard .actions {

    display: flex;

    gap: 8px;

    margin-bottom: 12px;

}



.dossierCard .actions button {

    flex: 1;

    font-size: 12px;

    padding: 6px 10px;

    border-radius: 8px;

    border: none;

    background: #38bdf8;

    color: #020617;

}



.dossierCard .actions .outline {

    background: transparent;

    color: #38bdf8;

    border: 1px solid #38bdf8;

}



.dossierCard .profileDetails {

    width: 100%;

    height: auto;

    display: flex;

    align-items: center;

    gap: 10px;

}



/* Profile */

.dossierCard .profile {

    text-align: center;

    /* margin-bottom: 12px; */

    width: 90px;

    min-width: 90px;

    height: 90px;

    border-radius: 50%;

    border: 2px solid #38bdf8;

    overflow: hidden;

}



.dossierCard .profile img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: top center;

}



/* Info */

.dossierCard .info {

    width: 100%;

}



.dossierCard .info p {

    font-size: 12px;

    margin: 4px 0;

}



/* Stats */

.dossierCard .stats {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin: 12px 0;

}



.dossierCard .stats div {

    background: rgba(56, 189, 248, .1);

    border-radius: 8px;

    padding: 8px;

    font-size: 11px;

    text-align: center;

}



.dossierCard .stats span {

    display: block;

    font-size: 16px;

    font-weight: 600;

}



/* Win Ratio */

.dossierCard .win {

    background: rgba(56, 189, 248, .1);

    border-radius: 8px;

    padding: 8px;

    font-size: 12px;

    margin-bottom: 12px;

}

.dossierCard .win .winParaDiv p{
    display: flex;
    flex-wrap: wrap;
    row-gap: 5px;
    margin-bottom: 6px;
}

.dossierCard .win .winParaDiv .small{
    padding-left: 4px;
}



.dossierCard .win .up {

    color: #22c55e;

}



.dossierCard .win small {

    display: block;

    font-size: 10px;

    opacity: .7;

}



/* Blocks */

.dossierCard .block {

    margin-bottom: 12px;

}



.dossierCard .block h4 {

    font-size: 13px;

    margin-bottom: 6px;

}



/* Badges */

.dossierCard .badges {

    display: flex;

    gap: 6px;

}



.dossierCard .badge {

    font-size: 10px;

    padding: 3px 8px;

    border-radius: 999px;

}



.dossierCard .badge.smash {

    background: #ef4444;

}



.dossierCard .badge.net {

    background: #3b82f6;

}



.dossierCard .badge.def {

    background: #22c55e;

}



/* Refer */

.dossierCard .refer {

    width: 100%;

    padding: 10px;

    border-radius: 10px;

    border: none;

    background: #38bdf8;

    font-size: 13px;

    font-weight: 600;

}





/* ===== CENTER ===== */

.playerhub_sec .panel .scrollbox {

    max-height: 350px;

    overflow-y: auto;

    margin-bottom: 15px;

}



.playerhub_sec .panel .scrollbox::-webkit-scrollbar {

    display: none;

}



.playerhub_sec .center-panel .card {

    border: 1px solid #176c91;

    border-radius: 12px;

    padding: 12px;

    margin-bottom: 12px;

    box-shadow: 0 0 5px 0px rgba(68, 193, 239, 0.35);

    background: #334155;

}



.playerhub_sec .card .content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 5px;

}



.playerhub_sec .card h4 {

    font-size: 85%;

    margin-bottom: 6px;

}



.playerhub_sec .tag {

    font-size: 70%;

    background: #22c55e;

    color: #fff;

    padding: 2px 6px;

    border-radius: 6px;

    margin-left: 6px;

}



.playerhub_sec .tag.close {

    background: #c52522;

}



.playerhub_sec .card .info-grid {

    /* display: grid; */

    /* grid-template-columns: 1fr 1fr; */

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

}



.playerhub_sec .card .info {

    /* background: rgba(30, 41, 59, .6); */

    border-radius: 10px;

    /* padding: 5px 10px; */

    font-size: 65%;

    display: flex;

    align-items: center;

    gap: 6px;

    white-space: nowrap;

}



.playerhub_sec .card .info span {

    display: block;

    color: #94a3b8;

}



.playerhub_sec .button_box {

    display: flex;

    gap: 6px;

    flex-wrap: wrap;

    justify-content: flex-end;

}



.playerhub_sec .joinbtn {

    font-size: 70%;

    padding: 2px 6px;

    margin: 0;

    border-radius: 6px;

    border: 1px solid #fff;

    background-color: #fff;

    color: #535252;

    box-shadow: none;

    cursor: pointer;

    text-decoration: none;

    white-space: nowrap;

}



/*=== tournament card css =====*/

.tournamentCard {

    border: 1px solid #176c91;

    border-radius: 12px;

    padding: 12px;

    margin-bottom: 12px;

    box-shadow: 0 0 5px 0px rgba(68, 193, 239, 0.35);

    background: #334155;

}



.tournamentCard .card-header {

    display: flex;

    justify-content: space-between;

    /* align-items: center; */

    padding: 0;

}



.tournamentCard .headwrap {

    display: flex;

    align-items: center;

    gap: 8px;

}



.tournamentCard .badge {

    background: #22c55e;

    color: #022c22;

    padding: 2px 10px;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 600;

}



.tournamentCard .title {

    font-size: 85%;

    font-weight: 700;

    margin: 0;

}



.tournamentCard .subtitle {

    color: #94a3b8;

    font-size: 85%;

    font-weight: 600;

}



.tournamentCard .quote {

    margin: 8px 0;

    font-style: italic;

    font-size: 75%;

    color: #cbd5f5;

    border-left: 3px solid #38bdf8;

    padding-left: 6px;

}



.tournamentCard .content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 5px;

}



.tournamentCard .info-grid {

    /* display: grid; */

    /* grid-template-columns: 1fr 1fr; */

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

}



.tournamentCard .info {

    /* background: rgba(30, 41, 59, .6); */

    border-radius: 10px;

    /* padding: 5px 10px; */

    font-size: 65%;

    display: flex;

    align-items: center;

    gap: 6px;

    white-space: nowrap;

}



.tournamentCard .info span {

    display: block;

    color: #94a3b8;

}



.tournamentCard .actions {

    display: flex;

    gap: 6px;

    flex-wrap: wrap;

    justify-content: flex-end;

}





/* ===== GEAR ===== */

/* .casaStore {

    border: 1px solid #176c91;

    border-radius: 12px;

    padding: 12px;

    margin-bottom: 12px;

    box-shadow: 0 0 5px 0px rgba(68, 193, 239, 0.35);

    background: #334155;

} */



.casaStore .store-title {

    text-align: center;

    margin-bottom: 14px;

    font-size: 16px;

}



/* Store Item */

.casaStore .store-item {

    display: flex;

    gap: 10px;

    padding: 10px;

    margin-bottom: 10px;

    border: 1px solid #176c91;

    border-radius: 12px;

    box-shadow: 0 0 5px 0px rgba(68, 193, 239, 0.35);

    background: #334155;

}



.casaStore .store-item img {

    width: 60px;

    height: 60px;

    border-radius: 8px;

    object-fit: cover;

}



/* Info */

.casaStore .item-info {

    flex: 1;

}



.casaStore .item-info h4 {

    font-size: 13px;

    margin: 0 0 4px;

}



.casaStore .price {

    font-size: 12px;

    color: #38bdf8;

    margin-bottom: 4px;

}



.casaStore .order {

    font-size: 11px;

    margin-bottom: 6px;

}



.casaStore .no-order {

    font-size: 11px;

    color: #94a3b8;

    font-style: italic;

}



/* Status */

.casaStore .status {

    font-size: 10px;

    padding: 3px 8px;

    border-radius: 999px;

    display: inline-block;

}



.casaStore .status.delivered {

    background: #22c55e;

    color: #022c22;

}



.casaStore .status.pending {

    background: #f59e0b;

    color: #3a2500;

}



.casastore_btn {

    width: 100%;

    height: auto;

    padding: 8px 18px;

    border-radius: 6px;

    background-color: var(--bs-primary);

    color: var(--bs-text-white);

    border: 1px solid var(--bs-primary);

    text-align: center;

    cursor: pointer;

    text-decoration: none;

    box-shadow: none;

    display: block;

    font-size: 80%;

    font-weight: 500;

    line-height: normal;

}



.casastore_btn:hover {

    color: var(--bs-text-white);

}



/* ===== ACHIEVEMENTS ===== */

.playerhub_sec .badges {

    display: flex;

    gap: 10px;

}



.playerhub_sec .badge {

    flex: 1;

    padding: 5px 10px;

    border-radius: 10px;

    text-align: center;

    font-size: 10px;

    font-weight: 500;

}



.achievement_box {

    width: 100%;

    height: auto;

    background-color: var(--bs-body);

    color: var(--bs-heading);

    padding: 30px 20px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 15px;

}



.achievement_box:last-child {

    margin-bottom: 0;

}



.achievement_box i {

    font-size: 220%;

    color: #e17603;

}



.achievement_box .text {

    font-size: 120%;

    font-weight: 600;

    text-align: center;

    color: var(--bs-heading);

    max-width: 300px;

    /* text-transform: uppercase; */

}



/* ===== REVIEW ===== */

.playerhub_sec .review {

    margin-top: 20px;

    padding: 25px;

    border-radius: 18px;

    background: linear-gradient(180deg, #fef3c7, #eab308);

    color: #1e293b;

    text-align: center;

    box-shadow: 0px 0px 5px 0px #ccc;

}



.playerhub_sec .review button {

    margin-top: 12px;

    padding: 10px 26px;

    border-radius: 30px;

    border: none;

    background: #fff;

    font-weight: 600;

    cursor: pointer;

}



/* ===== RESPONSIVE ===== */



@media (max-width: 991px) {

    .playerhub_sec .wraper {

        padding: 8px;

    }



    .playerhub_sec .main-grid {

        grid-template-columns: 1fr;

    }



    /* order change */

    .playerhub_sec .panel:nth-child(2) {

        order: 1;

    }



    .playerhub_sec .panel:nth-child(1) {

        order: 2;

    }



    .playerhub_sec .panel:nth-child(3) {

        order: 3;

    }

}