/* Larkspur Pharmacy · template pieces on top of Remedy (../../styles/remedy/template/css/remedy.css).
   Quick actions, the multi-step flows (send a script, book), time slots, the TGA-format price list,
   the hours table and the map. */

/* quick actions under the hero */
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.quick a { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--line); text-decoration: none; box-shadow: var(--shadow-card); transition: transform var(--d) var(--ease), box-shadow var(--d) var(--ease), border-color var(--d-fast); }
.quick a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--green); }
.quick .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.quick .ic svg { width: 23px; height: 23px; }
.quick b { display: block; font: 650 17px/1.25 var(--display); }
.quick small { color: var(--muted); font-size: 14px; }
.quick .go { font-family: var(--mono); color: var(--green); }
@media (max-width: 900px) { .quick { grid-template-columns: 1fr; } }

/* service detail rows on the services page */
.svc-list { display: grid; gap: 18px; }
.svc-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 24px 36px; padding: 28px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); scroll-margin-top: 96px; }
.svc-row h2 { font: 700 26px/1.15 var(--display); letter-spacing: -0.02em; margin-top: 12px; }
.svc-row .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.svc-row .ic svg { width: 26px; height: 26px; }
.svc-row ul { display: grid; gap: 8px; color: var(--ink-2); }
.svc-row li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; }
.svc-row li::before { content: ""; width: 7px; height: 7px; margin-top: 9px; border-radius: 2px; background: var(--green); }
.svc-row .side { display: grid; gap: 10px; align-content: start; }
.svc-row .fee-line { font: 700 30px/1 var(--display); letter-spacing: -0.02em; }
.svc-row .fee-line small { font: 500 13px/1 var(--mono); color: var(--muted); letter-spacing: 0; }
@media (max-width: 980px) { .svc-row { grid-template-columns: 1fr; } }

/* multi-step flows */
.flow { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.flow-steps { position: sticky; top: 96px; display: grid; gap: 4px; padding: 10px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--line); }
.flow-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; color: var(--muted); font-weight: 550; }
.flow-steps li span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); font: 600 12px/1 var(--mono); }
.flow-steps li[aria-current="step"] { background: var(--green-soft); color: var(--ink); }
.flow-steps li[aria-current="step"] span { border-color: var(--green); color: var(--green); }
.flow-steps li.done { color: var(--ink-2); }
.flow-steps li.done span { background: var(--green); border-color: var(--green); color: var(--on-green); }
.flow-panel { display: grid; gap: 20px; }
.flow-panel h2 { font: 700 28px/1.15 var(--display); letter-spacing: -0.02em; }
.flow-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px dashed var(--line); }
.demo-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-s); background: var(--label); color: var(--label-ink); font: 500 13px/1.45 var(--mono); }
.demo-note::before { content: "DEMO"; flex: none; padding: 3px 6px; border-radius: 3px; background: var(--label-ink); color: var(--label); font-weight: 600; font-size: 10.5px; letter-spacing: 0.06em; }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; } .flow-steps { position: static; grid-template-columns: repeat(4, minmax(0, 1fr)); } .flow-steps li { grid-template-columns: 1fr; justify-items: center; text-align: center; font-size: 12.5px; padding: 8px 4px; gap: 6px; } }
@media (max-width: 420px) { .flow-steps li b { display: none; } }

/* time slots */
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.days button, .slots button { min-height: 48px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: var(--card); cursor: pointer; font: 600 14px/1.2 var(--body); color: var(--ink); transition: border-color var(--d-fast), background var(--d-fast), transform var(--d-fast) var(--ease); }
.days button { display: grid; gap: 2px; padding: 8px 4px; }
.days button small { font: 500 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.days button[aria-pressed="true"], .slots button[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); }
.days button:disabled, .slots button:disabled { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
@media (max-width: 520px) { .days { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* summary label at the end of a flow */
.summary { max-width: 420px; }

/* TGA-format price list */
.rules { display: grid; gap: 10px; padding: 22px; border-radius: var(--r-m); background: var(--card); border: 1.5px dashed var(--green); }
.rules ol { display: grid; gap: 7px; counter-reset: r; color: var(--ink-2); font-size: 15px; }
.rules li { counter-increment: r; display: grid; grid-template-columns: 28px 1fr; gap: 8px; }
.rules li::before { content: counter(r, decimal-leading-zero); font: 600 12px/1.9 var(--mono); color: var(--green); }
.pl-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.pl-tools .field { width: min(360px, 100%); }
.pl-group { margin-top: 26px; }
.pl-group h3 { display: flex; align-items: baseline; gap: 12px; font: 700 20px/1.2 var(--display); margin-bottom: 10px; }
.pl-group h3 small { font: 500 12px/1 var(--mono); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.pl td.pbs { font-size: 13px; color: var(--ink-2); }
.pl-retailer { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 13px/1.5 var(--mono); color: var(--muted); margin-top: 14px; }

/* hours */
.hours { display: grid; gap: 2px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.hours div.today { background: var(--green-soft); font-weight: 650; }
.hours dt { color: var(--ink-2); } .hours dd { font-family: var(--mono); }

/* the drawn street map */
.map { position: relative; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: var(--card); aspect-ratio: 4 / 3; }
.map svg { width: 100%; height: 100%; }
.map .pin { transform-box: fill-box; transform-origin: 50% 100%; animation: ph-drop 900ms var(--spring) both 300ms; }
@keyframes ph-drop { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
html.calm .map .pin { animation: none; }

/* emergency strip */
.urgent { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 14px 18px; border-radius: var(--r-m); background: var(--alert-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--alert) 35%, transparent); }
.urgent b { color: var(--alert); }

/* upload drop zone */
.drop { display: grid; place-items: center; gap: 8px; padding: 26px; border-radius: var(--r-m); border: 2px dashed var(--line); background: var(--well); text-align: center; color: var(--muted); cursor: pointer; transition: border-color var(--d-fast), background var(--d-fast); }
.drop:hover, .drop.over { border-color: var(--green); background: var(--green-soft); color: var(--ink); }
.drop svg { width: 30px; height: 30px; color: var(--green); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }