/* =========================
   DEFAULT = DARK MODE
========================= */
/* var(--navhr); */

:root {

    /* BACKGROUNDS */

    --bg-main: #050505;
    --bg-secondary: #0b0b0b;
    --bg-navbar: rgba(0,0,0,0.92);
    --bgtheme: rgba(127,127,127,0.12);

    /* TEXT */
    --text-main: #f1f1f1;
    --text-muted: rgba(255,255,255,0.7);

    /* BORDER */
    --border-color: rgba(255,255,255,0.08);

    /* ACCENT = LIGHT BLUE */

    --accent: #15ccf0;
    /* SEARCH */
    --search-bg: #111111;
    --searchhoover: #3d8bfd;

    --navhr: rgba(250, 250, 250, 0.1);
    --linkhoovershadow: rgba(21,204,240,0.7);
    --boxshadow: rgba(0,0,0,0.15);
    --boxshadow2: rgba(0,0,0,0.45);

    --boxshadow3: rgba(0,0,0,0.75);
    --boxshadow4: rgba(0,0,0,0.55);

    --boxshadow5: rgba(20,20,20,0.95);
    --boxshadow6: rgba(8,8,8,0.98);

    --boxshadow7: rgba(21,204,240,0.22);

    --boxshadow8: rgba(255,255,255,0.03);
    --boxshadow9: rgba(255,255,255,0.01);
    --text-placeholder: rgba(117, 117, 117, 1);

  
}

/* =========================
   LIGHT MODE
========================= */

:root.light-theme  {

    /* BACKGROUNDS */

    --bg-main: #f1f1f1;
    --bg-secondary: #f5f5f5;
    --bg-navbar: rgba(255,255,255,0.96);
     --bgtheme: rgba(127,127,127,0.12);

    /* TEXT */
    --text-main: #111111;
    --text-muted: rgba(0,0,0,0.7);

    /* BORDER */
    --border-color: rgba(0,0,0,0.08);

    /* ACCENT = ORANGE */
    --accent: #ff7a1a;

    /* SEARCH */
    --search-bg: #ffffff;
    --searchhoover: #f53c23;

    --navhr: rgba(19, 17, 17, 0.384);
    --linkhoovershadow: rgba(255,140,66,0.35);
    --boxshadow: rgba(255,255,255,0.15);
    --boxshadow2: rgba(255,255,255,0.45);

    
    --boxshadow3: rgba(255,252,255,0.75);
    --boxshadow4: rgba(255,255,255,0.55);

    --boxshadow5: rgba(235,235,235,0.95);
    --boxshadow6: rgba(247,247,247,0.98);

    --boxshadow7: rgba(243,51,15,0.22);
    
    --boxshadow8: rgba(255,255,255,0.45);
    --boxshadow9: rgba(238, 238, 238, 1);
    --text-placeholder: rgba(0,0,0,0.45);
}



html {
    background: #050505;
}

html.light-theme {
    background: #f1f1f1;
}



.navbar-nav {
      float:none;
      margin:0 auto;
      text-align: center;
  }

  .navbar-nav > li {
      display: inline-block;
      float:none;
      font-size:120% !important;
  }

.navhr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid var(--navhr);
}

  .dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0; 
  }


@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

body {

    background: var(--bg-main);

    color: var(--text-main);

    height: 100%;
    width: 100%;

    margin: 0;

    display: flex;
    flex-direction: column;

    background-repeat: no-repeat;

    font-family: 'Trebuchet MS', sans-serif;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

/* NAVBAR */



/* BRAND */

.modern-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    overflow: hidden;
}

.brand-text {
    color: var(--text-main);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 1px;
}

/* LOGO SLIDE */

.logo-wrapper {
    width: 0;
    overflow: hidden;
    transition: 0.45s ease;
}

.logo-slide {
    width: 2.6rem;
    transform: translateX(-30px);
    transition: 0.45s ease;
}

.modern-brand:hover .logo-wrapper {
    width: 3rem;
}

.modern-brand:hover .logo-slide {
    transform: translateX(0);
}


.modern-navbar .nav-item {
    display: flex;
    align-items: center;
}
/* NAV LINKS */

.modern-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    color: var(--text-main);

    text-decoration: none;

    font-weight: 500;

    transition: 0.3s ease;

    padding: 0.35rem 0;

    line-height: 1;
}

