/* =========================
   Tunable UI variables
   ========================= */
:root{
  /* White frame (% of min(canvas W,H)) — try 3–6 */
  --frame-thickness-pct: 4;

  /* Base logo margin (% of canvas width) */
  --logo-margin-pct: 4.5;

  /* Theme */
  --card-bg: #0e0f14;
  --card-br: 14px;
  --ink: #000;
  --muted: #b9bed1;
  --brand: #ffbe32;
  --brand-ink: #1a1205;
  --line: #232633;
}

/* Base */
*{ box-sizing:border-box; }
html, body{
  margin:0; padding:0;
  background:url("bg.jpg") no-repeat center center fixed; color:var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;margin-bottom: 35px;
}

footer {
  position: fixed;              /* fixed to viewport */
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100vw * 400 / 1920);
  /* max-height: 150px;          */
  pointer-events: none;         /* allows clicking through */
  z-index: 1;
}

footer::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('bottom.png') no-repeat center bottom;
  background-size: 100% 100%;
  z-index: -1;
}

/* Mobile - different background */
@media (max-width: 640px) {
  footer {
    height: 25vh;
    min-height: 150px;
  }
  footer::before {
    background: url('bottom-mobile.png') no-repeat center bottom;  /* different image */
    background-size: 100% 100%;
  }
}
.app-header{
  padding:10px 12px 6px;
  text-align:center;
  border-bottom: 1px solid #0f111a;
}
.app-header h1{
  margin:0; font-size:1.1rem; font-weight:700; letter-spacing:.2px; color: #0f111a;
}

.app-header img {
  max-height: 60px;        /* adjust height as needed */
  max-width: 350px;        /* prevent it from being too wide */
  height: auto;
  width: auto;
}
.footer-logo {
  position: absolute;
  right: 0;
  bottom: 20px;
;  /* centers it horizontally */
  max-height: 80px;
  width: auto;
  z-index: 2;
  pointer-events: auto;
  max-width:160px
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .footer-logo {
    max-height: 40px;
    bottom: 15px;
  }
}

.app-main {
  position: relative;
  z-index: 2;
}

.card {
    position: relative;
    z-index: 2;
    background: #ffffff57;
    /* border: 1px solid var(--line); */
    border-radius: var(--card-br);
    padding: 12px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.card.tight{ padding: 10px 10px 12px; }

/* .step{ display:block; }
.step:not(.active){ display:none; } */

.step {
  display: none;
}

.step.active {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 64px); /* header space */
  padding: 16px;
  box-sizing: border-box;
}

.step.active .card,
.step.active .editor-layout {
  width: 100%;
  max-width: 960px;
}

.step-title{ margin: 2px 0 8px; font-size:1rem; }

