/* ================================
   KeysON Builder — Premium Theme v3.1
   (Original container dimensions restored)
   ================================ */

:root{
  --violet-1:#2b0a49;
  --violet-2:#4b18d2;
  --magenta:#7d11b9;
  --violet-3:#9b2bff;
  --cyan:#00e4ff;

  --bg:#130a21;
  --text:#f5f7fb;
  --muted:#b6bdd0;

  --panel:rgba(255,255,255,.05);
  --panel-deep:rgba(255,255,255,.03);
  --stroke:rgba(255,255,255,.10);

  --grad:linear-gradient(90deg,var(--violet-2),var(--magenta),var(--violet-3));
  --grad-cta:linear-gradient(90deg,var(--violet-2),var(--magenta));

  --radius:18px;
  --shadow:0 18px 50px rgba(155,43,255,.25);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body,h1,h2,h3,p,select{margin:0;padding:0}

/* ---------- Background ---------- */
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 6% 0%,rgba(155,43,255,.22),transparent 60%),
    radial-gradient(900px 520px at 100% 0%,rgba(0,228,255,.18),transparent 60%),
    var(--bg);
  overflow-x:hidden;
}

  body {
    background:
    radial-gradient(1200px 900px at 50% 0%, rgba(155,43,255,.18), transparent 70%),
    radial-gradient(1000px 900px at 50% 100%, rgba(0,228,255,.15), transparent 70%),
    var(--bg);
    background-size: cover;
    background-attachment: fixed;
  }

body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 120px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 120px);
  mask:radial-gradient(ellipse at center,rgba(0,0,0,.9),transparent 80%);
}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 6%;
  background:rgba(20,10,40,.55);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--stroke);
}
.logo img{height:52px}
nav ul{list-style:none;display:flex;gap:20px;padding:0;margin:0}
nav ul li a{
  display:inline-block;padding:10px 18px;border-radius:10px;
  color:var(--text);text-decoration:none;
  font-weight:700;font-family:"Exo 2",sans-serif;
  background:rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  transition:transform .2s,box-shadow .2s,background .2s;
}
nav ul li a:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.1);
  box-shadow:0 10px 30px rgba(155,43,255,.25);
}
.menu-toggle{display:none;font-size:28px;background:none;border:none;color:var(--text);cursor:pointer}
@media(max-width:768px){
  .menu-toggle{display:block}
  header nav{
    position:absolute;top:70px;right:0;width:100%;text-align:center;
    background:rgba(20,10,40,.85);backdrop-filter:blur(14px);
    max-height:0;overflow:hidden;transition:max-height .35s ease;
    border-top:1px solid var(--stroke);
  }
  header nav.show{max-height:320px;border-bottom:1px solid var(--stroke)}
  nav ul{flex-direction:column;gap:12px;padding:16px 0}
}

/* ---------- Status row ---------- */
.status-row{
  display:flex;justify-content:center;align-items:center;gap:12px;
  padding:20px 0;margin-top:8px;
}
.status-bubble{
  width:26px;height:26px;border-radius:50%;
  background:#fff;opacity:.25;border:1px solid var(--stroke);
  transition:all .25s ease;
}
.status-bubble.active{
  background:linear-gradient(180deg,var(--violet-3),var(--magenta));
  opacity:1;box-shadow:0 0 15px rgba(155,43,255,.5);
}
.line{
  width:40px;height:3px;border-radius:5px;
  background:rgba(255,255,255,.2);
}
.line.active{background:linear-gradient(90deg,var(--violet-2),var(--violet-3))}

/* ---------- Container Layout ---------- */
.container{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:20px;
  margin:0 auto;
  max-width:none;
}

.selection-panel{
  flex:1;
  padding:20px;
  margin-right:50px;
  background:linear-gradient(180deg,var(--panel),var(--panel-deep));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:28px;
}

.keyboard-window{
  flex:2;
  padding:20px;
  margin-right:50px;
  background:linear-gradient(180deg,var(--panel),var(--panel-deep));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
}

.summary-window{
  flex:1;
  padding:20px;
  background:linear-gradient(180deg,var(--panel),var(--panel-deep));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:20px;
}

/* ---------- Component blocks ---------- */

.component h2{
  font:800 22px "Exo 2",sans-serif;
  margin-bottom:14px;
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- Grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: center;
}

