:root{
	--bg:#fbfcfd;
	--card:#ffffff;
	--muted:#6b7280;
	--accent:#626a69;
	--accent-weak:#dbdde3;
	--yellow:#ffeb8b;
	--border:#e6e9ef;
	--radius:0.625rem;
	--gap:0.625rem;
	--clubPanelsHeight:40vh;
	--mainPanelsHeight:25.7vh;
	--mainPanelsHdrHeight:2.4vh;
	--gradientTopColor:#0E4560;
	--gradientBottomColor:#3EB3DA;
	--clubCardBG:#d1edf6;
	--normalFontSize:clamp(0.5rem, 1rem, 2rem);
	--hdrFontSize:clamp(0.6rem, 1.1rem, 2.2rem);
	--hdrHeight:calc(var(--hdrFontSize) * 1.2);
}


*{box-sizing:content-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;}
  /* *{ outline: 0.0625rem solid red; }	/ */


body{
	margin:0;
	background:var(--bg);
	color:#111;
	padding:0.73%;
	display:flex;
	justify-content:center;
	height:100%;
	width:100%;
	font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.linear-gradient{
	background-image: linear-gradient(#0E4560, #3EB3DA);
}

.app{
	width:100%;
	height:100%;
	max-width:1400px;
	display:flex;
	flex-direction:column;
	align-items:center;
	border-radius:0.5rem;
	align-self: center;
	margin-left: 0;
}



/* ================================
   NEW WIND BUDDY HEADER
   ================================ */

.wb-header {
    width: 100%;
    background: var(--background1);
    padding: 0.5rem 1rem;
}

.wb-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* -------- Logo -------- */
.wb-logo img {
    height: 70px;
    width: auto;
    user-select: none;
}

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

/* Slightly smaller logo when width < 1100px */
@media (max-width: 1100px) {
    .wb-logo img {
        height: 60px;
    }
}

/* Stack logo + menu on very small devices */
@media (max-width: 700px) {
    .wb-header-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
    }
}








/* -------- Account area -------- */
.wb-account {
    position: relative;
    display: flex;
    align-items: center;
}


/* Login button (unchanged styling) */
.auth-btn {
    color: #fff;
    border: 0.0625rem solid var(--border);
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: var(--normalFontSize);
    background: var(--gradientTopColor);
}

/* Account trigger */
.account-trigger {
    color: #fff;
    border: 0.0625rem solid var(--border);
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: var(--normalFontSize);
    background: var(--gradientTopColor);
    user-select: none;
}

/* Dropdown */
.dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    background: var(--card);
    border: 0.0625rem solid var(--border);
    border-radius: 0.375rem;
    min-width: 12rem;
    box-shadow: 0 0.375rem 0.75rem rgba(0,0,0,0.25);
    z-index: 1000;
    padding: 0.25rem 0;
}

.dropdown-item {
    padding: 0.5rem 0.75rem;
    font-size: var(--normalFontSize);
    cursor: pointer;
    color: white;
    background: var(--gradientTopColor);
}

.dropdown-item:hover {
    background: #e8e8e8;
    color: black;
}

.dropdown-item.danger:hover {
    background: #802020;
    color: white;
}

.dropdown-item.signout:hover {
    background: #204a80;
    color: white;
}


