/* ═══════════════════════════════════════════════════════════════════
   DIEGEN – theme-aprints.css   (v2 — logo lockup)
   Aprints.pk brand theme.

   INSTALL
     1. Save as  css/theme-aprints.css
     2. Link it in index.html AFTER css/style.css (order matters).
     3. Replace the .topbar-brand contents — see HTML snippet below.

   PALETTE — from the live Flatsome customiser on aprints.pk
     color_primary ....... #fdb61c   amber
     footer_1_bg_color ... #fca21b   deeper amber
     type_* .............. Montserrat

   ── HTML for index.html ────────────────────────────────────────────
   Replace everything inside <div class="topbar-brand"> ... </div>
   (the broken inline SVG, .brand-name and .brand-nr spans) with:

     <a href="https://aprints.pk" target="_blank" rel="noopener"
        class="brand-logo-link">
       <img src="img/aprints-logo.png"
            alt="Aprints.pk – Printing, Packaging, Branding"
            class="brand-logo">
     </a>
     <span class="brand-tool">Dieline Generator</span>

   Save a copy of the logo locally as img/aprints-logo.png. The library
   original is 2560×752 — resize to about 350px wide before using it.
   Hotlinking the full-size file makes every page load pull a 2560px
   image to display it at 116px.

   ── WHY THE TOP BAR IS WHITE ───────────────────────────────────────
   The logo wordmark is dark grey, so it disappears on black. This also
   matches aprints.pk itself: header_bg there is white and the black
   strip is the announcement bar above the logo, not the logo row.

   ── DIELINE COLOURS ────────────────────────────────────────────────
   --accent-cut / --accent-fold / --accent-perf are deliberately left
   alone. Red cut, green crease, blue perf are printing convention and
   every die-maker reads them that way.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --topbar-h:    60px;

  --bg:          #e8e5e0;
  --surface:     #ffffff;
  --surface-bg:  #faf9f7;
  --border:      #e7e3dc;
  --hover-bg:    #fdf7ea;

  --text-1:      #111111;
  --text-2:      #2b2b2b;
  --text-3:      #8b857c;

  --accent:      #fdb61c;   /* fills, borders, form accent-color */
  --accent2:     #000000;
  --accent-bg:   #fff5e0;   /* tinted backgrounds                */
  --accent-deep: #fca21b;   /* hover                             */
  --accent-ink:  #9a6a00;   /* amber as TEXT — contrast note below */

  --preview-bg:  #ffffff;
}

/* ── typography ──────────────────────────────────────────────────── */
body, button, input, select, textarea {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* ── top bar + logo lockup ───────────────────────────────────────── */
#topbar { background: #fff; border-bottom: 2px solid var(--accent); }

.topbar-brand    { display: flex; align-items: center; gap: 14px; }
.brand-logo-link { display: flex; align-items: center; line-height: 0; }
.brand-logo      { height: 50px; width: auto; display: block; }

.brand-tool {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

.btn-login       { color: #111; background: transparent; border: 1px solid #d9d5cd; }
.btn-login:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-signup      { background: var(--accent); color: #000;
                   border: 1px solid var(--accent); font-weight: 600; }
.btn-signup:hover{ background: var(--accent-deep); color: #000; }

/* ── amber fills take BLACK text ─────────────────────────────────────
   #fdb61c on white is about 1.9:1 — well under the 4.5:1 needed to be
   readable. Black on amber is roughly 12:1, and it is what aprints.pk
   already does in its amber footer.                                  */
.btn-download,
.btn-footer-download,
.btn-modal-submit {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 600;
}
.btn-download:hover,
.btn-footer-download:hover,
.btn-modal-submit:hover {
  background: var(--accent-deep);
  color: #000;
  opacity: 1;
}
.user-avatar { background: var(--accent); color: #000; }

/* ── amber as TEXT uses the darker ink ───────────────────────────── */
.menu-item.active {
  color: var(--accent-ink);
  border-left-color: var(--accent);
  background: var(--accent-bg);
}
.btn-footer-details.active      { color: var(--accent-ink); border-color: var(--accent); }
.type-option.type-selected      { border-color: var(--accent); background: var(--accent-bg); }
.type-option.type-selected span { color: var(--accent-ink); font-weight: 700; }
.tb-btn.active                  { color: var(--accent-ink); }
.modal-tab.active               { color: var(--accent-ink); border-bottom-color: var(--accent); }
.role-user                      { background: var(--accent-bg); color: var(--accent-ink); }

/* ── small screens: drop the tool label, keep the logo ───────────── */
@media (max-width: 560px) {
  .brand-tool { display: none; }
  .brand-logo { height: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Append these rules to the END of css/theme-aprints.css
   Styles for the admin panel's Plan column and plan editor.
   ═══════════════════════════════════════════════════════════════════ */

.plan-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

.plan-free    { background: #f0eeea; color: #6b6660; }
.plan-paid    { background: var(--accent-bg); color: var(--accent-ink); }
.plan-expired { background: #fdecec; color: #b3261e; }
.plan-admin   { background: #111; color: #fff; }

.admin-btn-plan {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-3);
  border-radius: 3px;
  transition: color .12s, background .12s;
}
.admin-btn-plan:hover { color: var(--accent-ink); background: var(--accent-bg); }
.admin-btn-plan svg   { width: 15px; height: 15px; display: block; }

.admin-col-plan { white-space: nowrap; }

#plan-modal select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  font: inherit;
  color: var(--text-1);
}
#plan-modal select:focus { border-color: var(--accent); outline: none; }

/* ── client-facing plan block in the account dropdown ────────────── */
.user-plan-block { padding: 10px 14px; }

.user-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
.user-plan-label { font-size: 12px; color: var(--text-3); }
.user-plan-value { font-size: 12px; font-weight: 600; color: var(--text-1); }

.user-plan-notice {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--accent-bg);
  border-radius: var(--radius-md);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--accent-ink);
}
.user-plan-notice a {
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}