:root {
  --blue: #006de8;
  --text-gray: #5d5959;
}


/* =====================================================
   GLOBAL
===================================================== */

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  min-height: 100%;
}


body {
  background: #eceff2;
  color: #222;

  font-family:
    "Nunito Sans",
    Arial,
    sans-serif;
}


button,
input,
textarea,
select {
  font: inherit;
}



/* =====================================================
   APP
===================================================== */

.app {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    380px
    minmax(0, 1fr);
}



/* =====================================================
   EDITOR
===================================================== */

.editor {
  height: 100vh;

  overflow-y: auto;

  padding: 24px;

  background: white;

  border-right:
    1px solid #d8d8d8;
}


.editor h1 {
  margin:
    0
    0
    6px;

  font-size: 23px;
}


.editor-intro {
  margin:
    0
    0
    22px;

  color: #777;

  font-size: 13px;
}


.panel {
  padding:
    18px
    0;

  border-top:
    1px solid #ddd;
}

/* Panel toggle button (small inline button next to the h2) */
.panel .panel-toggle {
  float: right;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  padding: 6px;
  color: #666;
}

/* When collapsed hide all descendants except the heading and the toggle button.
   Using descendant selector so nested children are also hidden. */
.panel.panel--collapsed :not(h2):not(.panel-toggle) {
  display: none !important;
}

/* Keep h2 inline so the toggle sits to the right */
.panel h2 {
  margin:
    0
    0
    14px;

  font-size: 16px;
  display: inline-block;
}

.panel h3 {
  margin:
    0
    0
    10px;

  font-size: 13px;
}


label {
  display: block;

  margin-bottom: 6px;

  font-size: 12px;

  font-weight: 900;
}


input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;

  margin-bottom: 12px;

  padding:
    8px
    9px;

  border:
    1px solid #c8c8c8;

  border-radius:
    6px;

  background: white;
}


textarea {
  resize: vertical;

  line-height: 1.4;
}


input[type="color"] {
  width: 62px;

  height: 38px;

  margin-bottom: 12px;

  padding: 2px;

  border:
    1px solid #bbb;

  border-radius: 5px;

  background: white;
}



/* =====================================================
   TEXT STYLE CONTROLS
===================================================== */

.style-controls {
  display: flex;

  gap: 20px;

  margin-bottom: 12px;
}


.checkbox-row {
  display: flex;

  align-items: center;

  gap: 7px;

  margin: 0;

  cursor: pointer;

  font-weight: 400;
}


.checkbox-row input {
  margin: 0;
}



/* =====================================================
   SIZE / POSITION CONTROL BOX
===================================================== */

.transform-controls {
  margin:
    8px
    0
    16px;

  padding: 12px;

  background: #f2f4f6;

  border:
    1px solid #dadde1;

  border-radius: 8px;
}


.size-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    75px
    25px;

  align-items: center;

  gap: 8px;

  margin-bottom: 10px;
}


.size-row input {
  margin: 0;
}


.font-size-slider {
  width: 100%;
}


.position-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 10px;
}


.position-grid input {
  margin:
    4px
    0
    0;
}



/* =====================================================
   NUDGE PAD
===================================================== */

.nudge-pad {
  width: 128px;

  margin:
    12px
    auto
    0;

  text-align: center;
}


.nudge-pad > button,
.nudge-pad div button {
  width: 36px;
  height: 34px;

  padding: 0;

  border:
    1px solid #bbb;

  border-radius: 5px;

  background: white;

  cursor: pointer;

  font-weight: 900;
}


.nudge-pad > button {
  display: block;

  margin:
    3px
    auto;
}


.nudge-pad div {
  display: flex;

  justify-content: center;

  gap: 3px;
}


.nudge-pad button:hover {
  background: #e7e7e7;
}


.reset-position {
  font-size: 19px;
}



/* =====================================================
   OFFER EDITOR
===================================================== */

.offer-editor {
  margin-top: 14px;

  padding: 14px;

  background: #fafafa;

  border:
    1px solid #ddd;

  border-radius: 7px;
}

