/* Patient app (demo batches 16 and 19): navy greeting card, appointment bar, saffron
   "Suggest a patient", update strip, 8 coloured tiles, review links, bottom bar with Call. */
body.pt { background: #f4f6fb; }
.ptapp { min-height: 100vh; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.pthead { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  background: linear-gradient(120deg, #1F3A68, #2C4F8C); color: #fff; }
.pthead h1 { flex: 1; min-width: 0; font-size: 1.05rem; color: #fff; }
.pthead h1 small { display: block; font-family: var(--body); font-weight: 400; font-size: .75rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptlogo { width: 34px; height: 40px; background: #fff; border-radius: 8px; padding: 2px; }
.ptib { width: 40px; height: 40px; border-radius: 10px; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ptib svg { width: 22px; height: 22px; }
.ptib.lang { width: auto; padding: 0 10px; font-weight: 700; }
.ptmain { max-width: 640px; margin: 0 auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.ptmain .card h2 { color: var(--p); }
.empty { text-align: center; color: var(--muted); padding: 30px 10px; background: #fff; border: 1px dashed var(--line); border-radius: 12px; }

.pthero { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 16px; color: #fff; background: linear-gradient(120deg, #1F3A68 0%, #2C4F8C 60%, #3B66B0 100%); box-shadow: 0 8px 22px rgba(31,58,104,.25); }
.pthero b { font-family: var(--display); font-size: 1.6rem; display: block; }
.pthero .tiny { color: #dfe6f2; }
.ptbell { position: relative; width: 50px; height: 50px; border-radius: 14px; border: 0; background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ptbell svg { width: 26px; height: 26px; }
.ptbell i, .pttile i { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--a); color: #fff; font-style: normal; font-size: .72rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.ptappt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; text-align: left; cursor: pointer; color: inherit; }
.ptappt > svg { width: 34px; height: 34px; color: #3A6FD8; flex: none; }
.ptappt b { display: block; color: var(--p); }
.ptgo { color: #b8690f; font-family: var(--display); font-weight: 600; white-space: nowrap; }
.ptsug { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; border: 0; text-align: left; cursor: pointer; color: #3b2400;
  background: linear-gradient(120deg, #F7C982, #E3902A); box-shadow: 0 8px 20px rgba(227,144,42,.35); animation: ptpulse 2.4s ease-in-out infinite; }
.ptsug b { display: block; font-family: var(--display); font-size: 1.1rem; color: #2a1a00; }
.ptsug span { font-size: .88rem; }
.ptsugic { flex: none; width: 54px; height: 54px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #E3902A; }
.ptsugic svg { width: 28px; height: 28px; }
@keyframes ptpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@media (prefers-reduced-motion: reduce) { .ptsug { animation: none; } }
.ptsec { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.ptsec h2 { color: var(--p); font-size: 1.05rem; }
.ptstrip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.ptupd { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; text-align: left; border: 1px solid var(--line); border-top: 4px solid var(--uc); border-radius: 12px; background: #fff; padding: 10px 12px; cursor: pointer; color: inherit; }
.ptk { display: block; color: var(--uc); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ptupd b { font-size: .95rem; }
.pttiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pttile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); font-size: .88rem; font-weight: 500; text-align: center; }
.ptic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, #fff); }
.ptic svg { width: 26px; height: 26px; }
.pttile i { top: 6px; right: 6px; left: auto; background: #fdf0e0; color: #9a5a0c; border-color: #fff; }
.ptlinks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ptlink { display: flex; flex-direction: column; padding: 12px; border-radius: 12px; color: #fff; text-decoration: none; }
.ptlink span { font-size: .8rem; opacity: .9; }
.ptlink.google { background: linear-gradient(120deg, #4285F4, #34A853); }
.ptlink.instagram { background: linear-gradient(120deg, #F58529, #DD2A7B, #8134AF); }
.ptlink.facebook { background: #1877F2; }
.ptlink.youtube { background: #FF0000; }
.ptlink.off { background: #c9d1dc; color: #3d4652; }
.ptclinic { background: var(--tint); }
.ptclinic .btn svg, .btn svg { width: 18px; height: 18px; }

.ptnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-around; background: #fff; border-top: 1px solid var(--line); padding: 6px 0; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.ptnav button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: .75rem; cursor: pointer; min-width: 70px; }
.ptnav button svg { width: 24px; height: 24px; }
.ptnav button.on { color: var(--p); font-weight: 600; }
.ptcall { width: 62px; height: 62px; margin-top: -30px; border-radius: 50%; background: var(--a); color: #fff; display: grid; place-items: center; border: 4px solid #fff; box-shadow: 0 6px 16px rgba(227,144,42,.45); }
.ptcall svg { width: 28px; height: 28px; }

.ptlatest { border-top: 4px solid var(--a); }
.ptdate { background: var(--p); color: #fff; border-radius: 999px; padding: 2px 10px; font-weight: 600; }
.ptlist { display: flex; flex-direction: column; }
.ptrow { display: flex; align-items: center; gap: 8px; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; color: inherit; width: 100%; }
.ptrow.on { background: var(--tint); }
.ptnm { font-weight: 600; display: block; }
.ptv { text-align: right; font-weight: 600; display: flex; flex-direction: column; align-items: flex-end; }
.ptchg { font-size: .72rem; color: var(--muted); font-weight: 400; }
.ptchev { color: var(--muted); width: 14px; }
.pttrend { padding: 8px 0 12px; }
.ptnew { background: #fdf0e0; color: #9a5a0c; border-radius: 999px; padding: 0 7px; font-size: .7rem; font-weight: 700; }
.ptvis.first { border-left: 4px solid var(--p); }
.ptvis.ot { border-left: 4px solid var(--a); }
.ptmeds { display: flex; flex-direction: column; gap: 4px; background: #f7f9fc; border-radius: 8px; padding: 8px 10px; }
.ptmeds div { display: flex; flex-direction: column; }
.ptnext { align-self: flex-start; background: var(--a); color: #fff; border-radius: 999px; padding: 2px 12px; font-size: .85rem; font-weight: 600; }
.hi-red { color: #a32323; }
.ptsum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ptsum div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.ptsum span { display: block; font-size: .75rem; color: var(--muted); }
.ptsum b { font-family: var(--display); color: var(--p); }
.ptsum .due { border-color: #f0b4b4; background: #fde9e9; } .ptsum .due b { color: #a32323; }
.ptbill.due { border-left: 4px solid #d23b3b; }
.ptucard { border-left: 5px solid var(--uc); }
.ptap { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ptap span span, .ptap .grow span { display: block; font-size: .85rem; color: var(--muted); }
.ptdays { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.ptday { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.ptday span { font-size: .72rem; color: var(--muted); } .ptday b { font-family: var(--display); font-size: 1.1rem; color: var(--p); } .ptday i { font-style: normal; font-size: .65rem; color: var(--muted); }
.ptday.on { background: var(--p); border-color: var(--p); } .ptday.on * { color: #fff; }
.ptday:disabled { background: #f1f3f6; opacity: .7; cursor: not-allowed; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.slot { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.slot b { font-size: .9rem; } .slot span { font-size: .7rem; color: var(--muted); }
.slot.on { background: var(--p); border-color: var(--p); color: #fff; } .slot.on span { color: #dfe6f2; }
.slot:disabled { background: #f1f3f6; color: var(--muted); cursor: not-allowed; }
.ptmedia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ptmedia .card { padding: 6px; }
.ptmedia img, .ptmedia video { width: 100%; border-radius: 8px; display: block; }
table.review { width: 100%; border-collapse: collapse; }

/* bill printed from the patient app (A5 landscape) */
.ptbillsheet { font-family: var(--body); color: #000; padding: 4mm; }
.ptbillsheet .pbh { display: flex; gap: 10px; align-items: flex-start; border-bottom: 2px solid #1F3A68; padding-bottom: 6px; }
.ptbillsheet .pbh img { width: 40px; }
.ptbillsheet .pbh div { display: flex; flex-direction: column; font-size: 10pt; flex: 1; }
.ptbillsheet .pbno { text-align: right; flex: none !important; }
.ptbillsheet .pbp { margin: 6px 0; font-weight: 600; }
.ptbillsheet table { width: 100%; border-collapse: collapse; font-size: 10pt; }
.ptbillsheet th, .ptbillsheet td { border-bottom: 1px solid #ccc; padding: 3px 4px; text-align: left; }
.ptbillsheet td:last-child, .ptbillsheet th:last-child { text-align: right; }
.ptbillsheet .tot td { font-weight: 700; border-top: 2px solid #000; }
.ptbillsheet .pbpay { font-size: 9pt; margin-top: 6px; }
.ptbillsheet .pbbal { margin: 8px 0; padding: 4px 8px; background: #eee; font-weight: 700; }

/* "From Dr. Baid": a quiet strip of videos and articles (batch 20) */
.pttiles .pttile:last-child:nth-child(3n+1) { grid-column: 2; }
.ptsec h2 small { font-family: var(--body); font-weight: 400; color: var(--muted); margin-left: 4px; }
.ptlib { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.ptlibt { flex: 0 0 42%; max-width: 180px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; color: inherit; }
.ptlibt b { font-size: .88rem; font-weight: 600; line-height: 1.25; }
.ptlibic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--p); background: var(--tint); flex: none; }
.ptlibic svg { width: 18px; height: 18px; }