/* =========================================================
   LOST PET POSTER — APP.CSS
   Mobile-first, desktop-enhanced
   ========================================================= */

/* === THEME TOKENS === */
:root{
  --bg:#0f0f12;
  --panel:#111116;
  --panel2:#1b1b22;

  --ink:#e8e8ec;
  --muted:#b6b6c0;

  --stroke:#30303a;
  --stroke-soft:#24242a;

  --accent:#6aa3ff;

  --shadow:0 12px 36px rgba(0,0,0,.45);
  --radius:14px;
}

/* === BASE RESET === */
*{ box-sizing:border-box }

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* =========================================================
   WRAP — NEVER CLIPS
   ========================================================= */
#wrap{
  max-width:1200px;
  margin:20px auto;
  padding:0 16px;
  overflow:visible;
}

/* =========================================================
   TOP BAR / HEADER
   ========================================================= */
.bar.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  background:linear-gradient(180deg, #1565c0 0%, #0d47a1 100%);
  border:1px solid #2b6fc3;
  border-radius:12px;
  box-shadow:var(--shadow);
  margin-bottom:16px;
}

.bar .brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}

.bar .logo{
  width:38px;
  height:38px;
  border-radius:10px;
}

.bar .titles{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.bar .title{
  font-size:24px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#ffffff;
  margin-bottom: 1px;
}

.bar .sub{
  font-size:13px;
  color:rgba(255,255,255,0.86);
}

@media (max-width:700px){
  .bar.topbar{
    padding:16px 14px;
  }

  .bar .logo{
    width:42px;
    height:42px;
  }

  .bar .title{
    font-size:24px;
  }

  .bar .sub{
    font-size:14px;
  }
}

/* =========================================================
   GRID — MOBILE FIRST
   ========================================================= */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

/* =========================================================
   PANELS
   ========================================================= */
.left,
.right{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow);
  min-width:0;
}

.left,
.right{
  overflow:visible;
}

.left {
  padding-top: 0px;
  padding-bottom: 20px
}

#layoutInfo{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  max-width:100%;
}

/* =========================================================
   FORM CONTROLS
   ========================================================= */
label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top: 10px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

input,
select,
textarea{
  width:100%;
  background:#0f0f12;
  border:1px solid var(--stroke-soft);
  border-radius:10px;
  padding:10px 12px;
  color:var(--ink);
  outline:none;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(106,163,255,0.32);
}

input[type="file"]{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  appearance:auto;
  -webkit-appearance:auto;
}

textarea{
  min-height:76px;
  resize:vertical;
}

.row{ display:grid; gap:8px }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:10px;
  background:var(--panel2);
  border:1px solid var(--stroke-soft);
  color:var(--ink);
  cursor:pointer;
  margin-top: 9px;
  margin-bottom: 9px;
}

.btn:hover{ border-color:var(--stroke) }

/* =========================================================
   PREVIEW — MOBILE
   ========================================================= */
.previewWrap{
  width:100%;
  min-width:0;
  overflow-x:hidden;
  overflow-y:visible;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  height:auto !important;
  min-height:0 !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

/* Legacy export canvas:
   keep it available to JS, but NEVER let it affect layout. */
#poster{
  max-width:100%;
  width:100%;
  height:auto;
}

/* Hidden legacy export canvas must never affect layout */
#poster[hidden]{
  display:none !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  position:absolute !important;
  inset:auto !important;
  pointer-events:none !important;
}


/* This is the critical fix for the giant empty space:
   author CSS was overriding the browser's [hidden] behavior. */
#poster[hidden]{
  display:none !important;
  width:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

.posterDom{
  width:100%;
  position:relative;
  background:transparent;
  border-radius:12px;
  overflow:visible;
  min-height:0 !important;
  height:auto !important;
  border:0 !important;
}

.posterDom .gs-root{
  position:relative;
  width:calc(var(--pageW, 2550) * var(--previewScale, 1) * 1px) !important;
  height:calc(var(--pageH, 3300) * var(--previewScale, 1) * 1px) !important;
  min-height:0 !important;
  overflow:visible !important;
  transform:translateZ(0);
}

.posterDom .gs-page{
  position:absolute;
  top:0;
  left:0;
  transform-origin: top left;
  transform:
    translate(var(--previewX, 0px), var(--previewY, 0px))
    scale(var(--previewScale, var(--pageScale, 1)));
  box-shadow:0 14px 40px rgba(0,0,0,.65);
}

/* =========================================================
   DESKTOP MODE
   ========================================================= */

/* =========================================================
   OSWALD FONT (LOCAL)
   ========================================================= */