/*
.header-bar {
	width: 100%;
	max-height: 10vh;
	display: -webkit-box;
	flex-direction: row;
	justify-content: end;
	margin-bottom: 2.0vh;
	margin-top: 2vh;
}



@media (max-width: 1100px) {
    .header-bar {
        flex-wrap: wrap;
        height: auto;
        padding: 0.5rem;
        justify-content: center;
        gap: 0.5rem;
        text-align: center;
    }

    .header-logo {
        height: 45px;  /* reduce logo size */
  /*  }

    .header-title {
        font-size: 1.4rem;
        width: 100%;
    /*    text-align: center; 
        order: 2;     /* force title to appear in center row */
   /* }
*/
    .account-menu-container {
        order: 3;
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/*
.img {
	max-height: -webkit-fill-available;
	justify-self: center;
}



/* AUTH BUTTONS (HEADER) 
.authContainer {
	position: relative;
	top:0px;
	left: -3.975rem;
	display:flex;
	width: 25%;
	justify-content: flex-end;
	z-index: 50;
}
*/
.auth-btn {
	color: #fff;
	border:0.0625rem solid var(--border);
	padding: 0.375rem 0.875rem;
	border-radius: 0.375rem;
	cursor: pointer;
	font-size:var(--normalFontSize);
	background:var(--gradientTopColor);
}

	.account-trigger {
	color: #fff;
	border:0.0625rem solid var(--border);
	padding: 0.375rem 0.875rem;
	border-radius: 0.375rem;
	cursor: pointer;
	font-size: var(--normalFontSize);
	background:var(--gradientTopColor);
	user-select: none;
	}

	.account-dropdown {
	border:0.0625rem solid var(--border);
	border-radius: 0.375rem;
	margin-top: 0.25rem;
	min-width: 11.25rem;
	box-shadow: 0 0.1875rem 0.5rem rgba(0,0,0,0.15);
	z-index: 1000;
	}

	.account-dropdown.hidden {
	display: none;
	}



	.dropdown-item {
	padding: 0.3125rem 0.375rem;
	font-size: var(--normalFontSize);
	cursor: pointer;
	color: white;
	background: var(--gradientTopColor);
	}

	.dropdown-item:hover {
	background: #e8e8e8;
	color: black
	}

	.dropdown-item.danger:hover {
		background: #722020;
		color: white;
	}


#toast-container {
	position: absolute;
	top: 0.75rem;
	right: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	z-index: 100;
}

.toast {
	color: white;
	padding: 0.625rem 0.875rem;
	border-radius: 0.375rem;
	font-size:var(--normalFontSize);
	box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2);
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	background:var(--gradientTopColor);
}





/* MODAL BACKDROP */
.modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 5000;
}
.modal.hidden { display:none; }

/* MODAL CONTAINER */
.modal-content {
	background: #fff;
	padding: 1.5625rem;
	width: 31.25rem;
	border-radius: 0.75rem;
	border: 0.0625rem solid var(--border);
	box-shadow: 0 0.375rem 0.875rem rgba(0,0,0,0.22);
}

.modal-content h2 {
	text-align:center;
	margin-top:0;
	margin-bottom:1.125rem;
}

/* CLOSE X */
.close {
	position:absolute;
	margin-left: 17.1875rem;
	font-size:var(--hdrFontSize);
	cursor: pointer;
}

/* INPUTS */
.auth-input {
	width:100%;
	padding:0.5rem;
	margin-bottom:0.75rem;
	border:0.0625rem solid var(--border);
	border-radius:0.375rem;
}

/* ACTION BUTTONS */
.auth-action {
	width:100%;
	background: var(--accent);
	color:#fff;
	border:none;
	padding:0.5rem;
	margin-bottom:0.625rem;
	border-radius:0.375rem;
	cursor:pointer;
}

/* Divider */
.divider {
	text-align:center;
	color:#666;
	margin:0.875rem 0;
}
.divider span {
	padding:0 0.5rem;
	background:#fff;
}

/* Google Button */
.google-btn {
	width:100%;
	padding:0.5rem;
	border:0.0625rem solid var(--border);
	background:#fff;
	border-radius:0.375rem;
	cursor:pointer;
	display:flex;
	align-items:center;
	gap:0.625rem;
	justify-content:center;
}
.google-btn img {
	width:1.25rem;
	height:1.25rem;
}



header{
	font-size:var(--hdrFontSize);
	font-weight:700;
	text-align:center;
	padding:0.75rem 0;
	color:#fff
}

/* TOGGLE */
#toggleClubs{
	align-self:flex-end;
	margin:0.125rem;
	color:var(--card);
	cursor:pointer;
	font-size:var(--normalFontSize);
}



