/* ==================================================
   EkaTools – QR Generator
   FINAL CSS (MATCHES CURRENT JS EXACTLY)
   ================================================== */

/* =====================
   TOKENS
   ===================== */
:root {
  --primary: #F6820E;
  --primary-soft: #FFF1E6;
  --text-dark: #1F2937;
  --text-muted: #6B7280;
  --border-light: #E5E7EB;
  --bg-light: #FAFAFA;
}

/* ==================================================
   🔒 HEADER – HARD FREEZE (NO QR LEAKAGE)
   ================================================== */
/* ===== HEADER (MATCH UNIT CONVERTER EXACTLY) ===== */
header {
  background: #fff;
  border-bottom: 1px solid var(--border-light);
}

header .container {
  max-width: 1200px;
  margin: auto;
  padding: 0 12px;
}

header .nav {
  display: flex;
  align-items: center;
  height: 64px;
}

header .logo img,
header .logo svg {
  height: 40px;     /* ✅ SAME AS UNIT CONVERTER */
  width: auto;
  display: block;
}

/* Optional: if QR page has header title */
header h1 {
  font-size: 20px;
  font-weight: 600;
}


/* ==================================================
   QR PAGE SCOPE
   ================================================== */
.qrg-page {
  background: var(--bg-light);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--text-dark);
  padding: 24px 16px;
}

.qrg-page * {
  box-sizing: border-box;
}

/* ==================================================
   VISIBILITY RULES (CRITICAL – JS DEPENDENT)
   ================================================== */
.hidden {
  display: none !important;
}

.qrg-tab-panel {
  display: none;
}

.qrg-tab-panel.active {
  display: block;
}

/* ==================================================
   TITLE
   ================================================== */
.qrg-page h1 {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 10px;
}

.qrg-page .subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 28px;
}

/* ==================================================
   CARDS (ONLY INSIDE QR PAGE)
   ================================================== */
.qrg-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
}

/* ==================================================
   INPUT GROUPS
   ================================================== */
.qrg-input-group {
  margin-bottom: 14px;
}

.qrg-input-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.qrg-input-group input,
.qrg-input-group select,
.qrg-input-group textarea {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border-radius: 8px;
  border: 2px solid var(--border-light);
  background: #fff;
}

.qrg-input-group textarea {
  resize: vertical;
  min-height: 80px;
}

.qrg-input-group input:focus,
.qrg-input-group select:focus,
.qrg-input-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(246,130,14,0.15);
}

/* ==================================================
   BUTTONS (PILLS, TABS, ACTIONS)
   ================================================== */
.qrg-page button {
  padding: 7px 14px;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.qrg-page button:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.qrg-page button.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(246,130,14,0.15);
}

/* Button rows */
#qrg-type-pills,
.qrg-tabs,
.qrg-pill-group,
.qrg-download-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ==================================================
   MOBILE
   ================================================== */
@media (max-width: 900px) {
  .qrg-page {
    padding: 16px;
  }

  .qrg-page h1 {
    font-size: 1.8rem;
  }

  .qrg-page button {
    font-size: 13px;
    padding: 6px 12px;
  }
}

/* ==================================================
   EkaTools – QR Generator
   PHASE-2: LAYOUT & PREVIEW (CSS ONLY)
   ================================================== */

/* =====================
   MAIN TWO-COLUMN LAYOUT
   ===================== */
.qrg-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
}

/* Left = inputs + design */
.qrg-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Right = preview + download */
.qrg-right {
  position: sticky;
  top: 96px; /* below frozen header */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* =====================
   QR PREVIEW
   ===================== */
.qrg-preview {
  background: #fff;
  border: 1px dashed #f6c59f;
  border-radius: 12px;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#qrg-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* QR canvas size safety */
#qrg-canvas canvas,
#qrg-canvas svg {
  max-width: 220px;
  max-height: 220px;
}

/* =====================
   DOWNLOAD SECTION
   ===================== */
.qrg-downloads {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qrg-download-buttons {
  display: flex;
  gap: 12px;
}

.qrg-download-buttons button {
  flex: 1;
  border-radius: 8px;
  font-weight: 500;
}

/* =====================
   MOBILE BEHAVIOR
   ===================== */
@media (max-width: 900px) {
  .qrg-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Preview moves to top */
  .qrg-right {
    position: static;
    order: -1;
  }

  #qrg-canvas canvas,
  #qrg-canvas svg {
    max-width: 200px;
    max-height: 200px;
  }
}
/* ==================================================
   EkaTools – QR Generator
   PHASE-3: TABS & CONTROLS POLISH (CSS ONLY)
   ================================================== */

/* =====================
   QR TYPE PILLS (TOP)
   ===================== */
#qrg-type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#qrg-type-pills button {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
}

/* Active QR type stronger */
#qrg-type-pills button.active {
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(246,130,14,0.18);
}

/* =====================
   DESIGN TABS (DOTS / EYE / LOGO)
   ===================== */
.qrg-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.qrg-tabs button {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 8px;
  background: #fff;
}

/* Active design tab */
.qrg-tabs button.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/* =====================
   DESIGN PANELS
   ===================== */
.qrg-tab-panel {
  padding-top: 4px;
}

/* Space between design sections */
.qrg-tab-panel > .qrg-card + .qrg-card {
  margin-top: 16px;
}

/* =====================
   PILL GROUPS (DOT STYLE, GRADIENTS, ETC.)
   ===================== */
.qrg-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.qrg-pill-group button {
  padding: 7px 14px;
  font-size: 13px;
}

