/* RxAI Prescription Analyzer — Front-end v6 */
:root {
    --rxai-purple: #667eea;
    --rxai-purple-dark: #764ba2;
    --rxai-green: #27ae60;
    --rxai-orange: #f39c12;
    --rxai-red: #e74c3c;
    --rxai-blue: #2980b9;
    --rxai-radius: 16px;
    --rxai-shadow: 0 4px 32px rgba(102,126,234,.12);
}

.rxai-wrap { margin:0 auto; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#1a1a2e; }

/* ── Step card ─────────────────────────────────────────────────── */
.rxai-step { background:#fff; border-radius:var(--rxai-radius); padding:38px 44px; box-shadow:var(--rxai-shadow); animation:rxai-in .35s ease; }
.rxai-step--results { padding:32px 40px; }
@keyframes rxai-in { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

/* ── Progress ──────────────────────────────────────────────────── */
.rxai-progress { display:flex; align-items:center; margin-bottom:30px; }
.rxai-dot { width:34px; height:34px; border-radius:50%; background:#eef0f9; color:#b0b8d8; font-size:.82rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:.3s; border:2px solid transparent; }
.rxai-dot.active { background:linear-gradient(135deg,var(--rxai-purple),var(--rxai-purple-dark)); color:#fff; box-shadow:0 4px 12px rgba(102,126,234,.4); }
.rxai-dot.done   { background:var(--rxai-green); color:#fff; }
.rxai-line { flex:1; height:3px; background:#eef0f9; margin:0 6px; border-radius:3px; transition:.4s; }
.rxai-line--done { background:linear-gradient(90deg,var(--rxai-purple),var(--rxai-purple-dark)); }

/* ── Hero header ───────────────────────────────────────────────── */
.rxai-hero { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.rxai-hero-icon { width:54px; height:54px; background:linear-gradient(135deg,#f0f2ff,#e8ebff); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; flex-shrink:0; }
.rxai-title { font-size:1.55rem; font-weight:700; margin:0 0 4px; }
.rxai-sub   { color:#6b7280; margin:0; font-size:.92rem; line-height:1.55; }
.rxai-req   { color:var(--rxai-red); }
.rxai-ok-badge { display:inline-flex; align-items:center; gap:6px; background:#ecfdf5; color:#065f46; font-size:.85rem; font-weight:600; padding:8px 16px; border-radius:20px; margin-bottom:22px; border:1px solid #a7f3d0; }

/* ── Fields ────────────────────────────────────────────────────── */
.rxai-field { margin-bottom:18px; }
.rxai-field label { display:block; font-weight:600; font-size:.875rem; margin-bottom:7px; color:#374151; }
.rxai-field input { width:100%; padding:13px 16px; border:2px solid #e5e7eb; border-radius:10px; font-size:.95rem; box-sizing:border-box; transition:border .2s,box-shadow .2s; color:#1a1a2e; }
.rxai-field input:focus { border-color:var(--rxai-purple); outline:none; box-shadow:0 0 0 4px rgba(102,126,234,.1); }
.rxai-fields-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ── Dropzone ──────────────────────────────────────────────────── */
.rxai-drop { position:relative; border:2.5px dashed #d1d5db; border-radius:14px; padding:44px 24px; text-align:center; cursor:pointer; background:#fafbff; transition:.2s; margin-bottom:18px; }
.rxai-drop:hover,.rxai-drop.over { border-color:var(--rxai-purple); background:#f5f3ff; }
.rxai-drop input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.rxai-drop-icon { font-size:2.8rem; margin-bottom:10px; }
.rxai-drop-ui p { margin:4px 0; font-size:.9rem; color:#6b7280; }
.rxai-hint { font-size:.78rem !important; color:#9ca3af !important; margin-top:6px !important; }
.rxai-file-info { font-size:.9rem; font-weight:600; color:var(--rxai-purple); }

/* ── Buttons ───────────────────────────────────────────────────── */
.rxai-btn { display:flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,var(--rxai-purple),var(--rxai-purple-dark)); color:#fff; border:none; padding:15px 28px; border-radius:12px; font-size:.97rem; font-weight:600; cursor:pointer; width:100%; transition:opacity .2s,transform .1s,box-shadow .2s; box-shadow:0 4px 16px rgba(102,126,234,.35); }
.rxai-btn:hover   { opacity:.92; transform:translateY(-1px); box-shadow:0 6px 20px rgba(102,126,234,.45); }
.rxai-btn:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.rxai-btn--ghost  { background:transparent; border:2px solid var(--rxai-purple); color:var(--rxai-purple); width:auto; padding:10px 20px; font-size:.88rem; box-shadow:none; }
.rxai-btn--ghost:hover { background:#f5f3ff; box-shadow:none; }
.rxai-spin { display:inline-block; width:16px; height:16px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:rxai-spin .7s linear infinite; }
@keyframes rxai-spin { to{transform:rotate(360deg)} }

/* ── Disclaimer & Errors ───────────────────────────────────────── */
.rxai-disclaimer { background:#fffbeb; border-left:3px solid var(--rxai-orange); padding:10px 14px; border-radius:0 8px 8px 0; font-size:.78rem; color:#92400e; margin-bottom:18px; line-height:1.55; }
.rxai-err { margin-top:12px; background:#fef2f2; border-left:4px solid var(--rxai-red); padding:11px 15px; border-radius:0 8px 8px 0; font-size:.88rem; color:#991b1b; word-break:break-word; }
.rxai-email-notice { display:inline-block; font-size:.85rem; padding:9px 16px; border-radius:8px; font-weight:500; margin-top:6px; }
.rxai-email-notice.sent { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.rxai-email-notice.fail { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }

/* ── Results top bar ───────────────────────────────────────────── */
.rxai-results-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.rxai-results-title { font-size:1.4rem; font-weight:700; margin:0; }

/* ── Cards ─────────────────────────────────────────────────────── */
.rxai-card { border-radius:14px; margin-bottom:14px; overflow:hidden; border:1px solid #e5e7eb; }
.rxai-card-header { display:flex; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid #f3f4f6; }
.rxai-card-header h3 { margin:0; font-size:1rem; font-weight:700; color:#1a1a2e; }
.rxai-card-icon { font-size:1.3rem; }
.rxai-card > .rxai-info-grid,
.rxai-card > div:not(.rxai-card-header),
.rxai-card > p,
.rxai-card > ul { padding:16px 22px; }

/* Card accent colours */
.rxai-card--patient     { border-top:4px solid #8b5cf6; }
.rxai-card--doctor      { border-top:4px solid #06b6d4; }
.rxai-card--meds        { border-top:4px solid #6366f1; }
.rxai-card--interactions{ border-top:4px solid var(--rxai-orange); }
.rxai-card--summary     { border-top:4px solid var(--rxai-purple); background:#faf9ff; }
.rxai-card--warnings    { border-top:4px solid var(--rxai-red); background:#fff8f8; }

/* ── Info grid (patient / doctor) ──────────────────────────────── */
.rxai-info-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.rxai-info-item { background:#f9fafb; border-radius:10px; padding:12px 16px; }
.rxai-info-label { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#9ca3af; margin-bottom:4px; }
.rxai-info-value { font-size:.92rem; font-weight:600; color:#1a1a2e; }

/* ── Medicine cards ─────────────────────────────────────────────── */
.rxai-med { background:#f9fafb; border-radius:11px; padding:14px 18px; margin-bottom:10px; border:1px solid #f3f4f6; transition:box-shadow .2s; }
.rxai-med:hover { box-shadow:0 2px 12px rgba(0,0,0,.07); }
.rxai-med:last-child { margin-bottom:0; }
.rxai-med-name { font-weight:700; font-size:1rem; color:#1e1b4b; margin-bottom:8px; }
.rxai-med-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.rxai-tag { font-size:.74rem; padding:4px 11px; border-radius:20px; font-weight:600; }
.rxai-tag-d { background:#ede9fe; color:#5b21b6; }
.rxai-tag-f { background:#dbeafe; color:#1d4ed8; }
.rxai-tag-t { background:#fef3c7; color:#92400e; }
.rxai-med-note { font-size:.82rem; color:#6b7280; font-style:italic; margin-top:4px; }

/* ── Interaction items ──────────────────────────────────────────── */
.rxai-int { padding:13px 17px; border-radius:10px; margin-bottom:10px; border-left:4px solid #ccc; }
.rxai-int:last-child { margin-bottom:0; }
.rxai-int.mild     { border-color:#10b981; background:#f0fdf4; }
.rxai-int.moderate { border-color:#f59e0b; background:#fffbeb; }
.rxai-int.severe   { border-color:#ef4444; background:#fef2f2; }
.rxai-int-drugs { font-weight:700; font-size:.9rem; margin-bottom:5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rxai-sev { font-size:.7rem; font-weight:700; text-transform:uppercase; padding:3px 9px; border-radius:20px; }
.rxai-sev.mild     { background:#d1fae5; color:#065f46; }
.rxai-sev.moderate { background:#fde68a; color:#92400e; }
.rxai-sev.severe   { background:#fee2e2; color:#991b1b; }
.rxai-int-desc { font-size:.85rem; color:#4b5563; }

/* ── Summary & Warnings ─────────────────────────────────────────── */
.rxai-summary-text { margin:0; color:#374151; line-height:1.7; font-size:.92rem; }
#rxai-warnings { margin:0; padding-left:20px; }
#rxai-warnings li { margin-bottom:8px; font-size:.9rem; color:#991b1b; line-height:1.5; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media(max-width:560px) {
    .rxai-step { padding:24px 18px; }
    .rxai-step--results { padding:22px 16px; }
    .rxai-title { font-size:1.3rem; }
    .rxai-fields-row { grid-template-columns:1fr; }
    .rxai-results-top { flex-direction:column; }
    .rxai-btn--ghost { width:100%; justify-content:center; }
    .rxai-info-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:380px) { .rxai-info-grid { grid-template-columns:1fr; } }