/* <!-- ______________________________________________________________________________ --> */
						/* <!-- CATEGORIES --> */
/* <!-- _______________________________________________________________________________ --> */
.clubs-wrap{
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-self: center;
	justify-items: center;
	align-items: center;
	margin-bottom: 1vh;
}
.clubs-top{
	display: block;
	align-items:center;
	justify-content: center;
	margin-top: 0.5rem;
	height: auto;
}

.toggle-link{
	font-size:var(--normalFontSize);
	color:var(--accent);
	cursor:pointer;
	user-select:none
}


.club-grid {
	height: 90%;
	display: flex;
	overflow: auto;
	gap: 0.7rem;
	padding-bottom: 0.375rem;
	justify-self: center;
	/* width: 100%; */
	justify-content: space-evenly;
}





.category-container {
	display: inline-flex;
	flex-direction: column;
	gap:0.25rem;
	align-items: center;
	/* height: 100%; */
	min-width: 8.9vw;
}


.category {
    border-radius: 0.375rem;
    padding: 2px;
    background: var(--clubCardBG);
    display: flex;
    width: -webkit-fill-available;
}

@media (max-width: 1100px) {
    .club-grid {
        width: 100%;
        justify-content: flex-start;   /* left-align so scroll works naturally */
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.5rem;
        height: auto;
    }

    .category-container {
        min-width: 140px;  /* good sweet spot — tweak as needed */
        height: auto;
    }

    .category {
        height: auto;
    }
}


.category h4 {
	height: auto;
	font-size: var(--hdrFontSize);
	border-radius: 0.5rem;
	margin: 0;
	margin-bottom: 0.3125rem;
	text-align: center;
	text-transform: uppercase;
	color: var(--card);
	width: 100%;
	align-self: start;
	justify-self: stretch;
	background: var(--gradientTopColor);
	display: table-caption;
	border: 0.0625rem solid var(--border);
}

.category-header{
	font-size: var(--hdrFontSize);
	font-weight: 700;
	border-radius: 0.5rem;
	text-align: center;
	text-transform: uppercase;
	color: var(--card);
	background: var(--gradientTopColor);
	border: 0.0625rem solid var(--border);
	width:-webkit-fill-available
}


/* <!-- ______________________________________________________________________________ --> */
						/* <!-- CLUBS --> */
/* <!-- _______________________________________________________________________________ --> */

.club-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-right: 0.25rem;
    height: 100%;
    width: 65%;
    gap: 0.4vh;
}
.club-radio{
	height: 14.2%;
}	

.level-radio, .club-radio{
	border-radius:0.3125rem;
	border:0.0625rem solid #ddd;
	background:#fff;
	/* display: inline; */
	font-size:var(--normalFontSize);
	cursor:pointer;
	margin-top: 0vh;
	padding: 0.125rem 0.375rem 0.125rem 0.375rem;
}


/* <!-- ______________________________________________________________________________ --> */
						/* <!-- LEVELS --> */
/* <!-- _______________________________________________________________________________ --> */
.levels {
	display: table-cell;
	margin-top: 0;
	margin-bottom: 0px;
	width:35%;
	height: 97%;
}

.level-radio{
	height: 8%;
	display: block;
	width: 68%;
}
.level-radio.disabled{
	opacity:0.35;
	cursor:not-allowed;
}





/* MAIN CONTROL AREA */
.main{
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	gap: 0.625rem;
	width:100%;
	justify-content: space-evenly;
	margin-bottom: 1vh;
	max-height: var(--mainPanelsHeight);
}

.rightMainPanels, .leftMainPanels{
	display:flex;
	flex-direction:row;
	gap:01.225rem;
	/* height:100%; */
	justify-content: space-evenly;
}


/* <!-- ______________________________________________________________________________ --> */
						/* <!-- GOLF BAGS --> */
