/* AdNeed Platform (Site 1) — QR 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; }

.qr-tool-topline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.qr-tool-topline a.tool-back-link {
  font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none;
}
.qr-tool-topline a.tool-back-link:hover { color: var(--navy-900); }

.qr-tool-price-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 22px;
}
.qr-tool-tag {
  font-family: '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: '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: '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: '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: '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: '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; inset: 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; }