/* Optional tweak for smaller screens */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on phones */
  }
}
/* ---------- Option Buttons ---------- */
.component-button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  height:100px;
 background: none; /* remove gradient */
  background-color: rgba(255,255,255,.03);  border:1px solid grey ;
  border-radius:14px;
  color:var(--text);
  cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 5px 20px rgba(0,0,0,.15);
  text-align:center;
  font-weight:600;
}
.component-button p{margin:0}
.component-button img{height:40px}
.component-button:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 40px rgba(155,43,255,.25);
}
.component-button.selected{
  border-color:rgba(155,43,255,.6);
  box-shadow:0 0 0 2px rgba(155,43,255,.3) inset,0 18px 50px rgba(75,24,210,.25);
}

/* ============================
   Neon underglow effect for keyboard
   ============================ */

/* ---------- Keyboard Display ---------- */
.keyboard-display {
 position: relative;
  width: 100%;
  height: 500px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: transparent;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Add subtle neon reflection below keyboard */
.keyboard-display::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 120px;
  background: radial-gradient(
    ellipse at center,
    rgba(155,43,255,.55),
    rgba(75,24,210,.15) 60%,
    transparent 100%
  );
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* ---------- Base keyboard image (first layer) ---------- */
.kbrd-img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 85%;
  height: auto;
  object-fit: contain;
  z-index: 2;

  /* smooth top fade */
  mask-image: linear-gradient(to top, black 0%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 0%, black 90%, transparent 100%);
  transition: filter 0.4s ease, transform 0.3s ease;
}

/* Apply glowing halo ONLY to the base image (first picture) */
.kbrd-img.glow {
  position: relative;
  width: 85%;
  height: auto;
  object-fit: contain;
  z-index: 2;

  /* remove mask that causes dark fade at the edge */
  mask-image: none;
  -webkit-mask-image: none;

  /* smaller, softer neon glow */
  filter:
    drop-shadow(0 0 8px rgba(155, 43, 255, 0.6))
    drop-shadow(0 0 16px rgba(75, 24, 210, 0.4))
    drop-shadow(0 0 32px rgba(0, 228, 255, 0.25))
    brightness(1.04);
  transition: filter 0.4s ease, transform 0.3s ease;
}

.kbrd-img.glow:hover {
  transform: scale(1.015);
  filter:
    drop-shadow(0 0 10px rgba(155, 43, 255, 0.75))
    drop-shadow(0 0 20px rgba(75, 24, 210, 0.55))
    drop-shadow(0 0 40px rgba(0, 228, 255, 0.35))
    brightness(1.1);
}


@keyframes glowPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 12px rgba(155, 43, 255, 0.55))
      drop-shadow(0 0 24px rgba(75, 24, 210, 0.45))
      drop-shadow(0 0 48px rgba(0, 228, 255, 0.35))
      brightness(1.05);
  }
  50% {
    filter:
      drop-shadow(0 0 18px rgba(155, 43, 255, 0.75))
      drop-shadow(0 0 36px rgba(75, 24, 210, 0.6))
      drop-shadow(0 0 72px rgba(0, 228, 255, 0.45))
      brightness(1.09);
  }
}

.container, .selection-panel, .summary-window {
  overflow: visible !important;
}


/* Optional animation (subtle pulse glow) */
@keyframes pulse-glow {
  0%, 100% { opacity: .8; filter: blur(40px); }
  50% { opacity: 1; filter: blur(60px); }
}
.keyboard-display::after {
  animation: pulse-glow 5s ease-in-out infinite;
}

.image-disclaimer{text-align:center;color:var(--muted);font-size:13px;margin-top:10px}

/* ---------- Nav buttons ---------- */
.navigation{display:flex;justify-content:center;gap:20px;margin-top:20px}
.prev-button,.next-button{
  background:var(--grad-cta);
  color:#fff;
  padding:12px 28px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  font-family:"Exo 2",sans-serif;
  transition:transform .2s,box-shadow .2s;
}
.prev-button:hover,.next-button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(155,43,255,.35);
}

