@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300..900&family=Syne:wght@400..800&display=swap');

:root{

    /* 60% → Base / surfaces */
    --secondary: #f5f1eb;

    /* 30% → Main brand tone */
    --primary: #1f2a30;

    /* 10% → Accent */
    --accent: #232323;

    /* Supporting palette */
    --primary-alt: #2e3b42;
    --secondary-alt: #ebe4dc;

    --text: #232323;
    --text-light: #6d6d6d;

    --card: rgba(255,255,255,0.72);
    --glass: rgba(255,255,255,0.12);

    --border: rgba(255,255,255,0.18);

    --success: #7da27d;
    --danger: #bb4b3f;
    
    --shadow:
        0 10px 30px rgba(0,0,0,0.08);

    --radius: 18px;
}

/* GLOBAL */

body{
    font-family: "Outfit", sans-serif;
    color: var(--text);
    background:
        linear-gradient(
            135deg,
            rgba(0,0,0,0.55),
            rgba(0,0,0,0.15)
        ),
        url('./uploads/fatboyz-bg.jpg');

    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    overflow-x:hidden;
}

/* ambient overlay */

#wrap::before{
    content:'';
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at top left,
        rgba(217,122,43,0.15),
        transparent 35%),

        radial-gradient(circle at bottom right,
        rgba(255,255,255,0.08),
        transparent 30%);

    backdrop-filter: blur(4px);
    z-index:-1;
}

/* NAVBAR */

.navbar .container{
    background: rgba(31,42,48,0.72) !important;
    backdrop-filter: blur(18px);
    border:1px solid var(--border);
    box-shadow: var(--shadow);
}

.storeinfo .desk-top-title{
    font-family: "Syne", sans-serif;
    font-size: 42px !important;
    font-weight: 800;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#bs-navbar{
    margin-bottom:3rem;

    p{
        color: rgba(255,255,255,0.72) !important;
        font-size:14px;
        letter-spacing:1px;
    }
}
@media(max-width:1024px){
    .storeinfo .desk-top-title{
        color:#000 !important;
    }

    #bs-navbar p{
        color:#000 !important;
    }
}

/* SIDE NAV */

#left-nav{
  overflow:hidden;
  left:-1px;
  
  center{
      display:none;
  }
  
  #store-nav:before{
      content:'';
      left:0;
      top:0;
      width:100%;
      height:100%;
      position:absolute;
  }
  
  #store-nav{
    position:relative;
    padding:1rem;
    height:180px !important;
    background: #000;
  }

  #nav_profile_pic:before{
    content:'';
    position:absolute;
    left:40px;
    width:90%;
    height:90%;
    background:url('./images/logo.png');
    background-repeat:no-repeat;
    background-size:contain !important;
  }

  ul li{
    border:none;
    /* border-bottom: 1px solid var(--tertiary); */
    margin:10px;     
    background:var(--button-text-color) !important;

    a {
      font-weight:500 !important;
      color: #393939 !important;
    }
  }
}

/* MENU BAR */

#menu{
    background: rgb(31 42 48 / 90%);
}

#menu-items{
    background:#fff;
}

#menu-ul{
    box-shadow: var(--shadow);
    text-align:center;
}

#menu-ul li:hover{
    background-color:none !important;
}

#menu-ul li a{
    color: rgba(255,255,255,0.65) !important;
    font-weight:600 !important;
}

#menu-ul li a:hover{
    background: rgb(156 18 18 / 8%) !important;
    color: #fff !important;
}

#menu-cont > #menu > #menu-ul > li > a.menu-active{
    background: var(--accent) !important;
    color:#fff !important;
    box-shadow:
        0 10px 25px rgba(217,122,43,0.35);
    border-bottom:none !important;
}


.pn-Advancer {
    background: rgb(31 42 48 / 0%) !important;
}

.pn-Advancer_Icon {
    fill: #fff !important;
}
/* SECTION TITLE */

#menu-items .menu-item h1{
    font-family: "Syne", sans-serif;
    font-size: 38px !important;
    font-weight: 800;
    color: var(--primary) !important;
    text-align:center;
    margin-bottom:25px;
    position:relative;
    background:#FFF !important;
}


/* PRODUCT CARDS */

#menu-items ul li.group,
#menu-items ul li.single{

    background: var(--card);

    border:1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius);

    overflow:hidden;
    transition: all .35s ease;

    box-shadow: var(--shadow);
}

/* modern glow hover */

#menu-items ul li.group:hover,
#menu-items ul li.single:hover{
    background: rgba(255,255,255,0.82);

    box-shadow:
        0 18px 40px rgba(0,0,0,0.18),
        0 0 0 1px rgba(255,255,255,0.15);
}

/* image */

.item-thumb{
    padding:12px;
}

.item-thumb img{
    border-radius: 14px;
    transition: transform .4s ease;
}

#menu-items ul li.group:hover .item-thumb img,
#menu-items ul li.single:hover .item-thumb img{
    transform: scale(1.06);
}

/* title */

.item-title{
    color: var(--primary) !important;
    font-weight: 800;
    font-size: 20px;
}

/* desc */

.item-description{
    color: var(--text-light);
    line-height:1.6;
}

/* price */

.item-price{
    color: var(--accent) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
}

/* buttons */

.btn-primary,
.modal-footer button,
#item-buttons button{

    background: var(--accent) !important;
    border:none !important;
    color:#fff !important;
    border-radius: 14px;

    font-weight:700 !important;
    letter-spacing:.5px;

    transition: all .3s ease;
}

.btn-primary:hover,
.modal-footer button:hover,
#item-buttons button:hover{

    transform: translateY(-1px);

    box-shadow:
        0 12px 24px rgba(217,122,43,0.35);
}

.qty-btn-popup i{
    color:#ffff !important;
}

/* MODAL */

.modal-content{

    background:
        rgba(255,255,255,0.78);

    backdrop-filter: blur(20px);

    border:none !important;
    border-radius: 24px;
    overflow:hidden;

    box-shadow:
        0 20px 50px rgba(0,0,0,0.25);
}

.modal-header{
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-alt)
        ) !important;

    color:#fff !important;
    border:none;
}

.modal-title{
    color:#fff !important;
    font-family: "Syne", sans-serif;
    letter-spacing:1px;
}

.input-group-label{
  color: #333333;
  border:none;
  box-shadow:0 3px 6px #0000002b ;
  padding:9px !important;
}

.input-group-label:hover {
    background-color: #9f9f9f !important;
    color: #ffffff;
}

.modal-footer input, input:checked+.input-group-label,.modal-deals .modal-header button, .modal-deals .modal-footer button, .modal-deals .modal-body .auto-deal-selection button, .modal-deals .modal-body .deal-modal-body-selection-list button{
    background-color:var(--primary) !important;
    color:#FFF !important;
    font-weight:600 !important; 
}

.btn-primary {
    border-color: var(--primary)  !important;
    transition: all 0.3s ease !important;
}


/* ALERTS */

.location .alert-danger{

    background: rgba(187,75,63,0.12);
    border:none;
    border-left:4px solid var(--danger);

    color:#fff;
    backdrop-filter: blur(10px);

    border-radius: 14px;
}

/* MOBILE */

@media(max-width:768px){

    .storeinfo .desk-top-title{
        font-size:28px !important;
    }

    #menu-ul{
        justify-content:flex-start;
        overflow-x:auto;
    }

    #menu ul li a {
        background:none;
        color: rgba(255,255,255,0.65) !important;
    }


    #menu-items ul li.group,
    #menu-items ul li.single{
        margin-bottom:16px;
    }
}