/* qr-code-style.css */
.wp-list-table th {
    font-family: 'Roboto Slab', serif;
    font-weight: bold;
}

.wp-list-table td {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}


/* --- TWT QR Front Generator --- */
.twt-qr-generator{border:1px solid #e5e7eb;border-radius:12px;padding:16px;background:#fff;max-width:640px}
.twt-qr-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;width:100%}
.twt-qr-row{display:flex;gap:12px;flex-wrap:wrap}
.twt-qr-field span{font-size:14px;color:#334155}
.twt-qr-field input[type="url"]{padding:10px;border:1px solid #cbd5e1;border-radius:8px;width:100%}
.twt-qr-field input[type="color"]{height:42px;width:64px;padding:0;border:1px solid #cbd5e1;border-radius:8px;background:#fff}
.twt-qr-actions{margin-top:4px}
.twt-qr-generate{background:#111827;color:#fff;border:none;padding:10px 14px;border-radius:10px;cursor:pointer}
.twt-qr-generate[disabled]{opacity:.6;cursor:not-allowed}
.twt-qr-result{margin-top:16px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.twt-qr-preview img{width:256px;height:256px;object-fit:contain;border:1px solid #e5e7eb;border-radius:8px;background:#fff;padding:8px}
.twt-qr-downloads{display:flex;gap:12px;align-items:center}
.twt-qr-download{padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;text-decoration:none}
.twt-qr-copy{padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc}
@media (max-width: 640px){
  .twt-qr-preview img{width:200px;height:200px}
}

/* Additions: SVG styled preview and extra buttons */
.twt-qr-svg-preview{width:256px;height:256px;border:1px solid #e5e7eb;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#fff;margin-bottom:8px}
.twt-qr-download-svg,.twt-qr-download-png-client{padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;text-decoration:none;background:#f8fafc}

.twt-qr-inline{flex-direction:row;align-items:center;gap:8px}
.twt-qr-inline input[type=checkbox]{width:18px;height:18px}

/* Responsive layout for QR generator */
.twt-qr-generator{display:grid;grid-template-columns:1fr;gap:16px;max-width:960px}
@media(min-width:900px){.twt-qr-generator{grid-template-columns:1.1fr 1fr}}
.twt-qr-form{display:flex;flex-direction:column;gap:8px}
.twt-qr-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:900px){.twt-qr-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.twt-qr-preview img{width:100%;height:auto;max-width:384px}

/* --- TWT QR: alinhamento dos pickers e layout horizontal --- */
.twt-qr-generator{display:grid;grid-template-columns:1fr;gap:16px;max-width:980px}
@media(min-width:900px){.twt-qr-generator{grid-template-columns:1.15fr 1fr}}
.twt-qr-form{display:flex;flex-direction:column;gap:10px}
.twt-qr-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}
@media(min-width:900px){.twt-qr-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.twt-qr-field{display:flex;flex-direction:column;gap:6px}
.twt-qr-field input[type="url"], .twt-qr-field input[type="number"]{height:40px;padding:8px 10px;border-radius:10px;border:1px solid #cbd5e1}
.twt-qr-field input[type="color"]{height:40px;width:56px;padding:0;border:1px solid #cbd5e1;border-radius:10px;background:#fff}
.twt-qr-inline{flex-direction:row;align-items:center;gap:8px}
.twt-qr-inline input[type="checkbox"]{width:18px;height:18px}
.twt-qr-preview img{width:100%;max-width:380px;height:auto;border-radius:10px}

/* --- TWT QR: Tabelas responsivas (mobile) --- */
.qr-code-table-container{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.qr-code-table{
  width:100%;
  border-collapse:collapse;
  min-width:820px;
}

.qr-code-table th,
.qr-code-table td{
  padding:10px 12px;
  vertical-align:middle;
}

@media (max-width: 900px){
  .qr-code-table{min-width:740px}
  .qr-code-table th,
  .qr-code-table td{white-space:nowrap}
}

@media (max-width: 640px){
  .qr-code-table{min-width:680px}
}