/* ===== QR Code Generator PRO – FORCE premium look (scoped) ===== */

/* Palette + base */
.qrpro-editor{
  --gold1:#E9DBBD; --gold2:#CBB682; --gold3:#A08C5B; --gold4:#785F37;
  --black:#181510; --text:#ffffff; --panel:#1d1a15; --tbg:#0f1822;
  --btn:var(--gold2); --muted:rgba(233,219,189,.78);

  /* Dashboard-driven vars (with safe fallbacks) */
  --font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --h1-color: var(--gold2);
  --h2-color: var(--gold1);
  --h1-size: 48px;
  --h2-size: 22px;
  --base-size: 16px;
  --card-radius: 18px;
  --btn-radius: 12px;
  --shadow: 22px;
  --border-color: rgba(233,219,189,.12);
  --border-style: solid;
  --border-width: 1px;
  --btn-text: #111;
  --btn-grad-from: #CBB682;
  --btn-grad-to: #A08C5B;

  background: var(--black) !important;
  color: var(--text) !important;
  padding: 44px 18px 70px !important;
  font-family: var(--font-family);
  font-size: var(--base-size, 16px);
}

/* Hard reset inside the section to resist theme overrides */
.qrpro-editor *{ box-sizing:border-box; font-family:inherit; }
.qrpro-editor .qrpro-container{ max-width:1100px; margin:0 auto; }

/* Headings (driven by dashboard) */
.qrpro-editor .qrpro-header h1{
  color: var(--h1-color, var(--gold2)) !important;
  font-size: var(--h1-size, 48px) !important;
  margin: 0 0 8px !important;
  text-transform: uppercase; font-weight: 900; letter-spacing: .5px;
}
.qrpro-editor .qrpro-header h1 span{ color: var(--gold1) !important; }
.qrpro-editor .qrpro-header h2{
  color: var(--h2-color, var(--gold1)) !important;
  font-size: var(--h2-size, 22px) !important;
  margin: .5rem 0 6px !important; font-weight: 800;
}
.qrpro-editor .qrpro-header .lead{ color: var(--muted) !important; margin: 2px 0 24px !important; }

/* Grid */
.qrpro-editor .qrpro-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:24px; }
@media (max-width:960px){ .qrpro-editor .qrpro-grid{ grid-template-columns:1fr; } }

