/* AdNeed Platform (Site 1) — QR Code Maker tool styles.
   Ported from Site 2's dashboard QR editor (public/js/qr.js +
   public/css/dashboard.css, adneed-business.pages.dev repo), used only
   as a READ-ONLY reference — no Site 2 file was imported or modified.
   Deliberately built on Site 2's actual visual language (adneed.css's
   navy/orange/amber tokens, Sora/Manrope) rather than Site 1's separate
   dark "premium SaaS" theme (tokens.css/home.css), matching the same
   light auth-card look already used on /business, /account, /login. */

/* Wider auth-card variant for a two-column tool layout — auth-card--wide
   (520px) is too narrow for a preview + controls grid. */
.auth-card--tool { max-width: 760px; text-align: left; }
.auth-card--tool .auth-logo { margin: 0 0 16px; }
.auth-card--tool h1 { text-align: left; }
.auth-card--tool > p.sub { text-align: left; }

/* "Back to Dashboard" now lives only in the header (topbarDashboardLink,
   see index.html's <header class="dash-topbar">) — removed the duplicate
   button that used to sit next to the title here. */
.qr-tool-title { margin: 0 0 6px; }
.qr-tool-subtitle { margin: 0 0 18px; }

.qr-tool-price-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 22px;
}
.qr-tool-tag {
  font-family:'AdNeedRupee','Sora', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--orange-500);
  background: #FDECE4; border: 1px solid rgba(232,73,29,.25); border-radius: 999px; padding: 6px 12px;
}
.qr-tool-balance { font-size: 12.5px; color: var(--text-muted); }
.qr-tool-balance strong { color: var(--navy-900); }

.form-section-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--orange-500); font-weight: 700; margin-bottom: 14px;
}
.field-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}

/* ---------------------------------------------------------------- Grid */
.qr-editor-grid { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
@media (max-width: 640px) { .qr-editor-grid { grid-template-columns: 1fr; } }

.qr-editor-preview-col { position: sticky; top: 16px; }
@media (max-width: 640px) { .qr-editor-preview-col { position: static; } }
.qr-editor-preview-frame {
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px;
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1;
}
.qr-editor-preview-frame canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.qr-editor-link-text { font-size: 11.5px; color: var(--text-muted); word-break: break-all; margin: 10px 0 0; text-align: center; }
.qr-editor-download-row { display: flex; gap: 8px; margin-top: 12px; }
.qr-editor-download-row .btn { width: auto; flex: 1; margin: 0; }
.qr-editor-download-row select {
  background: var(--surface); color: var(--text); border: 1.5px solid var(--border);
  border-radius: 12px; font-family:'AdNeedRupee','Manrope', sans-serif; font-size: 13px; padding: 0 10px; cursor: pointer;
}
.qr-editor-print-btn { width: 100%; margin-top: 8px; }
.qr-editor-error {
  margin-top: 10px; font-size: 12px; color: var(--error); background: #FDECEC;
  border: 1px solid #F5C6C6; border-radius: 10px; padding: 8px 10px; display: none;
}

.qr-editor-controls-col { min-width: 0; }
.qr-editor-section { padding: 18px 0; border-bottom: 1px solid var(--border); }
.qr-editor-section:first-child { padding-top: 0; }
.qr-editor-section:last-of-type { border-bottom: none; }
.qr-editor-section > .field-label { margin-bottom: 10px; }

.qr-editor-section textarea {
  width: 100%; min-height: 72px; resize: vertical; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--border); font-family:'AdNeedRupee','Manrope', sans-serif; font-size: 14px;
  background: var(--surface); color: var(--text);
}
.qr-editor-section textarea:focus {
  outline: none; border-color: var(--orange-500); box-shadow: 0 0 0 3px rgba(232,73,29,.10);
}

/* ---------------------------------------------------------------- Quick-start chips */
.qr-quickstart-row { display: flex; gap: 6px; flex-wrap: wrap; }
.qr-quickstart-chip {
  font-family:'AdNeedRupee','Manrope', sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted); background: var(--bg); border: 1.5px solid var(--border); border-radius: 20px;
  padding: 7px 12px; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.qr-quickstart-chip:hover:not(:disabled) { border-color: rgba(232,73,29,.35); color: var(--navy-900); }