/* ---------- Summary ---------- */
.summary-window h2{
  font:800 22px "Exo 2",sans-serif;
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.summary-window ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.summary-window li{
  font-size:17px;
  color:var(--muted);
  background:rgba(255,255,255,.03);
  border:1px solid var(--stroke);
  border-radius:10px;
  padding:10px 12px;
}
.total-price{
  font-weight:800;font-size:18px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:12px;
}
.summary-footer{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:auto}

/* ---------- Bottom text ---------- */
.bottom-text-container{margin-top:20px;text-align:center}
.bottom-text{color:var(--muted);font-size:14px}

/* ---------- Modal ---------- */
.modal{display:none;position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.6)}
.modal-content{
  background:#1c102e;
  color:var(--text);
  width:min(480px,90%);
  margin:15vh auto;
  padding:26px;
  border-radius:14px;
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}
.close{float:right;font-size:28px;cursor:pointer;color:#aaa}
.close:hover{color:#fff}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .container{flex-direction:column;gap:30px;padding:0 20px}
  .keyboard-display{height:400px}
}
@media(max-width:768px){
  .keyboard-display{height:320px}
  .component-button{height:90px}
}

/* ---------- Legacy ---------- */
.non-display{display:none}
.kbrd-img{width:85%}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#666;border-radius:6px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}







/* ========== MOBILE LAYOUT ========== */
@media (max-width: 768px) {

  header {
    padding: 10px 16px;
  }

  .status-row {
    padding: 14px 0;
    margin-top: 0;
  }

  /* Main layout: full width, stacked */
  .container {
    flex-direction: column;
    align-items: stretch;
    max-width: 480px;
    margin: 0 auto;
    padding: 12px 12px 24px;
    gap: 18px;
  }

  .selection-panel,
  .keyboard-window,
  .summary-window {
    margin: 0;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
  }

  /* Keyboard area smaller so you don’t scroll through empty space */
  .keyboard-display {
    height: 260px;
  }

  .keyboard-display::after {
    bottom: -18px;
    height: 80px;
    filter: blur(30px);
  }

  /* Options grid – 2 per row on phones */
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .component-button {
    height: 80px;
    font-size: 14px;
    padding: 10px;
  }

  .component h2,
  .summary-window h2 {
    font-size: 18px;
  }

  .summary-window li,
  .total-price {
    font-size: 15px;
    padding: 10px 12px;
  }

  .navigation {
    margin-top: 16px;
  }

  .prev-button,
  .next-button {
    padding: 10px 20px;
    font-size: 14px;
  }

  .bottom-text-container {
    padding-inline: 12px;
  }
}

/* Tiny phones: 1 column grid */
@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }
}





.peach-pink{
    background: linear-gradient(
    to right,
    #FFE0D8 0%,
    #FFE0D8 50%,
    #FBC3C1 50%,
    #FBC3C1 100%
  );
}

.jungle-green{
    background: #263B36;
}

.mint-green-and-dark-blue{
    background: linear-gradient(
        to right,
        #2C334E 0%,
        #2C334E 50%,
        #79E7CC 50%,
        #79E7CC 100%
      );
}

.mountain-blue{
    background: #385772;
}

.blue-starry{
    background: linear-gradient(
    to right,
    #586377 0%,
    #586377 40%,
    #FFC848 40%,
    #FFC848 60%,
    #FFFFFF 60%,
    #FFFFFF 100%
  );
}


.hhq-cherry{
    background: linear-gradient(
    to right,
    #52525A 0%,
    #52525A 40%,
    #8BA7AF 40%,
    #8BA7AF 60%,
    #2B2C35 60%,
    #2B2C35 100%
  );
}


.orange-red{
    background: #F9867E;
}


.mlv{
    background: linear-gradient(
    to right,
    #234357 0%,
    #234357 50%,
    #4FC238 50%,
    #4FC238 100%
  );
}

.starfall{
    background: linear-gradient(
    to right,
    #C1DCFA 0%,
    #C1DCFA 40%,
    #9B9DE1 40%,
    #9B9DE1 60%,
    #FFFFFF 60%,
    #FFFFFF 100%
  );
}

.british-racing{
    background: linear-gradient(
    to right,
    #163C2F 0%,
    #163C2F 40%,
    #D5B184 40%,
    #D5B184 60%,
    #FEFAF6 60%,
    #FEFAF6 100%
  );
}