/* Form & preview cards (border + radius + shadow from dashboard) */
.qrpro-editor .qrpro-form,
.qrpro-editor .qrpro-card{
  background: linear-gradient(180deg, #1b1813, var(--panel)) !important;
  border: var(--border-width, 1px) var(--border-style, solid) var(--border-color, rgba(233,219,189,.12)) !important;
  border-radius: var(--card-radius, 18px) !important;
  padding: 22px !important;
  box-shadow: 0 0 0 1px rgba(233,219,189,.08), 0 20px var(--shadow, 22px) rgba(0,0,0,.55) !important;
}

/* Labels + help text */
.qrpro-editor label{ color: var(--gold1) !important; font-weight: 800 !important; margin: 12px 0 8px !important; display: block; }
.qrpro-editor .req{ color: var(--gold2) !important; }
.qrpro-editor .hint{ color: var(--muted) !important; font-size: 12px !important; display: block !important; margin-top: 6px !important; }

/* Inputs */
.qrpro-editor input[type="text"],
.qrpro-editor input[type="url"],
.qrpro-editor input[type="number"],
.qrpro-editor textarea{
  width:100% !important; background:var(--tbg) !important; color:var(--text) !important;
  border:1px solid rgba(233,219,189,.22) !important; border-radius:12px !important;
  padding:11px 12px !important; outline:none !important; box-shadow:none !important;
}
.qrpro-editor input::placeholder,
.qrpro-editor textarea::placeholder{ color:rgba(255,255,255,.6) !important; }

.qrpro-editor .qrpro-row{ display:grid !important; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:720px){ .qrpro-editor .qrpro-row{ grid-template-columns:1fr; } }
.qrpro-editor .upload-row{ display:flex !important; gap:12px !important; align-items:center !important; }

/* Buttons (primary from dashboard gradient + text color) */
.qrpro-editor .qrpro-btn,
.qrpro-editor .qrpro-btn:visited{
  appearance:none !important; -webkit-appearance:none !important;
  background: var(--btn) !important; color: #ffffff !important; border:0 !important;
  border-radius: var(--btn-radius, 12px) !important; padding:11px 16px !important; font-weight:900 !important;
  cursor:pointer !important; box-shadow:0 8px 22px rgba(203,182,130,.22) !important;
  text-transform:none !important;
}
.qrpro-editor .qrpro-btn.primary{
  background: linear-gradient(160deg, var(--btn-grad-from, #CBB682), var(--btn-grad-to, #A08C5B)) !important;
  color: var(--btn-text, #111) !important;
}
.qrpro-editor .qrpro-btn.ghost{ background:transparent !important; color:var(--gold1) !important; border:1px solid rgba(233,219,189,.25) !important; box-shadow:none !important; }
.qrpro-editor .qrpro-actions{ margin-top:12px !important; display:flex !important; gap:10px !important; flex-wrap:wrap !important; }

/* Swatches */
.qrpro-editor .qrpro-swatches{ display:flex !important; gap:10px !important; flex-wrap:wrap !important; margin-bottom:8px !important; }
.qrpro-editor .qrpro-swatches .swatch{
  width:34px !important; height:34px !important; border-radius:10px !important;
  display:inline-block !important; cursor:pointer !important; background:var(--c) !important;
  border:1px solid rgba(233,219,189,.28) !important; box-shadow:inset 0 0 0 2px rgba(0,0,0,.18) !important;
}
.qrpro-editor .qrpro-swatches .swatch.active{
  outline:3px solid var(--gold2) !important;
  box-shadow:0 0 0 2px #000 inset, 0 0 0 3px rgba(203,182,130,.75) !important;
}
.qrpro-editor .qrpro-swatches .swatch:focus-visible{ outline:3px solid var(--gold1) !important; }

/* Preview block */
.qrpro-editor .qrpro-card.align-center{ text-align:center !important; }
.qrpro-editor .qrpro-title{
  color:var(--gold2) !important; margin:10px 0 16px !important;
  font-size:22px !important; font-weight:900 !important; letter-spacing:.3px !important;
}
.qrpro-editor .qr-stage{ display:flex !important; align-items:center !important; justify-content:center !important; min-height:360px !important; position:relative !important; }

.qrpro-editor .qrpro-qrbox{ position:relative !important; display:inline-block !important; border-radius:16px !important; overflow:hidden !important; }
.qrpro-editor .qrpro-img{
  display:block !important; width:320px !important; height:320px !important;
  object-fit:contain !important; background:#fff !important; border-radius:16px !important;
  box-shadow:0 0 0 6px rgba(233,219,189,.92), 0 18px 36px rgba(0,0,0,.55) !important;
}
.qrpro-editor .qrpro-logo{
  position:absolute !important; inset:0 !important; margin:auto !important; width:26% !important; height:26% !important;
  border-radius:10px !important; object-fit:contain !important; pointer-events:none !important;
  box-shadow:0 0 0 5px rgba(255,255,255,.92) !important;
}

/* Auto-scale preview on small screens */
.qrpro-editor .qrpro-img{ width:clamp(220px, var(--qr-size, 320px), 82vw) !important; height:auto !important; aspect-ratio:1/1; }

/* ===== Spacing & width tweaks ===== */
.qrpro-editor .qrpro-form{ max-width:720px; margin:0 auto; }
.qrpro-editor .qrpro-form > label{ margin-top:16px !important; }
.qrpro-editor .qrpro-form input[type="text"],
.qrpro-editor .qrpro-form input[type="url"],
.qrpro-editor .qrpro-form input[type="number"],
.qrpro-editor .qrpro-form textarea{ margin-bottom:14px !important; }
.qrpro-editor .qrpro-swatches{ margin:6px 0 16px !important; }
.qrpro-editor .upload-row{ margin-bottom:14px !important; }
.qrpro-editor .qrpro-actions{ margin-top:18px !important; }
.qrpro-editor .qrpro-row > div{ display:flex; flex-direction:column; gap:6px; }

/* Upload row: stack on mobile */
.qrpro-editor .upload-row{ flex-direction:row; flex-wrap:wrap; }
@media (max-width:600px){
  .qrpro-editor .upload-row{ flex-direction:column !important; align-items:stretch !important; }
  .qrpro-editor #qrpro-logo-file, .qrpro-editor #qrpro-logo{ width:100% !important; }
}

/* Mobile tweaks */
@media (max-width:960px){
  .qrpro-editor{ padding:28px 14px 50px !important; }
  .qrpro-editor .qrpro-container{ max-width:100% !important; }
  .qrpro-editor .qrpro-grid{ grid-template-columns:1fr !important; gap:18px !important; }
  .qrpro-editor .qrpro-form, .qrpro-editor .qrpro-card{ padding:18px !important; }
}
@media (max-width:600px){
  .qrpro-editor input[type="text"], .qrpro-editor input[type="url"], .qrpro-editor input[type="number"], .qrpro-editor textarea{
    font-size:16px !important; padding:12px 14px !important; border-radius:14px !important;
  }
  .qrpro-editor .qrpro-swatches .swatch{ width:40px !important; height:40px !important; border-radius:12px !important; }
  .qrpro-editor .qrpro-actions{ gap:8px !important; }
  .qrpro-editor .qrpro-btn{ min-height:44px !important; padding:12px 16px !important; }
  .qrpro-editor .qrpro-btn.primary, .qrpro-editor .qrpro-btn.ghost{ flex:1 1 48%; }
}
@media (max-width:420px){
  .qrpro-editor .qrpro-actions{ flex-direction:column !important; }
  .qrpro-editor .qrpro-actions .qrpro-btn{ width:100% !important; }
  .qrpro-editor .qrpro-swatches{ gap:12px !important; }
}

/* When preview is hidden, reduce extra space on right column */
#qrpro-preview-card[style*="display: none"]{ padding:0 !important; border:0 !important; box-shadow:none !important; }

/* Preview link text */
.qrpro-editor .qrpro-link{
  margin-top:12px !important; font-size:14px !important;
  color:var(--gold1) !important; opacity:.95 !important; word-break:break-all !important;
}

/* File input look */
.qrpro-editor #qrpro-logo-file{
  background:var(--tbg) !important; color:var(--text) !important;
  border:1px solid rgba(233,219,189,.22) !important; border-radius:12px !important; padding:8px !important;
}
.qrpro-editor #qrpro-logo-file::-webkit-file-upload-button{
  background:var(--gold2) !important; color:#111 !important; border:0 !important; border-radius:10px !important;
  padding:8px 12px !important; font-weight:800 !important; margin-right:10px !important; cursor:pointer !important;
}

/* Column layout toggle from admin */
.qrpro-editor.one-col .qrpro-grid{ grid-template-columns: 1fr !important; }

/* Toast */
#qrpro-toast.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:9999;
  padding:12px 20px; background:#222; color:var(--gold1); border-radius:8px; font-weight:bold;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}

/* Extra space under preview */
.qrpro-editor .qrpro-qrbox{ margin-bottom:16px !important; }