/*=========================================
JUMPSHOT COFFEE
STYLE.CSS
PART 1
=========================================*/

/*=========================================
RESET
=========================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

:root{

--primary:#72DCE8;

--dark:#050505;

--card:#111111;

--white:#ffffff;

--gray:#d4d4d4;

--radius:22px;

--glow:

0 0 10px #72DCE8,

0 0 20px rgba(114,220,232,.60),

0 0 35px rgba(114,220,232,.35);

}

/*=========================================
BODY
=========================================*/

body{

background:#050505;

color:#ffffff;

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

overflow-x:hidden;

text-align:center;

line-height:1.7;

}

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

a{

text-decoration:none;

color:inherit;

}

/*=========================================
IMAGES
=========================================*/

img{

display:block;

max-width:100%;

}

/*=========================================
SECTIONS
=========================================*/

section{

width:100%;

padding:45px 20px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}

/*=========================================
TEXT
=========================================*/

h1{

font-size:2.6rem;

font-weight:800;

margin-bottom:15px;

}

h2{

font-size:2rem;

font-weight:700;

margin-bottom:15px;

}

h3{

font-size:1.25rem;

font-weight:600;

margin-bottom:10px;

}

p{

color:var(--gray);

max-width:750px;

margin:auto;

}

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

.home-header,

.page-header{

width:100%;

padding:18px 28px;

display:flex;

justify-content:space-between;

align-items:center;

background:#0b0b0b;

border-bottom:2px solid #72DCE8;

position:sticky;

top:0;

z-index:9999;

box-shadow:var(--glow);

}

/*=========================================
HEADER LOGO
=========================================*/
.header-logo{

display:flex;

align-items:center;

gap:18px;

}

.header-title{

font-size:2rem;

font-weight:300;

letter-spacing:3px;

color:#72DCE8;

text-shadow:

0 0 8px #72DCE8,

0 0 18px rgba(114,220,232,.60),

0 0 35px rgba(114,220,232,.35);

margin:0;

}

/*=========================================
HEADER LOGO
=========================================*/
.header-logo{

display:flex;

align-items:center;

gap:18px;

}

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