/* helper class used by script.js to hide the second offer editor */
.offer-editor.is-offer-hidden {
  display: none !important;
}


/* =====================================================
   BUTTONS
===================================================== */

.primary-button,
.secondary-button {
  width: 100%;

  padding: 12px;

  margin-bottom: 8px;

  border-radius: 6px;

  cursor: pointer;

  font-weight: 900;
}


.primary-button {
  border: none;

  background: #111;

  color: white;
}


.secondary-button {
  border:
    1px solid #bbb;

  background: white;

  color: #222;
}



/* =====================================================
   PREVIEW
===================================================== */

.preview-area {
  padding:
    30px
    40px
    60px;

  overflow: auto;
}


.preview-label {
  width: 210mm;

  max-width: 100%;

  margin:
    0
    auto
    10px;

  color: #666;

  font-size: 12px;
}



/* =====================================================
   A4
   -> preview remains full A4; half layout is a smaller card inside it
   We expose --layout-scale so children can multiply logical mm values.
===================================================== */

.a4-page {
  --layout-scale: 1;

  position: relative;

  width: 210mm;
  height: 297mm;

  margin: auto;

  overflow: hidden;

  background: white;

  box-shadow:
    0
    8px
    30px
    rgba(0, 0, 0, 0.18);

  font-family:
    "Nunito Sans",
    Arial,
    sans-serif;

  -webkit-print-color-adjust: exact;

  print-color-adjust: exact;
}

/* half layout sets the scale to 0.5; CSS uses it to compute sizes and offsets */
.a4-page.a4-page--half {
  --layout-scale: 0.5;
}

/* =====================================================
   INNER DESIGN (card that is full-size on Full layout and half-card on Half layout)
   We keep design-frame top/height adjusted for half-card placement,
   but the internals will scale using --layout-scale * logical-mm vars.
===================================================== */

.design-frame {
  position: absolute;

  left: 31mm;
  top: 43.5mm;

  width: 148mm;
  height: 210mm;

  overflow: hidden;

  background: white;

  border:
    0.3mm solid #555;

  color:
    var(--text-gray);
}

/* Half layout: place a smaller card inside full A4 */
.a4-page.a4-page--half .design-frame {
  top: 20mm;
  height: 105mm; /* half-card height */
  width: 148mm;
  left: 31mm;
}

/* =====================================================
   BLUE RIBBON
   (anchored to page; half-layout override tuned to meet brand text)
===================================================== */

.brand-banner {
  position: absolute;

  /* anchor to the page so thickness doesn't unexpectedly scale */
  left: 31mm;
  top: 43.5mm;
  width: 148mm;
  height: 45.4mm;

  background: var(--blue);

  /* Use percentage Y coords so the diagonal shape stays proportional to the band height */
  clip-path: polygon(
    0 41.6%,
    100% 7.7%,
    100% 65.6%,
    0 100%
  );

  z-index: 3; /* sit above the design-frame background but behind brand text */
}

/* Half layout: nudge the banner and brand text so their vertical centers meet */
.a4-page.a4-page--half .brand-banner {
  top: 20.75mm;     /* was 10mm — moved slightly down so centers meet at 24.75mm */
  height: 28mm;     /* slightly thinner for the half-card look */
  clip-path: polygon(
    0 36%,
    100% 8%,
    100% 70%,
    0 100%
  );
}

/* =====================================================
   ADJUSTABLE ELEMENT SYSTEM
   We expect JS to set per-element:
     --font-size: <logical-mm>;
     --move-x: <logical-mm>;
     --move-y: <logical-mm>;
   The visual size/translation is calc(var(--layout-scale) * var(--font-size))
   and calc(var(--layout-scale) * var(--move-x)) etc.
===================================================== */

.adjustable {
  --font-size: 1mm;
  --move-x: 0mm;
  --move-y: 0mm;
}

/* =====================================================
   BRAND
===================================================== */

