/* =========================================================
   LIFESTYLE4US GLOBAL STYLES
   ========================================================= */

:root {
    --gold: #FFD700;
    --purple: #9000e3;
    --dark: #0b0b0b;
    --card: #161616;
    --border: #2a2a2a;
    --text: #ffffff;
}


/* ================= GLOBAL ================= */

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;

    font-family: Arial, sans-serif;
    background: var(--dark);
    color: var(--text);
}


/* ================= SCREENS ================= */

.screen {
    display: none;

    width: 100%;
    min-height: 100vh;

    flex-direction: column;
}


.screen.active {
    display: flex;
}


/* =========================================================
   AUTH / LOGIN SCREEN
   ========================================================= */


#authScreen {
    position: relative;
    width: 100%;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    overflow: hidden;
}


.authBackground {
    position: absolute;
    inset: 0;

    background-image: url("images/1784921276022.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 0;
}

@media (max-width:768px){

    .authBackground {

        background-image: url("images/2230.png");

        background-size: cover;

        background-position:center;

    }

}


/* LOGIN CONTENT */

.authContent {

    position: relative;

    z-index: 1;

    width: 90%;
    max-width: 340px;

    margin: 0 auto -55vh auto;
transform: translateX(-300px);
    display: flex;
    flex-direction: column;

    gap: 10px;

}

.authContent button {
    opacity: 0;
}
.authContent button {
    height: 55px;
    font-size: 18px;
    border-radius: 12px;
}

.loginInputs {
    transform: translateY(20px);
}

.loginInputs input {
    height: 50px;
}

#loginBtn {
    margin-top: 10px;
}

#forgotBtn {
    margin-top: -5px;
}

#forgotBtn {
    width: 65%;
    height: 42px;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
}
.authContent input,
.authContent button {

    width: 100%;

}

.loginInputs {
    display: flex;
    gap: 10px;
    width: 100%;
}

.loginInputs input {
    flex: 1;
    min-width: 0;
}

.loginInputs input {
    height: 30px;
}

.loginInputs {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 25px;
}

.authContent h1 {

    color: var(--gold);

    text-align: center;

    margin-bottom: 15px;

}


/* Mobile auth positioning */

@media(max-width:768px){

    .authContent {

        margin-right: 0;

        margin-bottom: 8vh;

    }

}


/* =========================================================
   INPUTS
   ========================================================= */


input,
textarea,
select {

    width: 100%;

    padding: 10px;

    margin: 8px 0;

    background: var(--card);

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

    color: white;

    border-radius: 8px;

}


input::placeholder {

    color:#aaa;

}



/* =========================================================
   BUTTONS
   ========================================================= */


button {

    width:100%;

    padding:10px;

    margin-top:10px;

    background:var(--gold);

    color:var(--purple);

    font-weight:bold;

    border:none;

    border-radius:8px;

    cursor:pointer;

}


button:hover {

    filter:brightness(.9);

}


button:active {

    transform:scale(.98);

}


/* =========================================================
   APP LAYOUT
   ========================================================= */


#appScreen {

    position:fixed;

    inset:0;

    display:flex;

    flex-direction:column;

}


#scrollContainer {

    flex:1;

    min-height:0;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

    padding-bottom:90px;

}


/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */


#bottomNav {

    position:fixed;

    bottom:0;

    left:0;

    right:0;


    height:60px;


    display:flex;


    background:#161616;

    border-top:2px solid var(--gold);

    z-index:999;

}


#bottomNav button {


    flex:1;

    width:auto;

    height:100%;


    margin:0;

    padding:0;


    border-radius:0;

    border-right:1px solid #111;


    display:flex;

    align-items:center;

    justify-content:center;


    background:var(--gold);

    color:var(--purple);


    font-size:14px;

}


#bottomNav button:last-child {

    border-right:none;

}


#bottomNav button:active {

    transform:scale(.98);

}


/* =========================================================
   CARDS
   ========================================================= */


.card {

    background:var(--card);

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

    padding:10px;

    margin:10px 0;

    border-radius:10px;

}

/* =========================================================
   FEED ACTIONS
   ========================================================= */


.feed-actions {

    display:flex;

    justify-content:space-around;

    align-items:center;

    margin-top:12px;

    padding-top:8px;

    border-top:1px solid #333;

}


.feed-actions button {

    width:auto;

    flex:none;

    min-height:40px;

    padding:10px 22px;

    margin-top:0;

    font-size:15px;

}


.feed-actions .comment-button {

    flex-basis:100%;

}



/* =========================================================
   MODALS
   ========================================================= */


.modal {

    position:fixed;

    inset:0;


    background:rgba(0,0,0,.7);


    display:flex;

    justify-content:center;

    align-items:center;


    z-index:1000;

}


.modal.hidden {

    display:none !important;

}


.modal-box {

    width:90%;

    max-width:400px;


    background:var(--card);


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

    border-radius:12px;


    padding:20px;

}



/* =========================================================
   LINKS
   ========================================================= */


.display-name-link,
.club-name-link,
.events-link,
.theme-night-link {


    color:var(--gold);

    text-decoration:none;

}


.display-name-link:hover,
.club-name-link:hover,
.events-link:hover,
.theme-night-link:hover {


    color:#f0c75e;

}



/* =========================================================
   UTILITIES
   ========================================================= */


.hidden {

    display:none !important;

}



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


@media(max-width:600px){


    button {

        font-size:15px;

    }


    .card {

        margin:8px 0;

    }


}



/* =========================================================
   AUTH IMAGE POSITION CONTROLS
   ========================================================= */


/*
   Adjust these if you need to move the login box.

   Higher number = moves left on desktop
   Lower number = moves right

*/

@media(min-width:769px){

    .authContent {

        margin-right:8%;

    }

}



/*
   Prevent iOS / mobile viewport issues
*/

@supports (-webkit-touch-callout:none){

    #authScreen {

        min-height:-webkit-fill-available;

    }

}

/* MOBILE LOGIN OVERRIDES */

.mobileAuth .authBackground {
    background-size: 100% 100%;
    background-position: center;
}


.mobileAuth .authContent {

    margin: 0 auto;

    transform: translateY(-40px);

}

/* Promoted Feed Button */
.promoted-feed-btn {
    padding: 6px 16px !important;
    font-size: 14px !important;
    border-radius: 18px !important;
    width: auto !important;
    height: auto !important;
}

/* ============================
   PROMOTION MODAL
============================ */

.promotion-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    justify-content: center;
}


.promotion-card {
    background: Black;
    width: 350px;
    max-width: 90%;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
    position: relative;
}


.promotion-close {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 24px;
    height: 24px;

    padding: 0;

    border-radius: 50%;

    border: none;

    background: #f2f2f2;

    font-size: 14px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

}


.promotion-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.promotion-option {
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}


.promotion-option.selected {
    border: 2px solid #FFD700;
}


.promotion-submit {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
}