/* <!-- _______________________________________________________________________________ --> */
.bagsPanel{
	width:auto;
	/* height:100%; */
	display:flex;
	flex-direction:column;
	background:var(--card);
	border-radius: 0.5rem;
	border: 0.0625rem solid var(--border);
}
.bagsInnerPanel{
	display:flex;
	flex-direction:column;
	background:var(--card);
	border-radius:0.5rem;
	border:0.0625rem solid var(--card);
	flex-grow:1;
	overflow:auto;
	align-items:center;
	margin-bottom:0.1875rem;
}
.bagsPanel h4{
	width:100%;
	font-size:var(--hdrFontSize);
	margin-bottom:0px;
	margin-top:0px;
	text-align: center;
	background:var(--gradientTopColor);
	color:var(--card);
	border-radius:0.5rem;
	display: flex;
	justify-items: self-end;
}
.bag-row{
	display:flex;
	flex-direction:row;
	gap:0.25rem;
	justify-content:center;
	margin:0.25rem;
	height:18%;
	width:95%;
}
.small-btn{
	width:60%;
	padding-top:0.0625rem;
	padding-bottom:0.0625rem;
	margin:0.125rem;
	border-radius:0.25rem;
	border:0.0625rem solid #c9c9c9;
	background:#f3f4f6;
	cursor:pointer;
	font-size:var(--normalFontSize);
	height:90%;
	white-space: nowrap;
}
.smaller-btn{
	width:40%;
	padding-top:0.0625rem;
	padding-bottom:0.0625rem;
	margin: 0.125rem;
	border-radius:0.25rem;
	border:0.0625rem solid #c9c9c9;
	background:#f3f4f6;
	cursor:pointer;
	font-size:var(--normalFontSize);
	height:90%;
	white-space: nowrap;
}

.bag-toast {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(30, 30, 30, 0.9);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: left;
	font-size:var(--hdrFontSize);
	font-weight: 700;
	line-height: 1.5;
	border-radius: 0.375rem;
	padding: 0.625rem;
	box-sizing: border-box;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
	z-index: 10;
}

.bag-toast.show {
	opacity: 1;
	pointer-events: auto;
}


/* --- Modal Wrapper --- */
#gb-info-modal {
	position: absolute;
	inset-block-start: 15vh;
	inset-inline-start: 37vw;
	background: rgba(0, 0, 0, 0.55);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

/* --- Modal Content --- */
#gb-info-box {
	background: #ffffff;
	width: 90%;
	max-width: 51.25rem;
	padding: 1.25rem;
	border-radius: 0.75rem;
	box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.25);
	font-size:var(--normalFontSize);
	line-height: 1.45;
	color: #003f66;
	position: relative;
}

/* Close Button */
#gb-info-close {
	position: absolute;
	right: 0.625rem;
	top: 0.5rem;
	font-size: var(--hdrFontSize);
	cursor: pointer;
	color: #555;
}


/* <!-- ________________________________________________________________________________ --> */
								/* <!-- Tool Panel --> */
/* <!-- ___________________________________________________________________________ --> */
.toolsPanel{
	min-width: 9vw;
	/* height: 100%; */
	display: flex;
	flex-direction: column;
	background: var(--card);
	border-radius: 0.5rem;
	border: 0.0625rem solid var(--border);
}


.toolsInnerPanel{
	display:flex;
	flex-direction:column;
	background:var(--card);
	border-radius:0.5rem;
	border:0.0625rem solid var(--card);
	flex-grow:1;
	overflow:auto;
	align-items:center;
	margin-bottom:0.1875rem;
}


.toolsPanel h4{
	width:100%;
	font-size:var(--hdrFontSize);
	margin-bottom:0px;
	margin-top:0px;
	text-align:center;
	background:var(--gradientTopColor);
	color:var(--card);
	border-radius:0.5rem;
	display: flex;
	align-items: center;
	justify-items: center;
}	