.modern-link:hover {
    color: var(--accent);
    text-shadow: 0 0 10px  var(--linkhoovershadow);
}

.modern-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 0;
    height: 0.12rem;

    background: var(--accent);

    transition: width 0.35s cubic-bezier(.65,.05,.36,1);
}

.modern-link:hover::after {
    width: 100%;
}

.modern-navbar {

    background:
        linear-gradient(
            to bottom,
            var(--bg-navbar),
            var(--bg-secondary)
        );

    backdrop-filter: blur(1rem);

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

    box-shadow:
        0 0.1rem 1.2rem var(--boxshadow);

    padding: 1rem 1.3rem;

    z-index: 2000;
}

/* =========================
   DROPDOWN
========================= */

.modern-dropdown {

    position: relative;

    display: flex;

    align-items: center;
}

/* TOGGLE */

.modern-dropdown .dropdown-toggle {

    display: inline-flex;

    align-items: center;


}

/* REMOVE BOOTSTRAP ARROW */

.modern-dropdown .dropdown-toggle::after {

    display: none !important;
}

/* CUSTOM LEFT ARROW */

.modern-dropdown .dropdown-toggle::before {

    content: "▾";

    color: var(--text-main);

    font-size: 1.5rem;

    transition: transform 0.3s ease;

    display: inline-block;

    transform-origin: center;
}

/* ROTATE ARROW */

.modern-dropdown:hover .dropdown-toggle::before {

    display: block;
    transform: rotate(180deg);
    color: var(--accent);
}

/* MENU */

.modern-dropdown .dropdown-menu {

    position: absolute !important;

    top: calc(100%);

    left: 50%;

    transform: translateX(-50%);

    background: var(--bg-secondary) !important;

    border: 0.06rem solid var(--border-color);

    border-radius: 1rem;

    padding: 0.6rem;

    min-width: 14rem;

    box-shadow:
        0 1rem 2rem var(--boxshadow2);

    overflow: hidden;
}

/* ITEMS */

.modern-menu .dropdown-item {

    position: relative;

    display: block;

    width: 100%;

    color: var(--text-main) !important;

    text-decoration: none;

    padding: 0.8rem 1rem;

    border-radius: 0.7rem;

    background: transparent !important;

    transition:
        color 0.3s ease,
        background 0.3s ease;

    overflow: hidden;
}

/* UNDERLINE */

.modern-menu .dropdown-item::after {

    content: "";

    position: absolute;

    left: 1rem;

    bottom: 0.45rem;

    width: 0;

    height: 0.12rem;

    background: var(--accent);

    transition:
        width 0.35s cubic-bezier(.65,.05,.36,1);
}

/* HOVER */

.modern-menu .dropdown-item:hover {

    color: var(--accent) !important;

    /* background: rgba(21,204,240,0.08) !important; */

    /* text-shadow:
        0 0 0.6rem rgba(21,204,240,0.45); */
}

.modern-menu .dropdown-item:hover::after {

    width: calc(100% - 2rem);
}






/*MENU*/

.modern-menu {

    background: var(--bg-secondary) !important;

    border: 0.06rem solid var(--text-muted);

    border-radius: 1rem;

    padding: 0.6rem;

    min-width: 14rem;

    box-shadow:
        0 1rem 2rem var(--boxshadow2);
}



.modern-dropdown {

    position: relative;
}


/* FLAGS */

.flag-btn {

    background: transparent;

    border: none;

    padding: 0;

    display: flex;

    align-items: center;
}

.flag-btn img {

    width: 2.8rem;

    aspect-ratio: 3 / 2;

    object-fit: cover;

    border-radius: 0.45rem;

    transition: 0.25s ease;

    display: block;
}

.flag-btn:hover img {

    transform: scale(1.08);

    box-shadow:
        0 0 0.8rem var(--linkhoovershadow);
}


/* =========================
   CART
========================= */

.cart-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    color: var(--text-main);

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

/* ICON */