/* Active pill clarity */
.qrg-pill-group button.active {
  box-shadow: 0 0 0 2px rgba(246,130,14,0.15);
}

/* =====================
   COLOR PICKERS ROW
   ===================== */
.qrg-color-row {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.qrg-color-row input[type="color"] {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  cursor: pointer;
}

/* =====================
   LOGO PRESETS
   ===================== */
#qrg-logo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* =====================
   LOGO UPLOAD
   ===================== */
.qrg-logo-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.qrg-upload-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px dashed var(--primary);
  color: var(--primary);
  background: transparent;
}

.qrg-upload-btn:hover {
  background: rgba(246,130,14,0.08);
}

.qrg-upload-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* =====================
   QUALITY / DOWNLOAD PILLS
   ===================== */
#qrg-quality-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#qrg-quality-pills button {
  padding: 6px 14px;
  font-size: 13px;
}

/* =====================
   MICRO INTERACTIONS
   ===================== */
.qrg-page button {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease;
}

.qrg-page button:hover {
  transform: translateY(-1px);
}

.qrg-page button:active {
  transform: scale(0.96);
}

/* =====================
   MOBILE POLISH
   ===================== */
@media (max-width: 900px) {
  .qrg-tabs {
    gap: 8px;
  }

  #qrg-type-pills button,
  .qrg-tabs button {
    font-size: 13px;
    padding: 6px 12px;
  }

  .qrg-pill-group button {
    font-size: 13px;
    padding: 6px 12px;
  }
}
/* ==================================================
   EkaTools – QR Generator
   PHASE-4: VISUAL HIERARCHY & POLISH
   ================================================== */

/* =====================
   SUBTITLE FIX
   ===================== */
.qrg-page .subtitle {
  margin-top: 6px;
  margin-bottom: 32px;
  font-size: 1.05rem;
  line-height: 1.5;
  text-decoration: none; /* kill underline feeling */
}

/* =====================
   SECTION HEADINGS (Finder style, Eye gradient, etc.)
   ===================== */
.qrg-input-group > label,
.qrg-card > label,
.qrg-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 10px;
}

/* Explicit section titles inside design panels */
.qrg-tab-panel label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}

/* =====================
   DESIGN SUB-SECTIONS RHYTHM
   ===================== */
.qrg-tab-panel .qrg-pill-group {
  margin-bottom: 16px;
}

/* Divider feel between sections */
.qrg-tab-panel .qrg-pill-group + label {
  margin-top: 6px;
}

/* =====================
   COLOR PICKER GROUPING
   ===================== */
.qrg-color-row {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light);
}

/* =====================
   DOWNLOAD QUALITY TITLE
   ===================== */
.qrg-downloads label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
  display: block;
}

/* Quality pills spacing */
#qrg-quality-pills {
  margin-bottom: 12px;
}

/* =====================
   CARD BREATHING SPACE
   ===================== */
.qrg-card {
  padding: 20px;
}

/* =====================
   MICRO TYPOGRAPHY TWEAKS
   ===================== */
.qrg-page {
  letter-spacing: 0.1px;
}

/* =====================
   MOBILE POLISH
   ===================== */
@media (max-width: 900px) {
  .qrg-page .subtitle {
    font-size: 1rem;
    margin-bottom: 24px;
  }

  .qrg-card {
    padding: 16px;
  }
}



/* ==================================================
   PHASE-4.1 – FINAL MICRO POLISH
   ================================================== */

/* =====================
   FORCE SUBTITLE CENTERING
   ===================== */
.qrg-page h1 + p,
.qrg-page h1 + .subtitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}

/* =====================
   DESIGN SECTION SPACING FIX
   (Dot style / Dot gradient / Finder style / Eye gradient)
   ===================== */

/* Any label inside design tab panels */
.qrg-tab-panel label {
  display: block;
  margin-top: 14px;
  margin-bottom: 10px; /* 👈 critical gap */
}

/* Ensure pill groups don't touch labels */
.qrg-tab-panel .qrg-pill-group {
  margin-top: 0;
  margin-bottom: 18px;
}

/* Extra breathing room before color pickers */
.qrg-color-row {
  margin-top: 12px;
}

/* ================= MOBILE ORDER FIX ================= */
@media (max-width: 900px) {

  /* Stack layout */
  .qrg-layout {
    display: flex;
    flex-direction: column;
  }

  /* 🔥 FLATTEN LEFT COLUMN */
  .qrg-left {
    display: contents;
  }

  /* ORDER DEFINITIONS */
  .qrg-inputs-wrap {
    order: 1;
  }

  .qrg-right {
    order: 2;
    position: static;
  }

  .qrg-design {
    order: 3;
  }
}

/* ================= GLOBAL SPACING: INPUTS → PREVIEW ================= */

/* Add breathing space between inputs and preview */
.qrg-right {
  margin-top: 20px; /* adjust to 16px if you want tighter */
}

/* Desktop exception: remove extra top gap since grid already has gap */
@media (min-width: 901px) {
  .qrg-right {
    margin-top: 0;
  }
}
/* ================= QR TYPE LABEL SPACING ================= */

/* Space between "QR type" label and pills */
.qrg-selector > label {
  display: block;
  margin-bottom: 12px; /* 👈 adjust: 10–14px sweet spot */
}

/* ================= COLOR PICKER + HEX FIELD ================= */

.qrg-color-row {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}

.qrg-color-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qrg-color-field input[type="color"] {
  width: 40px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  cursor: pointer;
}

.qrg-color-field input[type="text"] {
  width: 86px;
  height: 36px;
  font-family: monospace;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: #fff;
  text-transform: uppercase;
}