@font-face {
  font-family: 'Orbitron ExtraBold';
  src: url('./assets/site_fonts/menu/Orbitron-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}





/* Top Nav */
#topnav{
  height: var(--nav-h);
  background: linear-gradient(90deg, #ffffff, #e4e4e4);
  color: #000000;
  display: flex;
  align-items: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#topnav .nav-inner{
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
}
#topnav .brand{ display:flex; align-items:center; gap:12px; }
#topnav .logo{ height: 34px; }
#topnav .tagline{ opacity:.9; font-size:14px; }
#topnav .nav-links a{
  color:#000000; text-decoration:none; margin-left:24px; font-weight:600;
}
#topnav .nav-links a.basket{ padding:6px 10px; border-radius:16px; background:#d3d3d3; }


/* ---- SIMPLE GLOBALS ---- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }

#topnav {
  display: none;
}/*--------------------------------HIDE NAVBAR WHEN READY ROBSKI*/



/* ---- SIZING KNOBS (only 3 to think about) ---- */
:root{
  --nav-h: 0px;        /* top bar 80px height */
  --panel-w: 420px;     /* right menu width */
  --gap: 40px;          /* space between preview and menu */
  --pad: 10px;          /* inner padding around the whole app */
}

/* ---- TOP NAV ---- */
#topnav{ height: var(--nav-h); 
font-family: Arial, Helvetica, sans-serif;}





/* ---- VIEWPORT: fills screen under nav, no scroll ---- */
#viewport {
  width: 100vw;
  height: calc(100vh - var(--nav-h));
  padding: var(--pad);
 
  box-sizing: border-box;

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

  background-image: url('./assets/Viewport Background/viewport_background03.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;  
}


.stage{
  display: flex;
  align-items: center;
  height: var(--preview-size);   /* 🔑 reference height */
}


.side-logo{
  
  height: 95%;                  /* 🔑 inherits stage height */
  width: auto;
  /*height: var(--preview-inner-h);*/
  
  aspect-ratio: 1 / 6;           /* adjust for logo proportions */

  /*background-image: url('./assets/Viewport Background/BUILDAROO_vertical_logo.png');*/
  /*background-image: url('./assets/Viewport Background/BUILDAROO_vertical_logo1.png');*/
  background-image: url('./assets/Viewport Background/BUILDAROO_vertical_logo2.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;      /* 🔑 no cropping */
  opacity: 1;                 /* decorative */
  pointer-events: none;
}


.menu-bg-logo{
  /* REMOVE absolute positioning */
  position: relative;

  width: 140px;
  height: 140px;

  background: url('./assets/Preview Window Background/no_ou_copyright_logo.png')
    no-repeat center / contain;

  pointer-events: none;
  opacity: 1;

  margin-top: auto;      /* ← this is the flex magic */
  align-self: center;    /* horizontal centering */
  z-index: 0;
}





#rear-preview-panel {
  max-width: 100%;
}

#rear-preview-img.rear-preview {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

#snapshot-exporter {
  position: fixed;
  bottom: 60px;
  right: 30px;
  z-index: 9999;
  width: 200px;
  height: 200px;
   background: url('./assets/Preview Window Background/marketing_snapshot.jpg')
    no-repeat center / contain;
  background-color: red;
}




/* ---- COMPUTE THE PREVIEW SIZE ONCE ---- */
/* Fit inside available height and width (after panel+gap+padding) */
:root{
  --avail-h: calc(100vh - var(--nav-h) - (2 * var(--pad)));
  --avail-w: calc(100vw - var(--panel-w) - var(--gap) - (2 * var(--pad)));
  --preview-size: clamp(360px, min(var(--avail-h), var(--avail-w) - 60px), 1080px);

}

/* ---- APP ROW: perfectly centered bundle ---- */
#app{
  display: flex;
  gap: var(--gap);
  align-items: stretch;   /* makes menu match preview height */
  /* the bundle width equals preview + gap + panel; viewport centers it */
  width: calc(var(--preview-size) + var(--gap) + var(--panel-w));
  max-width: 100%;
}

/* ---- LEFT: PREVIEW SQUARE ---- */
#preview{
  width: var(--preview-size);
  height: var(--preview-size);
  background-image: url('./assets/Preview Window Background/preview_background03.svg');
  /*background: #f6f6f6;*/
  border: 2px solid #333;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; flex: 0 0 auto;


}
#preview img{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;


}

#preview::after{
  content: "";
  position: absolute;
  inset: 0;                 /* top:0 right:0 bottom:0 left:0 */
  border: 9px solid #000;   /* black border */
 
  pointer-events: none;     /* don't block clicks */
  z-index: 9999;            /* above all preview layers */
}