.brand-text {
  position: absolute;

  z-index: 4;

  top: calc(var(--layout-scale) * 9.4mm);

  /* original left uses scaled negative offset; we'll override for half to center */
  left: calc(var(--layout-scale) * -2mm);

  width: calc(var(--layout-scale) * 152mm);
  height: calc(var(--layout-scale) * 30mm);

  display: flex;

  justify-content: center;

  align-items: center;

  color: white;

  /* font-size is computed from logical --font-size */
  font-size: calc(var(--layout-scale) * var(--font-size));

  font-weight: 900;

  font-style: normal;

  line-height: 1;

  letter-spacing:
    -1.25mm; /* letter-spacing left as original */

  white-space: nowrap;

  transform-origin:
    center center;

  /* translate uses scaled logical move variables, then rotate */
  transform:
    translate(
      calc(var(--layout-scale) * var(--move-x)),
      calc(var(--layout-scale) * var(--move-y))
    )
    rotate(-5.95deg);
}

/* Center brand specifically for half layout so the ribbon text visually centers.
   Updated top to 17.25mm so the brand-text center aligns with the banner center (24.75mm).
*/
.a4-page.a4-page--half .brand-text {
  left: 50%;
  width: 152mm;
  top: 9.5mm; /* was 18mm — moved up so centers meet at 24.75mm */
  transform:
    translate(
      calc(-50% + (var(--layout-scale) * var(--move-x))),
      calc(var(--layout-scale) * var(--move-y))
    )
    rotate(-3.0deg);
  letter-spacing: -0.95mm;
}

/* =====================================================
   PRODUCT TITLE
   We'll slightly boost title size in half layout and set a specific top for better centering
===================================================== */

.product-title {
  position: absolute;

  top: calc(var(--layout-scale) * 50.8mm);

  left: 0;

  width: 100%;

  margin: 0;

  padding: 0;

  color:
    var(--text-gray);

  font-size:
    calc(var(--layout-scale) * var(--font-size, 11.45mm));

  font-weight: 900;

  font-style: normal;

  line-height: 1;

  letter-spacing:
    -0.24mm;

  text-align: center;

  white-space: nowrap;

  transform:
    translate(
      calc(var(--layout-scale) * var(--move-x)),
      calc(var(--layout-scale) * var(--move-y))
    );
}

/* override top and increase size multiplier for the half layout */
.a4-page.a4-page--half .product-title {
  top: 35mm; /* slightly lower to create space above bubbles */
  font-size: calc(var(--layout-scale) * 1.4 * var(--font-size, 11.45mm));
}

/* =====================================================
   OFFERS + BUBBLES
===================================================== */

.offers {
  position: absolute;

  top: calc(var(--layout-scale) * 72.8mm);

  left: 0;

  width: 100%;

  height: calc(var(--layout-scale) * 59mm);

  display: flex;

  justify-content: center;

  align-items: flex-start;
}

/* Lower the bubbles in the half layout so they sit between title and payment */
.a4-page.a4-page--half .offers {
  top: 55mm; /* tuned to center bubbles between product title and payment */
  align-items: center;
  gap: 10mm;
}


.offers--two {
  gap: 10mm;
}


.offers--one {
  gap: 0;
}

/* default bubble uses layout-scale to shrink on half automatically */
.offer-bubble {
  position: relative;

  /* bubble size derived from layout-scale (base 58.7mm) */
  width: calc(var(--layout-scale) * 58.7mm);
  height: calc(var(--layout-scale) * 58.7mm);

  flex:
    0
    0
    calc(var(--layout-scale) * 58.7mm);

  border-radius: 50%;

  background:
    var(--blue);

  color: white;

  text-align: center;
}

/* make bubbles a bit larger on half layout (increase multiplier only for half) */
.a4-page.a4-page--half .offer-bubble {
  width: calc(var(--layout-scale) * 1.35 * 58.7mm);
  height: calc(var(--layout-scale) * 1.35 * 58.7mm);
  flex: 0 0 calc(var(--layout-scale) * 1.35 * 58.7mm);
  margin-top: 0;
}

