/* Prescription upload card (checkout), one-line version (cart), "Why?" button and popup */
.pfd-rx-card { margin: 0 0 6px; padding: 8px 10px; border: 1.5px solid #f3c27a; border-radius: 14px; background: #fffaf0; font-size: 14px; color: #3d2f22; }
.pfd-rx-card[data-state="ok"] { border-color: #86d4a8; background: #f2fbf6; }
.pfd-rx-card.is-need { border-color: #ef4444; animation: pfdRxShake .45s; }
@keyframes pfdRxShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.pfd-rx-card .rx-top { display: flex; align-items: flex-start; gap: 8px; }
.pfd-rx-card .rx-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fde68a; color: #78350f; font-size: 15px; }
.pfd-rx-card[data-state="ok"] .rx-ico { background: #bbf7d0; color: #14532d; }
.pfd-rx-card .rx-txt { flex: 1; min-width: 0; line-height: 1.3; }
.pfd-rx-card .rx-for { display: block; color: #6b5b4a; font-size: 12.5px; }
.pfd-rx-card .rx-t-ok { display: none; color: #166534; }
.pfd-rx-card[data-state="ok"] .rx-t-ok { display: inline; }
.pfd-rx-card[data-state="ok"] .rx-t-none { display: none; }
.rx-why { flex: none; padding: 3px 10px; border: 1.5px solid #e5b567; border-radius: 999px; background: #fff; color: #92400e; font: 700 12.5px/1.4 inherit; cursor: pointer; }
.pfd-rx .rx-why { margin-top: 6px; }
.pfd-ci.is-rx .rx-why { margin-left: auto; align-self: center; }
.rx-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.rx-files:empty { display: none; }
.rx-files li { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 3px; border: 1px solid #e7dccb; border-radius: 10px; background: #fff; }
.rx-th { display: grid; place-items: center; flex: none; width: 34px; height: 34px; overflow: hidden; border-radius: 8px; background: #f3efe9; }
.rx-th img { width: 100%; height: 100%; object-fit: cover; }
.rx-pdf { color: #b91c1c; font: 800 10px/1 inherit; }
.rx-nm { max-width: 130px; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.rx-del { padding: 6px 7px; border: 0; background: none; color: #9a8b7a; font-size: 13px; cursor: pointer; }
.rx-add { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 6px; }
.rx-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--o, #ff7a1a); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; }
.rx-btn:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.pfd-rx-card[data-state="ok"] .rx-btn { padding: 6px 12px; border: 1.5px solid #86d4a8; background: #fff; color: #166534; font-size: 13px; }
.rx-b-ok { display: none; }
.pfd-rx-card[data-state="ok"] .rx-b-ok { display: inline; }
.pfd-rx-card[data-state="ok"] .rx-b-none { display: none; }
.rx-hint { color: #7a6a5c; font-size: 12px; }
.pfd-rx-card[data-state="ok"] .rx-hint { display: none; }
.pfd-rx-card.is-busy .rx-btn { opacity: .6; pointer-events: none; }
.rx-msg { margin: 4px 0 0; color: #b91c1c; font-size: 13px; font-weight: 600; }
.rx-msg:empty { display: none; }
.rx-msg.is-ok { color: #166534; }
.rx-alt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #ecd9b4; font-size: 12.5px; line-height: 1.35; }
.pfd-rx-card[data-state="ok"] .rx-alt { display: none; }
.rx-consult { color: #92400e; font-weight: 700; text-decoration: none; }
.rx-drop { padding: 0; border: 0; background: none; color: #7a6a5c; font-size: 12.5px; text-decoration: underline; cursor: pointer; }
/* The popup: a bottom sheet on phones, a centred card on larger screens */
.pfd-rx-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; background: rgba(30, 20, 10, .55); }
.pfd-rx-modal[hidden] { display: none; }
.rx-sheet { position: relative; width: 100%; max-width: 460px; max-height: 88vh; overflow: auto; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; background: #fff; color: #3d2f22; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); }
.rx-sheet h3 { margin: 0 34px 10px 0; font-size: 19px; line-height: 1.25; }
.rx-sheet p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.rx-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f3efe9; color: #5b4a3a; font-size: 15px; cursor: pointer; }
.rx-consult-link { display: block; margin: 4px 0 12px; color: #92400e; font-weight: 700; text-decoration: none; }
.rx-ok { width: 100%; padding: 12px; border: 0; border-radius: 999px; background: var(--o, #ff7a1a); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; }
@media (min-width: 600px) { .pfd-rx-modal { align-items: center; } .rx-sheet { border-radius: 20px; } }
/* Once a prescription is added the card shrinks: the file chips and "Add or change" share one row. */
.pfd-rx-card[data-state="ok"] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pfd-rx-card[data-state="ok"] .rx-top { flex: 1 1 100%; }
.pfd-rx-card[data-state="ok"] .rx-files { flex: 0 1 auto; margin: 0; }
.pfd-rx-card[data-state="ok"] .rx-add { flex: 0 0 auto; margin: 0 0 0 auto; }
.pfd-rx-card[data-state="ok"] .rx-msg { flex: 1 1 100%; margin: 0; }