#viewport {
  width: 100vw;
  height: calc(100vh - var(--nav-h));
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease-in-out;
}






/* ---- RIGHT: CONTROLS PANEL (same height as preview) ---- */

#controls::before{
  content: "";
  display: block;
  height: 10px;   /* 👈 your gap */
  flex-shrink: 0;
}

#controls{
  margin-top: 11px;
  /*padding-top: 10px !important;*/
  font-family:Arial, Helvetica, sans-serif;
  width: var(--panel-w);
  height: var(--preview-size);     /* matches preview automatically */
 
  background-image: url('./assets/Preview Window Background/menu_background_01.png');
  background-repeat: no-repeat;
  background-size: cover;          /* 🔧 fills the entire oblong */
  background-position: center;     /* 🔧 keeps it centred */
  /*background: #420062;*/
  /*background: #530785;---------NICE PURPLE*/
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  display: flex; 
  flex-direction: column; 
  gap: 16px;
  overflow: auto;                  /* internal scroll if content exceeds */

}




/* footer buttons area stays as you had */
#controls-footer{ margin-top: 12px; display: flex; justify-content: flex-end; gap: 12px; }


#feature-label{ 
  margin-top: 10px;
  margin: 0 auto 8px; 
  width: 70%;
  padding:10px 12px; 
  background:#000000; 
  font-family: 'Orbitron ExtraBold', sans-serif;
  color:#ffffff; 
  border-radius:4px; 
  text-align:center; 
z-index: 5;}

/* Main menu buttons made by JS */
#menu .main-button{ 
  display:block; 
  width:70%; 
  height: 40px;
  padding:7px 28px; 
  margin: 0 auto 12px; /* 👈 centers the narrower box */
  font-family: 'Orbitron ExtraBold', sans-serif;
  font-size:16px; 
  /*background: #5c007a; */
  /*background: #0000003b; /* semi transparent grey*/
  
   background-image: url('./assets/Preview Window Background/preview_background10.png');
  /*background-image: url('./assets/Preview Window Background/preview_background10.png');*/
  background-repeat: no-repeat;
  background-size: cover;          /* 🔧 fills the entire oblong */
  background-position: center;     /* 🔧 keeps it centred */
  color:#ffffff;
  background-color: #ffffff;/* our PURPLE hex colour 9300d2*/
  background-color: #9300d2;/* our PURPLE hex colour 9300d2*/
  color:#ffffff; 
  border:none; 
  border-radius:4px; 
  cursor:pointer; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
  /*border: solid 4px #af03ff; /* current purple highlight */
  border: solid 2px #ffff00;
  z-index: 5;
}



#confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
  transition: opacity 0.2s ease;
}

/*#build-progress {
  width: 100%;
  height: 20px;
  background: rgba(249, 1, 1, 0.25);
  margin-bottom: 8px;
}

#build-progress-fill {
  width: 0%;
  height: 100%;
  background: #4caf50;
}*/

/*#progress {
  display: none;
}*/

#progress {
  
  width: 100%;
  height: 15px;
  background: #fbff00;
  border-radius: 4px;
  overflow: hidden;
  margin: 0.75rem 0;
  box-shadow: 0 10px 20px rgba(0,0,0,0.45);
}

#progress-bar {
  height: 100%;
  background: #00ff2f;
  transition: width 0.25s ease;
}



@media (max-width: 768px) {
  #preview {
    order: 1;
  }

  #progress {
    order: 2;
    margin-top: 1px;   /* was ~12px */
    margin-bottom: 8px;
  }

  #confirm-btn {
    order: 3;
    margin-bottom: 12px;
  }

  #feature-label {
    order: 4;
  }

  #menu {
    order: 5;
  }
}




#controls-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#controls{
  position: relative; /* 🔑 anchor */
}


/* =====  carousel UI =====--------------------------------SUB MENUS BLOCKS */
.carousel-block{
  
  background-image: url('./assets/Preview Window Background/preview_background10.png');
  /*background-image: url('./assets/Preview Window Background/preview_background10.png');*/
  background-repeat: no-repeat;
  background-size: cover;          /* 🔧 fills the entire oblong */
  background-position: center;     /* 🔧 keeps it centred */
  color:#ffffff;
  border-radius:16px;
  padding:12px;
  margin-top:8px;
  border:2px solid #000000; /* thin lime border like mock */
}
.carousel-heading{
  text-align:center; font-weight:700; margin-bottom:10px; opacity:.9;
}
.carousel-row{
  display:grid;
  grid-template-columns: 60px 1fr 60px;
  align-items:center;
  gap:12px;
  padding:0 0;
  border:3px solid #9300d2;
  /*border:3px solid #dd00ff; 9300d2*/
  border-radius:6px;
  background:#ffffff;
  /*background:#c78aff;*/
  margin-bottom:12px;
}
.carousel-arrow{
  display:flex; 
  align-items:center; 
  justify-content:center;
  font-size:48px; 
  font-weight:700; 
  cursor:pointer; 
  user-select:none;
  color: #000000; 
}