/* =====================================================
   OFFER INFO & PRICE
   These use --font-size and --move- variables set by JS.
   We also scale the fixed top offsets using the same layout scale.
===================================================== */

.offer-info {
  position: absolute;

  top: calc(var(--layout-scale) * 8.15mm);

  left: 0;

  width: 100%;

  font-size:
    calc(var(--layout-scale) * var(--font-size, 4.96mm));

  font-weight: 900;

  font-style: normal;

  line-height: 1.12;

  letter-spacing:
    -0.08mm;

  transform:
    translate(
      calc(var(--layout-scale) * var(--move-x)),
      calc(var(--layout-scale) * var(--move-y))
    );
}



.offer-price {
  position: absolute;

  top: calc(var(--layout-scale) * 26.5mm);

  left: 0;

  width: 100%;

  font-size:
    calc(var(--layout-scale) * var(--font-size, 30mm));

  font-weight: 900;

  font-style: normal;

  line-height: 0.96;

  letter-spacing:
    -0.38mm;

  white-space: nowrap;

  transform:
    translate(
      calc(var(--layout-scale) * var(--move-x)),
      calc(var(--layout-scale) * var(--move-y))
    );
}
/* Half-layout: use the logical --font-size / --move-x / --move-y directly
   (don't multiply by --layout-scale), and allow custom top offset per half layout.
   Tweak font-size / top to taste. */
.a4-page.a4-page--half .offer-price {
  /* use the JS-provided logical size directly (no --layout-scale) */
  font-size: var(--font-size, 15mm);

  /* position inside the bubble — change this to move the price vertically */
  top: 22mm; /* example: move the price down inside the bubble in the half layout */

  /* use the logical move vars directly so nudge controls still work in half layout */
  transform: translate(var(--move-x), var(--move-y));

  /* keep other properties from original rule */
  left: 0;
  width: 100%;
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.38mm;
  white-space: nowrap;
}

/* If you also want to change the small text (e.g. "128GB") for half layout */
.a4-page.a4-page--half .offer-info {
  font-size: var(--font-size, 4.96mm);
  top: 6mm; /* example: move the small text up/down inside the bubble for half */
  transform: translate(var(--move-x), var(--move-y));
  left: 0;
  width: 100%;
  line-height: 1.12;
  font-weight: 700;
}

/* Optionally change the bubble size for half layout if you want
   the price to sit differently relative to the bubble */
.a4-page.a4-page--half .offer-bubble {
  /* current bubble sizing uses layout-scale; override if desired */
  width: 45mm;   /* example fixed size — tune or remove if you prefer scaling */
  height: 45mm;
  flex: 0 0 45mm;
}
/* Slightly reduce offer price size only for the half layout.
   Adjust the multiplier (0.92) to make it smaller/larger. */
.a4-page.a4-page--half .offer-price {
  /* Take the JS-provided logical size, apply the layout scale (0.5),
     then multiply by a small factor to make it slightly smaller. */
  font-size: calc(var(--layout-scale) * var(--font-size, 19.5mm) * 0.99);

  /* Keep transform using logical move vars so nudge controls still work */
  transform: translate(
    calc(var(--move-x)),
    calc(var(--move-y))
  );

  /* If you want a slightly different vertical position in half layout, set top here */
  /* top: 22mm; */
}
/* =====================================================
   PAYMENT
===================================================== */

.payment-line {
  position: absolute;

  top: calc(var(--layout-scale) * 144.3mm);

  left: calc(var(--layout-scale) * 5.7mm);
  right: calc(var(--layout-scale) * 5.7mm);

  color:
    var(--text-gray);

  font-size:
    calc(var(--layout-scale) * var(--font-size, 3.85mm));

  font-weight:
    900;

  font-style: normal;

  line-height: 1.2;

  text-align: center;

  white-space: pre-wrap;

  transform:
    translate(
      calc(var(--layout-scale) * var(--move-x)),
      calc(var(--layout-scale) * var(--move-y))
    );
}

.a4-page.a4-page--half .payment-line {
  top: 92mm;
  font-size: 3.85mm;
}