.qr-quickstart-chip.active { background: #FDECE4; border-color: var(--orange-500); color: var(--orange-500); }
.qr-quickstart-chip:disabled { cursor: not-allowed; opacity: .55; }
.qr-quickstart-note {
  font-size: 11.5px; color: var(--text-muted); margin: 10px 0 0; line-height: 1.5;
}

/* ---------------------------------------------------------------- Logo mode */
.qr-mode-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.qr-mode-btn {
  flex: 1; min-width: 90px; font-family:'AdNeedRupee','Manrope', sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted); background: var(--bg); border: 1.5px solid var(--border); border-radius: 20px;
  padding: 8px 10px; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.qr-mode-btn:hover { border-color: rgba(232,73,29,.35); }
.qr-mode-btn.active { background: #FDECE4; border-color: var(--orange-500); color: var(--orange-500); }

.qr-logo-surcharge-note {
  font-size: 11.5px; color: var(--warning); background: #FEF6E7; border: 1px solid #F5DFA8;
  border-radius: 10px; padding: 7px 10px; margin: 0 0 10px; display: none;
}
.qr-logo-surcharge-note.visible { display: block; }

.logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.logo-preview {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; border: 1.5px solid var(--border);
  background: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.logo-preview.empty::after {
  content: ""; width: 16px; height: 16px; background: var(--text-muted);
  -webkit-mask: radial-gradient(circle, transparent 40%, #000 41%); mask: radial-gradient(circle, transparent 40%, #000 41%);
}
.logo-drop {
  flex: 1; border: 1.5px dashed var(--border); border-radius: 12px; padding: 12px; text-align: center;
  cursor: pointer; font-size: 12px; color: var(--text-muted); transition: border-color .15s ease, background .15s ease;
}
.logo-drop:hover { border-color: var(--orange-500); background: #FDECE4; }
.logo-drop strong { color: var(--orange-500); font-weight: 700; }
.logo-remove {
  display: none; margin: 6px 0 4px; font-size: 12px; color: var(--error); background: none; border: none;
  cursor: pointer; padding: 0; text-decoration: underline; font-family:'AdNeedRupee','Manrope', sans-serif;
}

.slider-row { margin-top: 14px; }
.slider-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.slider-value { font-size: 12px; font-weight: 700; color: var(--orange-500); }
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px;
  background: var(--border); outline: none; margin: 0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--orange-500); cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(232,73,29,.4);
}
input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--orange-500); cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(232,73,29,.4);
}
.slider-hint { font-size: 11px; color: var(--warning); margin: 6px 0 0; display: none; }

/* ---------------------------------------------------------------- Color & swatches */
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.color-field {
  display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 8px 10px; background: var(--surface);
}
.color-field input[type=color] { width: 28px; height: 28px; border: none; border-radius: 6px; padding: 0; background: none; cursor: pointer; flex-shrink: 0; }
.color-field input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type=color]::-webkit-color-swatch { border: 1px solid var(--border); border-radius: 6px; }
.color-field input[type=text] { border: none; background: none; padding: 0; font-size: 12.5px; width: 100%; color: var(--text); }
.color-field input[type=text]:focus { outline: none; }

.swatches { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.swatch-pair { width: 26px; height: 26px; border-radius: 8px; cursor: pointer; border: 1.5px solid var(--border); position: relative; overflow: hidden; }
.swatch-pair span { position: absolute; top:0; right:0; bottom:0; left:0; }
.swatch-pair span:first-child { clip-path: polygon(0 0, 100% 0, 0 100%); }
.swatch-pair span:last-child { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.swatch-pair:hover { border-color: var(--orange-500); }

/* ---------------------------------------------------------------- Frame */
.frame-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.frame-opt {
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg); padding: 10px 4px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; transition: border-color .15s ease;
}
.frame-opt:hover { border-color: rgba(232,73,29,.35); }
.frame-opt.active { border-color: var(--orange-500); background: #FDECE4; }
.frame-opt svg { width: 26px; height: 26px; }
.frame-opt span { font-size: 9.5px; color: var(--text-muted); font-weight: 600; }
.frame-opt.active span { color: var(--orange-500); }
.label-text-row { margin-top: 12px; }
.label-text-row input[type=text] { margin-bottom: 0; }

.qr-editor-reset-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; }
.qr-editor-reset-row .btn { width: auto; margin: 0; }

.tool-note { color: var(--text-muted); font-size: 12.5px; line-height: 1.6; margin: 22px 0 0; }

/* ---------------------------------------------------------------- Embed mode (CP12)
   When this page is loaded with ?embed=1 inside an <iframe> — see the
   dashboard's "Customize QR Code" modal (public/shop/js/qr.js) and Card
   Maker's QR block — it becomes a pure settings editor: no page chrome,
   no pricing/balance display (the parent already knows who's signed in
   and owns the one AdCredits charge), and the content field is locked to
   whatever link the parent supplies. See initEmbedMode() in qr-maker.js. */
body.embed-mode { background: transparent; }
body.embed-mode .dash-topbar,
body.embed-mode .qr-tool-title,
body.embed-mode .qr-tool-subtitle,
body.embed-mode .qr-tool-price-row,
body.embed-mode .qr-editor-download-row,
body.embed-mode .qr-editor-print-btn,
body.embed-mode .tool-note,
body.embed-mode .auth-footer,
body.embed-mode > .auth-wrap > .auth-card--tool > a.btn-secondary {
  display: none !important;
}
body.embed-mode .auth-wrap {
  min-height: 0; display: block; padding: 0; align-items: initial; justify-content: initial;
}
body.embed-mode .auth-card--tool {
  max-width: none; padding: 0; border: none; box-shadow: none; background: transparent; border-radius: 0;
}
body.embed-mode #embedSaveBtn.hidden { display: none; }
body.embed-mode #embedSaveBtn {
  width: 100%; justify-content: center; margin-top: 10px;
}
.qr-embed-lock-note {
  font-size: 12px; color: var(--text-muted); margin: 6px 0 0; line-height: 1.5;
}