.carousel-view{
  display:flex; 
  align-items:center; 
  justify-content:center;
  height:60px; 
/*background:#c78aff;*/
  background:#ffffff;
  border-radius:6px;
  overflow: hidden;
  Width: 120px;
  color: #000000;
  font-weight: 700;
  
}


.carousel-view img{ width:120px; height:120px; object-fit:contain; }
.carousel-caption{ text-align:center; font-style:italic; margin-top:-4px; opacity:.9; }



/* Footer actions (fixed in the panel) */
#controls-footer{
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

#back-btn{
  padding: 10px 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  background: #000000;
  color: #fff;
  cursor: pointer;
  height: 40px;
}
#back-btn:hover{ background:#3a3a3a; }
#back-btn[hidden]{ display:none; }

#confirm-btn.confirm{
  padding: 10px 40px;
  max-width: 220px;
width: 100%;
margin: 0 auto;

  font-weight: 700;
  border: none;
  border-radius: 18px;
  background: #e3d914;
  border:2px solid #9700f5; 
  /*background: #14e36a;KEEP*/
  color: #0b331b;
  cursor: pointer;
}
#confirm-btn.confirm:hover{ filter: brightness(0.95); }


.confirm-pulse {
  animation: confirmPulse 1.6s ease-in-out infinite;
}

.gender-btn {
  flex: 1;
  padding: 10px;
  font-weight: bold;
  font-size: 14px;
  border: 2px solid #aaa;
  border-radius: 6px;
  background: #f5f5f5;
  cursor: pointer;
}

.gender-btn.active {
  background: #04ff00;
  color: rgb(0, 0, 0);
  border-color: #222;
}

#gender-selector {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}



@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/*@keyframes confirmPulse {
  0%   { transform: translateX(-50%) scale(1); opacity: 1; }
  50%  { transform: translateX(-50%) scale(1.05); opacity: 0.85; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}-----------------------great pulse previously for monochrome startup Roo*/

/*pulse*/
/*#intro-kit {
  animation: fade-in 1.5s ease-out forwards, pulse 2.5s ease-in-out 1.5s infinite;
}*/

@keyframes confirmPulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.05); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}



#preview .kit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99;
}

.print-a4-controls {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: white;
  padding: 10px 20px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: sans-serif;
}

.page-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shirt-name,
.shirt-number {
  position: absolute;
  font-family: 'Orbitron', sans-serif;
  color: rgb(0, 0, 0);
  text-align: center;
  width: auto;
  letter-spacing: 2px;
  transform: rotate(90deg);
  transform-origin: center;
  z-index: 10000;
}



.shirt-name {
  top: 40%;
  left: 80%;
  font-size: 12rem;
  transform: rotate(90deg);
  transform-origin: center;
}


.shirt-number {
  top: 55%;
  left: 85%;
  font-size: 60px;
}


.personalise-menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  
}

.personalise-inputs {
  display: flex;
  flex-direction: column;
  align-items: center;   /* ⬅ centres everything horizontally */
  gap: 0.5rem;
}

.personalise-inputs label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  gap: 0.25rem;
}


.hair-preview-panel img {
  max-width: 1200px; /* adjust size */
  z-index: 3;
  height: auto;
  padding: 0;
}

.hair-preview-box {
  margin-top: 16px;
  padding: 10px 12px;
  background-image: url('./assets/Preview Window Background/preview_background03.svg');
  background-repeat: no-repeat;
  background-size: cover;          /* 🔧 fills the entire oblong */
  background-position: center;     /* 🔧 keeps it centred */
  /*background: #f1f1f1;*/
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #444;
}

.hair-preview-panel {
  display: flex;
  padding-bottom: 35px; 
  align-items: center;
  justify-content: center;
  height: 200px;
}



.rear-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2; /* above shirt base */
}


.rear-name {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Arial Black', sans-serif;
  font-size: 1.6rem;
  color: white;
  text-align: center;
}

.rear-number {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Arial Black', sans-serif;
  font-size: 4.9rem;
  color: white;
  text-align: center;
}