/* --- Modal Wrapper --- */
#tools-info-modal {
	position: absolute;
	inset-block-start: 5vh;
	inset-inline-start: 34vw;
	background: rgba(0, 0, 0, 0.55);
	display: none; 
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

/* --- Modal Content --- */
#tools-info-box {
	background: #ffffff;
	width: 90%;
	max-width: 51.25rem;
	padding: 1.25rem;
	border-radius: 0.75rem;
	box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.25);
	font-size:var(--normalFontSize);
	line-height: 1.45;
	color: #003f66;
	position: relative;
}

/* Close Button */
#tools-info-close {
	position: absolute;
	right: 0.625rem;
	top: 0.5rem;
	font-size:var(--hdrFontSize);
	cursor: pointer;
	color: #555;
}


tool-row{
	display:flex;
	flex-direction:row;
	gap:0.625rem;
	justify-content:center;
	margin: 0.1875rem;
	width:100%;
}
.btn{
	width:90%;
	padding: 0.125rem;
	margin: 0.375rem;
	border-radius:0.25rem;
	border:0.0625rem solid #c9c9c9;
	background:#f3f4f6;
	cursor:pointer;
	font-size:var(--normalFontSize);
	height:75%;
	white-space: nowrap;
}
.active{
	background:var(--accent);
	color:#fff;
	border-color:var(--accent);	
}



/* <!-- _________________________________________________________________________________________________________ --> */
								/* <!-- CLUB INFO PANEL --> */
/* <!-- _________________________________________________________________________________________________________ --> */

.clubInfoPanel{
	min-width:12.5rem;
	/* height:100%; */
	display:flex;
	flex-direction:column;
	background:var(--card);
	border-radius:0.5rem;
	border:0.0625rem solid var(--border);
}
.clubInfoPanel h4{
	font-size:var(--hdrFontSize);
	margin-bottom:0.3125rem;
	margin-top:0px;
	text-align:center;
	text-transform:uppercase;
	font-weight:700;
	text-align:center;
	padding: 0 0.25rem 0 0.25rem;
	background:var(--gradientTopColor);
	color:var(--card);
	border-radius:0.5rem;
}
.club-info-grid{
	display:flex;
	flex-direction:column;
	margin-left:0.75rem;
	margin-bottom:0.3125rem;
	background:var(--card);
	border-radius:0.5rem;
	border:0.0625rem solid var(--card);
	flex-grow:1;
	overflow:auto;
	font-size:var(--normalFontSize);
	padding-top:0.75rem;
	text-align:left;
	gap:0.625rem;
	height:98%;
	width:93%;
}
.club-info-row{
	width:75%;
	align-self:center;
	justify-self:center;
}
.value{
	font-weight:700;
}



/* <!-- _________________________________________________________________________________________________________ --> */
								/* <!-- SHOT Adjustments --> */
/* <!-- _________________________________________________________________________________________________________ --> */

.shotAdjPanel{
	display:flex;
	flex-direction:column;
	background:var(--card);
	align-items:center;
	/* height:100%; */
	border-radius:0.5rem;
	border:0.0625rem solid var(--border);
	row-gap:1vh;
	padding-bottom: 1vh;
	width: clamp(250px,95vw,400px);
}
.shotAdjPanel h4{
	font-size:var(--hdrFontSize);
	margin-bottom:0.125rem;
	margin-top:0px;
	text-align:center;
	width:100%;
	text-transform:uppercase;
	background:var(--gradientTopColor);
	color:var(--card);
	border-radius:0.5rem;
}
.sa_row{
	display:flex;
	flex-direction:row;
	background:var(--card);
	justify-content:center;
	width:98%;
	padding:0.0625rem;
	padding-top:0.0625rem;
	margin-top:0.125rem;
	margin-bottom:0.125rem;
	margin-left:0.125rem;
	margin-right:0.125rem;
}
.sa_row label{
	margin-right:0.125rem;
	font-size:var(--normalFontSize);
	text-align:center;
	align-content: center;
	text-wrap: nowrap;
}