/* Buttons */
.btn {
    border: 1px solid var(--line);
    background: #ec2527;
    color: var(--ink);
    border-radius: 12px;
    padding: 9px 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .04s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn.primary{ background: var(--brand); color: var(--brand-ink); border-color:#e2a422; }
.btn.ghost{ background: transparent; }
.btn.small{ padding:6px 10px; border-radius: 10px; }
.btn.wide{ width: 100%; }

.muted{ color: var(--muted); }
.micro{ font-size: .8rem; }
.error{ color:#ff6a6a; font-weight:600; margin: 4px 0 10px; }

/* Forms */
.form-grid{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0 20px;
}

/* Enhanced inputs */
.form-grid input[type="text"], 
.form-grid input[type="tel"] {
  padding: 14px 16px;
  font-size: 16px;
  transition: all 0.2s ease;
}

.form-grid input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 190, 50, 0.1);
}

/* Desktop: side-by-side */
@media (min-width: 640px) {
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

label {
    flex-direction: column;
    gap: 6px;
    font-size: 16px;
    color: #000;
}
input[type="text"], input[type="tel"], input[type="file"]{
  background:#fffaf4;; border:1px solid var(--line);
  border-radius: 10px; padding: 9px 10px; color:var(--ink);
}

/* Camera */
.camera-area{ display:flex; flex-direction:column; align-items:center; gap:10px; }
#liveFeed{
  width:min(460px, 92vw);
  border-radius: 12px; border:1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
     background: #ffffff9c;; aspect-ratio: 3/4; object-fit: cover;
}
.cam-actions{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.upload-wrap{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.upload-label{ color:#ffbe32; font-size:0.96rem; }

/* ===== Editor ===== */

/* Two-column editor (compact feel) */
.editor-layout{
  position: relative;
  display:grid;
  grid-template-columns: 1fr 380px;
  gap: 12px; align-items:start;
}

/* Sticky preview (always above controls) */
.preview-pane {
    position: sticky;
    /* top: 8px; */
    z-index: 3;
    padding: 0;
    border-radius: 14px;
    /* border: 1px solid var(--line); */
  background: #ffffff;
    /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); */
    overflow: hidden;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex
;
    flex-direction: column;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
/* Canvas container to maintain aspect ratio */
.canvas-container {
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Canvas display size - Fixed aspect ratio */
#finalCanvas {
  display: block;
  width: 100%;              /* Scale with parent width */
  height: auto;             /* Preserve aspect ratio */
  max-width: 100vw;         /* Don’t overflow screen width */
  max-height: 100vh;        /* Don’t overflow screen height */
  object-fit: contain;      /* Ensure full image fits */
}

/* Quick download bar under canvas - Fixed positioning */
.preview-toolbar {
  margin-top: 5px; /* Ensures only 5px gap below canvas */
  padding: 0;
}

/* Controls */
.controls-column{ position: relative; z-index: 1; max-height: calc(100vh - 16px); overflow:auto; }
.controls{ display:grid; grid-template-columns: 1fr; gap:8px; margin-top:8px; }
.controls-2col{ grid-template-columns: 1fr 1fr; gap:10px; }
.controls input[type="range"]{ width:100%; }
.button-row{ display:flex; gap:10px; flex-wrap: wrap; margin: 10px 0 8px; }
.button-row.spaced{ justify-content: space-between; }

/* Advanced panel: tidy 2-col and collapsed by default */
#advancedSection{ display:none; }
#advancedSection.open{ display:block; }
#advancedSection .controls{
  gap: 10px;
}
#advancedSection{ display:none; }
#advancedSection.open{ display:block; }
#advancedSection {

    /* border: 1px solid #1f2330; */
    border-radius: 12px;
    padding: 8px;
    margin-top: 10px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.move-controls {
    padding: 20px;
    display: flex
;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    /* background: var(--card-bg); */
    border: 1px solid var(--line);
    border-radius: var(--card-br);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    max-width: 100%;
    overflow: hidden;
}

.dpad {
    display: grid;
    grid-template-areas: 
        ". up ."
        "left center right"
        ". down .";
    gap: 8px;
    width: 100%;
    max-width: 280px; /* Increased from 200px */
    justify-items: center;
    align-items: center;
}

#moveUp    { grid-area: up; }
#moveDown  { grid-area: down; }
#moveLeft  { grid-area: left; }
#moveRight { grid-area: right; }

.center-buttons { 
    grid-area: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.dpad button {
    width: 80px;
    height: 90px;
    font-size: 22px;
    font-weight: bold;
    /* border: 1px solid var(--line); */
    border-radius: 12px;
    /* background: #141725; */
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    display: flex
;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: #000;
}

.dpad button:active {
    background: #0f1219;
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.dpad button:hover {
    background: #1a1f33;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.35);
}

.center-buttons button {
    width: 80px;  /* Increased from 65px */
    height: 70px; /* Increased from 60px */
    font-size: 22px;
    font-weight: bold;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #141725;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
}
.btn-label {
    font-size: 8px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    margin-top: 1px;
}

.dpad button i {
    font-size: 16px; /* Increased from 14px */
}

.center-buttons button i {
    font-size: 14px; /* Increased from 12px */
}

.center-buttons button:hover {
    background: #1a1f33;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.35);
}

.center-buttons button:active {
    background: #0f1219;
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#advancedSection .controls label{ display:flex; flex-direction:column; gap:6px; }
#toggleAdvancedBtn{ position: static; z-index: auto; margin-top: 24px; }

/* Advanced controls row styling */
.control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.control-row .control-label {
  min-width: 90px;
  font-weight: 500;
  color: var(--muted);
  font-size: 15px;
}

.control-row .control-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.control-row span[id$="Value"] {
  width: 48px;
  min-width: 48px;
  display: inline-block;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--brand);
  background: #181a23;
  border-radius: 6px;
  padding: 2px 8px;
  margin: 0 2px;
  letter-spacing: 0.5px;
}

.control-row button {
  min-width: 36px;
  height: 36px;
  font-size: 22px;
  font-weight: bold;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #141725;
  color: #fff;
  cursor: pointer;
  transition: background .18s, transform .08s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-row button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #232633;
}

#tintSlider {
  accent-color: #ffbe32;
}

/* Responsive adjustments for mobile */
@media (max-width: 640px) {
  .control-row {
    gap: 6px;
    margin-bottom: 10px;
  }
  .control-row span:first-child {
    min-width: 70px;
    font-size: 14px;
  }
  .control-row button {
    min-width: 32px;
    height: 32px;
    font-size: 18px;
  }
  .control-row span[id$="Value"] {
    min-width: 38px;
    font-size: 15px;
    padding: 6px 4px;
  }
}

/* Step 4 */
/* Responsive tiles grid */
.grid-tiles{
  --tile-gap: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--tile-gap);
  margin-top: 12px;
}

/* Unify styles for <button>.tile and <a>.tile */
.tile{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;

  padding: 14px 16px;
  min-height: 92px;
  border-radius: 12px;

  background: rgba(255,255,255,0.12);
  border: 1px solid var(--line, rgba(255,255,255,0.18));
  color: var(--ink, #fff);
  text-decoration: none;

  /* tap friendly */
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;

  /* subtle glass look */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Hover/focus/active states */
.tile:hover{ 
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.tile:active{
  transform: translateY(0);
  background: rgba(255,255,255,0.10);
}
.tile:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,184,58,.45);
}

/* Titles & subtitles */
.tile-title{
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
}
.tile-sub{
  color: var(--muted, rgba(255,255,255,0.75));
  font-size: 13px;
}

/* Tighten layout on very small screens */
@media (max-width: 380px){
  .grid-tiles{
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }
  .tile{ min-height: 84px; padding: 12px 14px; }
  .tile-title{ font-size: 14px; }
  .tile-sub{ font-size: 12px; }
}

/* ===== Processing overlay ===== */
.proc-overlay{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8,10,18,0.76);
  display: none;
  align-items: center; justify-content: center; flex-direction: column;
  gap: 14px; opacity: 0; transition: opacity .18s ease;
}
.proc-overlay.show{ display:flex; opacity:1; }

.ring{ position: relative; width: 96px; height:96px; }
.ring span{
  position: absolute; box-sizing: border-box;
  width: 100%; height: 100%;
  border-radius: 50%; border: 6px solid transparent;
  border-top-color: #ffbe32; animation: spin 1s linear infinite;
}
.ring span:nth-child(2){ border-top-color:#ffd071; width:86%; height:86%; top:7%; left:7%; animation-duration:1.6s; }
.ring span:nth-child(3){ border-top-color:#ffffff; width:74%; height:74%; top:13%; left:13%; animation-duration:2.2s; }
.ring span:nth-child(4){ border-top-color:#ffbe32; width:60%; height:60%; top:20%; left:20%; animation-duration:2.8s; }
@keyframes spin{ to { transform: rotate(360deg); } }

.proc-text{ width:min(480px, 92vw); text-align:center; color:#fff}
.proc-bar{ height:8px; background:#24283a; border-radius:10px; overflow:hidden; margin-top:6px; }
#procBarFill{ height:100%; width:0%; background:linear-gradient(90deg,#ffd071,#ffbe32); transition:width .3s ease; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .editor-layout {
    grid-template-columns: 1fr; /* stack editor and controls */
    gap: 8px;
    padding: 0 12px; /* avoid horizontal overflow */
  }
  .controls-2col{ grid-template-columns: 1fr; }
  .controls-column{ max-height: none; overflow: visible; }
}
@media (max-width: 640px){
  .form-grid{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: 1fr 1fr; }
}

/* Mobile responsive adjustments */
@media (max-width: 980px) {
  .preview-pane {
    max-width: 90vw;      /* Use more screen width on mobile */
  }
}

@media (max-width: 640px) {
  .preview-pane {
    max-width: 95vw;      /* Use even more screen width on small mobile */
  }
}
/* Mobile responsiveness for D-pad */
@media (max-width: 640px) {
    .move-controls {
        padding: 15px 10px; /* Reduced horizontal padding to prevent overflow */
        margin-bottom: 16px;
    }
    
    .dpad {
        max-width: 260px; /* Increased from 140px for better mobile interaction */
        gap: 6px; /* Slightly increased gap */
    }
    
    .dpad button {
        width: 65px;  /* Increased from 45px - much more touchable */
        height: 75px; /* Increased from 50px */
        font-size: 18px; /* Reduced slightly to fit better */
    }
    
    .center-buttons button {
        width: 65px;  /* Increased from 45px */
        height: 60px; /* Increased from 45px */
        font-size: 18px; /* Increased from 16px */
    }
    
    .dpad button i {
        font-size: 14px; /* Appropriate size for mobile */
    }
    
    .center-buttons button i {
        font-size: 12px; /* Appropriate size for mobile */
    }
    
    .btn-label {
        font-size: 7px; /* Slightly smaller for mobile */
    }
}


button#quickDownloadBtn {
    font-size: 25px;
}

main.app-main {
    max-width: 1024px;
    margin: auto;
}

/* Keep editor canvas fixed in view during editing */
.step.active {
  align-items: flex-start;   /* don’t vertically center */
}

.preview-pane {
  position: sticky;
  top: 10px;                 /* pin it near the top */
  z-index: 10;
  max-height: 50vh;          /* never taller than half screen */
  overflow: hidden;
}

/* Keep the editor visible but DON'T clip children like the download button */
.preview-pane{
  position: sticky;
  top: 10px;
  z-index: 10;
  /* was: overflow: hidden;  -> this clipped the button */
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Cap ONLY the canvas height, not the whole pane */
#finalCanvas{
  width: 100%;
  height: auto;
  max-height: 35vh;   /* canvas stays compact */
  display: block;
}

/* Make the download bar always visible right under the canvas */
.download-bar{
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 8px;
  /* ensure it’s not hidden behind anything */
  z-index: 11;
}

/* If you previously hid the button somewhere, force it visible */
#quickDownloadBtn,
#downloadBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mirror the live preview when desired (front camera feel) */
#liveFeed.mirrored {
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}
/* processing + countdown overlays */
.processing-overlay,
.countdown-overlay {
  display: none;              /* default: none */
  pointer-events: none;       /* don’t intercept when hidden */
}

.processing-overlay.show,
.countdown-overlay.show {
  display: flex;              /* or grid, per your style */
  pointer-events: auto;       /* only clickable when shown */
  z-index: 9999;
}

/* Mirror preview support (already suggested earlier) */
#liveFeed.mirrored {
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}

/* Countdown overlay */
.countdown-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.35);
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s ease;
}
.countdown-overlay.show { opacity: 1; }

.countdown-overlay .ring {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.18) 0 40%, rgba(255,255,255,0) 41%),
    conic-gradient(#fff 0 25%, rgba(255,255,255,0.25) 0 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 0 28px rgba(255,255,255,0.25);
  animation: pulse 1s infinite ease-in-out;
}
@keyframes pulse {
  0%,100% { transform: scale(1);   }
  50%     { transform: scale(1.05); }
}

