/* =========================================================
   RIVERGRIEF — EASYDONATE 2D MINECRAFT SKIN
   Paste this file into EasyDonate custom CSS.
   Built for the HTML structure supplied by the store.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --rg-night:#080711;
  --rg-deep:#0d0b1d;
  --rg-panel:#15112a;
  --rg-panel-2:#1c1536;
  --rg-purple:#8f4dff;
  --rg-purple-2:#bd73ff;
  --rg-blue:#49c9ff;
  --rg-water:#245a9e;
  --rg-water-2:#337bc4;
  --rg-grass:#667d42;
  --rg-dirt:#7b4e32;
  --rg-stone:#4c5261;
  --rg-text:#f2efff;
  --rg-muted:#9f9ab8;
  --rg-pixel-shadow:#05040b;
  --rg-white:#ffffff;
  --rg-radius:3px;
  --rg-border:2px;
  --rg-pixel:0 4px 0 var(--rg-pixel-shadow), inset 0 2px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.22);
}

html{scroll-behavior:smooth; background:var(--rg-night)!important;}
body,
body.bg-elegant-dark,
main.bg-elegant-dark,
#sections.bg-elegant-dark{
  background:
    linear-gradient(180deg, rgba(13,11,29,.99), rgba(8,7,17,1)) !important;
  color:var(--rg-text)!important;
  font-family:'VT323',monospace!important;
  letter-spacing:.3px;
}

/* ---- global pixel rendering ---- */
img{image-rendering:pixelated;}
a,
button,
input,
textarea,
select{font-family:inherit!important;}
a{color:var(--rg-purple-2); transition:.18s ease;}
a:hover{color:#d3adff; text-decoration:none!important;}

/* ---- navbar ---- */
.navbar-theme-dark.navbar-main{
  background:rgba(8,7,17,.94)!important;
  border-bottom:2px solid #28203f!important;
  box-shadow:0 4px 0 rgba(0,0,0,.42), 0 10px 30px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(5px);
}
.navbar .container{max-width:1180px!important;}
.navbar-brand img,
.collapse-brand img,
.footer-brand img{
  max-height:42px!important;
  filter:drop-shadow(4px 4px 0 #05040b) drop-shadow(0 0 12px rgba(143,77,255,.22));
}
.navbar-nav .nav-item{margin:0 3px!important;}
.navbar-nav .nav-link{
  color:#dcd6f2!important;
  padding:.8rem 1rem!important;
  border:2px solid transparent;
  font-family:'Press Start 2P',monospace!important;
  font-size:.62rem!important;
  text-transform:uppercase;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link{
  color:#fff!important;
  background:#251a48!important;
  border-color:#6f3aca!important;
  box-shadow:4px 4px 0 #08070d, inset 0 2px 0 rgba(255,255,255,.08)!important;
  transform:translate(-1px,-1px);
}
.navbar-nav .nav-link i{color:var(--rg-purple-2)!important; margin-right:7px;}
.navbar-toggler{border:2px solid #6f3aca!important; box-shadow:3px 3px 0 #07060b;}

/* ---- hero ---- */
#welcome-section{
  min-height:620px!important;
  background:
    linear-gradient(180deg, rgba(10,8,20,.18), rgba(8,7,17,.86)),
    radial-gradient(circle at 75% 35%, rgba(143,77,255,.23), transparent 28%),
    linear-gradient(180deg,#14102e 0%,#10152d 46%,#0d1730 65%,#0a1022 100%) !important;
  position:relative!important;
  overflow:hidden!important;
}
#welcome-section:before{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:42%;
  background:
    linear-gradient(180deg, rgba(18,44,77,.00), rgba(4,8,18,.4) 20%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 34px, transparent 34px 68px),
    linear-gradient(180deg,#235b99 0%,#1c4b83 58%,#173862 100%);
  border-top:4px solid #090a12;
  box-shadow:inset 0 12px 0 rgba(96,194,255,.08), inset 0 -10px 0 rgba(0,0,0,.2);
}
#welcome-section:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:29%;height:10px;
  background:repeating-linear-gradient(90deg, transparent 0 24px, rgba(101,213,255,.26) 24px 44px, transparent 44px 74px);
  animation:rgWater 4s linear infinite;
  opacity:.8;
}
@keyframes rgWater{to{transform:translateX(74px)}}

#welcome-section .container{position:relative;z-index:3;}
.shop-title{position:relative;z-index:4;}
.shop-title .general-online{margin-bottom:25px!important;}
.general-online span{
  display:inline-block!important;
  padding:8px 10px!important;
  background:#1b1733!important;
  border:2px solid #4e3b76!important;
  box-shadow:4px 4px 0 #07060b!important;
  font-family:'Press Start 2P',monospace!important;
  font-size:.58rem!important;
  color:#b9a9d9!important;
}
.shop-name{
  color:#fff!important;
  font-family:'Press Start 2P',monospace!important;
  font-size:clamp(2.6rem,7vw,6rem)!important;
  line-height:1.05!important;
  text-transform:uppercase;
  text-shadow:7px 7px 0 #07060b, 0 0 24px rgba(143,77,255,.28)!important;
  letter-spacing:-2px;
}
.shop-name:after{
  content:"";
  display:block;
  width:min(430px,86%);
  height:8px;
  margin-top:24px;
  background:linear-gradient(90deg,var(--rg-purple),#6d3bc1 55%,transparent);
  box-shadow:4px 4px 0 #07060b;
}

/* hero side image = Minecraft prop */
#welcome-section .fh-300{
  max-height:350px!important;
  max-width:100%!important;
  filter:drop-shadow(10px 12px 0 rgba(0,0,0,.65)) drop-shadow(0 0 28px rgba(73,201,255,.15));
  transform:translateY(3px);
}

/* replace the template wave with a rigid pixel ground line */
#welcome-section .pattern.bottom{z-index:5!important;height:58px!important;}
#welcome-section .pattern.bottom svg{display:none!important;}
#welcome-section .pattern.bottom:before{
  content:"";
  display:block;
  height:58px;
  background:
    linear-gradient(#78934e,#78934e) 0 0/100% 12px no-repeat,
    linear-gradient(#59743d,#59743d) 0 12px/100% 9px no-repeat,
    repeating-linear-gradient(90deg,#744a31 0 44px,#875938 44px 48px,#6d442e 48px 92px);
  border-top:2px solid #0a090f;
  border-bottom:4px solid #06050a;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.16);
}

/* ---- section shells ---- */
.section{position:relative!important;}
.section-md,
.section-sm{border-top:2px solid #19142d;}
.section h1,.section h2,.section h3,.section h4,.section h5{
  font-family:'Press Start 2P',monospace!important;
  text-transform:uppercase;
  text-shadow:4px 4px 0 #05040b;
}
.section h2.h1,
.section h1.h1{font-size:1.05rem!important; line-height:1.8!important;}
.section h2:before{
  content:"◆";
  color:var(--rg-purple)!important;
  font-size:.68em;
  margin-right:14px;
  vertical-align:2px;
  text-shadow:none;
}

/* ---- cards / products ---- */
.card,
.shop .card,
.product,
.filter-items .card,
.filter-items > div > .card{
  background:#171229!important;
  border:2px solid #3c2b61!important;
  border-radius:var(--rg-radius)!important;
  box-shadow:var(--rg-pixel)!important;
}
.card:hover,
.shop .card:hover,
.filter-items .card:hover{
  border-color:#8f4dff!important;
  transform:translateY(-3px);
  box-shadow:0 7px 0 #05040b, 0 0 24px rgba(143,77,255,.18)!important;
}
.card-header,
.card-footer{background:#201638!important;border-color:#3c2b61!important;}
.card-body{background:#171229!important;}
.product-title,
.shop .product-title,
.card-title{
  color:#fff!important;
  font-family:'Press Start 2P',monospace!important;
  font-size:.7rem!important;
  line-height:1.7!important;
}
.product-description,
.card-text,
.small{color:#ada6c6!important;}

/* product buttons */
.btn,
button.btn,
.btn-danger,
.btn-primary,
.btn-success,
.btn-outline-danger,
.btn-outline-primary{
  border-radius:2px!important;
  border:2px solid #6136a5!important;
  background:#6f3aca!important;
  color:#fff!important;
  box-shadow:4px 4px 0 #06050a!important;
  font-family:'Press Start 2P',monospace!important;
  font-size:.58rem!important;
  padding:.8rem 1rem!important;
  transition:.12s ease!important;
}
.btn:hover,
button.btn:hover,
.btn-danger:hover,
.btn-primary:hover,
.btn-success:hover{
  background:#8f4dff!important;
  border-color:#bb87ff!important;
  transform:translate(-2px,-2px)!important;
  box-shadow:6px 6px 0 #06050a, 0 0 16px rgba(143,77,255,.25)!important;
}
.btn:active{transform:translate(2px,2px)!important;box-shadow:2px 2px 0 #06050a!important;}

/* accent badges */
.badge,
.badge-primary,
.badge-danger{
  background:#8f4dff!important;
  color:#fff!important;
  border-radius:2px!important;
  border:1px solid #bb87ff!important;
  box-shadow:2px 2px 0 #07060b;
}

/* ---- forms ---- */
.form-control,
.form-control:focus,
.input-group-text{
  background:#0f0c1e!important;
  color:#fff!important;
  border:2px solid #372957!important;
  border-radius:2px!important;
  box-shadow:inset 0 2px 0 rgba(0,0,0,.35)!important;
}
.form-control::placeholder{color:#746b8b!important;}
.form-control:focus{border-color:#8f4dff!important; box-shadow:0 0 0 2px rgba(143,77,255,.16), inset 0 2px 0 rgba(0,0,0,.35)!important;}
.input-group-text{color:#b77dff!important;}
.form-check-sign{border:2px solid #584176!important;border-radius:0!important;background:#100d1f!important;}
input[type=checkbox]:checked + .form-check-sign{background:#8f4dff!important;border-color:#bd73ff!important;}

/* ---- search ---- */
input[name="search_name"]{
  min-height:46px!important;
  font-family:'VT323',monospace!important;
  font-size:1.25rem!important;
}

/* ---- empty-state panels ---- */
.servers > div,
.shop .text-uppercase.mt-6,
.shop .text-uppercase.mt-5,
#servers .text-uppercase{
  padding:34px 22px!important;
  background:#120e22!important;
  border:2px dashed #493767!important;
  box-shadow:4px 4px 0 #06050a!important;
}
.servers i,
.shop .text-uppercase i,
#servers i{color:#8f4dff!important;}

/* ---- instructions ---- */
.main-instruction{
  background:
    linear-gradient(90deg, rgba(143,77,255,.035) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(0deg, rgba(143,77,255,.035) 1px, transparent 1px) 0 0/24px 24px,
    #0b0917!important;
}
.main-instruction .container{
  background:#151129!important;
  border:2px solid #3a2b5b!important;
  box-shadow:6px 6px 0 #05040b!important;
  padding:26px!important;
}
.main-instruction p{color:#c3bed7!important; font-size:1.1rem!important;}
.main-instruction p.font-weight-bolder{color:#fff!important;}
.main-instruction p.font-weight-bolder:before{content:"▸ ";color:#a96dff;}

/* ---- footer ---- */
.footer,
.footer.bg-elegant-night{
  background:#06050b!important;
  border-top:4px solid #2b2145!important;
  color:#8f8aa3!important;
}
.footer a{color:#a96dff!important;}
.footer-brand img{max-width:140px!important;}

/* ---- floating basket ---- */
.fixed-bottom-right{right:24px!important;bottom:24px!important;}
.basket-button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:58px!important;
  height:58px!important;
  background:#6f3aca!important;
  border:3px solid #bb87ff!important;
  border-radius:2px!important;
  box-shadow:6px 6px 0 #05040b, 0 0 24px rgba(143,77,255,.22)!important;
  color:#fff!important;
}
.basket-button:hover{background:#8f4dff!important;transform:translateY(-3px);}
.basket-button i{font-size:1.2rem!important;}

/* ---- modals / cart ---- */
.modal-content,
.cart-content,
.cart-content .bg-elegant,
.cart-content .bg-elegant-dark{
  background:#0e0b1b!important;
  color:#f4f0ff!important;
  border:2px solid #493767!important;
  border-radius:2px!important;
  box-shadow:10px 10px 0 #05040b!important;
}
.modal-header,
.modal-footer{border-color:#2e2245!important;}
.cart-content .alert-warning{
  background:#2a2410!important;
  border:2px solid #776433!important;
  color:#f4e7b5!important;
}
.cart-content .text-danger{color:#c983ff!important;}
.cart-content .text-muted{color:#80788f!important;}
.modal-backdrop{background:#030208!important;}

/* payment type cards */
#payment-type .card{
  background:#141024!important;
  border:2px solid #36274f!important;
  border-radius:2px!important;
}
#payment-type .card:hover{border-color:#8f4dff!important;background:#1d1630!important;}
#payment-type h1,
#payment-type h4,
#payment-type h5,
#payment-type p{color:#fff!important;}

/* ---- native links and subtle separators ---- */
hr{border-top:2px solid #2a2041!important;}
.border,
.border-0{border-color:#312447!important;}

/* ---- make isotope layout breathe ---- */
.filter-items{margin-left:-8px!important;margin-right:-8px!important;}
.filter-items > [class*="col-"]{padding:8px!important;}

/* ---- desktop visual density ---- */
@media (min-width:992px){
  #welcome-section .shop-title{padding-top:30px;padding-bottom:60px;}
  .section-md{padding-top:72px!important;padding-bottom:72px!important;}
}

/* ---- mobile ---- */
@media (max-width:991px){
  .navbar-nav .nav-link{font-size:.52rem!important;}
  #welcome-section{min-height:560px!important;}
  #welcome-section .col-lg-6.d-none{display:block!important;margin-top:25px;}
  #welcome-section .fh-300{max-height:190px!important;}
  .shop-name{font-size:clamp(2rem,12vw,3.4rem)!important;}
  #welcome-section:before{height:34%;}
  #welcome-section .pattern.bottom:before{height:50px;}
  .fixed-bottom-right{right:14px!important;bottom:14px!important;}
  .basket-button{width:52px!important;height:52px!important;}
}

@media (max-width:575px){
  .navbar-brand img{max-height:33px!important;}
  .navbar-nav .nav-link{padding:.7rem .65rem!important;}
  .navbar-nav .nav-link i{display:none;}
  #welcome-section{min-height:540px!important;}
  .shop-title{text-align:center!important;}
  .shop-name:after{margin-left:auto;margin-right:auto;}
  .section h2.h1,.section h1.h1{font-size:.82rem!important;}
  .main-instruction .container{padding:18px!important;}
  .btn,button.btn{font-size:.5rem!important; padding:.7rem .75rem!important;}
}

/* ---- accessibility / performance ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important;}
}

/* ---- scrollbar ---- */
::-webkit-scrollbar{width:12px;}
::-webkit-scrollbar-track{background:#080711;}
::-webkit-scrollbar-thumb{background:#3f2862;border:2px solid #080711;}
::-webkit-scrollbar-thumb:hover{background:#8f4dff;}

/* ---- selection ---- */
::selection{background:#8f4dff;color:#fff;}

/* =========================================================
   RIVERGRIEF V2 — DEEP 2D WORLD LAYER
   Stronger Minecraft atmosphere without replacing EasyDonate logic.
   ========================================================= */

:root{
  --rg-purple-deep:#25154d;
  --rg-purple-dark:#160e31;
  --rg-purple-mid:#6e38bf;
  --rg-purple-hot:#b36cff;
  --rg-water-dark:#10244a;
  --rg-water-main:#1e568f;
  --rg-water-light:#52b8ee;
  --rg-ink:#07070d;
}

/* World-like background: sky / distant haze / pixel ground */
body{
  min-height:100vh;
  background:
    linear-gradient(180deg, #17102f 0%, #0e0d20 48%, #090912 100%) !important;
  background-attachment:fixed!important;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.22;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:16px 16px;
  mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

/* Make every major section feel like a different Minecraft area. */
section.section{
  position:relative;
  isolation:isolate;
}
section.section:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:10px;
  background:repeating-linear-gradient(90deg,
    rgba(0,0,0,.24) 0 8px,
    rgba(255,255,255,.045) 8px 16px,
    rgba(0,0,0,.24) 16px 24px);
  opacity:.45;
  pointer-events:none;
}

/* Hero becomes a 2D night-world scene instead of a generic photo hero. */
#welcome-section{
  min-height:590px!important;
  display:flex!important;
  align-items:center;
  background:
    radial-gradient(circle at 74% 22%, rgba(144,73,255,.28), transparent 28%),
    linear-gradient(180deg,#1b1237 0%,#0f1730 56%,#09101d 100%) !important;
  overflow:hidden!important;
}
#welcome-section:before{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:0;
  height:28%;
  background:
    linear-gradient(180deg, transparent 0 18%, rgba(33,86,145,.92) 18% 100%);
  clip-path:polygon(0 18%, 5% 18%, 5% 8%, 11% 8%, 11% 22%, 18% 22%, 18% 12%, 26% 12%, 26% 27%, 34% 27%, 34% 9%, 42% 9%, 42% 21%, 51% 21%, 51% 6%, 58% 6%, 58% 20%, 66% 20%, 66% 10%, 74% 10%, 74% 24%, 82% 24%, 82% 9%, 89% 9%, 89% 19%, 96% 19%, 96% 7%, 100% 7%, 100% 100%, 0 100%);
  opacity:.9;
  z-index:-1;
}
#welcome-section:after{
  content:"";
  position:absolute;
  left:-10%;
  width:120%;
  bottom:11%;
  height:8px;
  background:repeating-linear-gradient(90deg, #56b8ee 0 24px, #2f77b5 24px 48px);
  box-shadow:0 9px 0 rgba(5,13,27,.85), 0 -7px 0 rgba(139,77,236,.18);
  opacity:.8;
  animation:rg-water-shift 7s linear infinite;
  z-index:0;
}
@keyframes rg-water-shift{
  from{transform:translateX(0)}
  to{transform:translateX(48px)}
}

.shop-title h1,
.shop-name{
  position:relative;
  display:inline-block;
  color:#fff!important;
  text-shadow:5px 5px 0 #07070d, 0 0 26px rgba(173,102,255,.32)!important;
  letter-spacing:.03em;
}
.shop-title h1:after,
.shop-name:after{
  content:"";
  display:block;
  width:82%;
  height:6px;
  margin-top:14px;
  background:repeating-linear-gradient(90deg, #8d52df 0 16px, #b66cff 16px 32px);
  box-shadow:4px 4px 0 #07070d;
}

/* Online indicator becomes a game HUD label. */
.general-online span{
  display:inline-block!important;
  border:2px solid #5e3b95!important;
  border-right-width:5px!important;
  background:#100d1e!important;
  box-shadow:4px 4px 0 #07070d!important;
  padding:.55rem .75rem!important;
  color:#b9a9d9!important;
  font-family:'Press Start 2P',monospace!important;
  font-size:.56rem!important;
  text-transform:uppercase;
}
.general-online span:before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:8px;
  background:#7ef0a0;
  box-shadow:0 0 0 2px #203d2b;
}

/* Headings: heavier, flatter, more game UI-like. */
h1,h2,h3,h4,h5,h6,
.h1,.h1,.h2,.h3,.h4,.h5,.h6{
  text-shadow:3px 3px 0 #07070d!important;
}
h2.h1,
h2.h1.font-weight-bolder{
  padding-bottom:12px;
  border-bottom:3px solid #47306e;
}
h2.h1:before{
  content:"◆";
  color:var(--rg-purple-hot);
  margin-right:12px;
  font-size:.65em;
  vertical-align:middle;
}

/* Store/search area */
#shop{
  margin-top:22px;
}
.form-control,
.input-group-text{
  border-radius:0!important;
  border:2px solid #3d2a59!important;
  color:#f4efff!important;
  background:#110e1d!important;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.14), 4px 4px 0 #07070d!important;
}
.form-control::placeholder{color:#8d85a1!important;}
.form-control:focus{
  border-color:#9560e8!important;
  box-shadow:0 0 0 2px rgba(149,96,232,.15),4px 4px 0 #07070d!important;
}

/* Product cards for both existing EasyDonate layouts and loaded AJAX products. */
.filter-items > [class*="col-"],
.shop .card,
.shop .product,
.shop .product-card{
  transition:transform .16s steps(2,end), filter .16s ease;
}
.shop .card,
.shop .product,
.shop .product-card{
  border:2px solid #3f2a62!important;
  border-radius:2px!important;
  background:#171227!important;
  box-shadow:5px 5px 0 #07070d, inset 0 2px 0 rgba(255,255,255,.05)!important;
  overflow:hidden;
}
.shop .card:hover,
.shop .product:hover,
.shop .product-card:hover{
  transform:translate(-2px,-2px);
  border-color:#9a63e8!important;
  filter:brightness(1.05);
}
.shop .card-title,
.shop .product-title,
.shop .product-name,
.shop .card h3,
.shop .card h4,
.shop .card h5{
  color:#fff!important;
}

/* Generic purchase/action buttons */
.btn,
button.btn,
a.btn{
  border-radius:2px!important;
  border:2px solid #9a61df!important;
  background:#6f3aa8!important;
  color:#fff!important;
  font-family:'Press Start 2P',monospace!important;
  font-size:.58rem!important;
  letter-spacing:.02em;
  text-transform:uppercase;
  box-shadow:4px 4px 0 #07070d, inset 0 2px 0 rgba(255,255,255,.15)!important;
  transition:transform .1s steps(2,end), filter .15s ease!important;
}
.btn:hover,
button.btn:hover,
a.btn:hover{
  transform:translate(-2px,-2px)!important;
  filter:brightness(1.12)!important;
}
.btn:active,
button.btn:active,
a.btn:active{
  transform:translate(2px,2px)!important;
  box-shadow:2px 2px 0 #07070d!important;
}
.btn-danger,
.btn-primary{
  background:#7d43c4!important;
  border-color:#ae72f0!important;
}

/* Floating basket: Minecraft hotbar slot instead of a round modern widget. */
.fixed-bottom-right{
  right:22px!important;
  bottom:22px!important;
}
.basket-button{
  width:58px!important;
  height:58px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:3px solid #8b5dd0!important;
  border-radius:2px!important;
  background:#24183e!important;
  color:#fff!important;
  box-shadow:5px 5px 0 #07070d, inset 3px 3px 0 rgba(255,255,255,.08), inset -3px -3px 0 rgba(0,0,0,.2)!important;
  transition:transform .1s steps(2,end)!important;
}
.basket-button:hover{transform:translate(-2px,-2px)!important;}
.basket-button .badge{
  background:#b968ff!important;
  color:#170c25!important;
  border:2px solid #07070d!important;
  border-radius:0!important;
  font-family:'Press Start 2P',monospace!important;
  font-size:.45rem!important;
}

/* Modal / cart: inventory-screen appearance */
.modal-content,
.cart-content,
.server-modal{
  border:3px solid #5d4380!important;
  border-radius:2px!important;
  background:#120e20!important;
  box-shadow:10px 10px 0 rgba(0,0,0,.5), inset 3px 3px 0 rgba(255,255,255,.04)!important;
}
.modal-header,
.modal-body,
.modal-footer{border-color:#34234f!important;}
.cart-content input,
.cart-content .input-group-text{
  background:#0d0b15!important;
}
.alert-warning{
  border:2px solid #79562a!important;
  border-radius:0!important;
  background:#2c2111!important;
  color:#f5d79e!important;
  box-shadow:4px 4px 0 #07070d!important;
}

/* Payment choices get inventory-slot styling */
#payment-type .card{
  border:2px solid #41305f!important;
  border-radius:2px!important;
  background:#181327!important;
  box-shadow:4px 4px 0 #07070d!important;
  transition:.13s steps(2,end)!important;
}
#payment-type .card:hover{
  transform:translate(-2px,-2px);
  border-color:#a86bed!important;
  background:#21183a!important;
}

/* Footer: darker terrain band */
footer.footer{
  position:relative;
  background:#08070d!important;
  border-top:8px solid #171422!important;
  box-shadow:inset 0 4px 0 #302243!important;
}
footer.footer:before{
  content:"";
  position:absolute;
  top:-8px;
  left:0;
  right:0;
  height:8px;
  background:repeating-linear-gradient(90deg,#4d6037 0 20px,#657d43 20px 40px,#3f502e 40px 60px);
}

/* Rules / help pages when the platform exposes them as normal content. */
#help,
[id*="rules"],
.rules,
.rules-page,
.page-content{
  color:#ebe6f7!important;
}
#help p,
[id*="rules"] p,
.rules p,
.rules-page p,
.page-content p,
#help li,
[id*="rules"] li,
.rules li,
.rules-page li,
.page-content li{
  color:#c5bdd6!important;
  line-height:1.55;
}
#help h2,
[id*="rules"] h1,
[id*="rules"] h2,
.rules h1,
.rules h2,
.rules-page h1,
.rules-page h2,
.page-content h1,
.page-content h2{
  color:#fff!important;
  border-bottom:3px solid #47306e;
  padding-bottom:12px;
}

/* Scrollbar */
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:#09080f;}
::-webkit-scrollbar-thumb{
  background:#493263;
  border:3px solid #09080f;
}
::-webkit-scrollbar-thumb:hover{background:#8052ae;}
::selection{background:#9759d5;color:#fff;}

@media (max-width: 767.98px){
  #welcome-section{min-height:500px!important;}
  #welcome-section:before{height:24%;}
  .shop-title h1,.shop-name{font-size:2.5rem!important;}
  .navbar-nav .nav-link{font-size:.52rem!important;}
  .fixed-bottom-right{right:14px!important;bottom:14px!important;}
  .basket-button{width:52px!important;height:52px!important;}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}

/* =========================================================
   RIVERGRIEF V3 — MINECRAFT WORLD DETAILS
   Visual pass: stronger 2D blocks, terrain, item slots,
   chunk-grid texture and HUD details.
   ========================================================= */

:root{
  --rg-obsidian:#05040a;
  --rg-void:#0a0812;
  --rg-purple-block:#34205b;
  --rg-purple-edge:#8c58d8;
  --rg-glow:#b56cff;
  --rg-water-hi:#5bc7f5;
  --rg-water-mid:#2d79bb;
  --rg-water-low:#173d69;
  --rg-grass-hi:#8ca95b;
  --rg-grass:#5c793d;
  --rg-dirt-hi:#93603e;
  --rg-dirt:#6b442f;
  --rg-stone-hi:#707786;
  --rg-stone:#4c515e;
}

/* Subtle chunk texture across the whole store. */
body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.16;
  background:
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(184,123,255,.05) 31px 32px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(184,123,255,.035) 31px 32px);
  mix-blend-mode:screen;
}

.navbar-main:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:4px;
  background:repeating-linear-gradient(90deg,
    #6e8a45 0 22px,
    #4d6334 22px 44px,
    #2c3a24 44px 58px,
    #8b5a3b 58px 80px,
    #6d452f 80px 100px);
  box-shadow:0 3px 0 #05040a;
}

/* Navigation becomes a compact Minecraft HUD. */
.navbar-nav .nav-link{
  position:relative;
  background:linear-gradient(#1b1730,#121020)!important;
  border-color:#35264e!important;
  box-shadow:3px 3px 0 #05040a, inset 2px 2px 0 rgba(255,255,255,.04), inset -2px -2px 0 rgba(0,0,0,.24)!important;
}
.navbar-nav .nav-link:before,
.navbar-nav .nav-link:after{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  background:#7547b6;
  opacity:.65;
}
.navbar-nav .nav-link:before{left:5px;top:5px;}
.navbar-nav .nav-link:after{right:5px;bottom:5px;background:#302042;}
.navbar-nav .nav-link:hover{
  background:linear-gradient(#2c1d4d,#1b1334)!important;
}

/* Hero: more clearly reads as a 2D game scene. */
#welcome-section .container:before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:31%;
  height:42%;
  pointer-events:none;
  opacity:.38;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.04) 8% 9%, transparent 9% 22%, rgba(255,255,255,.035) 22% 24%, transparent 24% 100%),
    linear-gradient(180deg, transparent 0 42%, rgba(0,0,0,.16) 42% 44%, transparent 44% 66%, rgba(0,0,0,.12) 66% 68%, transparent 68%);
  z-index:0;
}

/* Pixel moon made only from CSS squares. */
#welcome-section .shop-title:before{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  right:-18px;
  top:-40px;
  background:#e5dcff;
  box-shadow:
    12px 0 #e5dcff,
    24px 0 #e5dcff,
    36px 0 #c9bde7,
    0 12px #e5dcff,
    12px 12px #f0e9ff,
    24px 12px #e5dcff,
    36px 12px #8d7fa8,
    48px 12px #5f5471,
    0 24px #e5dcff,
    12px 24px #e5dcff,
    24px 24px #d6caf0,
    36px 24px #8d7fa8,
    48px 24px #5f5471,
    0 36px #a89db9,
    12px 36px #c9bedb,
    24px 36px #8d7fa8,
    36px 36px #5f5471,
    48px 36px #5f5471;
  image-rendering:pixelated;
  opacity:.72;
  transform:rotate(-2deg);
}

/* Online status = redstone/lantern style pixel indicator. */
.general-online span:before{
  border-radius:0!important;
  width:9px!important;
  height:9px!important;
  background:#8cff93!important;
  box-shadow:0 0 0 2px #263f2a, 0 0 8px rgba(140,255,147,.2)!important;
}

/* Section titles receive a real pixel underline + block marker. */
.section h2.h1,
.section h1.h1{
  position:relative;
  border-bottom:0!important;
  padding-bottom:20px!important;
}
.section h2.h1:after,
.section h1.h1:after{
  content:"";
  position:absolute;
  left:0;
  bottom:5px;
  width:170px;
  height:7px;
  background:repeating-linear-gradient(90deg,
    var(--rg-purple-edge) 0 18px,
    var(--rg-glow) 18px 36px,
    #4c2c79 36px 52px);
  box-shadow:4px 4px 0 #05040a;
}
.section h2.h1:before{
  content:"";
  display:inline-block;
  width:11px;
  height:11px;
  margin-right:12px;
  background:#8f4dff;
  box-shadow:4px 4px 0 #05040a, inset 2px 2px 0 rgba(255,255,255,.16);
  vertical-align:1px;
}

/* Search field = crafted item-search slot. */
input[name="search_name"]{
  border-color:#5c3d81!important;
  background:
    linear-gradient(90deg, rgba(169,103,255,.045) 1px, transparent 1px) 0 0/16px 16px,
    #0d0a16!important;
}
input[name="search_name"]:focus{
  background:
    linear-gradient(90deg, rgba(169,103,255,.065) 1px, transparent 1px) 0 0/16px 16px,
    #100c1b!important;
}

/* Product cards now resemble Minecraft inventory blocks. */
.shop .card,
.shop .product,
.shop .product-card{
  position:relative!important;
  min-height:100%!important;
  border-color:#5a3d7e!important;
  box-shadow:
    5px 5px 0 #05040a,
    inset 0 3px 0 rgba(255,255,255,.05),
    inset 0 -3px 0 rgba(0,0,0,.28)!important;
}
.shop .card:before,
.shop .product:before,
.shop .product-card:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:7px;
  background:
    repeating-linear-gradient(90deg,
      #6b8b47 0 13px,
      #7b9950 13px 22px,
      #4a6335 22px 33px,
      #70472f 33px 51px,
      #81543a 51px 62px);
  border-bottom:2px solid #211727;
  opacity:.95;
  z-index:2;
}
.shop .card:after,
.shop .product:after,
.shop .product-card:after{
  content:"";
  position:absolute;
  right:8px;
  top:12px;
  width:6px;
  height:6px;
  background:#7e50b7;
  box-shadow:
    10px 0 #2c2140,
    0 10px #2c2140,
    10px 10px #7e50b7;
  opacity:.5;
}
.shop .card:hover,
.shop .product:hover,
.shop .product-card:hover{
  border-color:#b16cff!important;
  box-shadow:
    6px 6px 0 #05040a,
    0 0 0 2px rgba(177,108,255,.11),
    0 10px 28px rgba(107,54,190,.14),
    inset 0 3px 0 rgba(255,255,255,.06)!important;
}

/* Image area on product cards gets an inventory-square appearance. */
.shop .card img,
.shop .product img,
.shop .product-card img{
  image-rendering:pixelated;
  filter:drop-shadow(4px 5px 0 rgba(0,0,0,.35));
}

/* Buttons get a more authentic Minecraft block bevel. */
.btn,
button.btn,
a.btn{
  position:relative!important;
  overflow:hidden;
  border-color:#b17aff!important;
  background:linear-gradient(#8750cb,#66389d)!important;
  box-shadow:
    4px 4px 0 #05040a,
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -3px 0 rgba(0,0,0,.22)!important;
}
.btn:before,
button.btn:before,
a.btn:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:5px;
  background:rgba(255,255,255,.10);
  pointer-events:none;
}
.btn:hover,
button.btn:hover,
a.btn:hover{
  background:linear-gradient(#9a60e8,#7541b1)!important;
  filter:none!important;
}

/* Floating basket as a hotbar slot. */
.basket-button{
  background:
    linear-gradient(135deg, rgba(255,255,255,.06) 0 8px, transparent 8px),
    #211833!important;
  border-color:#9e6ddd!important;
}
.basket-button:after{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
}

/* Help / policy blocks become in-world sign panels. */
#help .container,
.rules,
.rules-page,
.page-content{
  position:relative;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px),
    #171229!important;
  border:3px solid #6b4b88!important;
  box-shadow:7px 7px 0 #05040a, inset 3px 3px 0 rgba(255,255,255,.04), inset -3px -3px 0 rgba(0,0,0,.18)!important;
}
#help .container:before,
.rules:before,
.rules-page:before,
.page-content:before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:8px;
  height:4px;
  background:repeating-linear-gradient(90deg,#76519a 0 24px,#4d3567 24px 44px);
  opacity:.5;
}

/* Dividers look like placed blocks. */
hr{
  height:8px!important;
  border:0!important;
  background:repeating-linear-gradient(90deg,
    #3f2c58 0 16px,
    #664583 16px 32px,
    #281c38 32px 48px)!important;
  box-shadow:3px 3px 0 #05040a!important;
}

/* Footer gets layered terrain instead of a plain rectangle. */
footer.footer:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:18px;
  background:
    linear-gradient(#5e472f,#5e472f) 0 0/100% 6px no-repeat,
    repeating-linear-gradient(90deg,#30251d 0 24px,#211a16 24px 48px);
  opacity:.85;
}

/* Payment modal: inventory grid backdrop. */
#payment-type .modal-body{
  background:
    linear-gradient(90deg, rgba(174,107,255,.035) 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(rgba(174,107,255,.035) 1px, transparent 1px) 0 0/20px 20px,
    #f8f9fa!important;
}
#payment-type .card-body{
  min-height:82px;
}

/* Small pixel labels / utility chips. */
.shop small,
.general-online,
.fixed-bottom-right .items-count{
  font-family:'Press Start 2P',monospace!important;
}

/* Better mobile world framing. */
@media (max-width:575px){
  #welcome-section .shop-title:before{right:4px;top:-28px;transform:scale(.72);transform-origin:top right;}
  .shop .card:before,
  .shop .product:before,
  .shop .product-card:before{height:6px;}
  .section h2.h1:after,
  .section h1.h1:after{width:125px;}
}

@media (prefers-reduced-motion:reduce){
  #welcome-section:after{animation:none!important;}
}