:root{
  --accent: #ff7f36;
  --accent-strong: #ff3f2b;
  --white: #ffffff;
  --muted: rgba(255,255,255,0.08);
  --glass: rgba(255,255,255,0.03);
  --backdrop-gray: rgba(40,40,40,0.42);
  --focus-ring: 0 0 18px rgba(255,127,102,0.45);
  --glow-dense: 0 6px 40px 6px rgba(255,97,54,0.30), inset 0 0 20px 2px rgba(255,97,54,0.18);
  --transition-fast: 180ms cubic-bezier(.2,.9,.2,1);
  --layout-gap: 14px;
}

html::before{
  content:"";
  position:fixed;
  inset:0;
  background:var(--backdrop-gray);
  pointer-events:none;
  z-index:0;
  backdrop-filter: blur(3px);
  transition:opacity var(--transition-fast);
}

body, main, .container, .section{
  position:relative;
  z-index:2;
}

#cart-form,
#cart-form .cart,
#cart-form .card,
#cart-form .modal-content,
#cart-form .modal-body,
#cart-form .modal-dialog,
#cart-form .shop-button{
  box-shadow: var(--glow-dense);
  border-radius:10px;
  transition:box-shadow var(--transition-fast), border-color var(--transition-fast);
  border: 1px solid rgba(255,127,102,0.08);
  background-clip: padding-box;
}

#shop,
.select-server,
.select-server .card,
#shop .card{
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(16,16,16,0.96), rgba(10,10,10,0.94));
}

#payment-type .card,
#accept-payment .modal-content,
#payment-type .modal-content{
  border: 1px solid rgba(255,127,102,0.12);
  box-shadow: 0 10px 60px rgba(255,97,54,0.22);
}

.form-control,
input[type="text"],
input[type="email"],
textarea{
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius:6px;
  padding:10px 12px;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  white-space:normal;
  word-break:break-word;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus{
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 4px rgba(255,63,43,0.12), 0 0 16px rgba(255,63,43,0.22);
}

.btn,
button,
a.btn{
  border-radius:8px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
  color: var(--white);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover,
button:hover,
a.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}
.btn:focus,
button:focus,
a.btn:focus,
.btn:active,
button:active{
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 4px rgba(255,63,43,0.12), 0 0 18px rgba(255,63,43,0.25);
}

.shop-button,
.button-username,
.chosen-product,
.chosen-product .btn-inner-text{
  background: linear-gradient(180deg, rgba(255,127,102,0.06), rgba(0,0,0,0.04));
  padding: 12px 14px;
  border-radius:8px;
  border: 1px solid rgba(255,127,102,0.06);
  display:flex;
  align-items:center;
  gap:8px;
}

#shop{
  border-radius:10px;
  padding:12px;
  margin-top:12px;
  margin-bottom:20px;
  max-height:52vh;
  overflow:auto;
}

.select-server{
  margin-bottom:18px;
}

.navbar-collapse.collapse{
  border-radius:10px;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  padding:12px;
}
.navbar-collapse.collapse.show{
  border: 2px solid var(--accent);
  box-shadow: 0 12px 60px rgba(255,127,102,0.12);
  background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.78));
}

.navbar-collapse .collapse-brand img,
.navbar-collapse .collapse-brand a img{
  display:none !important;
}

.navbar-brand img,
.navbar-brand .navbar-brand-dark{
  width:72px !important;
  height:72px !important;
  border-radius:14px !important;
  object-fit:cover;
  display:inline-block;
}

.navbar-collapse.collapse.show .nav-link{
  display: inline-block;
  margin:8px 6px;
  padding:10px 14px;
  border-radius:8px;
  border: 1px solid #ffffff;
  color: var(--white) !important;
  background: #000000;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
  text-align:center;
  min-width:140px;
  box-sizing:border-box;
}

.navbar-collapse.collapse.show .nav-link:hover,
.navbar-collapse.collapse.show .nav-link:focus,
.navbar-collapse.collapse.show .nav-link:active{
  border-color: var(--accent-strong);
  box-shadow: 0 6px 30px rgba(255,63,43,0.12);
  transform: translateY(-1px);
}

.navbar-toggler{
  border-radius:6px;
  border: 1px solid rgba(255,255,255,0.10);
  padding:8px;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
  background: transparent;
}
.navbar-toggler:focus{
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 6px rgba(255,63,43,0.10);
}

.card{
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom:18px;
  padding:0;
  border-radius:10px;
  overflow:hidden;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.card:active,
.card:focus{
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 6px rgba(255,63,43,0.10);
}

.card .card-body h5,
.card .card-body p,
.chosen-product,
.btn-inner-text,
.shop .card-body h5,
.shop .card-body p{
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.chosen-product,
.btn-inner-text{
  display:inline-block;
  max-width: calc(100% - 48px);
  vertical-align:middle;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
}

.shop::-webkit-scrollbar{width:10px;height:8px;}
.shop::-webkit-scrollbar-thumb{background: linear-gradient(180deg, var(--accent), var(--accent-strong));border-radius:10px;}
.shop::-webkit-scrollbar-track{background: transparent;}

#shop-section .row,
.main-instruction .row,
#sections .row{
  row-gap: var(--layout-gap);
  column-gap: calc(var(--layout-gap) + 4px);
}

.main-instruction .col-md-6{
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--accent-strong);
  padding: 22px;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}

.text-white, h1, h2, h3, p{
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

@media (max-width:768px){
  :root{
    --layout-gap: 10px;
  }
  :root{
    --glow-dense: 0 6px 30px 4px rgba(255,97,54,0.22);
  }
  #cart-form, #cart-form .cart, #cart-form .card{
    box-shadow: 0 8px 28px rgba(255,97,54,0.20);
  }
  .navbar-collapse.collapse.show{
    padding: 10px;
  }
  .navbar-collapse.collapse.show .nav-link{
    width:100%;
    margin:8px 0;
    box-sizing:border-box;
    text-align:left;
    min-width: initial;
  }
  .navbar-brand img,
  .navbar-brand .navbar-brand-dark{
    width:56px !important;
    height:56px !important;
    border-radius:12px !important;
  }
}

nav[role="navigation"], .navbar, .modal{
  z-index: 105 !important;
}