:root{

--primary:#b36a36;
--secondary:#d9a06c;
--accent:#e7caa7;

--dark:#111111;
--card:#1c1c1c;

--text:#ffffff;

}

/* BODY BACKGROUND */

body{

margin:0;
font-family:Arial, sans-serif;
color:var(--text);

background-color:#000;

/* centered boutique background */

background-image:url("media/boutique-bg.png");
background-position:center center;
background-repeat:no-repeat;
background-size:contain;
background-attachment:fixed;

}

/* HEADER */

.header{

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

padding:12px 20px;

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

backdrop-filter:blur(6px);

box-shadow:0 4px 15px rgba(0,0,0,.7);

position:relative;
z-index:1000;

}

/* LOGO AREA */

.left{

display:flex;
align-items:center;
gap:12px;

}

.logo{

height:42px;

}

.title{

font-size:20px;
font-weight:700;

color:var(--secondary);

}

/* DESKTOP NAV */

.nav-desktop{

display:flex;
gap:15px;

}

.nav-desktop button{

background:none;
border:none;

color:var(--text);

font-size:15px;

cursor:pointer;

padding:6px 10px;

transition:.2s;

}

.nav-desktop button:hover{

color:var(--secondary);

}

/* HAMBURGER */

.hamburger{

font-size:26px;
color:var(--secondary);
cursor:pointer;
display:none;

}

/* MOBILE MENU */

.mobile-menu{

position:absolute;

top:65px;
right:15px;

width:200px;

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

border-radius:8px;

box-shadow:0 10px 30px rgba(0,0,0,.8);

display:none;
flex-direction:column;

z-index:999;

}

.mobile-menu button{

padding:14px;

border:none;

background:none;

color:white;

text-align:left;

cursor:pointer;

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

}

.mobile-menu button:hover{

background:rgba(255,255,255,.05);

}

.mobile-menu.active{

display:flex;

}

/* BOOTH GRID */

.grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(230px,1fr));

gap:22px;

padding:25px;

}

/* BOOTH CARDS */

.booth-card{

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

border-radius:12px;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.6);

transition:.3s;

}

.booth-card:hover{

transform:translateY(-6px);

box-shadow:0 12px 25px rgba(0,0,0,.9);

}

/* BOOTH IMAGE */

.booth-img{

width:100%;
height:160px;

object-fit:cover;

}

/* BOOTH INFO */

.booth-info{

padding:14px;

}

.booth-info h3{

margin:0;
color:var(--secondary);
font-size:16px;

}

.booth-info p{

margin:5px 0 12px 0;

color:#ddd;
font-size:14px;

}

/* ENTER BUTTON */

.booth-info button{

background:var(--primary);

border:none;

padding:8px 14px;

border-radius:6px;

color:white;

cursor:pointer;

font-size:14px;

transition:.2s;

}

.booth-info button:hover{

background:var(--secondary);

}

/* MOBILE */

@media(max-width:768px){

.nav-desktop{

display:none;

}

.hamburger{

display:block;

}

/* FORCE 3 BOOTHS PER ROW */

.grid{

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

gap:10px;

padding:15px;

}

/* SMALLER CARDS */

.booth-img{

height:95px;

}

.booth-info{

padding:8px;

}

.booth-info h3{

font-size:12px;

}

.booth-info p{

font-size:11px;

margin:3px 0 6px 0;

}

.booth-info button{

font-size:11px;

padding:5px 6px;

}

}

/* LOGIN WRAPPER */

.login-wrapper{

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

min-height:70vh;

padding:20px;

}

/* LOGIN CARD */

.login-card{

width:100%;
max-width:380px;

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

backdrop-filter:blur(10px);

padding:30px;

border-radius:12px;

box-shadow:0 10px 30px rgba(0,0,0,.8);

text-align:center;

}

/* LOGIN HEADER */

.login-header{

display:flex;
flex-direction:column;
align-items:center;
gap:10px;
margin-bottom:20px;

}

.login-logo{

height:55px;

}

.login-title{

margin:0;
color:var(--secondary);

}

/* LOGIN INPUTS */

.login-card input{

width:90%;

padding:12px;

margin-bottom:14px;

border:none;

border-radius:6px;

background:#222;

color:white;

font-size:14px;

outline:none;

}

/* LOGIN BUTTON */

.login-btn{

width:100%;

padding:12px;

border:none;

border-radius:6px;

background:var(--primary);

color:white;

font-size:15px;

cursor:pointer;

transition:.2s;

}

.login-btn:hover{

background:var(--secondary);

}

/* LOGIN LINKS */

.login-links{

margin-top:14px;

font-size:13px;

}

.login-links a{

color:var(--secondary);

text-decoration:none;

margin-left:6px;

}

.login-links a:hover{

text-decoration:underline;

}

/* SIGNUP WRAPPER */

.signup-wrapper{

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

min-height:70vh;

padding:20px;

}

/* SIGNUP CARD */

.signup-card{

width:100%;
max-width:420px;

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

backdrop-filter:blur(10px);

padding:30px;

border-radius:12px;

box-shadow:0 10px 30px rgba(0,0,0,.8);

text-align:center;

}

/* HEADER */

.signup-header{

margin-bottom:20px;

}

.signup-logo{

height:55px;
margin-bottom:10px;

}

.signup-title{

margin:0;
color:var(--secondary);

}

.signup-sub{

font-size:13px;
color:#ddd;

}

/* FORM INPUTS */

.signup-card input,
.signup-card select{

width:90%;

padding:12px;

margin-bottom:14px;

border:none;

border-radius:6px;

background:#222;

color:white;

font-size:14px;

outline:none;

}

/* SIGNUP BUTTON */

.signup-btn{

width:100%;

padding:12px;

border:none;

border-radius:6px;

background:var(--primary);

color:white;

font-size:15px;

cursor:pointer;

transition:.2s;

}

.signup-btn:hover{

background:var(--secondary);

}

/* LINKS */

.signup-links{

margin-top:14px;

font-size:13px;

}

.signup-links a{

color:var(--secondary);

text-decoration:none;

margin-left:6px;

}

.signup-links a:hover{

text-decoration:underline;

}