input[type=number],select,input[list]{
	border-radius:0.375rem;
	border:0.0625rem solid var(--border);
	font-size:var(--normalFontSize);
	padding:0.25rem;
	max-width:3.75rem;
}
input[type=range]{
	border-radius:0.375rem;
	border:0.0625rem solid var(--border);
	font-size:var(--normalFontSize);
	padding:0px;
	display: flex;
	/* min-width: 100px; */
	/* max-width: 215px; */
	width: 100%;
}
	


/* style the input as you already have */
#windInput {
	padding: 0.375rem 0.5rem;
	border-radius: 0.375rem;
	border: 0.0625rem solid var(--border);
	min-width: 4rem;
}




/* hide number spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }


/* <!-- _________________________________________________________________________________________________________ --> */
								/* <!-- RING CARD --> */
/* <!-- _________________________________________________________________________________________________________ --> */
.ring-card{
	display:flex;
	flex-direction:column;
	background:var(--card);
	border-radius:0.5rem;
	max-width:12.5rem;
	/* height:100%; */
	text-align:center;
	border:0.0625rem solid var(--border);
	padding-bottom:1vh;
}
.ring-card h4{
	font-size:var(--hdrFontSize);
	margin-bottom:0.125rem;
	margin-top:0px;
	text-align:center;
	font-weight:700;
	width:100%;
	text-transform:uppercase;
	background:var(--gradientTopColor);
	color:var(--card);
	border-radius:0.5rem;
}
.rings-main{
	width:max-content;
	align-self: center;
	background:var(--yellow);
	font-size:2.1rem;
	font-weight:700;
	margin:0.125rem;
	padding:0.125rem;
	border:0.25rem solid black;
}
.rings-sub{
	font-size:var(--normalFontSize);
	color:#222
}
.active-club{
	font-weight:700
}


/* <!-- _________________________________________________________________________________________________________ --> */
								/* <!-- SHORTCUT BUTTONS --> */
/* <!-- _________________________________________________________________________________________________________ --> */
.shortcut-bar{
	position: relative;
	display:flex;
	flex-direction: row;
	justify-content:center;
	align-items:center;
	gap:0.5rem;
	flex-wrap:wrap;
	margin-top: 1vh;
	max-width: 100%;
}
.shortcut-btn{
	border:0.0625rem solid var(--border);
	border-radius:0.25rem;
	padding-top:0.3125rem;
	padding-bottom:0.3125rem;
	padding-left:0.3125rem;
	padding-right:0.3125rem;
	font-size:var(--normalFontSize);
	background:#f2f2f2;
	color:#666;
	cursor:not-allowed;
	transition:all 0.2s ease;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.shortcut-btn.enabled{
	cursor:pointer;
	background:#fff;
	color:#222;
}
.shortcut-btn.active{
	background: var(--gradientTopColor);
	color:#fff;
	border-color: #f3f4f6;
	padding: 0.375rem;
}

/* --- Modal Wrapper --- */
#sc-info-modal {
	position: absolute;
	inset-block-start: 15vh;
	inset-inline-start: 37vw;
	background: rgba(0, 0, 0, 0.55);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

/* --- Modal Content --- */
#sc-info-box {
	background: #ffffff;
	width: 90%;
	max-width: 51.25rem;
	padding: 1.25rem;
	border-radius: 0.75rem;
	box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.25);
	font-size:var(--normalFontSize);
	line-height: 1.45;
	color: #003f66;
	position: relative;
}

/* Close Button */
#sc-info-close {
	position: absolute;
	right: 0.625rem;
	top: 0.5rem;
	font-size: var(--hdrFontSize);
	cursor: pointer;
	color: #555;
}





/* <!-- _________________________________________________________________________________________________________ --> */
								/* <!-- ENDBRINGER SCHOOL --> */
/* <!-- _________________________________________________________________________________________________________ --> */