.carousel .thumb img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.rear-preview {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: auto;
  z-index: 10;
  position: relative;
}


.rear-shirt-base {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;   /* smaller than container */
  height: auto;
  transform: translate(-50%, -50%); /* center it */
  object-fit: contain;
  z-index: 1;
   
}

.rear-preview-label {
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 14px;
}


#rear-preview-img {
  max-width: 80%;
  height: 400px;
  border-radius: 4px;
  /*box-shadow: 0 1px 4px rgb(0, 0, 0);*/
  z-index: 1;
}


/* REAR PREVIEW — SINGLE SOURCE OF TRUTH */
.rear-preview-container{
  position:relative;
  width:100%;
  max-width:420px;
  margin:12px auto;
  aspect-ratio:1/1;
  /*background:#646464;*/
  background-image: url('./assets/Preview Window Background/preview_background03.svg');
  border:3px solid #000000; 
  border-radius:10px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 3;
}

.rear-preview-container img.rear-shirt-base{
  display:block;
  width:90%;
  height:auto;
  object-fit:contain;
}

.rear-overlay{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.rear-name   { position:absolute; top:25%; left:50%; transform:translateX(-50%); font-family:'Arial Black',sans-serif; font-size:1.6rem; color:#fff; text-align:center; }
.rear-number { position:absolute; top:35%; left:50%; transform:translateX(-50%); font-family:'Arial Black',sans-serif; font-size:4.9rem; color:#fff; text-align:center; }


.colour-swatches {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.swatch-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #ccc;
  cursor: pointer;
}

.swatch-btn:hover {
  border-color: #333333;
}


.figure-bounce {
  animation: dropBounce 1s ease-out forwards;
}

@keyframes dropBounce {
  0% {
    transform: translateY(-200px);
    opacity: 0;
  }
  60% {
    transform: translateY(20px);
    opacity: 1;
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}




.grid-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-color: var(--swatch-color, #ccc);
  cursor: pointer;
  transition: border 0.2s ease;
  display: inline-block;
}

.grid-button.selected {
  border-color: #fff; /* or #000 or highlight */
  box-shadow: 0 0 0 2px #18a600; /* outer glow or ring */
}

/*.boots-preview-box {
  background: #ccc !important;
  border: 2px dashed red !important; /* force visibility */
  /*padding: 20px;
  margin-top: 20px;
  min-height: 100px;
}*/


.boots-preview-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
  color: #333;
}

.boots-preview-panel {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 16px;          /* spacing ABOVE the panel – same as hair */
  padding-bottom: 35px;      /* spacing BELOW image – same as hair */

  height: 200px;             /* same as hair */
  background: #fefefe;       /* same background as hair-preview-box */
  border-radius: 10px;       /* same rounded corners */
  border: 2px solid #000000; /* this gives you the visible border */

  overflow: hidden;
}



.boots-preview-panel img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.boots-color-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #ccc;
  margin: 6px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}

.boots-color-btn:hover {
  transform: scale(1.1);
}

.boots-color-btn.active {
  box-shadow: 0 0 10px 3px currentColor;
  border-color: currentColor;
}


.kit-pulse{
  animation: confirmPulse 1.6s ease-in-out 1;
}

/*a.disabled {
  pointer-events: none;
  opacity: 0.4;
  cursor: not-allowed;
}*/

a.disabled {
  pointer-events: none;
  cursor: default;
}

.main-button.disabled {
  pointer-events: none;     /* no click */
  cursor: default;
}

/* 🚫 cancel hover styles ONLY for disabled buttons */
.main-button.disabled:hover {
  background: inherit;
  box-shadow: none;
  transform: none;
}


#menu .main-button:not(.locked):hover {
  background:#26f70b;
  transform: scale(1.15);
  box-shadow: 0 10px 20px rgba(0,0,0,0.45);
}



.main-button.locked{
  opacity: 1;              /* was ~0.4 */
  filter: grayscale(0.03);   /* was 1 */
  cursor: not-allowed;
}

#submenu .carousel-heading {
  text-align: center;
  width: 100%;
  margin-bottom: 6px;
}

#submenu {
  display: flex;
  flex-direction: column;
}

/* Default = 0 */
#submenu .carousel-block {
  order: 0;  /* always first */
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers children horizontally */
}

#submenu .grid-row {
  order: 2;  /* branding/accents/base */
   display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px;
}

#submenu .boots-preview-box {
  order: 3;  /* always last */
}

#submenu .grid-row {
  display: flex;
  justify-content: center;  /* ⬅️ center the buttons */
  gap: 6px;                /* add spacing between them */
   padding: 2px 0;       /* 🔽 reduce vertical padding around buttons */
}