.cart-icon {

    font-size: clamp(1.6rem, 2vw, 2rem);

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

.cart-btn:hover .cart-icon {

    color: var(--accent);

    transform: translateY(-0.08rem);
}

/* =========================
   COUNTER
========================= */

.cart-counter {

    position: absolute;

    top: -0.35rem;

    right: -0.55rem;

    min-width: 1.25rem;

    height: 1.25rem;

    padding:
        0 0.32rem;

    border-radius: 999rem;

    background: var(--accent);

    color: black;

    font-size: 0.72rem;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 1;

    box-shadow:
        0 0 0.7rem var(--linkhoovershadow);

    border:
        0.08rem solid  var(--border-color);
}

/* =========================
   BOUNCE ANIMATION
========================= */

.cart-bounce {

    animation:
        cartBounce 0.55s ease;
}

@keyframes cartBounce {

    0% {

        transform: scale(1);
    }

    30% {

        transform: scale(1.25);
    }

    50% {

        transform: scale(0.92);
    }

    70% {

        transform: scale(1.12);
    }

    100% {

        transform: scale(1);
    }
}

/* SEARCH */

.modern-search {
    /* overflow: hidden; */
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--search-bg);
}

.modern-search input {

    width: clamp(10rem, 15vw, 16rem);

    min-width: 0;

    background: transparent;

    border: none;

    color: var(--text-main);

    padding: 0.7rem 1rem;

    outline: none;
}

.modern-search button {
    border: none;
    background: var(--accent);
    color: var(--text-main);
    padding: 0 18px;
    transition: 0.3s;
    
} 



.modern-search button:hover {
    background: var(--searchhoover);
} 

/* MOBILE */

/* @media (max-width: 75rem) {

    .modern-dropdown .dropdown-menu {

        position: static !important;

        width: 100%;

        text-align: center;

        margin-top: 0.8rem;

        margin-bottom: 1rem;
    }

    .modern-navbar .navbar-nav {

        align-items: center;
    }

    .modern-navbar .nav-item {

        width: 100%;
    }

    .modern-link {

        justify-content: center;
    }
} */

@media (max-width: 1199px) {

    .navbar-nav {

        width: 100%;

        text-align: center;

        align-items: center;
    }

    .navbar-nav .nav-item {

        width: 100%;
    }

    .navbar-nav .modern-link {

        display: block;

        width: 100%;
    }

    .dropdown-menu {

        text-align: center;
    }
}

/* DESKTOP */

.navbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navbar-tools {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navbar-search {
    display: flex;
    align-items: center;
}

.navbar-search .modern-search {
    width: 300px;
}

/* MOBILE */

@media (max-width: 1199px) {

    .navbar-right {

        display: flex;
        flex-direction: column;

        align-items: stretch;

        width: 100%;

        margin-top: 1rem;

        gap: 1rem;
    }

    .navbar-tools {

        display: flex;

        align-items: center;

        justify-content: center;

        flex-wrap: nowrap;

        width: 100%;

        gap: 1rem;

        
    }

    .navbar-search {

        width: 100%;
        
    }

    .navbar-search .modern-search {

        width: 100% !important;

        max-width: none !important;
    }
}


@media (min-width: 1200px) {

    .navbar-search {
        margin-left: 1rem;
    }
}

@media (max-width: 1199px) {

    .modern-search {

        display: flex !important;

        position: relative;

        width: 100%;
    }

    #search-input {

        flex: 1;
    }

    #search-button {

        position: static !important;

        transform: none !important;

        margin-left: 0.5rem;
    }
}


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

.modern-footer {

    padding:
        2rem 1rem;

    background: var(--footer-bg);

    border-top:
        0.06rem solid var(--border-color);
}

.modern-footer .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 1rem;
}

.modern-footer p {

    color:  var(--text-muted);

    margin: 0;
}

.footer-links {

    display: flex;

    gap: 2rem;

    flex-wrap: wrap;
}

.footer-links a {

    color: var(--text-muted);

    text-decoration: none;

    transition: 0.3s ease;
}

.footer-links a:hover {

    color: var(--accent);
}






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

.theme-btn {

    border: none;

    background: transparent;

    color: var(--text-main);

    width: 2.5rem;
    height: 2.5rem;

    border-radius: 999px;

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

    font-size: 1.1rem;

    transition:
        all 0.25s ease;
}

.theme-btn:hover {

    background:
        var(--bgtheme);
}

.active-theme {

    background: var(--accent);

    color: var(--text-main);

    box-shadow:
        0 0 0.8rem var(--boxshadow);
}




* {

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}