.countdown-number {
  font: 700 64px/1.0 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.cancel-hint {
  position: absolute;
  bottom: 10%;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
}

/* Camera toggle bar */
.cam-toggle{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin:10px 0 6px;
}

/* Base button */
.cam-btn{
  --btn-bg: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  --btn-border: rgba(255,255,255,.25);
  --btn-shadow: 0 6px 14px rgba(0,0,0,.18), inset 0 0 0 1px var(--btn-border);
  --btn-radius: 999px;

  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  min-height:44px;
  border-radius:var(--btn-radius);
  background:var(--btn-bg);
  color:#fff;
  border:1px solid var(--btn-border);
  box-shadow:var(--btn-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
  user-select:none;
  touch-action:manipulation;
}

/* Primary (accent) */
.cam-btn--primary{
  --btn-bg: linear-gradient(180deg, #ffb83a, #ff8b1f);
  --btn-border: rgba(255,255,255,.35);
  box-shadow: 0 8px 16px rgba(255,139,31,.35), inset 0 0 0 1px var(--btn-border);
}

/* Subtle/ghost */
.cam-btn--ghost{
  --btn-bg: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  --btn-border: rgba(255,255,255,.22);
}

/* Icon & label */
.cam-btn__icon{
  font-size:18px;
  line-height:0;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}
.cam-btn__label{
  white-space:nowrap;
}

/* Hover/active/focus */
.cam-btn:hover{ transform: translateY(-1px); }
.cam-btn:active{ transform: translateY(0); box-shadow: 0 4px 10px rgba(0,0,0,.22), inset 0 0 0 1px var(--btn-border); }
.cam-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,184,58,.45), 0 8px 16px rgba(0,0,0,.18), inset 0 0 0 1px var(--btn-border);
}

/* Compact on very small screens */
@media (max-width: 400px){
  .cam-btn{ padding:9px 12px; gap:8px; }
  .cam-btn__icon{ font-size:16px; }
  .cam-btn__label{ font-size:13px; }
}

button#mirrorToggleBtn {
    color: #000;
}