.main-logo{

width:75px;

height:auto;

border-radius:16px;

filter:

drop-shadow(0 0 12px #72DCE8)

drop-shadow(0 0 28px #72DCE8)

drop-shadow(0 0 55px rgba(114,220,232,.85));

transition:.35s;

}

.main-logo:hover{

transform:scale(1.05);

filter:

drop-shadow(0 0 18px #72DCE8)

drop-shadow(0 0 35px #72DCE8)

drop-shadow(0 0 70px rgba(114,220,232,.95));

}

/*=========================================
HERO
=========================================*/

.hero{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

padding:45px 20px;

}

/*=========================================
MAIN LOGO
=========================================*/

.hero-logo{

width:300px;

max-width:95%;

margin:auto;

display:block;

border-radius:18px;

filter:

drop-shadow(0 0 12px #72DCE8)

drop-shadow(0 0 28px #72DCE8)

drop-shadow(0 0 55px rgba(114,220,232,.85));

transition:.35s;

}

.hero-logo:hover{

transform:scale(1.03);

filter:

drop-shadow(0 0 18px #72DCE8)

drop-shadow(0 0 35px #72DCE8)

drop-shadow(0 0 70px rgba(114,220,232,.95));

}

/*=========================================
PAGE LOGO
=========================================*/

.page-logo{

display:block;

width:240px;

max-width:90%;

margin:20px auto 35px;

border-radius:18px;

filter:

drop-shadow(0 0 18px #72DCE8)

drop-shadow(0 0 35px #72DCE8)

drop-shadow(0 0 70px rgba(114,220,232,.95));

transition:.35s;

}

.page-logo:hover{

transform:scale(1.03);

filter:

drop-shadow(0 0 25px #72DCE8)

drop-shadow(0 0 50px #72DCE8)

drop-shadow(0 0 90px rgba(114,220,232,1));

}

/*=========================================
TITLE
=========================================*/

.hero-title{

font-size:4rem;

font-weight:800;

color:#72DCE8;

text-align:center;

letter-spacing:2px;

margin:20px 0;

text-shadow:

0 0 10px #72DCE8,

0 0 20px #72DCE8,

0 0 40px rgba(114,220,232,.70);

}

/*=========================================
SLOGANS
=========================================*/

.company-slogan{

font-size:1.15rem;

font-weight:600;

color:#ffffff;

margin-bottom:8px;

}

.company-slogan2{

font-size:1rem;

color:#cfcfcf;

margin-bottom:25px;

}

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

.hero-buttons{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:18px;

margin-top:20px;

}

button{

border:none;

cursor:pointer;

font-family:inherit;

transition:.30s;

}

.order-btn,

.reward-btn,

.favorite-btn,

.order-btn-small{

padding:15px 30px;

border-radius:50px;

font-size:1rem;

font-weight:700;

}

.order-btn,

.order-btn-small{

background:#72DCE8;

color:#050505;

box-shadow:var(--glow);

}

.reward-btn{

background:#ffffff;

color:#050505;

box-shadow:var(--glow);

}

.favorite-btn{

background:#1d1d1d;

color:#ffffff;

border:2px solid #72DCE8;

box-shadow:var(--glow);

}

button:hover{

transform:translateY(-5px);

box-shadow:

0 0 15px #72DCE8,

0 0 35px rgba(114,220,232,.65);

}

/*=========================================
LOGO SECTION
PART 2
=========================================*/

.logo-section{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:40px 20px;

}

/*=========================================
PAGE TITLES
=========================================*/

.page-title-section{

padding:20px;

}

.page-title-section h1{

font-size:3rem;

color:#72DCE8;

letter-spacing:2px;

text-shadow:

0 0 10px #72DCE8,

0 0 20px rgba(114,220,232,.70),

0 0 40px rgba(114,220,232,.45);

margin-bottom:15px;

}

.page-title-section p{

max-width:800px;

margin:auto;

}

/*=========================================
WELCOME IMAGE
=========================================*/

.welcome-image{

width:100%;

max-width:1200px;

height:420px;

object-fit:cover;

border-radius:25px;

border:3px solid #72DCE8;

box-shadow:

0 0 20px #72DCE8,

0 0 40px rgba(114,220,232,.40);

margin-top:25px;

}

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

.home-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

width:100%;

max-width:1300px;

margin:auto;

padding:25px;

}

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

.home-card{

background:#111111;

border-radius:24px;

overflow:hidden;

border:2px solid rgba(114,220,232,.20);

transition:.35s;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

box-shadow:

0 0 18px #72DCE8,

0 0 35px rgba(114,220,232,.45);

}

.home-card:hover{

transform:translateY(-8px);

border-color:#72DCE8;

box-shadow:

0 0 22px #72DCE8,

0 0 45px rgba(114,220,232,.75),

0 0 70px rgba(114,220,232,.35);

}


.home-card img{

width:100%;

height:260px;

object-fit:cover;

display:block;

}

.home-card h3{

padding:18px;

font-size:1.2rem;

font-weight:700;

color:#ffffff;

text-shadow:

0 0 8px rgba(114,220,232,.45);

}

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

.menu-section{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

width:100%;

max-width:1300px;

margin:auto;

padding:25px;

}

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

.drink-card{

background:#111111;

border-radius:24px;

padding:25px;

display:flex;

flex-direction:column;

justify-content:space-between;

text-align:center;

border:2px solid rgba(114,220,232,.20);

transition:.35s;

box-shadow:

0 10px 20px rgba(0,0,0,.40);

}

.drink-card:hover{

transform:translateY(-8px);

border-color:#72DCE8;

box-shadow:

0 0 15px #72DCE8,

0 0 35px rgba(114,220,232,.55);

}

.drink-info h2{

color:#72DCE8;

font-size:1.8rem;

margin-bottom:15px;

text-shadow:

0 0 8px #72DCE8;

}

.drink-info h3{

color:#ffffff;

margin-bottom:15px;

}

.drink-info p{

margin-bottom:20px;

}

.earn-shots{

font-size:1rem;

font-weight:700;

color:#72DCE8;

text-shadow:

0 0 8px rgba(114,220,232,.55);

margin-bottom:20px;

}

/*=========================================
BUTTON GROUP
=========================================*/

.drink-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-top:auto;

}

/*=========================================
FEATURED BANNER
=========================================*/

.featured-banner{

width:100%;

max-width:100%;

height:auto;

display:block;

object-fit:contain;

border-radius:22px;

margin:0 auto 20px;

box-shadow:

0 0 18px #72DCE8,

0 0 35px rgba(114,220,232,.45);

}

/*=========================================
FEATURED • VISIT • REWARDS
PART 3
=========================================*/

.featured-drink,
.visit-home,
.rewards-preview,
.social-section,
.profile-section{

width:100%;

max-width:1300px;

margin:35px auto;

padding:0 20px;

}

.featured-card,
.visit-card,
.profile-card,
.reward-stat-card,
.next-reward-card{

background:#111111;

border:2px solid rgba(114,220,232,.20);

border-radius:24px;

padding:30px;

text-align:center;

transition:.35s;

box-shadow:

0 10px 25px rgba(0,0,0,.40);

}

.featured-card:hover,
.visit-card:hover,
.profile-card:hover,
.reward-stat-card:hover,
.next-reward-card:hover{

transform:translateY(-8px);

border-color:#72DCE8;

box-shadow:

0 0 18px #72DCE8,

0 0 40px rgba(114,220,232,.55);

}

.featured-image,
.visit-photo{

width:100%;

height:320px;

object-fit:cover;

border-radius:22px;

margin-bottom:20px;

}

.featured-price{

display:block;

width:100%;

text-align:center;

font-size:1.6rem;

font-weight:700;

color:#72DCE8;

margin:20px auto;

text-shadow:

0 0 10px #72DCE8,

0 0 25px rgba(114,220,232,.70);

}

/*=========================================
PROFILE
=========================================*/

.profile-avatar{

width:150px;

height:150px;

border-radius:50%;

object-fit:cover;

border:4px solid #72DCE8;

margin:0 auto 20px;

box-shadow:

0 0 18px #72DCE8,

0 0 35px rgba(114,220,232,.55);

}

.member-level{

font-size:1.15rem;

font-weight:700;

color:#72DCE8;

text-shadow:

0 0 10px #72DCE8;

}

/*=========================================
PROFILE DASHBOARD
=========================================*/

.profile-stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin:30px 0;

width:100%;

}

.profile-stat{

background:#181818;

border:2px solid rgba(114,220,232,.20);

border-radius:20px;

padding:20px;

transition:.35s;

box-shadow:

0 0 15px rgba(114,220,232,.20);

}

.profile-stat:hover{

transform:translateY(-6px);

border-color:#72DCE8;

box-shadow:

0 0 18px #72DCE8,

0 0 35px rgba(114,220,232,.55);

}

.profile-stat h3{

font-size:2rem;

color:#72DCE8;

margin-bottom:8px;

text-shadow:

0 0 10px #72DCE8;

}

.profile-stat span,

.profile-stat p{

font-size:1rem;

color:#ffffff;

margin:0;

}

/*=========================================
PROFILE FORM
=========================================*/

.profile-form{

display:flex;

flex-direction:column;

gap:18px;

margin-top:25px;

}

.profile-form label{

text-align:left;

font-weight:700;

color:#72DCE8;

}

.profile-form input{

width:100%;

padding:15px;

background:#111111;

border:2px solid rgba(114,220,232,.25);

border-radius:16px;

color:#ffffff;

font-size:1rem;

transition:.35s;

}

.profile-form input:focus{

outline:none;

border-color:#72DCE8;

box-shadow:

0 0 15px rgba(114,220,232,.60);

}

/*=========================================
PROFILE PICTURE
=========================================*/

.profile-avatar{

width:170px;

height:170px;

border-radius:50%;

object-fit:cover;

cursor:pointer;

border:5px solid #72DCE8;

transition:.35s;

box-shadow:

0 0 18px #72DCE8,

0 0 35px rgba(114,220,232,.60);

}

.profile-avatar:hover{

transform:scale(1.05);

box-shadow:

0 0 22px #72DCE8,

0 0 45px rgba(114,220,232,.80);

}

/*=========================================
PROFILE CARD
=========================================*/

.profile-card{

max-width:900px;

margin:auto;

}

.profile-card h2{

color:#72DCE8;

text-shadow:

0 0 10px #72DCE8;

}

.member-level{

font-size:1.2rem;

font-weight:700;

margin:15px 0 30px;

color:#72DCE8;

text-shadow:

0 0 10px #72DCE8;

}

/*=========================================
ACCOUNT ACTIVITY
=========================================*/

.profile-section .profile-card{

margin-bottom:35px;

}

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

.profile-stat{

min-height:130px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.profile-stat h3{

margin-bottom:10px;

}

/*=========================================
PROFILE BUTTON
=========================================*/

.profile-card .reward-btn{

margin-top:25px;

}

/*=========================================
PROFILE RESPONSIVE
=========================================*/
@media (max-width:768px){

    .profile-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .profile-avatar{
        width:140px;
        height:140px;
    }

}   /* <-- ADD THIS */

@media (max-width:600px){

    .profile-stats{
        grid-template-columns:1fr;
    }

    .profile-avatar{
        width:120px;
        height:120px;
    }

    .profile-card{
        padding:25px;
    }

}
/*=========================================
REWARDS PAGE
PART 1
=========================================*/

.rewards-page{

width:100%;

max-width:1400px;

margin:auto;

padding:20px;

display:flex;

flex-direction:column;

gap:50px;

}

/*=========================================
SCOREBOARD
=========================================*/

.reward-scoreboard{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin-top:20px;

}

.reward-card{

background:#111111;

border:2px solid rgba(114,220,232,.25);

border-radius:24px;

padding:30px;

text-align:center;

box-shadow:var(--glow);

transition:.35s;

}

.reward-card:hover{

transform:translateY(-8px);

}

.reward-card h3{

color:#72DCE8;

margin-bottom:15px;

}

.reward-card h1{

font-size:3rem;

color:#ffffff;

margin-bottom:10px;

}

/*=========================================
PROGRESS BAR
=========================================*/

.progress-bar{

width:100%;

height:16px;

background:#222;

border-radius:50px;

overflow:hidden;

margin:20px 0;

}

.progress-fill{

width:0%;

height:100%;

background:#72DCE8;

border-radius:50px;

box-shadow:var(--glow);

transition:width .5s ease;

}

/*=========================================
BASKETBALL AREA
=========================================*/

.basketball-section{

display:flex;

justify-content:center;

align-items:center;

padding:40px 0;

}

.basketball-area{

position:relative;

width:100%;

max-width:900px;

height:400px;

background:#000 url("images/IMG_courts.png") center bottom no-repeat;

background-size:cover;

border:2px solid rgba(114,220,232,.25);

border-radius:30px;

box-shadow:var(--glow);

overflow:hidden;

}

/*=========================================
REWARD HOOP
=========================================*/

.reward-hoop{

position:absolute;

top:25px;

left:50%;
transform:translateX(-50%);
    
width:140px;

height:auto;

background:none;

border:none;

border-radius:0;

box-shadow:none;

filter:drop-shadow(0 0 18px #72DCE8);

pointer-events:none;

z-index:5;

}

/*=========================================
REWARD BALL
=========================================*/

.reward-ball{

position:absolute;

left:50px;

bottom:20px;

width:55px;

height:auto;

background:none;

border:none;

border-radius:0;

box-shadow:none;

filter:drop-shadow(0 0 18px #72DCE8);

transition:all 1.2s ease;

z-index:10;

}

/*=========================================
BALL ANIMATION
=========================================*/

.reward-ball.shoot{

animation:shootBall 1.2s ease forwards;

}

@keyframes shootBall {

0%{
    left:45px;
    bottom:25px;
    transform:rotate(0deg) scale(1);
}

20%{
    left:120px;
    bottom:120px;
    transform:rotate(180deg) scale(.95);
}

40%{
    left:220px;
    bottom:200px;
    transform:rotate(360deg) scale(.85);
}

60%{
    left:310px;
    bottom:255px;
    transform:rotate(540deg) scale(.75);
}

80%{
    left:365px;
    bottom:285px;
    transform:rotate(630deg) scale(.65);
}

100%{
    left:395px;
    bottom:290px;
    transform:rotate(720deg) scale(.55);
}

}
/*=========================================
COURT FLOOR
=========================================*/

.basketball-area::before{

content:"";

position:absolute;

left:0;

right:0;

bottom:0;

height:90px;

background:linear-gradient(

to top,

#5d3a14,

#8b5a2b,

transparent

);

opacity:.9;

}

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

@media(max-width:992px){

.basketball-area{

height:320px;

}

.reward-hoop{

width:110px;

right:20px;

top:20px;

}

.reward-ball{

width:55px;

left:35px;

bottom:20px;

}

}

@media(max-width:600px){

.basketball-area{

height:250px;

}

.reward-hoop{

width:85px;

right:12px;

top:12px;

}

.reward-ball{

width:45px;

left:18px;

bottom:15px;

}

}

/*=========================================
LEVELS
PART 3
=========================================*/

.levels-section{

width:100%;

max-width:1300px;

margin:auto;

padding:20px;

}

.levels-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-top:25px;

}

.level-box{

background:#111111;

border:2px solid rgba(114,220,232,.25);

border-radius:25px;

padding:30px 20px;

text-align:center;

box-shadow:var(--glow);

transition:.35s;

}

.level-box:hover{

transform:translateY(-8px);

border-color:#72DCE8;

}

.level-box h3{

color:#72DCE8;

font-size:1.6rem;

margin-bottom:15px;

text-shadow:0 0 10px #72DCE8;

}

.level-box p{

font-size:1.1rem;

color:#ffffff;

}

/*=========================================
AVAILABLE REWARDS
=========================================*/

.rewards-section{

width:100%;

max-width:1300px;

margin:auto;

padding:20px;

}

.reward-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin-top:25px;

}

.reward-item{

background:#111111;

border:2px solid rgba(114,220,232,.25);

border-radius:25px;

padding:30px;

text-align:center;

transition:.35s;

box-shadow:var(--glow);

}

.reward-item:hover{

transform:translateY(-8px);

border-color:#72DCE8;

}

.reward-item h3{

margin:15px 0;

color:#72DCE8;

font-size:1.4rem;

}

.reward-item p{

font-size:1.1rem;

color:#ffffff;

}

/*=========================================
HOW TO EARN JUMPSHOTS
=========================================*/

.earn-section{

width:100%;

max-width:1300px;

margin:auto;

padding:20px;

}

.earn-grid{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:20px;

margin-top:25px;

}

.earn-card{

background:#111111;

border:2px solid rgba(114,220,232,.25);

border-radius:25px;

padding:30px 20px;

text-align:center;

transition:.35s;

box-shadow:var(--glow);

}

.earn-card:hover{

transform:translateY(-8px);

border-color:#72DCE8;

}

.earn-card h1{

font-size:3rem;

margin-bottom:15px;

}

.earn-card h3{

color:#72DCE8;

margin-bottom:15px;

}

.earn-card p{

color:#ffffff;

font-size:1rem;

line-height:1.6;

}

/*=========================================
POPUPS
PART 4
=========================================*/

.popup-overlay{

position:fixed;

inset:0;

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

display:none;

justify-content:center;

align-items:center;

padding:25px;

z-index:9999;

}

.popup-card{

background:#111111;

width:100%;

max-width:700px;

border-radius:25px;

padding:35px;

border:2px solid #72DCE8;

box-shadow:var(--glow);

position:relative;

}

.close-popup{

position:absolute;

top:20px;

right:20px;

width:45px;

height:45px;

border-radius:50%;

background:#72DCE8;

color:#050505;

font-size:1.2rem;

font-weight:700;

}

.popup-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-top:25px;

}

.popup-reward{

background:#181818;

border-radius:20px;

padding:20px;

border:2px solid rgba(114,220,232,.20);

transition:.35s;

}

.popup-reward:hover{

border-color:#72DCE8;

transform:translateY(-5px);

}

/*=========================================
HISTORY
=========================================*/

.history-section{

width:100%;

max-width:1000px;

margin:auto;

padding:20px;

}

.history-list{

background:#111111;

border:2px solid rgba(114,220,232,.20);

border-radius:25px;

padding:30px;

box-shadow:var(--glow);

min-height:120px;

}

/*=========================================
NOTIFICATIONS
=========================================*/

.level-unlock,

.shot-notification{

position:fixed;

left:50%;

transform:translateX(-50%);

background:#72DCE8;

color:#050505;

padding:18px 35px;

border-radius:50px;

font-weight:700;

box-shadow:var(--glow);

display:none;

z-index:99999;

}

.level-unlock{

top:120px;

}

.shot-notification{

bottom:120px;

}

/*=========================================
CONFETTI
=========================================*/

.confetti-canvas{

position:fixed;

inset:0;

pointer-events:none;

z-index:99998;

}

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

@media(max-width:992px){

.reward-scoreboard{

grid-template-columns:1fr;

}

.levels-grid{

grid-template-columns:repeat(2,1fr);

}

.reward-grid{

grid-template-columns:repeat(2,1fr);

}

.earn-grid{

grid-template-columns:repeat(2,1fr);

}

.basketball-area{

height:320px;

}

.reward-ball{

width:100px;

}

.reward-hoop{

width:90px;

height:auto;

right:15px;

top:15px;

}

@media(max-width:600px){

.levels-grid,

.reward-grid,

.earn-grid,

.popup-grid{

grid-template-columns:1fr;

}

.reward-card{

padding:20px;

}

.reward-card h1{

font-size:2.2rem;

}

.basketball-area{

height:260px;

}

.reward-ball{

width:80px;

left:30px;

bottom:20px;

}

.reward-hoop{

width:90px;

height:90px;

right:20px;

top:20px;

}

.popup-card{

padding:25px;

}

}  
  
/*=========================================
TOAST
=========================================*/

.toast{

position:fixed;

bottom:105px;

left:50%;

transform:translateX(-50%);

background:#72DCE8;

color:#050505;

padding:16px 30px;

border-radius:50px;

font-weight:700;

opacity:0;

pointer-events:none;

transition:.35s;

z-index:99999;

box-shadow:

0 0 15px #72DCE8,

0 0 30px rgba(114,220,232,.55);

}

.toast.show{

opacity:1;

}

/*=========================================
INSTALL POPUP
=========================================*/

.install-popup{

position:fixed;

inset:0;

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

display:none;

justify-content:center;

align-items:center;

flex-direction:column;

padding:25px;

z-index:9999;

}

.install-logo{

width:180px;

margin-bottom:20px;

filter:

drop-shadow(0 0 12px #72DCE8)

drop-shadow(0 0 30px rgba(114,220,232,.65));

}

.install-popup h2{

color:#72DCE8;

text-shadow:

0 0 10px #72DCE8;

margin-bottom:15px;

}

/*=========================================
BACK TO TOP
=========================================*/

.back-to-top{

position:fixed;

right:20px;

bottom:95px;

width:60px;

height:60px;

border-radius:50%;

display:none;

justify-content:center;

align-items:center;

background:#72DCE8;

color:#050505;

font-size:1.5rem;

font-weight:700;

box-shadow:

0 0 15px #72DCE8,

0 0 30px rgba(114,220,232,.60);

z-index:999;

}

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

.bottom-nav{

position:fixed;

bottom:0;

left:0;

width:100%;

background:#111111;

border-top:2px solid #72DCE8;

display:flex;

justify-content:space-around;

align-items:center;

padding:12px 0;

z-index:999;

box-shadow:

0 -5px 20px rgba(114,220,232,.30);

}

.nav-item{

display:flex;

flex-direction:column;

align-items:center;

gap:6px;

font-size:.9rem;

font-weight:600;

color:#ffffff;

transition:.35s;

}

.nav-item.active,

.nav-item:hover{

color:#72DCE8;

text-shadow:

0 0 10px #72DCE8,

0 0 20px rgba(114,220,232,.60);

}

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

.facebook-btn,
.instagram-btn,
.tiktok-btn{

width:240px;

padding:15px 25px;

background:#111111;

border:2px solid #72DCE8;

border-radius:50px;

color:#ffffff;

font-size:1rem;

font-weight:700;

box-shadow:var(--glow);

transition:.35s;

}

.facebook-btn:hover,
.instagram-btn:hover,
.tiktok-btn:hover{

background:#72DCE8;

color:#050505;

transform:translateY(-5px);

}
/*=========================================
FOOTER
=========================================*/

.footer{

background:#0b0b0b;

padding:60px 20px 120px;

margin-top:60px;

border-top:2px solid rgba(114,220,232,.20);

text-align:center;

}

.footer-logo{

width:220px;

margin:0 auto 20px;

border-radius:18px;

filter:

drop-shadow(0 0 18px #72DCE8)

drop-shadow(0 0 35px #72DCE8)

drop-shadow(0 0 65px rgba(114,220,232,.90));

transition:.35s;

}

.footer-logo:hover{

transform:scale(1.05);

filter:

drop-shadow(0 0 22px #72DCE8)

drop-shadow(0 0 45px #72DCE8)

drop-shadow(0 0 80px rgba(114,220,232,1));

}

.footer-title{

color:#72DCE8;

text-shadow:

0 0 10px #72DCE8,

0 0 20px rgba(114,220,232,.60);

}

.footer-links{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

margin:25px 0;

}

.footer-links a{

transition:.30s;

}

.footer-links a:hover{

color:#72DCE8;

text-shadow:

0 0 10px #72DCE8;

}

/*=========================================
LOADING SCREEN
=========================================*/

.loading-screen{

position:fixed;

inset:0;

background:#050505;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:99999;

transition:.50s;

}

.loading-logo{

width:220px;

margin-bottom:25px;

filter:

drop-shadow(0 0 15px #72DCE8)

drop-shadow(0 0 35px rgba(114,220,232,.70));

}


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

@media(max-width:992px){

.home-grid,

.menu-section,

.reward-grid,

.reward-levels,

.rewards-dashboard{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.hero-title{

font-size:2.8rem;

}

.hero-logo{

width:220px;

}

.home-card img{

height:210px;

}

.featured-image,

.featured-banner,

.visit-photo{

height:auto;

}

}

@media(max-width:600px){

.home-grid,

.menu-section,

.reward-grid,

.reward-levels,

.rewards-dashboard{

grid-template-columns:1fr;

}

.hero-buttons,

.drink-buttons{

flex-direction:column;

align-items:center;

}

.order-btn,

.reward-btn,

.favorite-btn,

.order-btn-small{

width:100%;

max-width:320px;

}

.footer-links{

flex-direction:column;

gap:15px;

}

.main-logo{

width:60px;

}

.hero-logo{

width:180px;

}

.hero-title{

font-size:2.2rem;

}

/*=========================================
ORDER OPTIONS PAGES
=========================================*/

.order-page{
max-width:900px;
margin:auto;
padding:30px 20px 120px;
animation:fadeIn .5s ease;
}

.option-card{
background:#111111;
border:2px solid rgba(114,220,232,.20);
border-radius:24px;
padding:25px;
margin-bottom:25px;
box-shadow:
0 0 15px rgba(114,220,232,.25);
transition:.35s;
}

.option-card:hover{
border-color:#72DCE8;
transform:translateY(-5px);
box-shadow:
0 0 20px #72DCE8,
0 0 40px rgba(114,220,232,.45);
}

.option-card h2{
color:#72DCE8;
text-shadow:0 0 10px #72DCE8;
margin-bottom:20px;
}

.required-text{
color:#72DCE8;
font-weight:700;
margin-bottom:15px;
}

.option-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.08);
font-size:1rem;
}

.option-row:last-child{
border-bottom:none;
}

.option-row input{
accent-color:#72DCE8;
transform:scale(1.2);
cursor:pointer;
}

.price-add{
color:#72DCE8;
font-weight:700;
}

.quantity-box{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
}

.quantity-box button{
width:55px;
height:55px;
border-radius:50%;
background:#72DCE8;
color:#050505;
font-size:1.6rem;
font-weight:700;
box-shadow:var(--glow);
}

.quantity-box input{
width:80px;
height:55px;
text-align:center;
font-size:1.2rem;
background:#181818;
border:2px solid #72DCE8;
border-radius:16px;
color:#fff;
}

.special-textarea{
width:100%;
min-height:130px;
background:#181818;
border:2px solid rgba(114,220,232,.25);
border-radius:18px;
padding:18px;
color:#fff;
font-size:1rem;
resize:vertical;
transition:.35s;
}

.special-textarea:focus{
outline:none;
border-color:#72DCE8;
box-shadow:0 0 15px rgba(114,220,232,.55);
}

.order-summary{
background:#111111;
border:2px solid #72DCE8;
border-radius:24px;
padding:30px;
margin:30px 0;
box-shadow:var(--glow);
}

.order-summary h2{
color:#72DCE8;
text-shadow:0 0 10px #72DCE8;
}

.summary-row{
display:flex;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}

.summary-row.total{
font-size:1.3rem;
font-weight:700;
color:#72DCE8;
border-bottom:none;
padding-top:20px;
}

.checkout-buttons{
display:flex;
flex-direction:column;
gap:18px;
margin-top:30px;
}

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/*=========================================
ORDER PAGE HEADER
=========================================*/

.order-header{

text-align:center;

margin-bottom:35px;

}

.order-header h1{

font-size:3rem;

color:#72DCE8;

text-shadow:
0 0 10px #72DCE8,
0 0 20px rgba(114,220,232,.60);

margin-bottom:15px;

}

.order-header p{

max-width:700px;

margin:0 auto 20px;

color:#d4d4d4;

}

.order-header h2{

color:#72DCE8;

font-size:2rem;

font-weight:700;

text-shadow:
0 0 10px #72DCE8;

}

/*=========================================
RADIO & CHECKBOX STYLING
=========================================*/

.option-row{

cursor:pointer;

transition:.30s;

}

.option-row:hover{

color:#72DCE8;

padding-left:10px;

}

.option-row input[type="radio"],

.option-row input[type="checkbox"]{

width:22px;

height:22px;

margin-right:15px;

accent-color:#72DCE8;

}

/*=========================================
SUMMARY TOTAL
=========================================*/

#orderTotal{

color:#72DCE8;

font-size:1.5rem;

font-weight:800;

text-shadow:
0 0 10px #72DCE8,
0 0 20px rgba(114,220,232,.70);

}

#summaryShots{

color:#72DCE8;

font-weight:700;

}

#summaryQuantity{

font-weight:700;

}

/*=========================================
OPTION DIVIDERS
=========================================*/

.option-card hr{

border:none;

height:1px;

background:rgba(114,220,232,.20);

margin:20px 0;

}  

/*=========================================
BUTTONS & QUANTITY
=========================================*/

.order-btn,
.reward-btn{

transition:all .35s ease;

}

.order-btn:hover{

transform:translateY(-3px) scale(1.02);

box-shadow:
0 0 15px #72DCE8,
0 0 30px rgba(114,220,232,.60);

}

.reward-btn:hover{

transform:translateY(-3px);

box-shadow:
0 0 12px rgba(114,220,232,.45);

}

.quantity-box{

margin-top:15px;

}

.quantity-box button{

cursor:pointer;

transition:all .30s ease;

}

.quantity-box button:hover{

transform:scale(1.10);

background:#8EEAF4;

box-shadow:
0 0 15px #72DCE8,
0 0 30px rgba(114,220,232,.60);

}

.quantity-box button:active{

transform:scale(.95);

}

.quantity-box input:focus{

outline:none;

box-shadow:
0 0 12px rgba(114,220,232,.60);

}

/*=========================================
TEXTAREA
=========================================*/

.special-textarea::placeholder{

color:#a8a8a8;

}

.special-textarea:hover{

border-color:#72DCE8;

}

/*=========================================
SMOOTH SCROLL
=========================================*/

html{

scroll-behavior:smooth;

}

/*=========================================
OPTION ROWS
=========================================*/

.option-row{

display:flex;

align-items:center;

justify-content:space-between;

gap:15px;

padding:16px 0;

border-bottom:1px solid rgba(255,255,255,.08);

font-size:1rem;

}

.option-row:last-child{

border-bottom:none;

}

.option-row span:first-of-type{

flex:1;

}

.option-row input{

accent-color:#72DCE8;

cursor:pointer;

width:18px;

height:18px;

}

.price-add{

color:#72DCE8;

font-weight:700;

margin-left:10px;

}  

  /*=========================================
ORDER SUMMARY
=========================================*/

.order-summary{

background:#111111;

border:2px solid #72DCE8;

border-radius:20px;

padding:25px;

margin:30px 0;

box-shadow:0 0 12px rgba(114,220,232,.25);

}

.order-summary h2{

color:#72DCE8;

font-size:1.6rem;

font-weight:700;

margin-bottom:20px;

text-align:center;

}

.summary-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:12px 0;

border-bottom:1px solid rgba(255,255,255,.08);

}

.summary-row:last-child{

border-bottom:none;

}

.summary-row span,

.summary-row strong{

color:#ffffff;

}

.summary-row.total strong{

color:#72DCE8;

font-size:1.35rem;

font-weight:700;

}

  /*=========================================
QUANTITY
=========================================*/

.quantity-box{

display:flex;

align-items:center;

justify-content:center;

gap:18px;

margin-top:15px;

}

.quantity-box button{

width:50px;

height:50px;

border:none;

border-radius:12px;

background:#72DCE8;

color:#111111;

font-size:1.5rem;

font-weight:700;

cursor:pointer;

}

.quantity-box button:hover{

background:#8EEAF4;

}

.quantity-box input{

width:70px;

height:50px;

text-align:center;

font-size:1.2rem;

font-weight:700;

background:#1b1b1b;

color:#ffffff;

border:2px solid #72DCE8;

border-radius:12px;

}

.quantity-box input:focus{

outline:none;

border-color:#72DCE8;

}

  /*=========================================
SPECIAL INSTRUCTIONS
=========================================*/

.special-textarea{

width:100%;

min-height:130px;

padding:15px;

background:#1b1b1b;

color:#ffffff;

font-size:1rem;

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

border:2px solid #72DCE8;

border-radius:15px;

resize:vertical;

box-sizing:border-box;

}

.special-textarea:focus{

outline:none;

border-color:#72DCE8;

}

.option-card p{

line-height:1.6;

color:#d6d6d6;

margin-bottom:15px;

}

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

.checkout-buttons{

display:flex;

flex-direction:column;

gap:15px;

margin:35px 0;

}

.checkout-buttons .order-btn,

.checkout-buttons .reward-btn{

width:100%;

max-width:500px;

margin:0 auto;

display:block;

}

.checkout-buttons .order-btn{

font-size:1.1rem;

font-weight:700;

padding:16px;

}

.checkout-buttons .reward-btn{

font-size:1rem;

font-weight:600;

padding:14px;

}

/*=========================================
OPTION SECTION HEADINGS
=========================================*/

.option-card h2{

color:#72DCE8;

font-size:1.35rem;

font-weight:700;

margin-bottom:8px;

}

.required-text{

color:#72DCE8;

font-size:.9rem;

font-weight:600;

margin-bottom:18px;

text-transform:uppercase;

letter-spacing:.5px;

}

.option-card{

overflow:hidden;

}

.option-card h2::after{

content:"";

display:block;

width:50px;

height:3px;

margin-top:8px;

background:#72DCE8;

border-radius:10px;

}  



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

@media (max-width:768px){

.order-page{

padding:20px 15px 120px;

}

.option-card{

padding:20px;

margin-bottom:20px;

}

.option-card h2{

font-size:1.2rem;

}

.option-row{

font-size:.95rem;

gap:10px;

}

.quantity-box{

gap:12px;

}

.quantity-box button{

width:45px;

height:45px;

font-size:1.3rem;

}

.quantity-box input{

width:65px;

height:45px;

font-size:1rem;

}

.order-summary{

padding:20px;

}

.checkout-buttons .order-btn,

.checkout-buttons .reward-btn{

width:100%;

}

.special-textarea{

min-height:120px;

}

} 

 /*=========================================
FORM CONTROLS
=========================================*/

input[type="radio"],

input[type="checkbox"]{

cursor:pointer;

accent-color:#72DCE8;

}

input[type="number"]{

appearance:textfield;

-moz-appearance:textfield;

}

input[type="number"]::-webkit-outer-spin-button,

input[type="number"]::-webkit-inner-spin-button{

-webkit-appearance:none;

margin:0;

}

textarea{

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

font-size:1rem;

color:#ffffff;

}

textarea::placeholder{

color:#999999;

} 

 /*=========================================
SPACING & LAYOUT
=========================================*/

.option-card + .option-card{

margin-top:25px;

}

.option-card h2{

margin-top:0;

}

.option-card p{

margin:12px 0;

}

.order-summary{

margin-top:35px;

}

.checkout-buttons{

margin-top:35px;

margin-bottom:30px;

}

.checkout-buttons .order-btn{

margin-bottom:10px;

}

.back-to-top{

bottom:95px;

right:20px;

}

 /*=========================================
FINAL OPTIONS PAGE POLISH
=========================================*/

.option-card{

box-sizing:border-box;

}

.option-row{

min-height:48px;

}

.option-row span{

word-break:break-word;

}

.price-add{

white-space:nowrap;

font-weight:700;

}

.order-summary strong{

font-weight:700;

}

.order-summary .summary-row:last-child{

border-bottom:none;

}

.checkout-buttons button{

cursor:pointer;

}

.checkout-buttons button:disabled{

opacity:.6;

cursor:not-allowed;

}

.special-textarea{

transition:border-color .2s ease;

}

.quantity-box input{

font-weight:700;

}

.quantity-box button{

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

}

.option-card label{

cursor:pointer;

} 
/*=========================================
END OF STYLE.CSS
=========================================*/

}

/*=========================================
DESKTOP INSTALL POPUP
=========================================*/

@media (min-width:769px){

.install-popup{

max-width:450px;

left:50%;

top:50%;

right:auto;

bottom:auto;

transform:translate(-50%,-50%);

border-radius:25px;

}

}

/*=====================================
ORDER HISTORY POPUP
======================================*/

.popup-box{

    background:#111111;
    border:2px solid #72DCE8;
    border-radius:25px;
    padding:30px;
    width:90%;
    max-width:600px;
    max-height:80vh;
    overflow-y:auto;
    box-shadow:0 0 20px rgba(114,220,232,.50);

}

.history-item{

    border-bottom:1px solid rgba(255,255,255,.15);
    padding:15px 0;

}

.history-item:last-child{

    border-bottom:none;

}

.history-item h3{

    color:#72DCE8;
    margin-bottom:10px;

}

.history-item p{

    margin:5px 0;

}

/* Contact Form Fix */

.contact-form input,
.contact-form textarea,
input[type="text"],
input[type="email"],
textarea{

    color:#000000 !important;
    caret-color:#000000;
    background:#ffffff;

}

.contact-form input::placeholder,
.contact-form textarea::placeholder{

    color:#777777;

}

input[type="text"],
input[type="email"],
textarea{

    background:#ffffff !important;
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
    caret-color:#000000 !important;

}