@font-face{
  font-family:"Oswald";
  src:url("/Lost-Pet-Poster/Fonts/oswald-regular-webfont.woff2") format("woff2"),
      url("/Lost-Pet-Poster/Fonts/oswald-regular-webfont.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Oswald";
  src:url("/Lost-Pet-Poster/Fonts/oswald-bold-webfont.woff2") format("woff2"),
      url("/Lost-Pet-Poster/Fonts/oswald-bold-webfont.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* === MINI IMAGE CONTROLS === */
.miniControls{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:8px;
}

.miniControls select{
  width:96px;
  min-width:96px;
}

.miniRange{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
}

.miniLbl{
  color:var(--muted);
  font-size:12px;
  width:14px;
  text-align:center;
  user-select:none;
  margin-right: 16px;
}

.miniRange input[type=range]{
  width:75%;
  accent-color:var(--accent);
  -webkit-appearance:auto;
  appearance:auto;
  background:transparent;
}

.miniRange input[type=range]::-moz-range-track{
  background:#e6e6ec;
  border:0;
  border-radius:999px;
  height:6px;
}

.miniRange input[type=range]::-moz-range-progress{
  background:var(--accent);
  border:0;
  border-radius:999px;
  height:6px;
}

.miniRange input[type=range]::-moz-range-thumb{
  border-radius:50%;
}

/* === MOBILE BUTTON PRESS GLOW === */
@media (max-width:700px){
  .btn:active{
    box-shadow:0 0 0 2px rgba(106,163,255,0.35), 0 0 24px rgba(106,163,255,0.25);
    transform:translateY(1px);
  }
}

/* === FOOTER (COPYRIGHT) === */
.gmFooter{
  margin:12px 0 18px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  letter-spacing:0.2px;
  user-select:none;
}

.gmFooter a{
  color:var(--muted);
  text-decoration:none;
}

.gmFooter a:hover{
  text-decoration:underline;
}

/* === COMFORT TWEAKS === */
@media (max-width:700px){
  /* .designsRow{ display:none; } */
  .row2{ grid-template-columns:1fr; }
  label{ font-size:14px; }

  input,
  select,
  textarea{
    font-size:17px;
    padding:12px 14px;
  }

  input,
  textarea{
    -webkit-text-size-adjust:100%;
  }

  .btn{
    min-height:46px;
    font-size:16px;
  }

  .left{
    padding:14px;
  }

  .right{
    padding-bottom:8px;
  }

  .previewWrap{
    align-items:center;
  }

  .belowRight{
    margin-top:2px;
  }
}

/* ========================================= */
/* === DOWNLOAD BUTTON PRESS POLISH === */
/* ========================================= */
#dlJPG{
  transition:box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

#dlJPG:active,
#dlJPG.is-pressed{
  border-color:#6aa3ff;
  box-shadow:
    0 0 0 2px rgba(106,163,255,0.60),
    0 0 14px rgba(106,163,255,0.65),
    0 0 28px rgba(106,163,255,0.45);
  transform:scale(0.985);
}

#dlJPG:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(106,163,255,0.50), 0 0 18px rgba(106,163,255,0.35);
}

/* =========================================================
   MOBILE — KILL REMAINING SPACE UNDER PREVIEW
   ========================================================= */
@media (max-width: 999px){

  .grid{
    align-items:start !important;
  }

  .right{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    align-self:start !important;
    overflow:visible !important;
    padding-bottom:10px !important;
  }

.previewWrap{
  display:block !important;
  flex:none !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}
.posterDom .gs-root{
  width:calc(var(--pageW, 2550) * var(--previewScale, 1) * 1px) !important;
  height:calc(var(--pageH, 3300) * var(--previewScale, 1) * 1px) !important;
}

  .posterDom{
    display:block !important;
    flex:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    margin-bottom:10px !important;
  }

  canvas#poster,
  canvas#poster[hidden]{
    display:none !important;
    width:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  #layoutInfo{
    margin-top:0 !important;
  }
}

@media (min-width:1000px){

  .grid{
    grid-template-columns:420px minmax(0, 1fr);
    height:calc(100dvh - 160px);
    min-height:600px;
    align-items:stretch;
  }

  .left{
    overflow:auto;
    min-height:0;
  }

  .right{
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden; /* important: do NOT scroll here */
  }

  .belowRight{
    grid-column:2;
  }

  .previewWrap{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;   /* important: scroll lives here */
    overflow-x:auto;
    overflow-y:auto;
	/* NO display override */
  }

  .posterDom{
    position:relative;
    width:100%;
    min-height:0;
    height:auto;
    overflow:visible;
  }

  .posterDom .gs-root{
    position:relative;
    width:100% !important;
    height:0 !important;
    min-height:0 !important;
    overflow:visible !important;
    transform:translateZ(0);
  }

  .posterDom .gs-page{
    position:absolute;
    top:0;
    left:0;
    transform:
      translate(var(--previewX, 0px), var(--previewY, 0px))
      scale(var(--previewScale, 1));
    transform-origin:top left;
    box-shadow:0 18px 46px rgba(0,0,0,.35);
  }
}

/* =========================================================
   SIDEBAR SECTION TITLES
   ========================================================= */
.sidebar-titles{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  font-size:16px;
  font-weight:700;
  letter-spacing:0.24em;
  text-transform:uppercase;

  color:#1c85ff;;

  margin-top: 20px;
  margin-right: 0;
  margin-bottom: 8px;
  margin-left: 0px;
  
  padding-top: 16px;

}

.sidebar-titles::before,
.sidebar-titles::after{
  content:"";
  flex:1;
  height:2px;
  opacity:0.85;
}

/* LEFT LINE */
.sidebar-titles::before{
  background:linear-gradient(
    to right,
    transparent,
    #1c85ff 25%,
    #1c85ff 100%
  );
}

/* RIGHT LINE */
.sidebar-titles::after{
  background:linear-gradient(
    to right,
    #1c85ff 0%,
    #1c85ff 75%,
    transparent
  );
}