/*	Endbringer School Panel 	*/
.ebsPanelWrapper {
	display: flex;
	flex-direction: column;
	margin-top:0.0625rem;
	margin-bottom:0px;
	margin-left:0.25rem;
	margin-right:0.25rem;
	gap: 0px;
	border:0.0625rem solid var(--border);
	max-width: 50rem;
	background:var(--card);
	border-radius:0.5rem
}

.ebsPanelHeader {
	text-align: center;
	align-content:center;
	background:var(--gradientTopColor);
	margin-bottom:0.0625rem;
	padding:0.125rem;
	font-size:var(--hdrFontSize);
	font-weight: 700;
	color:var(--card);
	border-radius:0.5rem;
	width:100%;
}
.ebsPanelInfo {
	font-size: 0.8rem;
	color: black;
	text-align: center;
}

.ebsPanelContainer {
	display: flex;
	flex-direction:row;
	margin-top:0px;
	margin-bottom:0.0625rem;
	margin-left:0.0625rem;
	margin-right:0.0625rem;
	padding:0.0625rem;
}

.ebsPanelColumn {
	display: flex;
	flex-direction:column;
	flex: 1;
	margin-top:0.125rem;
	margin-bottom:0.125rem;
	margin-left:0.125rem;
	margin-right:0.125rem;
	padding:0.125rem;
	gap: 0px;
	align-items:center;
	justify-content:center;
}

.ebsColRow {
	display:flex;
	flex-direction:column;    
	margin:0.0625rem;
	padding:0.0625rem;
	font-size:var(--normalFontSize);
	min-width: 6.25rem;
	font-weight: 700;
	text-align:center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	gap: 0px;
	justify-content:center;
}




/* <!-- _________________________________________________________________________________________________________ --> */
								/* <!-- MISC. --> */
/* <!-- _________________________________________________________________________________________________________   --> */
/* responsive / aesthetics */


.club-grid::-webkit-scrollbar{
	height:0.625rem;
}

.club-grid::-webkit-scrollbar-thumb{
	background:#ddd;
	border-radius: 0.375rem;
}

footer{
	margin-top:1.5rem;
	text-align:center;
	color: #f3f4f6;
	font-size: 0.8rem;
	padding-bottom: 0px;
}


.selected{
	background: var(--gradientTopColor);
	color:#fff;
	border-color: #111;
}



.headerWithInfoIcon {
    display: flex;
    text-align: center;
    gap: 1.7rem;
    justify-items: center;
    justify-content: end;
}


.info-icon{
	height:clamp(20px,1.25rem,30px);
	width:auto;
	justify-self: right;
	align-self: center;
	cursor: pointer;
	position: sticky;
}

/* wrapper must be positioned so tooltip can be absolutely positioned relative to it */
.tooltip-wrapper {
    position: relative;
    display: inline-flex; /* or inline-block, block, flex */
    align-items: center;   /* keeps icon vertically aligned */
}


/* tooltip box (hidden by default) */
.tooltip {
	position: absolute;
	left: 0;
	bottom: calc(100% + 0.5rem); /* place above the input */
	transform-origin: bottom left;
	white-space: nowrap;
	background: #222;
	color: #fff;
	padding: 0.5rem 0.625rem;
	border-radius: 0.375rem;
	font-size:var(--normalFontSize);
	line-height: 1.2;
	box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
	transform: translateY(0.375rem);
	z-index: 30;
}

/* small arrow */
.tooltip::after {
	content: "";
	position: absolute;
	left: 0.75rem;
	top: 100%;
	width: 0;
	height: 0;
	border-left: 0.375rem solid transparent;
	border-right: 0.375rem solid transparent;
	border-top: 0.375rem solid #222;
	display: block;
}

/* show tooltip on hover  */
.tooltip-wrapper:hover .tooltip {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}



.show {
	/* .toast.show { */
	opacity:1;
	transform: translateY(0);
}

/* Visibility classes */
.hidden {
	display: none;
}