/* Shared booking widget: used by consulta-veterinaria-friendog-center (A) and
   citas-friendog-center (B). Loaded by both landings from this same-origin path.
   No inline styles anywhere: every state is expressed through classes and
   ARIA attributes (see booking-widget.js). */

@font-face{font-family:Nunito;src:url('/eventos/consulta-veterinaria-friendog-center/assets/nunito.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('/eventos/consulta-veterinaria-friendog-center/assets/nunito-bold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Fredoka;src:url('/eventos/consulta-veterinaria-friendog-center/assets/fredoka.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  color-scheme:light;
  --brand:#29BFB6; --ink:#54595F; --surface:#F5F5F5; --surface-2:#F2F4F7;
  --ink-strong:#33383C; --gray-600:#6B7075; --gray-500:#858A8F; --gray-400:#B6B9BC;
  --gray-200:#E2E2E2; --gray-100:#ECEDEE; --brand-50:#E6F7F6;
  --red-700:#B42318; --red-50:#FFF3F1; --green-700:#1A7F37; --green-50:#F2FBF5;
  --focus-halo:0 0 0 4px #29BFB659;
  /* Aliases onto the site-wide token names, same values: this widget already
     had its own naming before the design tokens were unified. */
  --fs-fine:var(--fs-caption); --fs-label:var(--fs-small); --fs-input:var(--fs-body);

  --color-text:var(--ink); --color-text-strong:var(--ink-strong); --color-text-muted:var(--gray-600);
  --color-text-on-action:var(--ink-strong); --color-text-on-selected:#FFFFFF;
  --color-bg-page:#FFFFFF; --color-bg-card:#FFFFFF; --color-bg-panel:var(--surface);
  --color-action:var(--brand); --color-selected:var(--ink); --color-hover:var(--brand-50);
  --color-border-control:var(--gray-500); --color-border-unavailable:var(--gray-400); --color-border-subtle:var(--gray-200);
  --color-focus:var(--ink-strong);
  --color-error:var(--red-700); --color-error-bg:var(--red-50);
  --color-success:var(--green-700); --color-success-bg:var(--green-50);
  --color-info-bg:var(--brand-50); --color-info-accent:var(--brand);
  --color-skeleton:var(--gray-100); --color-skeleton-shine:var(--surface);
  --color-disabled-bg:var(--gray-100); --color-disabled-text:var(--gray-600);

  --font-display:Fredoka,Nunito,system-ui,sans-serif;
  --font-ui:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fw-regular:400; --fw-bold:800; --fw-display:600;
  --fs-caption:13px; --fs-small:15px; --fs-body:17px; --fs-lead:17px;
  --fs-heading:20px; --fs-title:28px; --fs-display:34px;
  --lh-display:1.08; --lh-heading:1.2; --lh-ui:1.25; --lh-body:1.5;
  --ls-display:-.02em; --ls-caps:.08em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-24:96px;
  --page-margin:16px;

  --tap-min:44px; --control-h:52px; --button-h:56px; --bar-button-h:52px;
  --day-w:68px; --day-h:76px; --slot-min-w:80px; --icon-sm:16px; --icon-md:20px;

  --radius-control:12px; --radius-card:24px; --radius-pill:999px;

  --shadow-raised:0 4px 12px #33383C14;
  --shadow-card:0 14px 32px #54595F0D;
  --shadow-overlay:0 18px 55px #24292D30;

  --dur-press:100ms; --dur-fast:160ms; --dur-base:240ms; --dur-slow:320ms; --dur-shimmer:1400ms;
  --ease-out:cubic-bezier(.2,0,0,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-in-out:cubic-bezier(.4,0,.2,1);

  --focus-ring:3px solid var(--color-focus); --focus-offset:2px;
}
@media (min-width:768px){:root{--fs-lead:19px;--fs-heading:22px;--fs-title:32px;--fs-display:44px;--page-margin:32px}}
@media (min-width:1100px){:root{--fs-title:36px;--fs-display:56px}}
@media (prefers-reduced-motion:reduce){:root{--dur-press:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-shimmer:0ms}}

/* ---------- utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.is-hidden{display:none!important}
.icon{width:var(--icon-md);height:var(--icon-md);flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon--brand{color:var(--brand)}
.icon--sm{width:var(--icon-sm);height:var(--icon-sm);stroke-width:2.2}

/* ---------- widget container ---------- */
.cita{position:relative}
.cita-inner{background:var(--surface);border-radius:24px 24px 0 0;margin-inline:calc(-1 * var(--page-margin));padding:var(--space-6) var(--page-margin) var(--space-8)}
.cita-inner .cita-panel{background:#fff}
@media (min-width:768px){
  .cita-inner{max-width:640px;margin-inline:auto;background:#fff;border:1px solid var(--color-border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-8)}
  .cita-inner .cita-panel{background:var(--surface)}
}
@media (min-width:1100px){.cita-inner{width:592px;max-width:592px}}

.cita-h2{margin:0}
.cita-content>*+*{margin-top:var(--space-8)}
.cita-step+.cita-step{margin-top:var(--space-8)}

/* ---------- step header ---------- */
.step-head{display:flex;align-items:center;gap:var(--space-3);min-height:28px}
.step-badge{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--brand);display:flex;align-items:center;justify-content:center;font:800 15px/1 var(--font-ui);color:var(--ink-strong);flex:none}
.step-badge--done{background:var(--ink-strong);box-shadow:none;color:#fff}
.step-count{font:800 13px/1.35 var(--font-ui);letter-spacing:.04em;color:var(--color-text-muted);margin:0 0 4px}
.step-title{font:600 var(--fs-heading)/var(--lh-heading) var(--font-display);color:var(--ink-strong);margin:0}
.step-title:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:4px}
.step-head-side{margin-left:auto;display:flex;gap:var(--space-2);align-items:center}
.step-body{margin-top:var(--space-3)}

/* ---------- summary row (collapsed step) ---------- */
.summary-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);background:var(--color-bg-panel);border-radius:12px;padding:var(--space-4)}
.summary-row-text{min-width:0}
.summary-row-title{font:800 var(--fs-small)/1.3 var(--font-ui);color:var(--ink-strong);margin:0;overflow-wrap:break-word}
.summary-row-meta{font:400 var(--fs-caption)/1.3 var(--font-ui);color:var(--color-text);margin:2px 0 0}

/* ---------- buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:var(--ink-strong);border:0;border-radius:var(--radius-pill);padding:0 24px;font:800 17px/1 var(--font-ui);text-decoration:none;cursor:pointer;min-height:var(--button-h);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.button:hover{box-shadow:var(--shadow-raised)}
.button:active{transform:scale(.98)}
.button:focus-visible{outline:var(--focus-ring);outline-offset:3px}
.button[disabled],.button[aria-disabled="true"]{background:var(--color-disabled-bg);color:var(--color-disabled-text);cursor:not-allowed;box-shadow:none}
.button[aria-busy="true"]{cursor:progress}
.button--full{width:100%}
.button--secondary{background:#fff;color:var(--ink-strong);border:1px solid var(--ink);min-height:48px;font-weight:800}
.button--secondary:hover{background:var(--color-hover)}
.link-button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:12px 0;margin-block:-12px;font:800 var(--fs-small)/1 var(--font-ui);color:var(--ink-strong);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px}
.link-button:hover{text-decoration-color:var(--brand)}
.link-button:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.icon-button{width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.icon-button:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.icon-button[aria-disabled="true"]{border-color:var(--color-border-subtle);color:var(--gray-400);cursor:not-allowed}

.spinner{width:18px;height:18px;flex:none;animation:cita-spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
@keyframes cita-spin{to{transform:rotate(360deg)}}

/* ---------- chips: shared states for day / slot / choice ---------- */
.day,.slot,.choice-chip{background:#fff;border:1px solid var(--color-border-control);border-radius:var(--radius-control);color:var(--color-text-strong);font-weight:800;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-press) var(--ease-out);cursor:pointer}
/* The day's selected state is the radio's :checked, not aria-pressed: a
   <label> can't carry a pressed state of its own (see booking-widget.js
   dayCell()). */
.day-input:checked+.day,.slot[aria-pressed=true],.choice-chip[aria-pressed=true]{background:var(--color-selected);border-color:var(--color-selected);color:#fff}
.day-input:checked+.day .day-note{color:#fff}
.day[aria-disabled=true],.slot:disabled,.slot[aria-disabled=true]{background:transparent;border-style:dashed;border-color:var(--color-border-unavailable);color:var(--color-text-muted);font-weight:400;cursor:not-allowed}
.day:active,.slot:active,.choice-chip:active{transform:scale(.97)}
@media (hover:hover){
  .day-cell:not(:has(.day-input:checked)) .day:hover:not([aria-disabled=true]),.slot:hover:not(:disabled):not([aria-pressed=true]){background:var(--color-hover);border-color:var(--ink)}
}
.slot:focus-visible,.choice-chip:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.chip-check{display:none;width:12px;height:12px;margin-right:3px;vertical-align:-1px;flex:none}
@media (min-width:768px){.chip-check{display:inline-block}}

/* ---------- day pager + week strip ---------- */
.week-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3)}
.week-range{font:800 var(--fs-small)/1 var(--font-ui);color:var(--ink-strong)}
.day-fieldset{border:0;margin:0;padding:0}
.day-fieldset legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.day-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-2)}
@media (max-width:359px){.day-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.day-cell{position:relative}
.day-input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
.day{width:100%;min-height:60px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
@media (min-width:768px){.day{min-height:76px}}
.day-weekday{display:flex;align-items:center;justify-content:center;font:800 13px/1 var(--font-ui);text-transform:lowercase;letter-spacing:.04em}
.day-number{font:800 var(--fs-heading)/1 var(--font-ui)}
/* Below 768px the chip is too narrow for "22 horas" / "Sin horas" without
   wrapping (ux-decisiones #1): show a plain 6px dot for available days and
   nothing at all for unavailable ones, the dashed border already carries
   that meaning. The full text returns at 768px, where the chip is 68x76. */
.day-note{display:none;font:400 13px/1 var(--font-ui);color:var(--color-text-muted);white-space:nowrap}
.day-dot{display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-top:2px}
@media (min-width:768px){
  .day-note{display:block}
  .day-dot{display:none}
}
.day-cell.is-blank{visibility:hidden}
.day-input:focus-visible+.day{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* ---------- slot groups ---------- */
.slot-group{margin-top:var(--space-6)}
.slot-group:first-child{margin-top:var(--space-4)}
.slot-group-label{display:flex;align-items:center;gap:8px;font:800 13px/1.35 var(--font-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-strong);margin:0 0 8px}
.slot-group-count{font:400 13px/1 var(--font-ui);text-transform:none;letter-spacing:0;color:var(--color-text-muted)}
.slot-group-rule{flex:1;height:1px;background:var(--color-border-subtle)}
.slot-grid{display:grid;grid-template-columns:repeat(3,minmax(72px,1fr));gap:8px}
@media (min-width:360px){.slot-grid{grid-template-columns:repeat(4,minmax(72px,1fr))}}
@media (min-width:768px){.slot-grid{grid-template-columns:repeat(6,minmax(80px,1fr))}}
.slot{min-height:48px;padding:8px;font:800 17px/1 var(--font-ui);text-align:center}
.timezone-note{font:400 13px/1.35 var(--font-ui);color:var(--color-text-muted);margin-top:var(--space-2)}
.expand-more{width:100%;min-height:44px;margin-top:var(--space-2);border:0;background:none;font:800 15px/1 var(--font-ui);color:var(--ink-strong);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.expand-more:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* ---------- service panel slot (persists above the urgency line, outside
   .cita-content, so it survives every step re-render) ---------- */
.service-panel-slot:empty{display:none}
.service-panel-slot:not(:empty){margin-bottom:var(--space-3)}
/* B only: the service can't be changed once the appointment is booked --
   "Reservar otra cita" is the only way to start over -- so the "Cambiar"
   summary row would be a dead end after success. A's fixed-service panel has
   no such button and stays visible, matching the free landing's success. */
body.is-booked .service-panel-slot:has(.summary-row){display:none}
/* A's fixed-service panel is static markup (never re-rendered by JS): row 1
   is name + price, row 2 is the meta line. Reuses .service-name/.service-price
   so both landings' panels match pixel-for-pixel. */
.service-row1--static{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--space-3)}

/* ---------- service panel + list (B) ---------- */
.service-panel{border-radius:12px;padding:var(--space-4);border:1px solid transparent}
@media (min-width:768px){.service-panel{padding:var(--space-5)}}
.service-panel-button{all:unset;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--space-3);width:100%;min-height:72px;cursor:pointer;box-sizing:border-box}
.service-panel-button:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:12px}
.service-row1{display:contents}
.service-name{grid-column:1;font:600 var(--fs-heading)/var(--lh-heading) var(--font-display);color:var(--ink-strong);margin:0;overflow-wrap:break-word}
.service-price{grid-column:2;font:800 var(--fs-heading)/1 var(--font-ui);color:var(--ink-strong);white-space:nowrap}
.service-price-from{font:400 13px/1 var(--font-ui);color:var(--color-text);margin-right:4px}
.chevron{grid-column:3;transition:transform var(--dur-base) var(--ease-out)}
.service-panel-button[aria-expanded=true] .chevron{transform:rotate(180deg)}
.service-meta{display:flex;flex-wrap:wrap;gap:4px var(--space-3);margin-top:8px;font:400 var(--fs-small)/1.3 var(--font-ui);color:var(--ink)}
.service-meta-item{display:inline-flex;align-items:center;gap:6px}
.service-panel.is-updating .service-price{transition:opacity var(--dur-fast) var(--ease-out)}

.service-list{border-top:1px solid var(--color-border-subtle);margin-top:var(--space-3);padding-top:var(--space-3)}
.service-list-caption{font:400 13px/1.3 var(--font-ui);color:var(--ink);margin:0 0 8px}
.choice{display:block;border-bottom:1px solid var(--color-border-subtle)}
.choice:last-child{border-bottom:0}
/* Each service is a real <button>, not a radio: a radio group would auto-pick
   the next service on arrow keys (WCAG 3.2.2) before the visitor meant to. */
.choice-button{all:unset;display:block;width:100%;box-sizing:border-box;cursor:pointer}
.choice-button:focus-visible{outline:var(--focus-ring);outline-offset:-3px;border-radius:12px}
.choice-label{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px;min-height:56px;padding:12px 4px;border-radius:12px}
.choice-indicator{width:22px;height:22px;border-radius:50%;border:2px solid var(--gray-500);flex:none;position:relative}
.choice-indicator svg{position:absolute;inset:0;margin:auto;width:14px;height:14px;color:#fff;opacity:0}
.choice-name{font:800 17px/1.3 var(--font-ui);color:var(--ink-strong);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.choice-duration{font:400 var(--fs-small)/1.3 var(--font-ui);color:var(--ink);margin-top:2px}
.choice-price{font:800 17px/1 var(--font-ui);color:var(--ink-strong);white-space:nowrap;text-align:right}
@media (hover:hover){.choice-button:hover .choice-label{background:var(--color-hover)}}

/* ---------- species cards (pet-type picker inside the variant step) ---------- */
.species-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.species-card{all:unset;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:112px;padding:var(--space-3) var(--space-2);background:#fff;border:1px solid var(--color-border-control);border-radius:var(--radius-control);cursor:pointer;box-sizing:border-box;text-align:center}
.species-card-img{width:56px;height:56px;object-fit:contain}
.species-card-name{font:600 17px/1.2 var(--font-display);color:var(--ink-strong)}
.species-card[aria-pressed=true]{background:var(--brand-50);border:2px solid var(--ink-strong)}
.species-card:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
@media (hover:hover){.species-card:not([aria-pressed=true]):hover{border-color:var(--ink)}}

/* ---------- variant picker ---------- */
.variant-divider{border:0;border-top:1px solid var(--color-border-subtle);margin:12px 16px}
.variant-chip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.variant-chip{min-height:48px;padding:8px 12px;font:800 15px/1.2 var(--font-ui)}
.variant-select-wrap{position:relative}
.variant-select{appearance:none;width:100%;min-height:48px;padding:12px 44px 12px 14px;font:400 17px/1.2 var(--font-ui);border:1px solid var(--gray-500);border-radius:12px;background:#fff;color:var(--ink-strong)}
.variant-select:invalid{color:var(--color-text-muted)}
.variant-select-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;width:20px;height:20px}
.variant-locked{font:400 var(--fs-small)/1.4 var(--font-ui);color:var(--color-text-muted);margin:8px 0 0}

/* ---------- form ---------- */
.recap{display:flex;align-items:center;gap:var(--space-3);border-radius:12px;padding:12px 16px}
.recap-text{flex:1;min-width:0}
.recap-line1{font:800 var(--fs-small)/1.3 var(--font-ui);color:var(--ink-strong);margin:0}
.recap-line2{font:400 13px/1.3 var(--font-ui);color:var(--ink);margin:2px 0 0}
.field{margin-top:var(--space-5)}
.field:first-child{margin-top:0}
.field-label{display:block;font:800 var(--fs-label)/1.2 var(--font-ui);color:var(--ink-strong);margin-bottom:8px}
.field-input{display:block;width:100%;min-height:var(--control-h);padding:12px 16px;font:400 var(--fs-input)/1.2 var(--font-ui);color:var(--ink-strong);background:#fff;border:1px solid var(--gray-500);border-radius:var(--radius-control);box-sizing:border-box}
.field-input:hover,.field-input:not(:placeholder-shown){border-color:var(--ink)}
.field-input:focus-visible,.field-input:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--ink-strong);box-shadow:var(--focus-halo)}
.field-input[aria-invalid=true]{border:2px solid var(--color-error);padding:11px 15px}
.field-hint{font:400 14px/1.3 var(--font-ui);color:var(--ink);margin:6px 0 0}
.field-error{display:flex;align-items:flex-start;gap:6px;font:400 var(--fs-label)/1.45 var(--font-ui);color:var(--color-error);margin:6px 0 0}
@media (min-width:768px){.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.field-row .field{margin-top:0}}

.check-row{display:flex;gap:var(--space-3);align-items:flex-start;min-height:44px;padding-block:10px;margin-top:var(--space-4);cursor:pointer}
.check-row input{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:none;margin-top:1px;background:#fff;border:2px solid var(--gray-500);border-radius:6px;position:relative;cursor:pointer}
.check-row input:checked{background:var(--color-selected);border-color:var(--color-selected)}
.check-row input:checked::before{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check-row input:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.check-row-text{font:400 15px/1.5 var(--font-ui);color:var(--ink)}
.check-row-text a{font-weight:800;color:var(--ink-strong);text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:3px}
.check-row.is-invalid{outline:2px solid var(--color-error);outline-offset:2px;border-radius:8px}
.privacy-note{font:400 13px/1.4 var(--font-ui);color:var(--ink);margin-top:8px;max-width:44em}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- alerts ---------- */
.alert{display:flex;gap:12px;padding:12px 16px;border-radius:12px;font:400 15px/1.4 var(--font-ui);color:var(--ink);border-inline-start:4px solid transparent}
.alert-icon{flex:none;margin-top:1px}
.alert-title{display:block;font:800 15px/1.3 var(--font-ui);color:var(--ink-strong);margin:0 0 2px}
.alert-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.alert--info{background:var(--color-info-bg);border-inline-start-color:var(--brand)}
.alert--error{background:var(--color-error-bg);border-inline-start-color:var(--color-error)}
.alert--error .alert-icon{color:var(--color-error)}
.alert--info .alert-icon{color:var(--ink-strong)}
.alert-success-line{display:flex;align-items:center;gap:8px;font:400 15px/1.4 var(--font-ui);color:var(--ink)}
.alert-success-line .icon{color:var(--color-success)}

/* ---------- skeletons ---------- */
.skeleton{background:linear-gradient(90deg,var(--color-skeleton) 0 40%,var(--color-skeleton-shine) 50%,var(--color-skeleton) 60% 100%) 0 0/300% 100%;animation:cita-shimmer var(--dur-shimmer) var(--ease-in-out) infinite;border-radius:12px}
@keyframes cita-shimmer{to{background-position:-300% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none;background:var(--color-skeleton)}}
.skeleton-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
@media (max-width:359px){.skeleton-week{grid-template-columns:repeat(4,minmax(0,1fr))}}
.skeleton-day{min-height:60px}
@media (min-width:768px){.skeleton-day{min-height:76px}}
.skeleton-slots{display:grid;grid-template-columns:repeat(4,minmax(72px,1fr));gap:8px;margin-top:var(--space-4)}
.skeleton-slot{min-height:48px}
.skeleton-label{width:72px;height:12px;margin-bottom:8px}
.skeleton-row{min-height:56px;margin-bottom:8px}

/* ---------- empty / error panels ---------- */
.state-panel{text-align:center;border-radius:12px;padding:var(--space-6) var(--space-5)}
.state-panel-icon{width:32px;height:32px;margin:0 auto var(--space-3)}
.state-panel-title{font:800 17px/1.3 var(--font-ui);color:var(--ink-strong);margin:0}
.state-panel-body{font:400 var(--fs-small)/1.4 var(--font-ui);color:var(--ink);margin:8px auto 0;max-width:32em}
.state-panel-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-top:var(--space-4)}
.state-panel[tabindex]:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* ---------- inline notice above the day step ---------- */
.slot-notice{margin-bottom:var(--space-4)}
.quick-picks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.quick-picks .slot{min-height:44px;padding:6px 14px}

/* ---------- success ---------- */
.success{animation:cita-fade var(--dur-slow) var(--ease-out)}
@keyframes cita-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.success{animation:none}}
.success-art{position:relative;background:var(--color-bg-panel);border-radius:12px;height:152px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:768px){.success-art{height:176px}}
.success-art:before{content:"";position:absolute;bottom:0;left:-5%;width:110%;height:64px;background:var(--brand);border-radius:50% 50% 0 0}
.success-art img{position:relative;z-index:1}
.success-art .success-dog{height:128px;width:auto}
.success-art .success-cat{height:108px;width:auto;margin-left:-28px}
.success-title{font:600 var(--fs-title)/1.15 var(--font-display);color:var(--ink-strong);margin:var(--space-5) 0 0;text-wrap:balance}
.success-date{font:600 var(--fs-heading)/1.2 var(--font-display);color:var(--ink-strong);margin:var(--space-3) 0 0}
.success-time{font:800 17px/1.2 var(--font-ui);color:var(--ink-strong);margin:2px 0 0}
.success-details{margin-top:var(--space-5);display:grid;gap:12px}
.success-detail-row{display:flex;gap:10px;align-items:flex-start;font:400 15px/1.4 var(--font-ui);color:var(--ink)}
.success-detail-row strong{display:block;color:var(--ink-strong);font-weight:800}
.success-detail-row .icon{margin-top:2px}
.success-actions{margin-top:var(--space-6);display:grid;gap:10px}
@media (min-width:768px){.success-actions{display:flex;flex-wrap:wrap}}
.success-ref{font:400 13px/1.3 var(--font-ui);color:var(--ink);margin-top:var(--space-5)}
.success-ref strong{font-weight:800;letter-spacing:.04em}
.success-urgency{margin-top:var(--space-5)}

/* ---------- urgency line ---------- */
/* One flowing line of text, like a paragraph, not a flex row: a flex parent
   turns the icon and each text run into separate flex items that wrap as
   whole blocks, producing an awkward two-column shape at 390px. Every child
   here is inline-level, so normal text reflow wraps it the way a sentence
   should. */
.urgency-line{margin:0;font:400 var(--fs-small)/1.4 var(--font-ui);color:var(--ink);min-height:44px}
.urgency-line .icon{display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-3px}
.urgency-line strong{color:var(--ink-strong);font-weight:800}
.urgency-line a{color:var(--ink-strong);font-weight:800;text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:3px;white-space:nowrap}

/* ---------- boot fallback / noscript ---------- */
.boot-fallback{opacity:0;animation:cita-reveal 0s 8s forwards}
@keyframes cita-reveal{to{opacity:1}}
noscript .noscript-note{display:block;font:400 var(--fs-small)/1.4 var(--font-ui);color:var(--ink);padding:var(--space-4)}

/* ---------- forced colors ---------- */
@media (forced-colors:active){
  .day[aria-pressed=true],.slot[aria-pressed=true],.choice-chip[aria-pressed=true],.choice-input:checked+.choice-label{border:3px solid Highlight}
  .button{border:2px solid ButtonText}
}