/* =====================================================
   DESCRIPTION
   Hidden in half layout per request
===================================================== */

.description {
  position: absolute;

  top: calc(var(--layout-scale) * 158.5mm);

  left: calc(var(--layout-scale) * 12mm);
  right: calc(var(--layout-scale) * 12mm);

  color:
    var(--text-gray);

  font-size:
    calc(var(--layout-scale) * var(--font-size, 2.86mm));

  font-weight: 900;

  font-style: normal;

  line-height: 1.58;

  text-align: center;

  transform:
    translate(
      calc(var(--layout-scale) * var(--move-x)),
      calc(var(--layout-scale) * var(--move-y))
    );
}

/* hide description in half layout */
.a4-page.a4-page--half .description {
  display: none !important;
}

/* =====================================================
   DIVIDER
===================================================== */

.divider {
  position: absolute;

  top: calc(var(--layout-scale) * 191.4mm);

  left: calc(var(--layout-scale) * 7.9mm);
  right: calc(var(--layout-scale) * 7.9mm);

  border-top:
    0.25mm solid #666;
}

/* hide divider for half-card */
.a4-page.a4-page--half .divider {
  display: none;
}

/* =====================================================
   FINE PRINT
   Hidden in half layout per request
===================================================== */

.fine-print {
  position: absolute;

  top: calc(var(--layout-scale) * 196mm);

  left: calc(var(--layout-scale) * 9.2mm);
  right: calc(var(--layout-scale) * 9.2mm);

  color:
    var(--text-gray);

  font-size:
    calc(var(--layout-scale) * var(--font-size, 2.08mm));

  font-weight: 900;

  font-style: normal;

  line-height: 1.72;

  text-align: center;

  transform:
    translate(
      calc(var(--layout-scale) * var(--move-x)),
      calc(var(--layout-scale) * var(--move-y))
    );
}

/* hide fine print in half layout */
.a4-page.a4-page--half .fine-print {
  display: none !important;
}

/* =====================================================
   RESPONSIVE PREVIEW
===================================================== */

@media screen and (max-width: 1250px) {

  .a4-page {
    transform:
      scale(0.78);

    transform-origin:
      top center;

    margin-bottom:
      -65mm;
  }

  .a4-page.a4-page--half {
    transform: scale(0.78);
  }

}


@media screen and (max-width: 950px) {

  .app {
    grid-template-columns:
      340px
      minmax(0, 1fr);
  }


  .preview-area {
    padding: 20px;
  }


  .a4-page {
    transform:
      scale(0.62);

    transform-origin:
      top center;

    margin-bottom:
      -113mm;
  }

  .a4-page.a4-page--half {
    transform: scale(0.62);
  }

}


@media screen and (max-width: 700px) {

  .app {
    display: block;
  }


  .editor {
    width: 100%;
    height: auto;
  }


  .a4-page {
    transform:
      scale(0.5);

    transform-origin:
      top left;

    margin: 0;

    margin-bottom:
      -148mm;
  }

  .a4-page.a4-page--half {
    transform: scale(0.5);
  }

}



/* =====================================================
   PRINT
===================================================== */

@page {
  size: A4 portrait;

  margin: 0;
}


@media print {

  html,
  body {
    width: 210mm;
    height: 297mm;

    margin: 0;

    padding: 0;

    background: white;
  }


  .editor,
  .preview-label {
    display: none !important;
  }


  .app {
    display: block;
  }


  .preview-area {
    width: 210mm;
    height: 297mm;

    margin: 0;

    padding: 0;

    overflow: visible;
  }


  .a4-page {
    width: 210mm;
    height: 297mm;

    margin: 0;

    transform:
      none !important;

    box-shadow:
      none;

    -webkit-print-color-adjust:
      exact;

    print-color-adjust:
      exact;
  }

  /* When printing the half layout, we still want the smaller document to fit a page.
     If you want the half layout to print on a smaller paper size, you can add specific rules. */
  .a4-page.a4-page--half {
    /* keep half layout sized */
  }

}