/* =========================
   Base & Theme
========================= */
:root{
  --bg: #0b1220;
  --panel: #0f172a;
  --panel-2: #101a2e;
  --text: #e5e7eb;
  --muted: #a3a9b7;
  --brand-1: #4DA6FF;
  --brand-2: #00ffe7;
  --accent: #FFD700;
  --danger: #ff6b6b;
  --radius: 14px;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body{
  margin: 0;
  background: radial-gradient(1200px 600px at 10% -10%, #0d1730 0%, var(--bg) 50%, #090f1a 100%);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ===== Page wrapper: futuristik + jarak 20px fixed ===== */
.page-wrap{
  /* ukuran & gutter */
  width: min(1200px, 100% - 40px) !important; /* sisa 20px kiri-kanan */
  margin-inline: auto !important;
  padding: 20px !important;                   /* 20px semua sisi */
  box-sizing: border-box;
  display: flow-root;                         /* cegah margin collapse */

  /* tampilan panel */
  background: rgba(8,13,25,.35);
  backdrop-filter: saturate(115%) blur(4px);
  position: relative;
  border-radius: 18px;
  border: 1px solid transparent !important;   /* biar hanya ring gradient yang terlihat */
}

/* Netralisir margin elemen pertama/terakhir di dalamnya */
.page-wrap > *:first-child{ margin-top: 0 !important; }
.page-wrap > *:last-child{  margin-bottom: 0 !important; }

/* Hilangkan padding bawaan container Bootstrap di dalam page-wrap */
.page-wrap > .container,
.page-wrap > .container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hairline gradient ring (1px) */
@supports (-webkit-mask: none) or (mask-composite: exclude){
  .page-wrap::before{
    content:"";
    position:absolute; inset:0; border-radius:inherit; padding:1px;
    background: linear-gradient(120deg, var(--brand-2, #00ffe7), var(--brand-1, #4DA6FF)) border-box;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events:none;
  }
}

/* Glow halus */
.page-wrap::after{
  content:"";
  position:absolute; inset:-8px; border-radius:inherit;
  background:
    radial-gradient(40% 60% at 50% -10%, rgba(0,255,231,.20), transparent 60%),
    radial-gradient(40% 60% at 110% 50%, rgba(77,166,255,.14), transparent 60%);
  filter: blur(12px);
  opacity:.22; pointer-events:none;
  transition: opacity .25s ease;
}
@media (hover:hover){ .page-wrap:hover::after{ opacity:.35; } }

/* Safe-area */
@supports (padding: max(0px)){
  .page-wrap{
    padding-left:  max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
    padding-top:   max(20px, env(safe-area-inset-top)) !important;
    padding-bottom:max(20px, env(safe-area-inset-bottom)) !important;
  }
}

/* Container spacing */
.container{
  max-width: 1200px;
}

/* Headline neon */
.neon-gold h1, .neon-gold h2{
  margin: 0; line-height: 1.1; text-transform: uppercase; letter-spacing: 1px;
  background: linear-gradient(90deg, var(--accent), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 10px rgba(255,215,0,.25);
}
.neon-gold h1{ text-align:center; font-size: clamp(24px, 9vw, 32px); }
.neon-gold h2{ text-align:center; font-size: clamp(20px, 8vw, 26px); opacity:.9 }

/* =========================
   Filters (Region / Faction)
========================= */
.region-filter,
.faction-filter{
  display:flex; align-items:center; gap:10px; margin:10px 0 14px;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin;
}
.region-label,.faction-label{ white-space:nowrap; color:var(--muted); font-weight:600; font-size:17px; }
.region-filter::-webkit-scrollbar,
.faction-filter::-webkit-scrollbar{ height:6px; }
.region-filter::-webkit-scrollbar-thumb,
.faction-filter::-webkit-scrollbar-thumb{ background:#2a3347; border-radius:999px; }

.region-btn,.faction-btn{
  appearance:none; border:1px solid #22304a;
  background:linear-gradient(180deg,#121c33,#0f172a);
  color:var(--text); padding:8px 12px; border-radius:999px; font-size:13px; cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; white-space:nowrap;
}
.region-btn:hover,.faction-btn:hover{ border-color:var(--brand-1); }
.region-btn.active,.faction-btn.active{
  border-color:var(--brand-2);
  box-shadow: 0 0 0 2px rgba(0,255,231,.18) inset, 0 0 18px rgba(0,255,231,.08);
}

/* =========================
   Server Cards
========================= */
.server-container{
  scrollbar-width: thin;                 /* valid di Firefox */
  scrollbar-color: #2a3347 #0f172a;      /* thumb track */
  max-height: 20rem;
  overflow-y: auto; overflow-x: hidden;
  padding: .6rem .5rem 1.5rem;
  width: 100%;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid #1a2540; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Chrome/Edge/WebKit scrollbar */
.server-container::-webkit-scrollbar{ width: 8px; }
.server-container::-webkit-scrollbar-thumb{ background:#2a3347; border-radius: 8px; }
.server-container::-webkit-scrollbar-track{ background:#0f172a; border-radius: 8px; }

.server-cards{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px;
}

.server-card{
  text-align:center; align-items:center; position:relative;
  background:#0f172a; border:1px solid #203052; border-radius:12px;
  padding:10px 12px; min-height:78px;
  display:grid; grid-template-rows:auto auto auto auto; gap:3px;
  cursor:pointer; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.server-card:hover{
  transform: translateY(-2px);
  border-color: var(--brand-1);
  box-shadow: 0 8px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(77,166,255,.18) inset;
}
.server-card.selected{
  border-color: var(--brand-2);
  box-shadow: 0 0 0 1px rgba(0,255,231,.22) inset, 0 6px 16px rgba(0,255,231,.06);
}
.server-card .card-title{ font-weight:700; font-size:14px; letter-spacing:.2px; color:#fff; }
.server-card .card-region,.server-card .card-faction{ font-size:12px; color:var(--muted); }
/* Price tetap kuning */
.server-card .server-price{
  color: var(--accent, #FFD700); /* fallback kuning */
  font-weight: 700;
}

/* Satuan “/g” putih */
.server-card .server-price + .server-unit{
  color: #fff;
  opacity: .95;              /* biar nggak terlalu “terang” */
}

/* (opsional) rapikan perataan angka & satuan */
.server-card .server-price,
.server-card .server-price + .server-unit{
  font-variant-numeric: tabular-nums;
}

/* =========================
   Form Inputs & Counters
========================= */
.form-label{ color:#c9d2e3; font-weight:600; }
.form-select,.form-control{
  background:#0e1627; border:1px solid #21314f; color:var(--text);
}
.form-select:focus,.form-control:focus{
  background:#0e1627; border-color:var(--brand-1);
  box-shadow:0 0 0 .2rem rgba(77,166,255,.15); color:var(--text);
}
.input-group-text{ background:#0e1627; color:var(--muted); border:1px solid #21314f; }

.btn-counter{
  width:42px; height:42px; border-radius:10px; border:1px solid #22304a;
  background:linear-gradient(180deg,#121c33,#0f172a); color:var(--text);
  font-size:18px; display:grid; place-items:center; cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn-counter:active{ transform: scale(.98); }
.btn-counter:hover{ border-color: var(--brand-1); }

/* Error text */
.error-message{ display:block; margin-top:6px; }

/* Keep +/- sejajar dengan input quantity */
.mb-3 .d-flex.align-items-center{ flex-wrap:nowrap; gap:8px; }
.mb-3 .d-flex.align-items-center .btn-counter{ flex:0 0 42px; }
.mb-3 .d-flex.align-items-center .input-group{ flex:1 1 0; min-width:0; width:auto; }
.mb-3 .d-flex.align-items-center .input-group.mx-2{ margin-left:0!important; margin-right:0!important; }
.mb-3 .d-flex.align-items-center .form-control,
.mb-3 .d-flex.align-items-center .input-group-text{ height:42px; line-height:42px; }

/* Hilangkan spinner bawaan number (sekali saja) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type="number"]{ -moz-appearance:textfield; }

/* Mobile: stack kolom utama */
@media (max-width: 991.98px){
  .container > .d-flex{ flex-direction:column; gap:16px; align-items:stretch; }
  .container > .d-flex > .flex-grow-1,
  .container > .d-flex > .flex-shrink-0{ width:100%!important; flex:1 1 auto; max-width:100%; }
  .container > .d-flex > .me-4{ margin-right:0!important; }

  /* pastikan row qty tetap sejajar */
  .mb-3 > .d-flex.align-items-center{
    display:flex!important; flex-direction:row!important; align-items:center!important;
    flex-wrap:nowrap!important; gap:8px;
  }
  .mb-3 > .d-flex.align-items-center .btn-counter{ flex:0 0 42px!important; }
  .mb-3 > .d-flex.align-items-center .input-group{
    flex:1 1 auto!important; min-width:0!important; width:auto!important; margin-left:0!important; margin-right:0!important;
  }
  .mb-3 > .d-flex.align-items-center .form-control,
  .mb-3 > .d-flex.align-items-center .input-group-text{ height:42px; line-height:42px; }
}

/* Delivery Information panel — border transparan */
aside[aria-label="Delivery Information"]{
  background: linear-gradient(180deg, var(--panel, #0f172a), var(--panel-2, #101a2e)) !important;
  color: var(--text, #e5e7eb);
  border: 1px solid transparent !important;  /* ← transparan */
  border-radius: var(--radius, 14px) !important;
  box-shadow: var(--shadow, 0 10px 25px rgba(0,0,0,.35));
  position: relative;
  overflow: hidden;
}

/* highlight lembut di dalam panel */
aside[aria-label="Delivery Information"]::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(0,255,231,.06), transparent 60%),
    radial-gradient(80% 120% at 100% 0%, rgba(77,166,255,.05), transparent 60%);
  pointer-events:none;
}

/* hairline gradient ring tetap tampil meski border transparan */
@supports (-webkit-mask: none) or (mask-composite: exclude){
  aside[aria-label="Delivery Information"]::before{
    content:"";
    position:absolute; inset:0; border-radius:inherit; padding:1px;
    background: linear-gradient(120deg, var(--brand-2, #00ffe7), var(--brand-1, #4DA6FF)) border-box;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events:none;
  }
}


/* =========================
   Pricing & CTA
========================= */
.total-price{
  margin:10px 0 14px; font-weight:800; font-size:clamp(16px,4.5vw,22px); letter-spacing:.3px;
}
.buy-btn2{
  position:absolute; inset:6px 6px auto 6px; height:48px; border-radius:12px;
  background: linear-gradient(90deg, rgba(0,255,231,.18), rgba(77,166,255,.18));
  filter: blur(8px); pointer-events:none;
}
.buy-btn{
  position:relative; overflow:hidden;
  width:100%; height:52px; border-radius:12px; border:0;
  font-size:20px; font-weight:800; letter-spacing:.6px;
  background: linear-gradient(90deg,#00ffe7 0%,#4DA6FF 100%);
  background-size:200% 100%; background-position:0 0;
  color:#02101e; box-shadow:0 10px 22px rgba(0,255,231,.12),0 6px 16px rgba(77,166,255,.14);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .25s ease, background-position .35s ease, filter .25s ease;
}
.buy-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-120%); transition: transform .6s ease; pointer-events:none;
}
@media (hover:hover){
  .buy-btn:hover{
    background-position:100% 0; transform:translateY(-1px);
    box-shadow:0 12px 26px rgba(0,255,231,.20), 0 8px 18px rgba(77,166,255,.20);
    filter:brightness(1.05);
  }
  .buy-btn:hover::after{ transform:translateX(120%); }
}
.buy-btn:focus-visible{ outline:2px solid #4DA6FF; outline-offset:2px; box-shadow:0 0 0 3px rgba(77,166,255,.25); }
.buy-btn:active{ transform:translateY(0); filter:brightness(.95); }
.buy-btn:disabled{ filter:grayscale(.6) brightness(.75); cursor:not-allowed; box-shadow:none; }

/* =========================
   Order Modal (Checkout)
========================= */
/* order-modal-summary */
.modal-details-table{ width:100%; border-collapse:collapse; }
.modal-details-table td{
  padding:6px 8px; font-size:1rem; border-bottom:1.5px solid rgba(255,255,255,0.08);
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
.modal-details-table tr:last-child td{ border-bottom:none; }
.modal-details-table .md-label{ width:140px; color:#B0DFFF; font-weight:600; text-align:left; }
.modal-details-table .md-colon{ width:14px; text-align:center; color:#B0DFFF; font-weight:700; }
.modal-details-table .md-value{ color:#FFFFFF; text-align:left; }

/* Overlay */
.order-modal-bg{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.92); backdrop-filter:blur(10px);
  display:flex; justify-content:center; align-items:flex-start;
  padding:124px 12px; overflow-y:auto; overflow-x:hidden;
}

/* Container kiri+kanan */
.order-modal-flex{
  display:flex; flex-wrap:nowrap;
  width:min(980px, 98vw); margin:0; border-radius:18px; overflow:hidden;
  box-shadow:0 12px 44px #000a;
}

/* Panel */
.order-modal-left{
  box-sizing:border-box; background:#101013; color:#fff;
  min-width:350px; max-width:540px; width:36vw;
  padding:8px 32px 22px; display:flex; flex-direction:column; justify-content:center;
}
.order-modal-right{
  box-sizing:border-box;
  background:linear-gradient(135deg,#4facfe 0%,#003087 100%);
  min-width:450px; max-width:490px; padding:28px 28px 20px;
  display:flex; flex-direction:column; align-items:stretch; color:#fff;
  box-shadow:-4px 0 24px #0008 inset;
}

/* Title */
.order-modal-title{
  font-size:2.6em; color:#27c8ff; font-weight:900; text-align:center; margin-bottom:37px;
  text-shadow:0 0 12px #22e9ff80, 0 2px 30px #0ff4;
}
.order-modal-subtitle{ font-size:1.12em; margin-bottom:18px; }

/* Tabel ringkasan */
.order-modal-summary{ width:100%; border-collapse:collapse; }
.order-modal-summary td{
  padding:3px 6px; font-size:1.08em; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
  border-bottom:2px solid #393c48;
}
.order-modal-summary tr:last-child td{ border-bottom:none; }
/* Baris error tanpa border */
.order-modal-summary tr:has(#err-method) td,
.order-modal-summary tr:has(#err-ign) td,
.order-modal-summary tr:has(#err-qty) td{ border-bottom:none; padding:0; height:0; }

/* PayPal & Balance */
.order-modal-right .paypal-total-box,
.order-modal-right .balance-total-box{ width:100%; margin-left:0; margin-right:0; }
.paypal-total-box{
  border:none; border-radius:8px; padding:10px 12px; margin-bottom:7px;
  background:rgba(2,10,66,0.50); width:100%; box-sizing:border-box;
}
.pay-totals{ width:100%; color:#ffd700; text-shadow:0 0 8px rgba(255,215,0,.35); }
.pay-totals-row{ display:flex; align-items:center; }
.pay-totals-row .label{ text-align:left; }
.pay-totals-row .value{ margin-left:15px; }
#paypal-button-modal{ width:100%; min-width:0; max-width:100%; margin-bottom:14px; box-sizing:border-box; display:block; }
#paypal-button-modal iframe,
#paypal-button-modal > div,
#paypal-button-modal > *{
  width:100%!important; min-width:0!important; max-width:100%!important; min-height:52px!important; box-sizing:border-box!important;
}

.balance-total-box{
  border:1px solid #808080; border-radius:12px; padding:10px 12px; margin-bottom:12px;
  background:rgba(255,255,255,0.05); width:100%; box-sizing:border-box;
}
#summary-subtotal-2{
  font-size:1.25rem; font-weight:800; margin:8px 0 6px; color:#ffd700;
  text-shadow:0 0 8px rgba(255,215,0,.35);
}
#balance-pay,.order-modal-balance{
  width:100%; min-height:52px; border-radius:13px; font-size:1.08rem; font-weight:800;
  display:block; margin-bottom:12px; box-sizing:border-box;
  background:#FFA900; color:#222; border:none;
  transition:background .22s, transform .12s, box-shadow .12s;
}
#balance-pay:hover,.order-modal-balance:hover{
  background:#FFBE36; color:#181818; box-shadow:0 0 10px rgba(255,215,0,.5); transform:translateY(-1px);
}
#balance-pay:active,.order-modal-balance:active{ transform:translateY(0); }

#summary-cancel,.order-modal-cancel{
  width:100%; min-height:48px; border-radius:12px; font-size:1.02rem; font-weight:700;
  background:#383838; color:#fff; border:none; box-sizing:border-box;
  transition:background .2s, opacity .2s;
}
#summary-cancel:hover,.order-modal-cancel:hover{ background:#444; opacity:.95; }

#buy-error-msg-balance,#balance-error-msg,#err-total-balance{
  display:none; margin:8px 0 6px; padding:8px 10px; border-radius:8px; font-size:.95rem; line-height:1.25;
}
#buy-error-msg-balance{ color:#ffe08a; background:rgba(255,170,0,.08); border-left:3px solid #ffbb33; }
#balance-error-msg{     color:#ffaaaa; background:rgba(255,0,0,.08);  border-left:3px solid #ff5b5b; }
#err-total-balance{     color:#ffcc80; background:rgba(255,140,0,.08); border-left:3px solid #ff9800; }

/* Modal: Mobile stack */
@media (max-width: 767.98px){
  .order-modal-flex{ flex-direction: column; }
  .order-modal-left{ padding-bottom: 0; width:100%; min-width:0; max-width:100%; }
  .order-modal-right{ padding-top: 6px; width:100%; min-width:0; max-width:100%; }
  .order-modal-summary td{ font-size: 13px; }
}

/* =========================
   Success Modal (Thank you)
========================= */
.modal-overlay{
  position:fixed; inset:0; z-index:10000; display:none;
  background:rgba(0,0,0,.8); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:18px 12px; overflow:auto;
}
#success-modal.modal-overlay.active{ display:flex!important; }

.modal-container{
  width:min(640px, 100%); margin:auto; background:#0f172a;
  border:1px solid #21314f; border-radius:16px; padding:18px;
  box-shadow:var(--shadow); text-align:center;
}
.modal-header2{ margin:0 0 6px 0; font-size:clamp(18px,4.5vw,24px); font-weight:800; }
.modal-subtitle{ color:var(--muted); font-size:14px; margin-bottom:12px; }
.modal-details{ background:#0f1629; border:1px solid #203052; border-radius:12px; padding:10px; }
.modal-details-table{ width:100%; border-collapse:collapse; }
.modal-details-table td{ padding:6px 4px; border-bottom:1px dashed #1f2a44; }
.modal-details-table .md-label{ width:140px; color:#B0DFFF; font-weight:600; text-align:left; }
.modal-details-table .md-colon{ width:14px; text-align:center; color:#B0DFFF; font-weight:700; }
.modal-details-table .md-value{ color:#FFFFFF; text-align:left; }

.modal-button{
  border:0; border-radius:12px; margin-top:12px; width:30%; height:48px;
  position:relative; overflow:hidden;
  background: linear-gradient(90deg,#00ffe7 0%,#4DA6FF 100%);
  background-size:200% 100%; background-position:0 0;
  transition: transform .15s ease, box-shadow .25s ease, background-position .35s ease, filter .25s ease;
}
.modal-button::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .6s ease; pointer-events:none;
}
.modal-button:hover{
  background-position:100% 0; transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,255,231,.18), 0 6px 16px rgba(77,166,255,.18);
  filter:brightness(1.05);
}
.modal-button:hover::after{ transform: translateX(120%); }
.modal-button:active{ transform: translateY(0); filter: brightness(.95); }

/* =========================
   Responsive Grid Upscale
========================= */
@media (min-width: 576px){ .server-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 768px){ .server-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 992px){ .server-cards{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1200px){ .server-cards{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* =========================
   Utilities & A11y
========================= */
:focus-visible{ outline:2px solid var(--brand-1); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }

/* Safe-area for notches */
@supports (padding: max(0px)){
  .order-modal-bg{ padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .modal-overlay{  padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}