@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/assistant-v4-hebrew-regular.woff2") format("woff2"),
       url("../fonts/assistant-v4-hebrew-regular.woff") format("woff");
}

:root {
  --ink: #173042;
  --muted: #5e7180;
  --surface: #ffffff;
  --surface-soft: #f4f7f5;
  --border: #d6e1e3;
  --primary: #176b64;
  --primary-dark: #0d514c;
  --primary-soft: #e5f2ee;
  --accent: #d88963;
  --cream: #fbf7f1;
  --success: #1d7554;
  --success-soft: #e6f5ed;
  --warning: #895e09;
  --warning-soft: #fff6dc;
  --danger: #b22b40;
  --danger-soft: #fcecef;
  --focus: #e67e22;
  --shadow: 0 10px 30px rgba(23, 48, 66, .08);
  --radius: 18px;
  font-family: "Assistant", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #fafcfb; font-size: 16px; line-height: 1.55; }
a { color: var(--primary-dark); }
a:hover { color: var(--primary); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: fixed; inset: 12px auto auto 12px; transform: translateY(-150%); z-index: 20; padding: 8px 12px; border-radius: 8px; color: #fff; background: var(--ink); }
.skip-link:focus { transform: translateY(0); }
.container { width: min(1120px, calc(100% - 40px)); margin: auto; }
.launch-notice { border-bottom: 1px solid #ead9a9; color: #674700; background: var(--warning-soft); font-size: .88rem; text-align: center; }
.launch-notice .container { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 36px; padding-block: 5px; }
.launch-notice strong { white-space: nowrap; }
.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.header-content { position: relative; display: flex; align-items: center; gap: 28px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand strong, .brand small { display: block; }
.brand small { color: var(--muted); font-size: .78rem; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50% 50% 50% 16%; color: #fff; background: var(--primary); font-family: Georgia, serif; font-size: 1.35rem; box-shadow: 0 7px 18px rgba(23,107,100,.22); }
nav { display: flex; align-items: center; gap: 18px; margin-inline-start: auto; }
nav a { color: var(--ink); font-size: .94rem; text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { color: var(--primary); text-decoration: underline; text-underline-offset: 6px; }
.menu-toggle { display: none; align-items: center; gap: 7px; min-height: 42px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--ink); background: #fff; font-weight: 700; }
.mobile-booking-link { display: none; }
.header-cta { display: none; }
.header-feedback-button, .header-legacy-button { flex: none; }
main { padding-block: 12px 36px; min-height: calc(100vh - 157px); }
main[tabindex="-1"]:focus { outline: none; }
.page-back { margin-bottom: 18px; }
.page-back .button { gap: 7px; }
.site-footer { border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .86rem; }
.footer-content { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-block: 20px; }
.eyebrow { margin: 0 0 10px; color: var(--primary); font-size: .88rem; font-weight: 700; letter-spacing: .02em; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 760px; margin-bottom: 10px; font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.16; letter-spacing: -.04em; }
h2 { margin-bottom: 10px; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.25; }
h3 { font-size: 1.1rem; }
.lead { max-width: 660px; color: var(--muted); font-size: 1.04rem; }
/* Two columns on the top row, with the action cards spanning both underneath.
   The placement is explicit because .hero-tasks precedes .hero-visual in the
   markup -- that DOM order is what gives phones copy then actions with no
   reordering, and the photo is hidden there entirely -- and auto-placement
   would otherwise push the photo onto a third row once the cards claim the
   full width. */
.hero { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(22px, 3vw, 40px); padding: 12px 0 32px; }
.hero > .hero-copy { grid-column: 1; grid-row: 1; }
.hero > .hero-visual { grid-column: 2; grid-row: 1; }
.hero > .hero-tasks { grid-row: 2; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: -26px calc(50% - 50vw) 0; background: radial-gradient(circle at 18% 20%, #e8f4ef 0, transparent 33%), linear-gradient(180deg, #fbf8f2 0, #fafcfb 85%); }
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 span { color: var(--primary); }
.hero-visual { position: relative; min-height: 270px; }
.hero-visual::before { content: ""; position: absolute; inset: 24px -24px -24px 34px; border-radius: 42% 58% 24px 24px; background: #dcebe5; }
.hero-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 44% 56% 24px 24px; object-fit: cover; object-position: center; box-shadow: 0 24px 60px rgba(23,48,66,.16); }
.hero-hours, .card, .step-panel, .contact-card, .notice, .success-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.opening-hours-list { display: grid; gap: 2px; margin-top: 3px; }
.opening-hours-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 3px 7px; border-radius: 7px; color: var(--muted); font-size: .82rem; }
.opening-hours-row strong { color: inherit; font-size: .86rem; }
.opening-hours-row.is-next { color: var(--primary-dark); background: var(--primary-soft); font-weight: 700; }
/* Opening hours, moved out of the photo and into the copy column.
   Carries the same card styling as the other panels; only the positioning differs.

   It used to be absolutely positioned over the bottom of the hero image. That
   read acceptably on desktop and badly on mobile, where the single column puts
   the image below the copy: the hours went from 443px down the page to 983px,
   behind the fold, for the question patients ask most. Placed in the copy
   column it is near the top on every width, and the photo is free to be a
   photo rather than a backdrop with a card sitting on it. */
.hero-hours { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; width: min(340px, 100%); margin-top: 20px; padding: 10px 12px; }
.hero-hours .panel-icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: 1.1rem; }
.hero-hours > div { flex: 1; }
.hero-hours .eyebrow { margin: 0; font-size: .74rem; }
.hero-hours strong, .hero-hours small { display: block; }
.hero-hours small { color: var(--muted); }
.hero-hours > a { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--primary); text-decoration: none; }

/* The two primary actions, promoted out of the old "פעולות נפוצות" section and
   into the hero.

   The hero used to be a heading and one sentence beside a 270px image, so the
   copy column sat in a row far taller than its content and roughly 200px of it
   was empty. Filling that with decoration would have been the wrong fix: the
   same two actions were already sitting further down the page in a section of
   their own, and a third copy of them had just been removed from this very spot
   for being redundant. Moving them up removes a section instead of adding one.

   They span BOTH hero columns rather than sitting inside the copy. Stacked in
   the copy column the two cards made it 492px tall against a 270px photo, which
   only moved the empty space from one side of the hero to the other. Spanning
   the full width keeps the top row balanced -- heading, lead and hours against
   the photo -- and gives the cards 1120px instead of 584px, so they are wider
   and shorter.

   auto-fit rather than a fixed two columns: at the narrow end of the desktop
   range the cards drop to one per row on their own, before the 768px stack. */
.hero-tasks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 4px; }
.hero-tasks .card { margin: 0; }

.hero-trust { display: flex; align-items: center; gap: 11px; margin-top: 28px; }
.hero-trust > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-weight: 800; }
.hero-trust p, .hero-trust strong, .hero-trust small { display: block; margin: 0; }
.hero-trust small { color: var(--muted); }
.hero-actions, .action-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 10px 18px; border: 1px solid transparent; border-radius: 10px; font-weight: 700; text-align: center; text-decoration: none; transition: transform .16s ease, background-color .16s ease; }
.button:hover { transform: translateY(-1px); text-decoration: none; }
.button-primary { color: #fff; background: var(--primary); }
.button-primary:hover { color: #fff; background: var(--primary-dark); }
.button-secondary { color: var(--primary-dark); border-color: var(--border); background: #fff; }
.button-secondary:hover { background: var(--surface-soft); }
.button-danger { color: #fff; background: var(--danger); }
.button-danger:hover { color: #fff; background: #922137; }
.button-small { min-height: 38px; padding: 6px 12px; font-size: .88rem; }
.services { padding-top: 12px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 22px; }
.section-heading h2 { margin: 0; }
.section-heading > p { max-width: 270px; margin: 0; color: var(--muted); }
.task-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.card { position: relative; overflow: hidden; padding: 28px; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(23,48,66,.12); }
.card:has(a) { cursor: pointer; }
.card:has(a):focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.card a:focus-visible { outline: 0; }
.card a::after { content: ""; position: absolute; z-index: 2; inset: 0; }
.card-featured { color: #fff; border-color: var(--primary); background: var(--primary); }
.card.card-featured p { color: #d7ebe7; }
.card-featured a { color: #fff; }
.card p { color: var(--muted); }
.card .card-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 50% 50% 50% 14px; background: var(--primary-soft); color: var(--primary); font-size: 1.3rem; font-weight: 800; }
.card-featured .card-icon { color: #fff; background: rgba(255,255,255,.16); }
.card a { font-weight: 700; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.info-link { display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.info-link:hover { border-color: var(--primary); transform: translateY(-2px); }
.info-link > span:nth-child(2) { flex: 1; }
.info-link strong, .info-link small { display: block; }
.info-link small { color: var(--muted); font-size: .82rem; }
.info-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-size: 1.15rem; font-weight: 800; }
.notice { display: flex; gap: 14px; margin-top: 36px; padding: 18px 20px; border-color: #edcf81; background: var(--warning-soft); box-shadow: none; }
.notice strong { color: #604100; }
.notice p { margin: 0; color: #604100; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
.page-heading p { margin-bottom: 0; color: var(--muted); }
.stepper { display: flex; align-items: center; gap: 0; margin: 0 0 26px; overflow: auto; }
.stepper span { display: flex; align-items: center; gap: 8px; flex: 1 0 auto; color: var(--muted); font-size: .9rem; }
.stepper span::before { content: attr(data-step); display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%; background: #fff; font-weight: 700; }
.stepper span:not(:last-child)::after { content: ""; width: 30px; height: 1px; margin-inline: 8px; background: var(--border); }
.stepper .active, .stepper .done { color: var(--primary-dark); font-weight: 700; }
.stepper .active::before, .stepper .done::before { border-color: var(--primary); color: #fff; background: var(--primary); }
.step-panel { max-width: 760px; padding: clamp(22px, 5vw, 42px); }
.step-panel > p { color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { margin-top: 18px; }
.field label, legend { display: block; margin-bottom: 7px; font-weight: 700; }
.field small, .help-text { display: block; margin-top: 6px; color: var(--muted); font-size: .86rem; }
.input, select, textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #b7c7cb; border-radius: 9px; color: var(--ink); background: #fff; }
textarea { min-height: 132px; resize: vertical; }
.input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
.error { min-height: 1.35em; margin: 6px 0 0; color: var(--danger); font-size: .86rem; }
fieldset { margin: 20px 0 0; padding: 0; border: 0; }
.choice-grid, .time-grid, .date-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.choice, .slot, .date-choice { position: relative; min-height: 74px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; color: var(--ink); background: #fff; text-align: right; }
.choice:hover, .slot:hover, .date-choice:hover { border-color: var(--primary); background: var(--primary-soft); }
.choice.selected, .slot.selected, .date-choice.selected { border: 2px solid var(--primary); background: var(--primary-soft); }
.choice strong, .choice small, .date-choice strong, .date-choice small { display: block; }
.choice small, .date-choice small { color: var(--muted); }
.request-choice-grid { grid-template-columns: repeat(2, 1fr); }
.request-choice-grid .choice { min-height: 116px; }
.choice-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 9px; border-radius: 10px; color: var(--primary); background: var(--primary-soft); font-weight: 800; }
.slot { min-height: 52px; text-align: center; font-weight: 700; }
.slot:disabled, .date-choice:disabled { cursor: not-allowed; opacity: .55; }
.summary { display: grid; gap: 0; margin: 24px 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.summary div { display: flex; justify-content: space-between; gap: 15px; padding: 13px 15px; background: #fff; }
.summary div + div { border-top: 1px solid var(--border); }
.summary span { color: var(--muted); }
.summary .summary-message { align-items: flex-start; flex-direction: column; }
.summary-message strong { white-space: pre-wrap; font-weight: 500; }
.status { margin: 16px 0; padding: 14px 16px; border-radius: 10px; }
.status.success { border: 1px solid #afd8c3; color: #17593f; background: var(--success-soft); }
.status.warning { border: 1px solid #edcf81; color: #604100; background: var(--warning-soft); }
.status.info { border: 1px solid #acd7d3; color: #075459; background: var(--primary-soft); }
.identity-status { display: flex; align-items: center; gap: 12px; }
.identity-status > span:first-child { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--success); font-weight: 800; }
.success-panel { max-width: 700px; padding: clamp(26px, 6vw, 52px); text-align: center; }
.success-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; color: var(--success); background: var(--success-soft); font-size: 1.8rem; font-weight: 800; }
.appointment-list { display: grid; gap: 16px; max-width: 760px; }
.appointment-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.appointment-card p { margin: 4px 0 0; color: var(--muted); }
.contact-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
.contact-card { padding: 26px; }
.contact-list { display: grid; gap: 12px; margin-top: 22px; }
.contact-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 65px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; color: var(--ink); background: #fff; text-decoration: none; }
.contact-action:hover { background: var(--surface-soft); }
.contact-action strong, .contact-action small { display: block; }
.contact-action small { color: var(--muted); }
.hours { margin: 0; padding: 0; list-style: none; }
.hours li { display: flex; justify-content: space-between; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--border); }
.map-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.map-link { display: grid; place-content: center; gap: 4px; min-height: 128px; padding: 16px; border-radius: 14px; color: var(--primary-dark); background: linear-gradient(135deg, #dff1ef, #f5f7e8); text-align: center; text-decoration: none; }
.map-link strong, .map-link small { display: block; }
.map-link strong { font-size: 1.05rem; }
.map-link small { color: var(--muted); }
.map-link:hover { box-shadow: inset 0 0 0 2px var(--primary); }
.map-link-waze { color: #154b69; background: linear-gradient(135deg, #dff4ff, #edf9ff); }
dialog { width: min(480px, calc(100% - 32px)); border: 0; border-radius: var(--radius); box-shadow: 0 20px 80px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(14, 38, 50, .55); }
.dialog-content { position: relative; padding: 30px; }
.dialog-close { position: absolute; inset: 10px 10px auto auto; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; color: var(--ink); background: transparent; font-size: 1.5rem; }
.icon-button:hover { background: var(--surface-soft); }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin-top: 24px; }
.feedback-status { min-height: 1.5em; margin: 10px 0 0; color: var(--success); font-weight: 700; }
.feedback-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.feedback-options legend { width: 100%; margin-bottom: 8px; font-weight: 700; }
.feedback-options label { position: relative; cursor: pointer; }
.feedback-options input { position: absolute; opacity: 0; pointer-events: none; }
.feedback-options span { display: block; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); background: var(--surface); }
.feedback-options input:checked + span { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); font-weight: 700; }
.feedback-options input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.accessibility-statement, .privacy-statement { max-width: 820px; }
.accessibility-statement h2, .privacy-statement h2 { margin-top: 28px; }
.accessibility-statement li + li, .privacy-statement li + li { margin-top: 8px; }

@media (max-width: 760px) {
  .container { width: min(100% - 28px, 620px); }
  .launch-notice .container { align-items: flex-start; flex-direction: column; gap: 0; padding-block: 6px; text-align: right; }
  .header-content { min-height: 68px; gap: 12px; }
  .menu-toggle { display: inline-flex; margin-inline-start: auto; }
  .header-feedback-button, .header-legacy-button { min-height: 38px; padding-inline: 10px; }
  nav { position: absolute; inset: calc(100% - 2px) 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; border: 1px solid var(--border); border-radius: 0 0 12px 12px; background: #fff; box-shadow: var(--shadow); }
  nav.is-open { display: flex; }
  nav a { padding: 11px 12px; border-radius: 8px; }
  nav .mobile-booking-link { display: block; }
  nav a:hover, nav a[aria-current="page"] { background: var(--primary-soft); text-decoration: none; }
  .header-cta { display: inline-flex; margin-inline-start: auto; }
  .brand small { display: none; }
  main { padding-block: 18px 32px; }
  .hero, .contact-layout { grid-template-columns: 1fr; gap: 24px; }
  .hero { padding: 10px 0 32px; }
  /* One column: drop the explicit placement so the blocks simply follow the
     markup -- copy, then actions. */
  .hero > .hero-copy, .hero > .hero-tasks { grid-column: 1; grid-row: auto; }

  /* The photo is decorative and costs 270px of scroll on a phone, sitting
     between the actions and the clinic updates -- which carry things like
     "Thursday is phone-only". Hiding it here brings those updates from 1217px
     down the page back to 963px. On a screen this narrow the image was never
     doing much anyway; the space is better spent on what the clinic is saying. */
  .hero-visual { display: none; }

  .hero-hours { width: 100%; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .task-grid, .info-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .choice-grid { grid-template-columns: 1fr; }
  .request-choice-grid { grid-template-columns: 1fr; }
  .time-grid, .date-grid { grid-template-columns: repeat(2, 1fr); }
  .page-heading, .appointment-card { align-items: stretch; flex-direction: column; }
  .appointment-card .button { width: 100%; }
  .footer-content { flex-direction: column; gap: 4px; }
}

@media (max-width: 420px) {
  .brand > span:last-child { display: none; }
  .brand { font-size: .9rem; }
  .brand-mark { width: 32px; height: 32px; }
  .header-cta { padding-inline: 10px; font-size: .8rem; }
  .menu-toggle span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stepper span { font-size: .76rem; }
  .stepper span:not(:last-child)::after { width: 10px; margin-inline: 4px; }
  .time-grid, .date-grid { grid-template-columns: 1fr; }
}

.updates { margin: 0 0 34px; }
.updates-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.updates-heading h2 { margin-bottom: 0; }
.updates-count { flex: none; padding: 5px 10px; border-radius: 999px; color: #604100; background: #fff3cb; font-size: .82rem; font-weight: 700; }
.update-card { padding: 17px 19px 0; border: 1px solid #d9c27d; border-right: 5px solid var(--warning); border-radius: 12px; background: #fffaf0; overflow: hidden; }
.update-card strong { color: #604100; }
.update-card > p { margin: 4px 0 17px; white-space: pre-line; }
.updates-more { margin-inline: -19px; border-top: 1px solid #e8d9ae; background: rgba(255,255,255,.42); }
.updates-more summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 19px; color: var(--primary-dark); font-weight: 700; cursor: pointer; list-style: none; }
.updates-more summary::-webkit-details-marker { display: none; }
.updates-more summary::after { content: '⌄'; margin-inline-start: auto; font-size: 1.2rem; transition: transform .2s ease; }
.updates-more[open] summary::after { transform: rotate(180deg); }
.updates-more summary span { color: var(--muted); font-size: .8rem; font-weight: 600; }
.updates-expanded { border-top: 1px solid #e8d9ae; }
.update-row { display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 10px; padding: 13px 19px; }
.update-row + .update-row { border-top: 1px solid #eee4c8; }
.update-row p { margin: 1px 0 0; white-space: pre-line; }
.update-number { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #604100; background: #fff3cb; font-size: .75rem; font-weight: 700; }
.calendar { margin-top: 22px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 58px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.calendar-toolbar h3 { margin: 0; font-size: 1.05rem; }
.calendar-toolbar .icon-button { font-size: 1.8rem; }
.calendar-toolbar .icon-button:disabled { cursor: not-allowed; opacity: .4; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { border-bottom: 1px solid var(--border); color: var(--muted); font-size: .8rem; font-weight: 700; text-align: center; }
.calendar-weekdays span { padding: 9px 2px; }
.calendar-day, .calendar-blank { min-height: 68px; border: 0; border-left: 1px solid #edf1f2; border-bottom: 1px solid #edf1f2; background: #fff; }
.calendar-day { padding: 6px 3px; color: var(--ink); text-align: center; }
.calendar-day strong, .calendar-day small { display: block; }
.calendar-day small { margin-top: 2px; color: var(--muted); font-size: .66rem; line-height: 1.2; }
.calendar-day:hover:not(:disabled) { color: #fff; background: var(--primary); }
.calendar-day:hover:not(:disabled) small, .calendar-day.today:hover:not(:disabled) strong::after { color: #fff; }
.calendar-day.selected { box-shadow: inset 0 0 0 3px var(--primary-dark); color: #fff; background: var(--primary); }
.calendar-day.selected small, .calendar-day.selected.today strong::after { color: #fff; }
.calendar-day.today strong::after { content: "היום"; display: block; color: var(--primary); font-size: .58rem; }
.calendar-day.unavailable { cursor: not-allowed; color: #849196; background: #f5f6f6; }
.calendar-day.unavailable small { color: #849196; }

@media (max-width: 760px) {
  .calendar-day, .calendar-blank { min-height: 60px; }
  .calendar-day small { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}