#submenu .grid-row-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers heading + buttons together */
}

#submenu .grid-heading {
  text-align: center;
  font-weight: 600;
  margin-bottom: 2px;
  width: 100%;           /* makes heading same width as carousel titles */
}


/* ───────────────────────────────────────────
   Orientation-aware responsive scaffold
   ─────────────────────────────────────────── */
:root {
  --gap: 12px;
  --pad: 12px;
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}


/* Base mobile-first stack */
#app {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  /* ✏️ remove padding-top hack; let #preview keep its natural spacing */
  padding: 0 var(--pad) var(--pad) var(--pad);

  box-sizing: border-box;
}

/* Fluid square preview */
#preview {
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 1 / 1;
  margin: var(--pad) auto;   /* ✏️ add margin to restore top gap + keep centered */
  position: relative;
}

/* Portrait: preview on top, controls below */
@media (orientation: portrait) {
  #preview { 
    order: 1;
    transform: translateY(-50px); 
  }
  #viewport {
    padding-top: 0;
  }
  #controls { 
    order: 2; 
    margin-inline: auto;    /* ✏️ center the menu block */
    width: 90%;             /* ✏️ avoid full bleed */
    max-width: 420px;
  }
}


/* Landscape: preview left, controls right */
@media (orientation: landscape) and (min-width: 768px) {
  #app {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(320px, 420px);
    gap: var(--gap);
    align-items: start;
  }
  #preview {
    grid-column: 1;
    margin-inline: 0;
    justify-self: start;
  }

   #app {
    padding-top: 0;   /* 👈 this is usually the real culprit */
  }

  /*#controls {
    grid-column: 2;
    max-height: calc(100dvh - (var(--pad) * 2) - var(--safe-top) - var(--safe-bottom));
    overflow: auto;
    padding: 6px;       /* reduce internal spacing */
    /*gap: 10px;  */        /* reduce space between elements 

  }*/
}
#controls {
  grid-column: 2;

  /* NEW */
  display: flex;
  flex-direction: column;

  max-height: calc(100dvh - (var(--pad) * 2) - var(--safe-top) - var(--safe-bottom));
  overflow: hidden;           /* important: stop logo floating over */
  padding: 6px;
  gap: 10px;
}


/* ── Confirm Modal Styles ── */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  background: #fff;
  padding: 2rem 2.5rem;
  border-radius: 20px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.modal-content h2 {
  margin-top: 0;
  font-size: 1.8rem;
  color: #18a600;
}

.modal-content p {
  font-size: 1rem;
  margin-bottom: 1.8rem;
  color: #333;
}

.modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.modal-btn {
  background: #18a600;
  color: #fff;
  padding: 0.8rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease;
}

.modal-btn:hover {
  background: #0c7f00;
}

.modal-close {
  background: #ccc;
  color: #000;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s ease;
}

.modal-close:hover {
  background: #aaa;
}


/* ─── Pay Now Modal ─── */
#pay-now-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  display: none; /* shown by JS */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#pay-now-modal .modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  width: 420px;
  max-width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  animation: fade-in 0.3s ease-out;
}

#pay-now-modal h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #333;
}

#snapshot-container img {
  margin: 1rem 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.modal-buttons button {
  padding: 0.8rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.2s;
}

#download-snapshot {
  background: #18a600;
  color: #fff;
}

#share-twitter {
  background: #1DA1F2;
  color: #fff;
}

#share-facebook {
  background: #1877F2;
  color: #fff;
}

#share-link {
  background: #555;
  color: #fff;
}

.modal-buttons button:hover {
  opacity: 0.9;
}

.close-pay-now {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  font-size: 1.8rem;
  color: #666;
  cursor: pointer;
}





.thumb-text-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron ExtraBold', sans-serif;
  font-size: 22px;
  color: #6c2ae6;
  border: 2px solid #6c2ae6;
  border-radius: 12px;
  background: white;
}


/* Taller preview box for kits */
.kit-carousel .carousel-view {
  height: 140px;          /* adjust as needed */
}

/* Bigger kit thumbnails */
.kit-carousel .carousel-view img {
  max-height: 120px;      /* adjust as needed */
  width: auto;
  object-fit: contain;
}


@media (max-width: 768px){
  .side-logo{
    display: none;
  }
}


@media (max-width: 768px) {
  #controls-footer {
    position: static; /* release it */
  }

  #progress {
    position: fixed;
    top: calc(var(--preview-size) + 50px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 420px;
    z-index: 1000;
    
  }
}