.gradient-green{
    background: linear-gradient(to right, #89DBC8, #458873);
}

.retro-a{
    background: linear-gradient(
    to right,
    #A9A39E 0%,
    #A9A39E 40%,
    #822A23 40%,
    #822A23 60%,
    #5D5C66 60%,
    #5D5C66 100%
  );
}

.retro-b{
    background: linear-gradient(
    to right,
    #ECE8E1 0%,
    #ECE8E1 40%,
    #8F2721 40%,
    #8F2721 60%,
    #BEBBAE 60%,
    #BEBBAE 100%
  );
}

.bhh-backlit{
    background: linear-gradient(
    to right,
    #FAFCFE 0%,
    #FAFCFE 40%,
    #2E3032 40%,
    #2E3032 60%,
    #B6B9B6 60%,
    #B6B9B6 100%
  );
}

.qkl-backlit{
    background: linear-gradient(
    to right,
    #533E2C 0%,
    #533E2C 40%,
    #E0D3B6 40%,
    #E0D3B6 60%,
    #413932 60%,
    #413932 100%
  );
}

.gradient-purple{
    background: linear-gradient(to right, #1C1A31, #8A70AD);
}

.blh{
    background: linear-gradient(
    to right,
    #3A4E69 0%,
    #3A4E69 40%,
    #EEF0F2 40%,
    #EEF0F2 60%,
    #262A2E 60%,
    #262A2E 100%
  );
}

.ml-cherry{
    background: linear-gradient(
    to right,
    #FEF7E2 0%,
    #FEF7E2 40%,
    #D32F29 40%,
    #D32F29 60%,
    #7799B4 60%,
    #7799B4 100%
  );
}

.bw-cherry{
    background: linear-gradient(
    to right,
    #0A0A0A 0%,
    #0A0A0A 50%,
    #FDFDFD 50%,
    #FDFDFD 100%
  );
}

.huizong-cherry{
    background: linear-gradient(
    to right,
    #504C4B 0%,
    #504C4B 40%,
    #EDDDC0 40%,
    #EDDDC0 60%,
    #998875 60%,
    #998875 100%
  );
}

.hxf-cherry{
    background: linear-gradient(
    to right,
    #5E2635 0%,
    #5E2635 40%,
    #F65A6E 40%,
    #F65A6E 60%,
    #2C292C 60%,
    #2C292C 100%
  );
}

.matcha{
    background: linear-gradient(
    to right,
    #CBCFAC 0%,
    #CBCFAC 50%,
    #677045 50%,
    #677045 100%
  );
}

.purple-green{
    background: linear-gradient(
    to right,
    #ADCC0C 0%,
    #ADCC0C 50%,
    #A387C1 50%,
    #A387C1 100%
  );
}

.pink-white{
    background: linear-gradient(
    to right,
    #EDA6A4 0%,
    #EDA6A4 50%,
    #FFFFFF 50%,
    #FFFFFF 100%
  );
}

.cyan{
    background: #B2F8FF;
}

.light-blue{
    background: #53C9D7;
}

.lemon-tree{
    background: #FFFD60;
}

.blue{
    background: #8ACCFE;
}

.brown{
    background: #7C5F3F;
}

.berry{
    background: #B99ACF;
}

.orange{
    background: #FD7D44;
}

.red{
    background: #B12C2F;
}

.pink{
    background: #EEADBD;
}

.white-button {
    background: white;
}

.black-button {
    background: black;
}


.red-button{
    background-color: #A82029;
}

.blue-button{
    background-color: #44A9FF;
}

.dark-blue-button{
    background-color: #033b6b;
}

.green-button{
    background-color: #12A81C;
}

.purple-button{
    background-color: #5813A8;
}

.pink-button{
    background-color: #DDA6B6;
}

.orange-button{
    background-color: rgb(255, 95, 36);
}


.brown-button{
    background-color: rgb(54, 28, 3);
}

.grey-button{
    background-color: grey;
}


.red-button{
    background-color: red;
}


/* Outer scroll window */
.color-options {
  height: 400px; /* fixed height like original */
  width: 100%;
  overflow: hidden; /* hide horizontal overflow */
  position: relative;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.02);
}

/* Inner scrollable area */
.color-options .premade {
  height: 100%;
  width: 100%;
  overflow-y: auto; /* vertical scroll */
  overflow-x: hidden;
  padding: 20px;
}

/* Scrollbar styling (consistent with theme) */
.color-options .premade::-webkit-scrollbar {
  width: 10px;
}

.color-options .premade::-webkit-scrollbar-thumb {
  background: rgba(155,43,255,.4);
  border-radius: 5px;
}

.color-options .premade::-webkit-scrollbar-thumb:hover {
  background: rgba(155,43,255,.6);
}

.color-options .premade::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
}

.color-options .premade .grid {
  gap: 16px;
}