/* WP Barcode Generator — final CSS (Option B) */

/* box-sizing */
.wp-bc-root, .wp-bc-root * { box-sizing: border-box; }

/* container grid: left fixed, right fluid */
.wp-bc-root {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  max-width: 1180px;
  margin: 26px auto;
  font-family: Arial, sans-serif;
  color: #222;
}

/* panels */
.wp-bc-panel { min-height: 380px; }
.wp-bc-card, .preview-card {
  background:#fff; border:1px solid #e6e6e6; border-radius:8px;
  padding:16px; display:flex; flex-direction:column; height:100%;
}

/* panel A */
.wp-bc-textarea { width:100%; height:90px; padding:8px; border-radius:6px; border:1px solid #ccc; font-size:14px; resize:vertical; }
.wp-bc-row { margin-top:12px; display:flex; flex-direction:column; gap:8px; }

/* preview (panel B) */
.preview-top { display:flex; justify-content:flex-end; margin-bottom:10px; }
.wp-bc-gear { background:#fff; border:1px solid #ddd; padding:12px 16px; border-radius:8px; font-size:26px; cursor:pointer; box-shadow:0 3px 6px rgba(0,0,0,.06); }
.preview-area { flex:1; display:flex; align-items:center; justify-content:center; border:1px dashed #e9e9e9; border-radius:8px; background:#fbfbfb; padding:10px; min-height:220px; overflow:hidden; }
.bc-svg-holder { width:100%; display:flex; align-items:center; justify-content:center; }
.bc-svg-holder svg { max-width:100%; height:auto; }
.preview-bottom { margin-top:14px; display:flex; justify-content:flex-end; }
.wp-bc-download { background:#c8232c; color:#fff; padding:10px 16px; border:none; border-radius:6px; cursor:pointer; font-size:15px; }

/* overlay inside panel B (Option B) */
.wp-bc-overlay {
  position: absolute; /* RELATIVE to panel B */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  z-index: 40;
  pointer-events: none;
}
.wp-bc-overlay.show { display:block; pointer-events:auto; }

/* overlay card fills panel B area */
.wp-bc-overlay-card {
  width:100%;
  height:100%;
  background:#fff;
  border-radius:8px;
  border:1px solid #ddd;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  display:flex; flex-direction:column; overflow:hidden;
}

/* overlay header */
.overlay-header { padding:12px 16px; background:#f6f6f6; border-bottom:1px solid #eaeaea; display:flex; justify-content:space-between; align-items:center; }
.overlay-title { font-weight:700; font-size:16px; }
.overlay-toggle { color:#666; }

/* overlay body + content scroll */
.overlay-body { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.overlay-content { padding:16px; flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }

/* fields */
.wp-bc-field { width:100%; min-width:320px; max-width:760px; padding:8px; border-radius:6px; border:1px solid #d0d0d0; font-size:15px; background:#fff; box-sizing:border-box; }
.wp-bc-note { font-size:13px; color:#666; margin-top:4px; }

/* footer */
.overlay-footer { padding:12px 16px; border-top:1px solid #f0f0f0; display:flex; justify-content:flex-end; background:#fff; }
.wp-bc-close { background:#c8232c; color:#fff; border:none; padding:10px 16px; border-radius:6px; cursor:pointer; font-size:15px; }

/* responsive */
@media (max-width:900px) {
  .wp-bc-root { grid-template-columns: 1fr; }
  .wp-bc-overlay { position: fixed; left: 12px; right: 12px; top: 12px; bottom: 12px; }
  .wp-bc-field { min-width:auto; max-width:100%; }
}

/* small visual tweaks */
.bc-svg-holder { padding:10px; background:#fff; border-radius:4px; }