/* TTB Coupon Sheet Generator – Styles */
.ttb-csg-wrap{ max-width:1100px; margin:0 auto; font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; color:#111; }
.ttb-csg-h2{ margin:10px 0 16px; font-size:22px; }
.ttb-csg-controls{ background:#0f172a0d; padding:16px; border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.ttb-csg-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.ttb-csg-grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.ttb-csg-field{ display:flex; flex-direction:column; gap:6px; }
.ttb-csg-field-wide{ grid-column: 1 / -1; }
.ttb-csg-field input[type="text"],
.ttb-csg-field input[type="number"],
.ttb-csg-field select{ padding:9px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; }

.ttb-csg-color{ display:flex; align-items:center; gap:8px; }
.ttb-csg-swatch{ width:36px; height:28px; border-radius:6px; border:1px solid #e5e7eb; cursor:pointer; }

.ttb-csg-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.ttb-csg-btn{ border:1px solid #ddd; background:#fff; padding:10px 14px; border-radius:10px; cursor:pointer; }
.ttb-csg-btn-primary{ background:#111; color:#fff; }

.ttb-csg-preview-wrap{ margin:16px 0 34px; }
.ttb-csg-canvas{
  width: 100%;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #fff;
  /* was a centered flex box with overflow hidden; let it flow instead */
  display: block;
  position: relative;
  overflow: visible;
  /* keep a gentle minimum so an empty state isn’t tiny */
  min-height: 300px;
}

/* --- Live preview: fluid height (no fixed page size) --- */
.preview-page{
  width: 100%;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.preview-page.letter.landscape{ width: 100%; }

.sheet{
  position: relative;          /* keep relative so the cutline can anchor */
  padding: 12px;
  display: grid;               /* 2 columns side-by-side, grows vertically */
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.cutline{
  position: absolute;
  top: 12px;                   /* respect .sheet padding */
  bottom: 12px;
  left: 50%;
  width: 0;
  border-left: 1px dashed #9ca3af;
}

.half{
  width: 100%;                 /* normal flow – height expands with content */
  position: static;
}

/* Stack halves on small screens; hide cutline */
@media (max-width: 900px){
  .sheet{ grid-template-columns: 1fr; }
  .cutline{ display: none; }
}

.header .website{ text-align:center; font-weight:700; margin-bottom:6px; color: var(--ttb-csg-primary, #d64a2f); }
.brand{ display:flex; align-items:center; gap:10px; justify-content:center; }
.brand .logo{ max-height:56px; }
.brand .name{ font-size:24px; font-weight:800; letter-spacing:.3px; }
.address{ text-align:center; color:#444; margin:4px 0 10px; }

.grid{ display:grid; gap:10px; }
.grid.cols-1{ grid-template-columns:1fr; }
.grid.cols-2{ grid-template-columns: repeat(2,1fr); }
.grid.cols-3{ grid-template-columns: repeat(3,1fr); }

.coupon{ border:2px dashed #d1d5db; padding:10px; border-radius:8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.coupon .ctitle{ font-weight:700; font-size:14px; margin-bottom:4px; }
.coupon .hero{ font-weight:900; font-size:32px; line-height:1.0; margin:2px 0 6px; color: var(--ttb-csg-primary, #d64a2f); }
.coupon .hero small{ font-weight:600; font-size:60%; }
.coupon .hero-fixed{ text-align:center; }
.coupon .fine{ font-size:12px; color:#374151; }
.coupon .exp{ font-size:12px; color:#111; margin-top:4px; }

.footer{ text-align:center; margin-top: 10px; font-size: 13px; }
@media (max-width:900px){ .ttb-csg-grid{ grid-template-columns:1fr; } .ttb-csg-grid-3{ grid-template-columns:1fr; } }

/* Coupon input sections: white divider between each */
#ttb-csg-coupons { margin-top: 10px; }
.ttb-csg-coupon-field { padding: 12px 0; }
.ttb-csg-coupon-field {
  border-top: 5px solid #000;    /* the white bar */
  margin-top: 10px;
  padding-top: 16px;
}

#ttb-csg-print { color: #000; }

.coupon .hero .off-text {
  font-size: 30%;         /* smaller */
  vertical-align: super;  /* shift up */
  font-weight: 600;
  margin-left: 2px;
}

.ttb-csg-color{ display:flex; align-items:center; gap:8px; }
.ttb-csg-swatch{ width:36px; height:28px; border-radius:6px; border:1px solid #e5e7eb; cursor:pointer; }

/* === TTB color picker overlay (required by colorpicker.js) === */
.ttb-acm-picker-modal{
  position: fixed;
  inset: 0;
  display: none;              /* JS sets to flex when opening */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  z-index: 99999;
}
.ttb-acm-picker-card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  width: 340px;
}
.ttb-acm-picker-canvas{
  display: block;
  width: 300px;   /* must match canvas width in JS */
  height: 160px;  /* must match canvas height in JS */
  border-radius: 8px;
  cursor: crosshair;
  margin: 0 auto 10px;
}
.ttb-acm-hue{
  width: 100%;
  margin: 6px 0 10px;
}
.ttb-acm-picker-actions{
  display:flex;
  justify-content:flex-end;
  gap: 8px;
}
.ttb-acm-btn{
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.ttb-acm-btn-primary{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Center all coupon text */
.coupon .ctitle,
.coupon .hero,
.coupon .fine,
.coupon .exp {
  text-align: center;
}