/* ===== Audio to Text Converter - Frontend CSS ===== */

/* Card & form */
.attc-card { max-width: 520px; margin: 24px auto; padding: 24px 20px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.attc-card__title { margin: 0 0 12px; font-size: 20px; }

.attc-field { margin: 12px 0; }
.attc-field label { display:block; margin-bottom: 6px; font-weight: 600; }
.attc-input { width: 100%; padding: 10px 12px; border: 1px solid #cfd4d9; border-radius: 6px; outline: none; }
.attc-input:focus { border-color: #2271b1; box-shadow: 0 0 0 3px rgba(34,113,177,.15); }
.attc-btn-wide { width: 100%; padding: 10px 14px; }

/* Alerts */
.attc-alert { padding: 12px 16px; border-radius: 6px; margin: 16px 0; }
.attc-alert-error { background: #fdecea; color: #b71c1c; border: 1px solid #f5c6cb; }
.attc-alert-success { background: #edf7ed; color: #000000; border: 1px solid #c3e6cb; }

/* Upload form container */
.audio-to-text-converter { max-width: 820px; margin: 0 auto; padding: 20px; }

/* Top nav (Lịch sử / Đăng xuất) */
.attc-top-nav { display:flex; gap:16px; margin:8px 0 16px; flex-wrap:wrap; }
.attc-nav-link { display:inline-block; padding:8px 12px; border:1px solid #cfd4d9; border-radius:6px; text-decoration:none; color:#2271b1; }
.attc-nav-link:hover { background:#f3f6f9; }

/* Quota còn lại */
.attc-quota { background:#f8fafc; border:1px solid #e5e7eb; color:#1c7430; padding:8px 12px; border-radius:6px; margin:8px 0 12px; font-size:16px;font-weight: bold; }

/* Download button */
.attc-download-btn { display:inline-flex; align-items:center; gap:8px; background:#28a745; border:1px solid #1e7e34; padding:10px 14px; border-radius:4px; color:#fff !important; text-decoration:none; font-weight:600; }
.attc-download-btn:hover { background:#218838; border-color:#1c7430; }
.attc-download-btn svg { width:16px; height:16px; fill: currentColor; }

/* History page */
.attc-history { max-width:860px; margin:0 auto; padding:20px; }
.attc-history-list { list-style:none; padding:0; margin:0; }
.attc-history-item { border:1px solid #e5e7eb; border-radius:8px; padding:12px 14px; margin:12px 0; background:#fff; }
.attc-history-meta { display:flex; gap:10px; align-items:center; justify-content:space-between; }
.attc-history-time { color:#555; }
.attc-history-content { white-space:pre-wrap; margin-top:8px; }

/* Auth actions (Đăng nhập/Đăng ký trong trang chuyển đổi) */
.attc-auth-actions { display:flex; gap:10px; margin:12px 0 4px; }
.attc-login-btn { display:inline-block; background:#2271b1; color:#fff !important; padding:10px 14px; border-radius:4px; text-decoration:none; font-weight:600; }
.attc-login-btn:hover { background:#1b5c8f; }
.attc-register-btn { display:inline-block; background:#6c757d; color:#fff !important; padding:10px 14px; border-radius:4px; text-decoration:none; font-weight:600; }
.attc-register-btn:hover { background:#5a6268; }

/* ===== Dropzone upload (Chuyển đổi) ===== */
.attc-dropzone { position: relative; border: 2px dashed #cfd4d9; background: #f8fafc; border-radius: 10px; padding: 22px; text-align:center; transition: border-color .2s, background .2s, box-shadow .2s; }
.attc-dropzone.is-dragover { border-color: #2271b1; background: #eef6fc; box-shadow: 0 0 0 3px rgba(34,113,177,.12) inset; }
.attc-dropzone__inner { display: grid; gap: 8px; align-items: center; justify-items: center; }
.attc-dropzone__icon { opacity: .9; }
.attc-dropzone__text { color: #0f172a; }
.attc-dropzone__text .attc-link { color: #2271b1; text-decoration: underline; cursor: pointer; }
.attc-dropzone__hint { color: #6b7280; font-size: 13px; }
.attc-dropzone__input { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; }
.attc-dropzone { cursor: pointer; }
.attc-file-info { margin: 10px 0 0; font-size: 14px; color: #0f172a; }
.price-payment {font-size: 22px; color: #218838;font-weight: bold;}
.attc-qr-fallback { color: #6b7280;font-style: italic; }
.attc-user-name { margin: 0.3rem 0 0.6rem; color: #2c3e50; }
button.attc-back-to-plans, button#attc-back-to-plans,button#attc-back-to-plan {background-color: #2271b1;margin-bottom: 1rem;}
#attc-confirm-payment,#attc-confirm-payment-imgocr {background-color: #000000;margin-bottom: 1rem;}