/* ============================================================
   self_services_friendly.css
   Bundles three sources from tmp/mockups/self_services/ —
     1. _shared/brand.css          (tenant tokens + Rubik + bs-primary mapping)
     2. _shared/style.css          (Keenicon → Bootstrap-Icons font shim)
     3. variant_i_friendly/_friendly.css (chrome: header/tabs/hero/cards/footer/form)
   Loaded by app/views/layouts/public_friendly.html.erb after the BS5 RTL CSS.
   ============================================================ */


/* ============================================================
   1. brand.css — tenant tokens
   ============================================================ */

:root {
  /* tenant-zone: brand-primary
     Default = Metronic primary blue. Overrides BS5 --bs-primary so all
     primary buttons / links / focus rings / progress / nav-active states
     pick up the tenant color automatically. */
  --brand-primary: #0095e8;
  --brand-primary-active: #0077c5;
  --brand-primary-soft: #e1f0ff;
  --brand-primary-rgb: 0, 149, 232;

  /* tenant-zone: brand-accent
     Used sparingly: tile hover glow, link underline color. */
  --brand-accent: #50cd89;
  --brand-accent-rgb: 80, 205, 137;

  /* Map tenant primary onto BS5 native variables so utilities
     `.btn-primary`, `.text-primary`, `.bg-primary`, `.border-primary`
     pick up brand color without us re-declaring every utility. */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary-active);

  /* Semantic state colors (Metronic-aligned) */
  --state-success: #50cd89;
  --state-success-soft: #e8fff3;
  --state-warning: #ffc700;
  --state-warning-soft: #fff8dd;
  --state-danger: #f1416c;
  --state-danger-soft: #fff5f8;
  --state-info: #7239ea;
  --state-info-soft: #f8f5ff;

  /* Spacing / radius (Metronic-aligned) */
  --tile-radius: 0.75rem;
  --card-radius: 0.75rem;
  --btn-radius: 0.475rem;
}

/* tenant-zone: typography
   Rubik is the brand font for both Hebrew and Latin. Weights 300-700. */
html, body {
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  /* Portal-wide base size. The whole friendly theme is sized in rem, so this
     is the single dial that scales every text size up/down. Raised 14→16px
     (the web standard) so the small rem text (meta lines, chips, tooltip
     labels) is no longer cramped. */
  font-size: 16px;
  color: #181c32;
}

/* Override Metronic primary button colors with brand */
.btn-primary,
.btn.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-active);
  --bs-btn-hover-border-color: var(--brand-primary-active);
  --bs-btn-active-bg: var(--brand-primary-active);
  --bs-btn-active-border-color: var(--brand-primary-active);
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--brand-primary-active);
  border-color: var(--brand-primary-active);
}

a       { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-active); }

/* tenant-zone: logo placeholder
   When no logo image is provided, render a typographic placeholder
   in brand-primary color, scaled to the navbar height. */
.brand-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  border-radius: 0.5rem;
  user-select: none;
}
.brand-logo-placeholder::before {
  content: "[LOGO]";
  font-family: 'Rubik', sans-serif;
}


/* ============================================================
   2. style.css — Keenicon → Bootstrap-Icons font shim
   The mockups were written with class="ki-outline ki-X" / ki-duotone ki-X.
   Bootstrap Icons uses class="bi bi-X". The shim aliases ki-* classes to
   render bootstrap-icons glyphs (each ki-* sets ::before content to the
   bi-* unicode codepoint).
   ============================================================ */

[class*="ki-outline"], [class*="ki-duotone"] {
  display: inline-block;
  font-family: 'bootstrap-icons' !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
}
/* Each codepoint corresponds to a real Bootstrap-Icons glyph in
   bootstrap-icons@1.11.3. Verified against the published font CSS —
   do NOT change a codepoint without re-checking the upstream value
   (an earlier draft of this shim had ~60% of the codepoints wrong,
   silently rendering arrows / boxes / text-areas in place of the
   intended glyphs — e.g. ki-calendar pointed at bi-box-arrow-up-left). */
.ki-pencil::before              { content: "\f4cb"; } /* bi-pencil */
.ki-eraser::before              { content: "\f331"; } /* bi-eraser */
.ki-calendar::before            { content: "\f1f6"; } /* bi-calendar */
.ki-calendar-add::before        { content: "\f1ef"; } /* bi-calendar-plus */
.ki-shop::before                { content: "\f543"; } /* bi-shop */
.ki-clipboard-text::before      { content: "\f28c"; } /* bi-clipboard-data */
.ki-clipboard::before           { content: "\f290"; } /* bi-clipboard */
.ki-user::before                { content: "\f4e1"; } /* bi-person */
.ki-user-tick::before           { content: "\f4d6"; } /* bi-person-check */
.ki-user-edit::before           { content: "\f4ca"; } /* bi-pencil-square (edit affordance) */
.ki-entrance-right::before      { content: "\f1be"; } /* bi-box-arrow-in-right */
.ki-down::before                { content: "\f282"; } /* bi-chevron-down */
.ki-up::before                  { content: "\f286"; } /* bi-chevron-up */
.ki-text-align-left::before     { content: "\f5c7"; } /* bi-text-left */
.ki-cross::before               { content: "\f659"; } /* bi-x-lg */
.ki-shield-tick::before         { content: "\f52f"; } /* bi-shield-check */
.ki-shield-cross::before        { content: "\f53e"; } /* bi-shield-x */
.ki-time::before                { content: "\f293"; } /* bi-clock */
.ki-basket::before              { content: "\f180"; } /* bi-basket */
.ki-credit-cart::before         { content: "\f2dc"; } /* bi-credit-card (legacy mis-spelling) */
.ki-credit-card::before         { content: "\f2dc"; } /* bi-credit-card */
.ki-plus-square::before         { content: "\f4fd"; } /* bi-plus-square */
.ki-minus-square::before        { content: "\f2e9"; } /* bi-dash-square */
.ki-geolocation::before         { content: "\f3e7"; } /* bi-geo-alt-fill */
.ki-phone::before               { content: "\f5c1"; } /* bi-telephone */
.ki-sms::before                 { content: "\f32f"; } /* bi-envelope */
.ki-verify::before              { content: "\f26b"; } /* bi-check-circle */
.ki-arrow-up::before            { content: "\f148"; } /* bi-arrow-up */
.ki-arrows-circle::before       { content: "\f116"; } /* bi-arrow-clockwise */
.ki-loading::before             { content: "\f116"; } /* bi-arrow-clockwise — loading/spinner glyph */
.ki-loading                     { animation: spin 800ms linear infinite; } /* make the loading cue actually spin */
.ki-home::before                { content: "\f425"; } /* bi-house */
.ki-house::before               { content: "\f425"; } /* bi-house */
.ki-exit-right::before          { content: "\f1c3"; } /* bi-box-arrow-right */
.ki-arrow-left::before          { content: "\f12f"; } /* bi-arrow-left */
.ki-arrow-right::before         { content: "\f138"; } /* bi-arrow-right */
.ki-arrow-up-left::before       { content: "\f13f"; } /* bi-arrow-up-left */
.ki-search::before              { content: "\f52a"; } /* bi-search */
.ki-filter::before              { content: "\f3e1"; } /* bi-funnel (reads as "filter") */
.ki-info::before                { content: "\f431"; } /* bi-info-circle */
.ki-information-2::before       { content: "\f431"; } /* bi-info-circle */
.ki-message-text::before        { content: "\f267"; } /* bi-chat-text */
.ki-message-text-2::before      { content: "\f267"; } /* bi-chat-text */
.ki-bag::before                 { content: "\f179"; } /* bi-bag */
.ki-handbag::before             { content: "\f179"; } /* bi-bag (cart "סל" — bootstrap-icons has no dedicated handbag glyph) */
.ki-add-files::before           { content: "\f37d"; } /* bi-file-earmark-plus */
.ki-questionnaire-tablet::before { content: "\f505"; } /* bi-question-circle */
.ki-paper-clip::before          { content: "\f4b3"; } /* bi-paperclip */
.ki-send::before                { content: "\f6c0"; } /* bi-send */
.ki-microphone::before          { content: "\f490"; } /* bi-mic */
.ki-emoji-happy::before         { content: "\f327"; } /* bi-emoji-smile */
.ki-element-plus::before        { content: "\f4fa"; } /* bi-plus-circle */
.ki-tag::before                 { content: "\f5b0"; } /* bi-tag */
.ki-star::before                { content: "\f588"; } /* bi-star */
.ki-dots-vertical::before       { content: "\f5d3"; } /* bi-three-dots-vertical */
.ki-people::before              { content: "\f4d0"; } /* bi-people */
.ki-check::before               { content: "\f26e"; } /* bi-check */
.ki-lock::before                { content: "\f47b"; } /* bi-lock */
.ki-key::before                 { content: "\f44f"; } /* bi-key */
.ki-eye::before                 { content: "\f341"; } /* bi-eye */
.ki-eye-slash::before           { content: "\f340"; } /* bi-eye-slash */
.ki-trash::before               { content: "\f5de"; } /* bi-trash */
.ki-heart::before               { content: "\f417"; } /* bi-heart */
.ki-tick::before                { content: "\f26e"; } /* bi-check */
.ki-tick-circle::before         { content: "\f26b"; } /* bi-check-circle */
.ki-id-card::before             { content: "\f4d7"; } /* bi-person-badge (Israeli ת"ז) */
.ki-calendar-tick::before       { content: "\f1e8"; } /* bi-calendar-check */


/* ============================================================
   3. _friendly.css — chrome shared by index/login/groups/schedule/store
   ============================================================ */

:root {
  --tone-mint:        #c8f3e0;
  --tone-mint-deep:   #2c8a64;
  --tone-peach:       #ffe1cf;
  --tone-peach-deep:  #c95c1d;
  --tone-lavender:    #e9def9;
  --tone-lavender-deep:#6e3ec5;
  --tone-yellow:      #ffd967;
  --tone-yellow-deep: #b88a0a;
  --cream-bg:         #fdf9f3;
  --cream-card:       #fff;
  --ink:              #2a2a2a;
  --ink-soft:         #6b6b6b;
  --hairline:         #ece7df;
}

/* ---------- BODY + DECORATIVE BLOBS ----------------------------------- */
/* `overflow-x: clip` (not `hidden`) — clip hides the off-screen blob
   overflow WITHOUT creating a scroll container, so descendants can use
   `position: sticky` against the viewport. `hidden` would establish a
   scrolling ancestor on <html>/<body> and break sticky everywhere. */
html { overflow-x: clip; scroll-behavior: smooth; }
html, body { max-width: 100vw; }
body {
  background: var(--cream-bg);
  color: var(--ink);
  font-family: 'Rubik', sans-serif;
  position: relative;
  overflow-x: clip;
  min-height: 100vh;
}
body::before {
  content: '';
  position: absolute;
  top: 80px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 225, 207, .55) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
body::after {
  content: '';
  position: absolute;
  top: 320px;
  left: -120px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(233, 222, 249, .55) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* All major sections sit above the blobs */
.friendly-header,
.friendly-hero,
.friendly-page-hero,
.friendly-tab-nav,
.friendly-cards-section,
.friendly-section,
.friendly-footer { position: relative; z-index: 2; }

/* The header carries absolutely-positioned dropdowns (user-chip menu,
   any future overflow popovers) that need to overlap whatever section
   sits below. When sibling sections share `z-index: 2`, DOM order wins
   — and the .friendly-hero comes AFTER .friendly-header, so by default
   the hero paints over the dropdown. Bump the header's stacking
   context above every other section. Still well below BS5 modals
   (z:1055) and tooltips (z:1080). */
.friendly-header { z-index: 30; }

/* ---------- HEADER (small logo + login pair) -------------------------- */
.friendly-header {
  background: rgba(253, 249, 243, 0.85);
  backdrop-filter: blur(8px);
  padding: 1.15rem 0;
  border-bottom: 1px solid transparent;
}
.friendly-header.is-scrolled,
.friendly-header.with-tabs { border-bottom-color: var(--hairline); }

.friendly-header .small-logo {
  background: var(--brand-primary);
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .4rem 1rem;
  border-radius: 999px;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.friendly-header .small-logo::before { content: "[LOGO]"; }
.friendly-header .small-logo:hover { color: #fff; opacity: .92; }
.friendly-header .small-logo-img {
  max-height: 40px;
  border-radius: 8px;
}

.friendly-header .login-pair { display: flex; gap: .5rem; }
/* Login-pair buttons. Un-scoped from .friendly-header so they keep their
   styling after the mobile script relocates them into the tab-nav drawer
   (and so the user/instructor chips style correctly wherever used). */
.btn-f-login {
  font-size: .9rem;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  font-weight: 500;
  transition: all 200ms;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.btn-f-primary  { background: var(--ink); color: #fff; border: 1.5px solid var(--ink); }
.btn-f-primary:hover  { background: #fff; color: var(--ink); }
.btn-f-secondary{ background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-f-secondary:hover{ background: var(--ink); color: #fff; }

/* Mobile hamburger toggle — hidden on desktop, shown < 768px (media query
   below). Injected into the header by the shared layout script; controls
   the collapsible tab-nav drawer. The bars draw a CSS hamburger that
   morphs into an X when the drawer is open (.is-active). */
.friendly-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.friendly-nav-toggle .fnt-bars,
.friendly-nav-toggle .fnt-bars::before,
.friendly-nav-toggle .fnt-bars::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 150ms ease, background 150ms ease;
}
.friendly-nav-toggle .fnt-bars { position: relative; }
.friendly-nav-toggle .fnt-bars::before { position: absolute; left: 0; top: -6px; }
.friendly-nav-toggle .fnt-bars::after  { position: absolute; left: 0; top:  6px; }
.friendly-nav-toggle.is-active .fnt-bars { background: transparent; }
.friendly-nav-toggle.is-active .fnt-bars::before { transform: translateY(6px) rotate(45deg); }
.friendly-nav-toggle.is-active .fnt-bars::after  { transform: translateY(-6px) rotate(-45deg); }

@keyframes drawerDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- TAB NAV (inner pages only) -------------------------------- */
.friendly-tab-nav {
  background: rgba(253, 249, 243, 0.85);
  backdrop-filter: blur(8px);
  padding: .85rem 0 1.1rem;
  border-bottom: 1px solid var(--hairline);
}
.friendly-tab-nav .tab-pill-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
/* tab pills — un-scoped from .friendly-tab-nav so they also style the
   Option-2 .friendly-topbar. (Plain a.tab-pill, used only in the friendly
   portal nav.) */
a.tab-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: all 180ms;
}
a.tab-pill:hover {
  color: var(--ink);
  background: rgba(255,255,255,.55);
  border-color: var(--hairline);
}
a.tab-pill.active {
  color: var(--ink);
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
a.tab-pill.active i { color: var(--tone-yellow); }

/* ---------- OPTION-2 TOP BAR (tabs + login in one row) ---------------- */
.friendly-topbar {
  background: rgba(253, 249, 243, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  padding: .7rem 0;
  position: relative;
  z-index: 30;
}
.friendly-topbar .container { display: flex; align-items: center; gap: .75rem; }
.friendly-topbar .topbar-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.friendly-topbar .tab-pill-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.friendly-topbar .login-pair  { display: flex; gap: .5rem; flex-shrink: 0; }

/* ---------- OPTION-2 BRAND (big centered logo above the hero) --------- */
.friendly-page-hero .hero-brand { text-align: center; margin-bottom: 1.15rem; }
.hero-brand-link { display: inline-block; text-decoration: none; line-height: 0; }
.hero-brand-img {
  height: 104px;
  width: auto;
  max-width: 250px;
  object-fit: contain;
  background: #fff;
  padding: 12px 18px;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}
.hero-brand-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 104px;
  padding: 0 1.5rem;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 600;
  font-size: 1.15rem;
  border-radius: 20px;
}

/* Option-2 top bar — mobile drawer (hamburger reuses .friendly-nav-toggle) */
@media (max-width: 767.98px) {
  .friendly-topbar { padding: .6rem 0; }
  .friendly-topbar .container { flex-wrap: wrap; }
  .friendly-topbar .topbar-main { display: none; width: 100%; }
  .friendly-topbar.is-open .topbar-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    margin-top: .65rem;
    animation: drawerDrop 180ms ease;
  }
  .friendly-topbar .tab-pill-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: .4rem;
  }
  .friendly-topbar.is-open a.tab-pill {
    justify-content: flex-start;
    padding: .8rem 1rem;
    font-size: .95rem;
    border: 1.5px solid var(--hairline);
    background: #fff;
  }
  .friendly-topbar.is-open a.tab-pill.active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
  }
  .friendly-topbar .login-pair {
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;
    margin-top: .25rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--hairline);
  }
  .friendly-topbar .login-pair .btn-f-login { width: 100%; justify-content: center; padding: .8rem 1rem; font-size: .95rem; }
  .friendly-topbar .login-pair .user-chip { width: 100%; }
  .friendly-topbar .login-pair .user-chip-toggle { width: 100%; justify-content: center; }

  .friendly-page-hero .hero-brand { margin-bottom: .9rem; }
  .hero-brand-img { height: 76px; max-width: 200px; padding: 10px 14px; border-radius: 16px; }
  .hero-brand-fallback { height: 76px; min-width: 120px; font-size: 1rem; }
}

/* ---------- INNER PAGE HERO ------------------------------------------- */
.friendly-page-hero {
  padding: 2.75rem 0 1.75rem;
  text-align: center;
}
.friendly-page-hero h1 {
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 .65rem;
  line-height: 1.2;
}
.friendly-page-hero h1 .accent {
  background: linear-gradient(180deg, transparent 60%, var(--tone-peach) 60%);
  padding: 0 .15em;
}
.friendly-page-hero .lede {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.55;
}
.friendly-page-hero .crumb {
  font-size: .85rem;
  color: var(--ink-soft);
  margin-bottom: .5rem;
}
.friendly-page-hero .crumb a { color: var(--ink-soft); text-decoration: none; }
.friendly-page-hero .crumb a:hover { color: var(--ink); }
.friendly-page-hero .crumb i { font-size: .75rem; margin: 0 .25rem; opacity: .5; }

/* ---------- QUICK TIP (shared) ----------------------------------------
   Small contextual hint at the top of a content page's body (groups
   registration, schedule, store). Yellow note + info icon + "טיפ קטן:"
   lead-in. */
.quick-tip {
  background: var(--tone-yellow);
  border-radius: 18px;
  padding: 1.1rem 1.35rem;
  display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: 1.5rem;
}
.quick-tip i { font-size: 1.3rem; color: var(--tone-yellow-deep); margin-top: .15rem; }
.quick-tip .tip-text { color: #6b4f00; line-height: 1.45; }
.quick-tip .tip-text strong { color: var(--ink); font-weight: 600; }

/* ---------- SHARED ACCENT (highlighter) ------------------------------- */
.accent-peach    { background: linear-gradient(180deg, transparent 60%, var(--tone-peach) 60%); padding: 0 .15em; }
.accent-mint     { background: linear-gradient(180deg, transparent 60%, var(--tone-mint) 60%); padding: 0 .15em; }
.accent-lavender { background: linear-gradient(180deg, transparent 60%, var(--tone-lavender) 60%); padding: 0 .15em; }
.accent-yellow   { background: linear-gradient(180deg, transparent 60%, var(--tone-yellow) 60%); padding: 0 .15em; }

/* ---------- ROUNDED CARD PRIMITIVE ------------------------------------ */
.f-card {
  background: var(--cream-card);
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  position: relative;
}
.f-card.f-card-tight  { padding: 1.1rem 1.25rem; }
.f-card.tone-mint     { background: var(--tone-mint); }
.f-card.tone-peach    { background: var(--tone-peach); }
.f-card.tone-lavender { background: var(--tone-lavender); }

/* ---------- PILL BUTTONS ---------------------------------------------- */
.f-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .65rem 1.35rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: .92rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 180ms;
  white-space: nowrap;
}
.f-pill-dark    { background: var(--ink); color: #fff; border-color: var(--ink); }
.f-pill-dark:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.f-pill-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.f-pill-outline:hover { background: var(--ink); color: #fff; }
.f-pill-mint    { background: var(--tone-mint);     color: var(--tone-mint-deep); }
.f-pill-mint:hover    { background: var(--tone-mint-deep); color: #fff; }
.f-pill-peach   { background: var(--tone-peach);    color: var(--tone-peach-deep); }
.f-pill-peach:hover   { background: var(--tone-peach-deep); color: #fff; }
.f-pill-lavender{ background: var(--tone-lavender); color: var(--tone-lavender-deep); }
.f-pill-lavender:hover{ background: var(--tone-lavender-deep); color: #fff; }
.f-pill-ghost   { background: rgba(255,255,255,.6); color: var(--ink); border-color: var(--hairline); }
.f-pill-ghost:hover   { background: #fff; border-color: var(--ink); }
.f-pill-sm      { padding: .4rem .9rem; font-size: .82rem; }

/* ---------- LOADER ---------------------------------------------------- */
/* Generic modern loader — a brand-coloured spinning ring. Reusable across
   friendly pages (replaces the legacy "saving"/"wait" GIF spinners). Wrap it
   in a positioned container (e.g. a centred fixed overlay) per use. */
.f-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 4px solid #ded7c9;
  border-top-color: var(--brand-primary);
  animation: f-spin .7s linear infinite;
}
.f-spinner-elevated { box-shadow: 0 0 0 10px #fff, 0 8px 22px rgba(0,0,0,.14); }
.f-spinner-sm { width: 22px; height: 22px; border-width: 3px; }
@keyframes f-spin { to { transform: rotate(360deg); } }

/* ---------- CHIP / TAG ------------------------------------------------- */
.f-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  background: rgba(255,255,255,.65);
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
}
.f-chip.tone-mint     { background: var(--tone-mint);     color: var(--tone-mint-deep);     border-color: transparent; }
.f-chip.tone-peach    { background: var(--tone-peach);    color: var(--tone-peach-deep);    border-color: transparent; }
.f-chip.tone-lavender { background: var(--tone-lavender); color: var(--tone-lavender-deep); border-color: transparent; }
.f-chip.tone-yellow   { background: var(--tone-yellow);   color: var(--tone-yellow-deep);   border-color: transparent; }
.f-chip.tone-dark     { background: var(--ink);           color: #fff;                      border-color: transparent; }

/* ---------- HELP STRIP ------------------------------------------------- */
.friendly-help {
  background: #fff;
  border-radius: 18px;
  padding: 1.5rem 2rem;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.friendly-help .text       { font-weight: 500; color: var(--ink); }
.friendly-help .text small { color: var(--ink-soft); font-weight: 400; }
.friendly-help .help-cta {
  background: var(--ink);
  color: #fff;
  padding: .65rem 1.35rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.friendly-help .help-cta:hover { background: var(--brand-primary); color: #fff; }

/* ---------- FOOTER ---------------------------------------------------- */
.friendly-footer {
  background: var(--ink);
  color: #d4d2c8;
  padding: 1.85rem 0 1.25rem;   /* compact — was 3rem 0 1.5rem */
  margin-top: 2.5rem;           /* was 3rem */
  text-align: center;           /* centre heading + contact row */
}
/* Store leaves headroom for its bottom cart bar (was an inline style). */
.friendly-footer--roomy { padding-bottom: 5.5rem; }
.friendly-footer h3 { color: #fff; font-weight: 600; margin-bottom: 1rem; }
/* Contact details on ONE centred row; flex-wrap collapses them to
   stacked lines on narrow screens with no media query needed. */
.friendly-footer .contact-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .35rem 2rem;             /* row-gap  column-gap */
}
.friendly-footer .contact-line          { display: inline-flex; gap: .4rem; align-items: center; padding: 0; }
.friendly-footer .contact-line strong   { color: var(--tone-yellow); font-weight: 500; }
.friendly-footer .contact-line a {
  color: #d4d2c8;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 150ms, border-color 150ms;
}
.friendly-footer .contact-line a:hover {
  color: #fff;
  border-bottom-color: var(--tone-yellow);
}
.friendly-footer .footer-bottom { border-top: 1px solid #444; }
.friendly-footer .plando-tag    { color: #888; font-size: .85rem; }

/* ---------- FORM FIELDS (friendly version) ---------------------------- */
.f-field { margin-bottom: 1.1rem; }
.f-field label {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: .4rem;
}
.f-field .f-control {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: 14px;
  border: 1.5px solid var(--hairline);
  background: #fff;
  font-size: 1rem;
  color: var(--ink);
  font-family: inherit;
  transition: border-color 150ms, box-shadow 150ms;
}
.f-field .f-control:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.12);
}
.f-field .f-control.f-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b6b6b'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 16px;
  padding-left: 2.5rem;
}
.f-field-help { font-size: .8rem; color: var(--ink-soft); margin-top: .35rem; }

/* ---------- SIGNATURE PAD (friendly) --------------------------------- */
/* A deliberately distinct input: dashed brand-tinted box + an inline
   signature line + a "חתום" placeholder with a pencil icon that clears the
   moment the visitor starts signing (.is-empty toggled in _group_register_form). */
.signature_pad_body--friendly {
  position: relative;

  /* Height of the DRAWING area. The canvas must get an explicit height:
     without one the browser derives the rendered box from the intrinsic
     ratio of the width/height ATTRIBUTES (the bitmap), which
     self_services/friendly_group_register.js rewrites for
     devicePixelRatio — so on every HiDPI screen the pad silently collapsed
     to 140/dpr px tall (70px on a dpr-2 phone, 47px at dpr 3), with the
     hint and the signature line spilling outside it.
     The line + hint below are positioned off this value so the three stay
     in step if it ever changes. */
  --sig-pad-height: 140px;
  --sig-pad-border: 1.5px;
}

/* short label + non-emphasized sub-line beneath it */
.signature_pad_sublabel {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 0.25rem;
  line-height: 1.35;
}

/* Double-classed (.signature_pad_body.signature_pad_body--friendly) to win the
   cascade over the equal-specificity .legacy-form-host rules that
   group_register.html.erb injects in a later (inline) <style> block. */
.signature_pad_body.signature_pad_body--friendly canvas {
  display: block;
  width: 100%;
  /* Border included on top of --sig-pad-height so that under border-box the
     CONTENT box — the area the bitmap maps onto — is exactly
     --sig-pad-height, matching the height the sizing JS gives the bitmap.
     Keeps drawn ink landing under the cursor. */
  height: calc(var(--sig-pad-height) + 2 * var(--sig-pad-border));
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  border: var(--sig-pad-border) dashed var(--hairline);
  border-radius: 12px;
  background: var(--cream-bg);
  cursor: crosshair;
  touch-action: none;
  transition: border-color 150ms, background 150ms;
}
.signature_pad_body.signature_pad_body--friendly canvas:hover {
  border-color: var(--ink-soft);
}

/* inline signature line, in the lower-middle of the canvas */
.signature_pad_body--friendly::before {
  content: "";
  position: absolute;
  top: calc(var(--sig-pad-height) - 52px);
  left: 18px;
  right: 18px;
  border-top: 1.5px solid rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 2;
}

/* "חתום" + pencil placeholder, centred over the canvas, fades on first stroke */
.signature_pad_hint {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--sig-pad-height) - 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
  z-index: 3;
}
.signature_pad_hint i { font-size: 0.95rem; line-height: 1; }
.signature_pad_body--friendly.is-empty .signature_pad_hint { opacity: 1; }

/* friendly "clear" link — hugs the box, aligned to the visual left, no underline.
   Double-classed to beat the inline .legacy-form-host .signature_pad_clear /
   .legacy-form-host .btn rules (equal specificity, but they load later). */
.signature_pad_body.signature_pad_body--friendly .signature_pad_clear {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  margin: 0.2rem auto 0 0;
  border: none;
  background: transparent;
  color: #b5705e; /* muted clay — reads as "erase" without shouting */
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.15rem 0.25rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 150ms;
}
.signature_pad_body.signature_pad_body--friendly .signature_pad_clear i { font-size: 0.9rem; }
.signature_pad_body.signature_pad_body--friendly .signature_pad_clear:hover {
  color: #9c5a49;
  text-decoration: none;
}

/* ---------- MOBILE ---------------------------------------------------- */
@media (max-width: 767.98px) {
  /* ---- Mobile hamburger drawer (toggle injected by layout JS) ---- */
  .friendly-header { padding: .8rem 0; }
  .friendly-nav-toggle { display: inline-flex; }

  /* Tab-nav collapses into a drawer. The layout JS relocates the
     login / user-chip buttons into it (.login-pair.in-drawer). */
  .friendly-tab-nav { padding: 0; border-bottom: 0; }
  .friendly-tab-nav .container { display: none; }
  .friendly-tab-nav.is-open {
    padding: .35rem 0 .9rem;
    border-bottom: 1px solid var(--hairline);
    z-index: 25; /* keep the user-chip dropdown above the hero below */
  }
  .friendly-tab-nav.is-open .container {
    display: block;
    animation: drawerDrop 180ms ease;
  }
  .friendly-tab-nav .tab-pill-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: .4rem;
  }
  .friendly-tab-nav a.tab-pill {
    justify-content: flex-start;
    padding: .8rem 1rem;
    font-size: .95rem;
    border: 1.5px solid var(--hairline);
    background: #fff;
  }
  .friendly-tab-nav a.tab-pill.active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
  }

  /* Login / user-chip buttons, relocated below the tabs in the drawer. */
  .friendly-tab-nav .login-pair.in-drawer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;
    margin-top: .55rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--hairline);
  }
  .friendly-tab-nav .login-pair.in-drawer .btn-f-login {
    width: 100%;
    justify-content: center;
    padding: .8rem 1rem;
    font-size: .95rem;
  }
  .friendly-tab-nav .login-pair.in-drawer .btn-f-login i { display: inline-flex; }
  .friendly-tab-nav .login-pair.in-drawer .user-chip { width: 100%; }
  .friendly-tab-nav .login-pair.in-drawer .user-chip-toggle {
    width: 100%;
    justify-content: center;
  }

  .friendly-page-hero { padding: 1.85rem 0 1.25rem; }
  .friendly-page-hero h1 { font-size: 1.55rem; }
  .friendly-page-hero .lede { font-size: .95rem; padding: 0 1rem; }

  .friendly-help { padding: 1.25rem; }
  .friendly-help .help-cta { width: 100%; justify-content: center; }
}

/* ============================================================
   SCHEDULE PAGE — week-nav, week-grid, day-view, peek-card
   ============================================================
   The schedule page renders both desktop (week-grid) and mobile
   (day-view) DOM nodes from a single JSON feed; CSS handles the
   responsive switch. Events colored by `event_color` from the DB.
   ============================================================ */
.week-nav {
  /* Tone reflection: the "schedule / events" tile on the home page
     (index.html.erb) uses .friendly-card.tone-peach. We carry that peach
     into the schedule page's primary control strip so the click→land
     visual handoff is unmistakable. Pure --tone-peach is already a soft
     pastel, so it reads as a colored zone, not a loud accent. */
  background: var(--tone-peach);
  border-radius: 20px;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  margin: -.75rem 0 1.25rem;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
/* Row 1: arrows (right) — title (page-centered) — toggle (left).
   Grid with `1fr auto 1fr` keeps the title at the geometric center even
   when the side groups have unequal widths. */
.week-nav .nav-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.week-nav .nav-right {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  justify-self: start;  /* RTL: start = right */
}
.week-nav .nav-row > .week-label {
  justify-self: center;
  text-align: center;
  min-width: 120px;
}
.week-nav .nav-row > .view-toggle {
  justify-self: end;    /* RTL: end = left */
}

/* Row 2: search fields + filter pills + Search button, centered. */
.week-nav .filter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.week-nav .btn-friendly-search {
  padding: .55rem 1.15rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  border: 0;
  font-weight: 500;
  font-size: .9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: background 150ms, transform 150ms, box-shadow 150ms;
  font-family: inherit;
}
.week-nav .btn-friendly-search:hover {
  background: var(--brand-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(var(--brand-primary-rgb), .25);
}
.week-nav .btn-friendly-search i { font-size: .92rem; }

.week-nav .week-arrows { display: inline-flex; gap: .35rem; }
.week-nav .arrow-btn {
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1.5px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 150ms;
}
.week-nav .arrow-btn:hover { background: #fff; border-color: var(--ink); }
.week-nav .arrow-btn:disabled { opacity: .4; cursor: default; }
.week-nav .week-label {
  font-weight: 600; font-size: 1.1rem; color: var(--ink);
  min-width: 165px;
}
.week-nav .week-label small {
  display: block; color: var(--ink-soft);
  font-size: .82rem; font-weight: 400;
}
.week-nav .today-btn {
  padding: .55rem 1.15rem;
  border-radius: 12px;
  border: 1.5px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  font-weight: 500; font-size: .85rem;
  cursor: pointer;
}
.week-nav .today-btn:hover { background: #fff; border-color: var(--ink); }
.week-nav .filter-select-mini {
  /* RTL layout: text starts at the right edge (with small right-padding for
     breathing room), chevron lives in the LEFT padding zone (where the
     control "ends" in RTL). Padding values were previously reversed —
     pushing right-aligned text away from the right edge and making the
     dropdowns look mis-aligned. */
  padding: .45rem .85rem .45rem 2.1rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background-color: #fff;
  color: var(--ink);
  font-size: .85rem; font-family: inherit;
  text-align: right;
  direction: rtl;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b6b6b'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .85rem center;
  background-size: 12px;
  cursor: pointer;
  transition: all 150ms;
}
.week-nav .filter-select-mini:focus { outline: none; background-color: #fff; border-color: var(--brand-primary); }
.week-nav .filter-select-mini.has-value { background-color: var(--tone-yellow); border-color: transparent; }
.week-nav .filter-select-mini option { direction: rtl; text-align: right; }

.week-nav .search-mini {
  position: relative;
  flex: 1 1 160px; min-width: 140px; max-width: 240px;
}
.week-nav .search-mini i {
  /* RTL: magnifier icon sits at the right edge (start side) so it visually
     "starts" the input field, the way the chevron starts a dropdown. */
  position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-size: .9rem; pointer-events: none;
}
.week-nav .search-mini input {
  width: 100%;
  /* Right padding makes room for the magnifier icon; left padding is
     minimal so the right-aligned placeholder/text can extend toward the
     end of the field. */
  padding: .45rem 2.4rem .45rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: #fff;
  font-size: .85rem; color: var(--ink); font-family: inherit;
  text-align: right;
  direction: rtl;
}
.week-nav .search-mini input::placeholder { color: var(--ink-soft); opacity: 1; text-align: right; }
.week-nav .search-mini input:focus { outline: none; background: #fff; border-color: var(--brand-primary); }

.schedule-spinner {
  display: none; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--ink-soft);
}
.schedule-spinner.is-loading { display: inline-flex; }
.schedule-spinner .spinner-ring {
  width: 14px; height: 14px;
  border: 2px solid var(--hairline);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Member status (online only — manui block) */
.member-status-card {
  background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .08), var(--tone-lavender) 100%);
  border-radius: 20px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--hairline);
}
.member-status-card .ms-title {
  font-size: .78rem; color: var(--ink-soft); letter-spacing: .04em;
  text-transform: uppercase; font-weight: 500; margin-bottom: .35rem;
}
.member-status-card .ms-line {
  display: flex; gap: .85rem; align-items: baseline; flex-wrap: wrap;
  font-size: .92rem; color: var(--ink);
}
.member-status-card .ms-line strong { color: var(--brand-primary-active); font-weight: 600; }
.member-status-card .ms-line + .ms-line { margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed rgba(0,0,0,.06); }

/* Week grid (desktop) */
.week-shell {
  /* Lift the calendar visibly off the cream page background. The previous
     4%-opacity shadow disappeared on the warm page bg, so the calendar (white
     interior) looked like it was bleeding into the page (cream). Stronger
     shadow + a faint border give the whole grid a clear card-edge. */
  background: #fff;
  border-radius: 22px;
  border: 1px solid var(--hairline);
  box-shadow: 0 6px 22px rgba(0,0,0,.07);
  overflow: hidden;
}
.week-grid {
  display: grid;
  grid-template-columns: 70px repeat(7, 1fr);
  direction: rtl;
}
.week-grid .day-header {
  padding: 1rem .5rem;
  text-align: center;
  border-bottom: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  /* Soft peach tint instead of plain cream — echoes the peach control strip
     above, distinguishes the header band from both the page (cream) and the
     pure-white day cells below. */
  background: #fff1e4;
}
.week-grid .day-header:last-child { border-left: 0; }
.week-grid .day-header.is-today { background: var(--tone-yellow); }
.week-grid .day-header .dow {
  font-size: .82rem; color: var(--ink-soft);
  letter-spacing: .03em; font-weight: 500;
}
.week-grid .day-header .dom {
  font-size: 1.4rem; font-weight: 600; color: var(--ink);
  margin-top: .15rem; line-height: 1;
}
.week-grid .corner {
  /* Match the peach-tinted header band — the corner sits at their intersection
     so it should be the same tone for visual continuity. */
  background: #fff1e4;
  border-bottom: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
/* JS-injected hour rows live inside this container; display:contents pops
   them up so their children (time-cell + 7 day-cells) become direct grid
   items of the parent .week-grid. */
.week-grid #week-grid-rows { display: contents; }
.week-grid #week-grid-rows > * { display: contents; }
.week-grid .time-cell {
  padding: .35rem .5rem 0;
  text-align: center;
  border-bottom: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  font-size: .78rem; color: var(--ink-soft);
  /* Same peach tint as the header row — the time column is the vertical
     equivalent of the header row, so it gets the same banded look. */
  background: #fff1e4;
  font-feature-settings: "tnum" 1;
}
.week-grid .day-cell {
  min-height: 64px;
  padding: .35rem;
  border-bottom: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  position: relative;
  display: flex; flex-direction: column; gap: .45rem;
  /* Explicit pure white so the contrast with the peach-tinted header band
     (#fff1e4) is crisp. Previously inherited from .week-shell, which also
     was #fff — making it explicit decouples the two so future shell-color
     tweaks don't bleed into the cells. */
  background: #fff;
}
.week-grid .day-cell:last-child { border-left: 0; }
.week-grid .day-cell.is-today { background: rgba(255, 217, 103, 0.07); }

.cal-event {
  display: block;
  border-radius: 10px;
  padding: .35rem .55rem;
  font-size: .76rem;
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
  transition: transform 150ms, box-shadow 150ms;
  /* Color on the border only — white fill (was a tinted background). */
  border: 1.5px solid transparent;
  background: #fff;
  color: var(--ink);
  position: relative; /* anchor for the floating status badge */
}
.cal-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  color: var(--ink);
}
.cal-event .ev-title {
  font-weight: 600; color: inherit;
  display: block; margin-bottom: .1rem;
  /* Full name — wrap instead of truncating with an ellipsis. */
  white-space: normal; overflow-wrap: anywhere;
}
.cal-event .ev-meta {
  font-size: .7rem; color: var(--ink-soft);
  font-feature-settings: "tnum" 1;
}
.cal-event.is-registered    { border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
/* ---- Floating status badge — top-left corner of the chip, out of the
   text flow. Registered = brand check; full (and not registered) = peach
   "people". Shared by week (.cal-event) and month (.month-event) chips. ---- */
.cal-event.is-registered::before,
.month-event.is-registered::before,
.cal-event.is-full:not(.is-registered)::after,
.month-event.is-full:not(.is-registered)::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
  font-family: "bootstrap-icons";
  font-size: .62rem;
  line-height: 1;
  margin: 0;
  z-index: 2;
}
.cal-event.is-registered::before,
.month-event.is-registered::before {
  content: "\f26b"; /* bi-check-circle */
  color: var(--brand-primary);
}
.cal-event.is-full:not(.is-registered)::after,
.month-event.is-full:not(.is-registered)::after {
  content: "\f4d0"; /* bi-people — at capacity / full */
  color: var(--tone-peach-deep);
}
.cal-event.is-on-hold       { border-color: #c95c1d; }
.cal-event.is-on-hold::before {
  content: "\f47f"; /* bi-hourglass-split */
  font-family: "bootstrap-icons";
  font-size: .75rem;
  color: #c95c1d;
  margin-left: .25rem;
  vertical-align: -1px;
}
/* Full = de-emphasized text (not opacity — opacity would fade the corner
   badge too). The peach "people" badge marks it. */
.cal-event.is-full:not(.is-registered)      { color: var(--ink-soft); }
.cal-event.is-selected      {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Loading overlay (diary Lottie) — shown during AJAX week/month nav.
   Lives inside #schedule-body so it covers exactly the calendar area.
   pointer-events: none lets the user still click prev/next mid-animation. */
#schedule-body { position: relative; }
.schedule-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 4;
  border-radius: 22px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
  animation: overlayFadeIn 180ms ease;
}
#schedule-body.is-loading .schedule-loading-overlay { display: flex; }
/* Safety: when a BS5 modal is open the loading overlay must not be shown.
   This guards against the rare case where a nav AJAX got interrupted and
   left `is-loading` on the body, then the user opened an event peek. */
body.modal-open #schedule-body.is-loading .schedule-loading-overlay { display: none; }
.schedule-loading-overlay lottie-player {
  width: 110px;
  height: 110px;
}
.schedule-loading-overlay .loading-caption {
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: .02em;
}
.schedule-loading-overlay .stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* CSS ring spinner — used by the instructor calendar overlay (it has no
   Lottie player; the schedule page keeps its diary-Lottie). */
.schedule-loading-overlay .cal-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--hairline);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* View toggle (week / month) — desktop only */
.view-toggle {
  display: inline-flex;
  background: var(--cream-bg);
  border-radius: 999px;
  padding: 3px;
  gap: 1px;
}
.view-toggle a {
  border: 0;
  background: transparent;
  padding: .4rem .95rem;
  border-radius: 999px;
  font-size: .82rem;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  transition: all 150ms;
}
.view-toggle a:hover {
  color: var(--ink);
}
.view-toggle a.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Month grid (desktop) */
.month-shell {
  /* Same lift treatment as .week-shell — see comment there. */
  background: #fff;
  border-radius: 22px;
  border: 1px solid var(--hairline);
  box-shadow: 0 6px 22px rgba(0,0,0,.07);
  overflow: hidden;
}
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* DOW header row hugs its content. Week rows grow to fit the busiest
     day — all events are shown (no "+N עוד" cap); a 150px floor keeps
     light weeks uniform. */
  grid-template-rows: auto;
  grid-auto-rows: minmax(150px, auto);
  direction: rtl;
}
.month-grid .month-dow-header {
  padding: .85rem .5rem;
  text-align: center;
  border-bottom: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  /* Peach-tinted band — same treatment as .week-grid .day-header. See
     comment there for the rationale. */
  background: #fff1e4;
  font-size: .82rem;
  color: var(--ink-soft);
  letter-spacing: .03em;
  font-weight: 500;
}
.month-grid .month-dow-header:nth-child(7) { border-left: 0; }
.month-grid .month-day-cell {
  min-height: 110px;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  overflow: visible; /* grow to fit every event — no "+N עוד" cap */
  background: #fff;
  transition: background-color 150ms;
}
.month-grid .month-day-cell:nth-child(7n+7) { border-left: 0; }
.month-grid .month-day-cell.is-other-month {
  /* Cream fill marks adjacent-month days. No cell-wide opacity — that would
     also fade the white event chips + their thin color border (the only
     color cue now), hurting legibility on populated boundary days. The
     muted date number (.month-date-num color below) carries the "dim" cue. */
  background: var(--cream-bg);
}
.month-grid .month-day-cell.is-today {
  background: rgba(255, 217, 103, 0.10);
}
.month-grid .month-day-cell.is-other-month.is-today {
  background: rgba(255, 217, 103, 0.06);
}
.month-grid .month-day-cell .month-date-num {
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  align-self: flex-start;
  font-feature-settings: "tnum" 1;
}
.month-grid .month-day-cell.is-today .month-date-num {
  background: var(--tone-yellow);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.month-grid .month-day-cell.is-other-month .month-date-num { color: var(--ink-soft); }
.month-grid .month-day-events {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1 1 auto;
  min-height: 0;
}

.month-event {
  display: block;
  border-radius: 6px;
  padding: .25rem .45rem;
  font-size: .72rem;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  /* Color on the border only; white fill (was a tinted background +
     right-edge accent). */
  border: 1.5px solid transparent;
  background: #fff;
  color: var(--ink);
  /* Full group/event name — wrap instead of truncating. */
  white-space: normal;
  overflow-wrap: anywhere;
  transition: transform 150ms;
  position: relative; /* anchor for the floating status badge */
}
.month-event:hover {
  transform: translateX(-2px);
  color: var(--ink);
}
.month-event .me-time {
  font-weight: 600;
  font-size: .68rem;
  margin-left: .35rem;
  font-feature-settings: "tnum" 1;
}
.month-event.is-registered { font-weight: 600; }
/* .month-event.is-registered::before + .is-full::after are defined in the
   shared floating-status-badge block above. */
.month-event.is-on-hold::before {
  content: "\f47f"; /* bi-hourglass-split */
  font-family: "bootstrap-icons";
  font-size: .65rem;
  color: #c95c1d;
  margin-left: .2rem;
  vertical-align: -1px;
}
.month-event.is-full:not(.is-registered) { color: var(--ink-soft); }
.month-event.is-selected {
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
}
/* ---- Rich event hover tooltip (BS5) — the per-event tooltip ported
   from the legacy calendar. Content (time / location / instructor /
   capacity / participants / comments) comes from ev.tip. ---- */
/* Cream surface (like the page, not white) with a border tinted to the
   activity's own color. The accent is set per-event via --tip-accent by the
   shown.bs.tooltip handler; hairline is the fallback. */
.cal-tip-tooltip {
  --bs-tooltip-bg: var(--cream-bg);
  --bs-tooltip-color: var(--ink);
  --bs-tooltip-max-width: 290px;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-border-radius: 14px;
  --bs-tooltip-padding-x: .9rem;
  --bs-tooltip-padding-y: .7rem;
  --bs-tooltip-font-size: .78rem;
}
.cal-tip-tooltip .tooltip-inner {
  direction: rtl;
  text-align: right;
  line-height: 1.55;
  border: 1.5px solid var(--tip-accent, var(--hairline));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}
/* The arrow is a separate CSS triangle that a border can't reach. Give it
   the same accent outline via drop-shadow (it follows the triangle shape),
   reading the same --tip-accent the body border uses. */
.cal-tip-tooltip .tooltip-arrow::before {
  filter:
    drop-shadow(1px 0 0 var(--tip-accent, var(--hairline)))
    drop-shadow(-1px 0 0 var(--tip-accent, var(--hairline)))
    drop-shadow(0 1px 0 var(--tip-accent, var(--hairline)))
    drop-shadow(0 -1px 0 var(--tip-accent, var(--hairline)));
}
.cal-tip-tooltip .cal-tip-title {
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: .35rem;
  color: var(--brand-primary);
}
.cal-tip-tooltip .cal-tip-body { color: var(--ink-soft); }
/* Bold + darker label so it separates from its (muted) value. */
.cal-tip-tooltip .cal-tip-label { font-weight: 600; color: var(--ink); }

/* Hide week-shell when view-mode = month (desktop only). Mobile always
   shows day-view regardless of mode. */
#schedule-body[data-view-mode="month"] .week-shell { display: none; }
#schedule-body[data-view-mode="month"] .month-shell { display: block; }
#schedule-body[data-view-mode="week"]  .week-shell { display: block; }
#schedule-body[data-view-mode="week"]  .month-shell { display: none; }

/* Day-view (mobile) */
.day-view { display: none; }
.day-view-day {
  /* Same lift treatment as .week-shell / .month-shell — the mobile day view
     uses these cards in place of the desktop week-grid, so they need the
     same separation from the cream page background. */
  background: #fff;
  border-radius: 22px;
  border: 1px solid var(--hairline);
  padding: 1.05rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.07);
}
.day-view-day .day-name {
  font-size: 1.05rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .85rem; padding-bottom: .65rem;
  border-bottom: 1px solid var(--hairline);
}
.day-view-day.is-today .day-name { color: var(--brand-primary); }
.day-view-day .day-name .day-num {
  background: var(--cream-bg); color: var(--ink);
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 600;
}
.day-view-day.is-today .day-name .day-num { background: var(--tone-yellow); }
.day-view-day .day-event {
  display: flex; gap: .85rem; padding: .65rem 0;
  align-items: flex-start;
  cursor: pointer;
}
.day-view-day .day-event:not(:last-child) { border-bottom: 1px dashed var(--hairline); }
.day-view-day .day-event-time {
  flex-shrink: 0; width: 65px; text-align: end;
  color: var(--ink-soft); font-size: .82rem; font-weight: 500;
  font-feature-settings: "tnum" 1;
}
.day-view-day .day-event-time strong {
  color: var(--ink); display: block;
  font-size: .92rem;
}
.day-view-day .day-event-body {
  flex: 1; padding: .55rem .85rem;
  border-radius: 12px;
  background: rgba(0, 149, 232, 0.12);
  position: relative;
  transition: transform 150ms;
}
.day-view-day .day-event:hover .day-event-body { transform: translateX(-3px); }
.day-view-day .day-event-body .ev-title {
  font-weight: 600; color: var(--ink); margin-bottom: .15rem;
}
.day-view-day .day-event-body .ev-meta {
  font-size: .8rem; color: var(--ink-soft);
  display: flex; gap: .65rem; flex-wrap: wrap;
}
.day-view-day .day-event-body .ev-meta i { color: var(--ink-soft); margin-left: .15rem; }
.day-view-day .day-event-body.is-registered {
  border-right: 3px solid var(--brand-primary);
}
.day-view-day .day-event-body.is-registered .ev-status-chip {
  font-size: .7rem; padding: .15rem .55rem; border-radius: 999px;
  background: var(--brand-primary); color: #fff; font-weight: 500;
}
.day-view-day .day-event-body.is-on-hold {
  border-right: 3px solid #c95c1d;
}
.day-view-day .day-event-body.is-on-hold .ev-status-chip {
  font-size: .7rem; padding: .15rem .55rem; border-radius: 999px;
  background: var(--tone-peach); color: var(--tone-peach-deep); font-weight: 500;
}
.day-view-day .day-event-body.is-full { opacity: .65; }
.day-view-day.is-empty .day-name { color: var(--ink-soft); }
.day-view-day.is-empty .empty-line {
  color: var(--ink-soft); font-size: .9rem;
  padding: .65rem 0; text-align: center; font-style: italic;
}

/* Peek content — lives inside #event-peek-modal .modal-body. The modal
   handles bg / shadow / radius / fade; this just provides comfortable
   inner padding. Kept the .peek-card classname so the inner selectors
   below (.peek-header, .peek-body, etc.) don't need renaming. */
.peek-card {
  padding: 1.5rem 1.5rem 1.25rem;
  position: relative;
}
.peek-card .peek-close {
  position: absolute;
  top: .75rem; left: .75rem;
  border: 0;
  background: var(--cream-bg);
  color: var(--ink);
  font-size: 1.5rem;
  cursor: pointer;
  width: 36px; height: 36px;
  border-radius: 50%;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms;
  z-index: 5;
}
.peek-card .peek-close:hover {
  color: #fff;
  background: var(--ink);
  transform: scale(1.05);
}
.peek-card .peek-close:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.peek-card .peek-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 1rem;
  margin-bottom: 1rem; flex-wrap: wrap; padding-left: 2rem;
}
.peek-card h3 {
  font-weight: 600; font-size: 1.25rem; margin: 0 0 .35rem; color: var(--ink);
}
.peek-card .peek-time {
  color: var(--ink-soft); font-size: .92rem;
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.peek-card .peek-time i { color: var(--brand-primary); margin-left: .2rem; }
.peek-card .peek-time bdi { unicode-bidi: isolate; }
.peek-card .peek-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.25rem; margin: 1rem 0;
}
.peek-card .peek-body .meta-block label {
  font-size: .76rem; color: var(--ink-soft);
  letter-spacing: .04em; text-transform: uppercase;
  font-weight: 500; display: block; margin-bottom: .25rem;
}
.peek-card .peek-body .meta-block .meta-val {
  font-size: .96rem; color: var(--ink); font-weight: 500;
}
.peek-card .full-desc {
  color: var(--ink-soft); font-size: .92rem; line-height: 1.55;
  margin: .5rem 0 1rem;
  white-space: pre-wrap;
}
.peek-card .peek-status-banner {
  border-radius: 12px;
  padding: .65rem 1rem;
  font-size: .9rem; font-weight: 500;
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.peek-card .peek-status-banner i { font-size: 1rem; }
.peek-card .peek-status-banner.is-registered { background: rgba(var(--brand-primary-rgb), .12); color: var(--brand-primary-active); }
.peek-card .peek-status-banner.is-on-hold    { background: var(--tone-peach);    color: var(--tone-peach-deep); }
.peek-card .peek-status-banner.is-full       { background: #efe6e6;              color: #8a3a3a; }
.peek-card .peek-status-banner.is-blocked    { background: var(--cream-bg);      color: var(--ink-soft); }
.peek-card .peek-status-banner.is-past       { background: var(--cream-bg);      color: var(--ink-soft); }

.peek-card .peek-actions {
  display: flex; gap: .5rem; flex-wrap: wrap;
  padding-top: 1rem; border-top: 1px dashed var(--hairline);
}
.peek-card .peek-spinner { display: none; align-items: center; gap: .35rem; font-size: .85rem; color: var(--ink-soft); }
.peek-card .peek-spinner.is-active { display: inline-flex; }
.peek-card .peek-spinner .spinner-ring {
  width: 14px; height: 14px;
  border: 2px solid var(--hairline);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
.peek-card .peek-error {
  background: #fde7e7; color: #8a3a3a;
  border-radius: 12px; padding: .55rem .85rem;
  font-size: .9rem; margin: .5rem 0;
}

/* Friendly Swal customization (loaded inline on payment-return only) */
.swal2-popup.friendly-swal {
  border-radius: 22px !important;
  font-family: 'Rubik', sans-serif !important;
}
.swal2-popup.friendly-swal .swal2-title    { font-weight: 600; color: var(--ink); }
.swal2-popup.friendly-swal .swal2-html-container { color: var(--ink-soft); }
.swal2-popup.friendly-swal .swal2-confirm  { border-radius: 999px !important; background: var(--ink) !important; }
.swal2-popup.friendly-swal .swal2-confirm:hover { background: var(--brand-primary) !important; }
.swal2-popup.friendly-swal .swal2-icon.swal2-success { border-color: var(--brand-primary) !important; }
.swal2-popup.friendly-swal .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(var(--brand-primary-rgb), .3) !important; }
.swal2-popup.friendly-swal .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--brand-primary) !important; }

/* Mobile breakpoint — desktop grids hide, day-cards show */
@media (max-width: 991.98px) {
  .week-shell,
  .month-shell,
  #schedule-body[data-view-mode="month"] .week-shell,
  #schedule-body[data-view-mode="month"] .month-shell,
  #schedule-body[data-view-mode="week"]  .week-shell,
  #schedule-body[data-view-mode="week"]  .month-shell { display: none; }
  .day-view { display: block; }
  .peek-card .peek-body { grid-template-columns: 1fr; }
  .view-toggle { display: none; } /* desktop-only affordance */
}
@media (max-width: 767.98px) {
  .week-nav { padding: .85rem 1rem; gap: .65rem; }
  .week-nav .nav-row {
    grid-template-columns: 1fr;
    gap: .55rem;
    justify-items: center;
  }
  .week-nav .nav-row > .nav-right,
  .week-nav .nav-row > .week-label,
  .week-nav .nav-row > .view-toggle { justify-self: center; }
  .week-nav .week-label { font-size: 1rem; min-width: 0; }
  .week-nav .filter-row { gap: .4rem; }
  .week-nav .search-mini { max-width: none; flex: 1 1 100%; }
  .week-nav .filter-select-mini { flex: 1 1 auto; min-width: 0; }
  .week-nav .btn-friendly-search { width: 100%; justify-content: center; }
  .peek-card { padding: 1.25rem; }
  .peek-card h3 { font-size: 1.1rem; }
  .peek-card .peek-time { font-size: .85rem; gap: .5rem; }
}

/* ============================================================
   STORE — friendly variant (Phase 5)
   - Category pill row above products
   - Two-column grid: products grid + sticky cart rail
   - Mobile FAB → cart modal
   ============================================================ */

/* ---------- CATEGORY PILLS ---------------------------------------- */
.cat-pill-row {
  /* Tone reflection: the "store" tile on the home page (index.html.erb)
     uses .friendly-card.tone-lavender. We turn the category-pill row
     into a soft lavender strip so the click→land color handoff reads
     clearly — same pattern as .filter-strip (mint) on groups_registration
     and .week-nav (peach) on schedule. Padding, border-radius and shadow
     match those two strips so the visual rhythm is consistent across
     all three destinations. */
  background: var(--tone-lavender);
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: -.5rem 0 1.5rem;
  padding: 1rem 1.25rem;
  position: relative;
  z-index: 2;
}
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--hairline);
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 180ms;
}
.cat-pill:hover {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
  text-decoration: none;
}
.cat-pill.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.cat-pill .count {
  font-size: .75rem;
  opacity: .7;
  margin-right: .15rem;
}

/* ---------- LAYOUT ------------------------------------------------ */
.store-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.75rem;
  /* `start` (not flex-start) for grid; otherwise items stretch the row
     and `position: sticky` on the rail has no scroll room. */
  align-items: start;
}
.store-products-col { min-width: 0; transition: opacity 200ms ease; }
/* Make sure the rail is its content-height so sticky has scroll room. */
.cart-rail { align-self: start; }

.store-empty {
  background: #fff;
  border-radius: 22px;
  padding: 3rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.store-empty i {
  font-size: 2.5rem;
  color: var(--ink-soft);
  margin-bottom: .85rem;
  display: inline-block;
}
.store-empty h4 { font-weight: 600; color: var(--ink); margin: 0 0 .5rem; }
.store-empty p  { color: var(--ink-soft); margin: 0; }

/* ---------- PRODUCT CARD ---------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.product-card {
  background: #fff;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  transition: transform 200ms ease, box-shadow 200ms ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.07);
}
.product-image {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--cream-bg);
  padding: .5rem; /* breathing room so a contained product image never touches the edges */
}
/* Show the WHOLE product, centered, without cropping. Was object-fit: cover
   forced to 100%×100%, which filled the box and cut portrait/square photos
   off. Intrinsic sizing + max constraints let the flex parent center it; the
   cream box reads as a clean letterbox around the item. */
.product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Cards with a real product photo: white backdrop (photos often have white
   backgrounds, so cream made them look boxed). */
.product-image.has-image { background: #fff; }
/* No-image cards only (the tone-* class is applied solely when a product
   has no picture). Kept very faint — a barely-there tint fading to white —
   so the org logo fallback reads as the focal point, not the backdrop. */
.product-image.tone-mint     { background: linear-gradient(135deg, #edfaf4 0%, #fff 100%); }
.product-image.tone-peach    { background: linear-gradient(135deg, #fff4ec 0%, #fff 100%); }
.product-image.tone-lavender { background: linear-gradient(135deg, #f5f0fc 0%, #fff 100%); }
.product-image.tone-yellow   { background: linear-gradient(135deg, #fff8e3 0%, #fff 100%); }
.product-image .product-emoji { font-size: 4.5rem; line-height: 1; }
/* Org logo shown when a product has no own picture. object-fit: contain
   (overrides the cover used for real photos) + modest size + slight
   fade so it reads as a gentle placeholder. */
.product-image .product-logo-fallback {
  max-width: 46%;
  max-height: 44%;
  object-fit: contain;
  opacity: .9;
}
.product-image .product-tag {
  position: absolute;
  top: .85rem;
  right: .85rem;
  background: var(--ink);
  color: #fff;
  font-size: .72rem;
  font-weight: 500;
  padding: .25rem .65rem;
  border-radius: 999px;
}
.product-image .product-tag.tone-yellow { background: var(--tone-yellow); color: var(--ink); }
.product-image .product-tag.tone-mint   { background: var(--tone-mint-deep); color: #fff; }

.product-body {
  padding: 1.1rem 1.25rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-cat-line {
  font-size: .75rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: .35rem;
}
.product-name {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 .5rem;
  line-height: 1.3;
}
.product-desc {
  color: var(--ink-soft);
  font-size: .85rem;
  line-height: 1.45;
  margin: 0 0 .75rem;
  flex: 1;
}

/* ---------- MANUI INFO CHIPS ------------------------------------- */
.manui-info-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0 0 .85rem;
}
.manui-chip {
  background: var(--cream-bg);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 500;
  padding: .2rem .55rem;
  border-radius: 999px;
  line-height: 1.3;
  border: 1px solid var(--hairline);
}

/* ---------- PRICE + FOOTER -------------------------------------- */
.product-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: .85rem;
  border-top: 1px dashed var(--hairline);
  gap: .5rem;
}
.product-price {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
}

/* friendly_price helper wrapper — forces ₪ to render to the LEFT of digits
   regardless of the surrounding bidi / flex direction. */
.friendly-price {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-flex;
  align-items: baseline;
  gap: .12rem;
  white-space: nowrap;
}
.friendly-price .currency {
  font-size: .82em;
  font-weight: 500;
  color: var(--ink-soft);
}

.product-price .price-suffix {
  font-size: .72rem;
  color: var(--ink-soft);
  font-weight: 500;
  margin-right: .25rem;
}

/* ---------- QTY STEPPER ----------------------------------------- */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--cream-bg);
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  padding: 2px;
}
.qty-stepper button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 500;
  transition: background 150ms;
}
.qty-stepper button:hover { background: #fff; }
.qty-stepper input.quantity {
  width: 36px;
  min-width: 28px;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 600;
  color: var(--ink);
  padding: 0;
  /* hide native number-input controls */
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: textfield;
}
.qty-stepper input.quantity::-webkit-inner-spin-button,
.qty-stepper input.quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- ADD-TO-CART BUTTON ---------------------------------- */
.add-to-cart-btn {
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .5rem 1.05rem;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: background 200ms;
}
.add-to-cart-btn:hover {
  background: var(--brand-primary);
  color: #fff;
}
.add-to-cart-btn.is-in-cart {
  background: var(--tone-mint-deep, #2a9d70);
}
.add-to-cart-btn.is-in-cart:hover {
  background: #c95c1d;  /* hover → "remove" affordance */
}
.add-to-cart-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

/* ---------- CART RAIL ------------------------------------------ */
.cart-rail {
  background: #fff;
  border-radius: 22px;
  padding: 1.5rem 1.35rem 1.25rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  position: sticky;
  top: 1.5rem;
}
.cart-rail-inner h3 {
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 .25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.cart-rail-inner h3 .count-badge {
  background: var(--tone-yellow);
  color: var(--ink);
  font-size: .78rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-weight: 600;
}
.cart-rail-inner .sub {
  font-size: .82rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.cart-rail-inner .empty-state {
  text-align: center;
  padding: 1.5rem .5rem;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: center;
}
.cart-rail-inner .empty-state i {
  font-size: 2rem;
  opacity: .5;
}

/* ---------- CART LINE ------------------------------------------ */
.cart-line {
  display: flex;
  gap: .65rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--hairline);
  align-items: flex-start;
}
.cart-line .ci-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  overflow: hidden;
  background: var(--cream-bg);
}
.cart-line .ci-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-line .ci-thumb.tone-mint     { background: var(--tone-mint); }
.cart-line .ci-thumb.tone-peach    { background: var(--tone-peach); }
.cart-line .ci-thumb.tone-lavender { background: var(--tone-lavender); }
.cart-line .ci-thumb.tone-yellow   { background: var(--tone-yellow); }
.cart-line .ci-meta { flex: 1; min-width: 0; }
.cart-line .ci-name {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 .15rem;
  line-height: 1.25;
}
.cart-line .ci-variant {
  font-size: .76rem;
  color: var(--ink-soft);
}
.cart-line .ci-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .35rem;
}
.cart-line .ci-qty { font-size: .78rem; color: var(--ink-soft); }
.cart-line .ci-price {
  font-weight: 600;
  color: var(--ink);
  font-size: .92rem;
}
.cart-line .ci-remove {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  font-size: .85rem;
  cursor: pointer;
  padding: .15rem;
  text-decoration: none;
}
.cart-line .ci-remove:hover { color: #c95c1d; }

/* Compact stepper for an editable cart line (global cart modal only — on
   /store the quantity is edited on the product card and the line stays text).
   Smaller than the product-card stepper so it sits on one row beside the
   price. Its +/− are links, not buttons, because the control is server-driven. */
.qty-stepper-sm { padding: 1px; }
.qty-stepper-sm a,
.qty-stepper-sm .is-limit {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  transition: background 150ms;
}
.qty-stepper-sm a:hover { background: #fff; }
/* At the min/max bound the control renders a span instead of a link. */
.qty-stepper-sm .is-limit { color: var(--hairline); cursor: default; }
.qty-stepper-sm .qty-val {
  min-width: 26px;
  text-align: center;
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink);
}

/* ---------- DISCOUNT INPUT ------------------------------------- */
.discount-row {
  margin: 1rem 0;
  display: flex;
  gap: .35rem;
}
.discount-row input {
  flex: 1;
  padding: .6rem .85rem;
  border: 1.5px solid var(--hairline);
  border-radius: 12px;
  background: var(--cream-bg);
  font-size: .85rem;
  color: var(--ink);
  font-family: inherit;
  direction: rtl;
  text-align: right;
}
.discount-row input:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand-primary);
}
.discount-row button {
  padding: .6rem 1rem;
  border: 1.5px solid var(--hairline);
  background: var(--cream-bg);
  border-radius: 12px;
  color: var(--ink);
  font-size: .85rem;
  cursor: pointer;
}

/* ---------- TOTALS --------------------------------------------- */
.cart-totals {
  margin: 1rem 0;
  font-size: .88rem;
}
.cart-totals .line {
  display: flex;
  justify-content: space-between;
  padding: .25rem 0;
  color: var(--ink-soft);
}
.cart-totals .line.total {
  color: var(--ink);
  font-weight: 600;
  font-size: 1.05rem;
  padding-top: .65rem;
  margin-top: .4rem;
  border-top: 1.5px solid var(--ink);
}
.cart-totals .line.discount-line { color: var(--tone-mint-deep, #2a9d70); }

/* ---------- CHECKOUT BUTTONS ----------------------------------- */
.store-pay-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: .85rem;
}
.btn-checkout {
  width: 100%;
  background: var(--ink);
  color: #fff;
  border: 0;
  padding: .9rem 1rem;
  border-radius: 14px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: background 200ms;
  text-decoration: none;
}
.btn-checkout:hover {
  background: var(--brand-primary);
  color: #fff;
  text-decoration: none;
}
.btn-checkout.btn-checkout-bit {
  background: #2196f3;
}
.btn-checkout.btn-checkout-bit:hover { background: #1976d2; }
.btn-checkout.btn-checkout-gpay,
.btn-checkout.btn-checkout-applepay {
  background: #000;
}
.btn-checkout.btn-checkout-gpay:hover,
.btn-checkout.btn-checkout-applepay:hover { background: #333; }
.store-pay-spinner {
  text-align: center;
  color: var(--ink-soft);
  font-size: .85rem;
  padding: .35rem 0;
}
.store-pay-spinner i { animation: spin 800ms linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- TRUST STRIP ---------------------------------------- */
.cart-trust {
  margin-top: .85rem;
  font-size: .75rem;
  color: var(--ink-soft);
  text-align: center;
  display: flex;
  gap: .85rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cart-trust span {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.cart-trust i { color: var(--tone-mint-deep, #2a9d70); }

/* ---------- GLOBAL CART FAB ----------------------------------- */
/* Rendered by public_friendly.html.erb on every page EXCEPT /store
   (where the cart rail is the primary cart UI). Always visible when
   the cart has items — desktop and mobile alike.

   Design rationale: previous solid colors were either invisible
   against the dark footer (`--ink`) or too saturated for the friendly
   palette (`--tone-lavender-deep`). New treatment is a white "card"
   FAB with a soft peach price pill — same visual language as the rest
   of the friendly UI (`friendly-card`, `f-card`, `friendly-help`):
     - White bg pops cleanly against the dark footer.
     - Strong layered shadow gives the floating-card lift on cream too.
     - The peach pill containing the price provides the "store/cart"
       semantic accent (the store tile on the home page itself uses a
       lavender illustration zone with the same shape language).
   Now a <button> (not <a>) because it opens a modal — keyboard /
   screen-reader focus styles inherit BS5's button focus. */
.global-cart-fab {
  display: flex;
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  left: 1.25rem;
  z-index: 1040;
  max-width: 460px;
  margin: 0 auto;
  background: #fff;
  color: var(--ink);
  padding: .55rem .65rem .55rem 1.1rem;
  /* Brand-primary outline ties the floating chip into the friendly
     design system (--brand-primary = #0095e8 is the same color used
     for primary CTAs and focused inputs across the portal). The
     border also defines a crisp edge that survives both the cream
     page and the dark footer. */
  border: 2px solid var(--brand-primary);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(0, 149, 232, 0.18),
              0 4px 10px rgba(0, 0, 0, 0.07);
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  cursor: pointer;
  transition: transform 200ms, box-shadow 200ms, background 200ms;
  font-family: inherit;
  font-size: inherit;
}
.global-cart-fab:hover,
.global-cart-fab:focus-visible {
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border-color: var(--brand-primary);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 149, 232, 0.28),
              0 6px 14px rgba(0, 0, 0, 0.09);
  outline: none;
}
.global-cart-fab .fab-text {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 500;
}
/* Cart glyph as a soft-peach chip — mirrors the price pill at the
   other end of the bar for visual balance, and the fixed flex box
   guarantees the bag sits dead-centre with the "פריט בסל" label
   (a bare inline glyph rode high against the Hebrew text). */
.global-cart-fab .fab-text i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--tone-peach);
  color: var(--tone-peach-deep);
  font-size: 1.1rem;
  line-height: 1;
}
.global-cart-fab strong { color: var(--ink); font-weight: 600; }
/* Price segment — a soft peach pill nested inside the white card.
   Anchors the eye to the dollar amount and brings warmth to an
   otherwise all-white surface. */
.global-cart-fab .total {
  display: inline-flex;
  align-items: center;
  background: var(--tone-peach);
  color: var(--tone-peach-deep);
  font-weight: 600;
  padding: .45rem .85rem;
  border-radius: 12px;
  line-height: 1;
}
.global-cart-fab .total .friendly-price .currency {
  color: var(--tone-peach-deep);
  opacity: .85;
}

/* ---------- GLOBAL CART MODAL ----------------------------------
   Sibling to .store-cart-modal, but lighter — preview-only, no
   inline checkout. Used by the FAB on non-/store pages. */
.global-cart-modal .modal-content {
  border-radius: 20px;
  border: 0;
  overflow: hidden;
}
.global-cart-modal .modal-header {
  background: var(--cream-bg);
  border-bottom: 1px solid var(--hairline);
  padding: 1rem 1.25rem;
}
.global-cart-modal .modal-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.global-cart-modal .modal-title i {
  color: var(--tone-peach-deep);
}
.global-cart-modal .modal-body {
  padding: 1rem 1.25rem 1.25rem;
}
.global-cart-modal .cart-rail-inner {
  /* The rail partial is designed for an aside with its own padding /
     shadow. Inside the modal we let the modal-body provide spacing. */
  padding: 0;
}
.global-cart-modal .cart-rail-inner > h3 {
  /* Header already provided by the modal — drop the duplicate "הסל
     שלכם" inside the rail body. */
  display: none;
}
.global-cart-modal .cart-rail-inner > .sub {
  margin-top: 0;
}
.global-cart-modal .modal-footer {
  border-top: 1px solid var(--hairline);
  background: var(--cream-bg);
  padding: .85rem 1.25rem;
  gap: .6rem;
}
.global-cart-modal .global-cart-modal-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.global-cart-modal .global-cart-modal-footer .f-pill {
  flex: 1;
  justify-content: center;
}
@media (max-width: 575.98px) {
  .global-cart-modal .global-cart-modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .global-cart-modal .global-cart-modal-footer .f-pill {
    width: 100%;
  }
}

/* ---------- GLOBAL CART MODAL — STEP 2 (checkout form) ------------
   When the visitor clicks "המשך לתשלום" inside the global cart modal,
   the body is replaced with `_global_cart_checkout_body.html.erb` —
   contact-details form + payment buttons. Field styling mirrors the
   #store-contact-modal on /store so the visual treatment is
   consistent (rounded inputs, brand-primary focus ring). %>
----------------------------------------------------------------------- */
.global-cart-modal .checkout-step { padding: 0; }

.global-cart-modal .checkout-back-row {
  margin: 0 0 .85rem;
}
.global-cart-modal .checkout-back-btn {
  background: transparent;
  border: 0;
  padding: .25rem .25rem .25rem 0;
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  text-decoration: none;
}
.global-cart-modal .checkout-back-btn:hover {
  color: var(--brand-primary);
}
.global-cart-modal .checkout-intro {
  font-size: .88rem;
  margin-bottom: 1rem;
}
.global-cart-modal .checkout-required-hint {
  font-size: .82em;
  color: var(--ink-soft);
}
.global-cart-modal .checkout-required-hint em {
  color: var(--brand-primary);
  font-style: normal;
  font-weight: 600;
}

/* Match #store-contact-modal field styling so step 2 feels like the
   same UI surface (the contact-details_form partial emits BS3-era
   form-horizontal markup; these selectors re-skin it inside BS5). */
.global-cart-modal .form-group { margin-bottom: .9rem; }
.global-cart-modal label.control-label {
  font-weight: 500;
  color: var(--ink);
  font-size: .9rem;
}
.global-cart-modal input.form-control,
.global-cart-modal select.form-control,
.global-cart-modal textarea.form-control {
  border-radius: 10px;
  border: 1.5px solid var(--hairline);
  padding: .55rem .85rem;
  font-size: .9rem;
}
.global-cart-modal input.form-control:focus,
.global-cart-modal select.form-control:focus,
.global-cart-modal textarea.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .15rem rgba(0, 149, 232, .12);
  outline: none;
}
.global-cart-modal .form-check { margin-bottom: .5rem; }
.global-cart-modal .form-check-label a { color: var(--brand-primary); }
.global-cart-modal .store-modal-actions { margin-top: 1.25rem; }

/* ---------- STORE MODALS --------------------------------------- */
.store-cart-modal .modal-body { padding: 1rem 1.25rem 1.25rem; }
.store-cart-modal .cart-rail-inner { padding: 0; }
.store-cart-modal .cart-rail { box-shadow: none; padding: 0; }

.store-contact-modal .modal-body {
  padding: 1.5rem 1.75rem 1.75rem;
}
.store-contact-modal .form-group { margin-bottom: .9rem; }
.store-contact-modal label.control-label { font-weight: 500; color: var(--ink); font-size: .9rem; }
.store-contact-modal input.form-control,
.store-contact-modal select.form-control,
.store-contact-modal textarea.form-control {
  border-radius: 10px;
  border: 1.5px solid var(--hairline);
  padding: .55rem .85rem;
  font-size: .9rem;
}
.store-contact-modal input.form-control:focus,
.store-contact-modal select.form-control:focus,
.store-contact-modal textarea.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .15rem rgba(0, 149, 232, .12);
  outline: none;
}
/* Desktop: wider dialog + two columns of fields so the buyer form fits without
   vertical scrolling. Fields are the form's direct .form-group children;
   everything else (terms checkboxes, actions, hidden inputs) spans both. */
@media (min-width: 992px) {
  .store-contact-modal .modal-dialog { max-width: 880px; }
  .store-contact-modal form.store-payment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    align-items: start;
  }
  .store-contact-modal form.store-payment-form > * { grid-column: 1 / -1; }
  .store-contact-modal form.store-payment-form > .form-group { grid-column: auto; }
  /* label above input, full column width (BS3 col-xs-* sizing is meaningless here) */
  .store-contact-modal form.store-payment-form .form-group [class*="col-"] {
    width: 100%;
    max-width: 100%;
    float: none;
    padding-inline: 0;
  }
}
/* Mandatory-field marker: the shared helpers emit an empty
   <span class="symbol required"> that only the legacy BS3 theme styled. */
.store-contact-modal label .symbol.required::after {
  content: "*";
  color: var(--brand-primary, #0095e8);
  font-weight: 700;
  margin-inline-start: .15rem;
}
/* Inline validation (store-contact-modal) */
.store-contact-modal .form-control.is-invalid,
.store-contact-modal .form-select.is-invalid { border-color: #d64545; }
.store-contact-modal .store-field-error {
  color: #d64545;
  font-size: .8rem;
  margin-top: .25rem;
}
.store-contact-modal .form-check { margin-bottom: .5rem; }
.store-contact-modal .form-check-label a { color: var(--brand-primary); }
.store-modal-actions { margin-top: 1.25rem; }

/* ---------- PAYMENT FRAME (modal-mounted) ---------------------
   The clearing-co iframe used to render below the page footer, forcing a long
   scroll to reach it. It now mounts inside a modal — either #store-payment-modal
   or the contact modal's payment slot. Both use this same fragment. */
.store-payment-modal .modal-body { padding: 1.25rem 1.25rem 0; }
.store-payment-modal .modal-footer { border-top: 1.5px solid var(--hairline); }

.store-payment-frame {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}
.store-payment-fallback {
  margin: .75rem 0 0;
  text-align: center;
  font-size: .85rem;
  color: var(--ink-soft);
}
.store-payment-fallback a { color: var(--brand-primary); }

/* Phones: the gateway's own form is taller than the 450px desktop box and
   would clip inside a narrow modal, so grow with the viewport instead. */
@media (max-width: 575.98px) {
  .store-payment-frame { height: 70vh; min-height: 420px; }
  .store-payment-modal .modal-body { padding: 1rem .75rem 0; }
}

/* ---------- MOBILE -------------------------------------------- */
@media (max-width: 991.98px) {
  .store-layout { grid-template-columns: 1fr; }
  /* On mobile the rail stacks below the products. Drop sticky so it
     scrolls normally with the page (sticky has nothing useful to do
     on a single-column layout). */
  .cart-rail { position: static; align-self: auto; }
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }
}
@media (max-width: 575.98px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-image { height: 160px; }
  /* Tighten the lavender strip on phones — matches .week-nav's mobile
     padding (.85rem 1rem) so all three tone-strips have consistent
     vertical weight on narrow viewports. */
  .cat-pill-row { gap: .35rem; padding: .85rem 1rem; }
  .cat-pill { padding: .45rem .85rem; font-size: .82rem; }
  .product-foot { flex-wrap: wrap; gap: .65rem; }
}

/* ============================================================
   FRIENDLY LOGIN MODAL (Phase 6)
   - Modal shell + two-state form body (identifier / family-select)
   - Logged-in header chip + dropdown (family swap, my-events, logout)
   ============================================================ */

/* ---------- MODAL SHELL --------------------------------------- */
.friendly-login-modal .modal-content {
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}
.friendly-login-modal .modal-header {
  background: var(--cream-bg);
  border-bottom: 1px solid var(--hairline);
  padding: 1.1rem 1.5rem;
}
.friendly-login-modal .modal-title {
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
}
.friendly-login-modal .modal-body {
  padding: 1.5rem 1.75rem 1.75rem;
}

/* ---------- LOGIN FORM ---------------------------------------- */
.friendly-login-lede {
  font-size: .95rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  line-height: 1.4;
}

.friendly-login-form .f-field { margin-bottom: 1rem; }
.friendly-login-form .f-field label {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 .35rem;
}
.friendly-login-form .f-control {
  width: 100%;
  padding: .65rem .9rem;
  font-size: .95rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--cream-bg);
  border: 1.5px solid var(--hairline);
  border-radius: 12px;
  transition: border-color 150ms, background 150ms;
}
/* Identifier inputs: LTR typing (email / digits), but aligned to the start of
   the RTL form (right) so the Hebrew placeholders sit on the right. */
.friendly-login-form input.f-control[dir="ltr"] {
  direction: ltr;
  text-align: right;
}
.friendly-login-form .f-control:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .15rem rgba(0, 149, 232, .12);
}

/* Errors block */
.friendly-login-errors {
  background: #fef0eb;
  border: 1px solid #f5c2b0;
  color: #c95c1d;
  border-radius: 12px;
  padding: .65rem .85rem;
  margin: 0 0 1rem;
  font-size: .88rem;
}
.friendly-login-errors p { margin: 0; padding: .15rem 0; line-height: 1.4; }
.friendly-login-errors i { margin-left: .25rem; }

/* Big submit button (matches checkout button style) */
.btn-friendly-login-submit {
  width: 100%;
  background: var(--ink);
  color: #fff;
  border: 0;
  padding: .9rem 1rem;
  border-radius: 14px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: background 200ms;
  margin-top: .5rem;
}
.btn-friendly-login-submit:hover {
  background: var(--brand-primary);
  color: #fff;
}
/* Locked state while the login request is in flight (set by the modal's
   submit handler). Prevents a second submit and reads clearly as "busy". */
.btn-friendly-login-submit:disabled,
.btn-friendly-login-submit.is-loading {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-friendly-login-submit:disabled:hover,
.btn-friendly-login-submit.is-loading:hover {
  background: var(--ink);
  color: #fff;
}

/* Sign-up CTA at the bottom of State A */
.friendly-login-bottom {
  text-align: center;
  font-size: .9rem;
  color: var(--ink-soft);
  margin: 1.25rem 0 0;
}
.friendly-login-signup-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid var(--tone-yellow);
}
.friendly-login-signup-link:hover {
  color: var(--brand-primary);
  text-decoration: none;
}

/* Connecting indicator during AJAX submit — prominent + animated.
   Toggled to display:flex by the modal's submit handler. */
.friendly-login-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: 1rem;
  padding: .7rem 1rem;
  background: var(--cream-bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  color: var(--brand-primary);
  font-size: 1rem;
  font-weight: 600;
  animation: friendlyLoginPulse 1.4s ease-in-out infinite;
}
/* Spinning ring — the visible "working" cue, independent of the ki glyph. */
.friendly-login-spinner::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  border: 2.5px solid rgba(var(--brand-primary-rgb), .25);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  flex-shrink: 0;
}
/* The old inline glyph is replaced by the ::before ring. */
.friendly-login-spinner i { display: none; }
@keyframes friendlyLoginPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .6; }
}

/* ---------- INSTRUCTOR-LOGIN MODAL — remember-me + forgot row ----------
   The instructor variant of the friendly login modal carries a
   "remember me" checkbox and a "forgot password" pill side-by-side
   on the same row, just above the submit button. Students don't
   have this row (they identify by email/phone/ID and don't have
   their own password). */
.friendly-login-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin: -.25rem 0 1rem;
}
.friendly-checkbox {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.friendly-checkbox input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--brand-primary);
  margin: 0;
  cursor: pointer;
}
.friendly-login-forgot-link {
  font-size: .85rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dashed var(--hairline);
  transition: color 150ms, border-color 150ms;
}
.friendly-login-forgot-link:hover {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

/* Instructor-modal title — keep icon + text aligned in a single
   inline-flex line. Without this the BI/Keenicon glyph drops below
   the text in some BS5 builds because .modal-title is block by
   default. */
.friendly-instructor-modal .modal-title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.friendly-instructor-modal .modal-title i { font-size: 1.05rem; }

/* ---------- LOGGED-IN HEADER CHIP ----------------------------- */
.user-chip { position: relative; }
.user-chip .user-chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.user-chip .user-chip-toggle::after {
  margin-right: .3rem;
  margin-left: 0;
}
.user-chip .user-chip-toggle i { font-size: 1.05rem; }

.friendly-user-menu {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
  /* Was `padding: .55rem` — that left-and-right padding band created
     a ~9px-wide hover dead-zone running the full height of the menu
     (the visible white area between the menu's outer edge and the
     items themselves). The items hit-test on their own bounding box,
     so a mouse over the band saw nothing react.
     Zero outer padding + overflow:hidden = items extend to the
     menu's rounded edge and inherit the clip. */
  padding: .25rem 0;
  overflow: hidden;
  min-width: 220px;
  background: #fff;
  margin-top: .55rem;
}
.friendly-user-menu .dropdown-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .55rem;
  /* Slightly more horizontal padding to compensate for the removed
     menu padding — keeps text comfortably inset from the menu edge. */
  padding: .6rem 1rem;
  /* No item border-radius: lets the hover background fill the full
     row width edge-to-edge. The visible "pill" effect at the menu's
     outer corners is preserved by the menu's own border-radius +
     overflow:hidden combo (item corners are clipped to match the
     menu's). */
  border-radius: 0;
  font-size: .9rem;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
/* Hover originally used `background: var(--cream-bg)` (#fdf9f3) —
   so close to the menu's white background it was visually invisible.
   Then `var(--tone-mint)` (#d5f5e8) — same issue: a screenshot user
   reported "still doesn't work". The likely culprits are two
   independent: (1) Bootstrap-CDN's own `.dropdown-item:focus,:hover`
   rule sets `background-color` via a CSS-var which can win in some
   cascade orderings, and (2) browsers caching the previous compiled
   CSS asset. Defending against both:
     • Explicit `background-color` (matches BS's property exactly so
       the cascade comparison is property-by-property, not shorthand-
       vs-longhand) PLUS `!important` to remove any specificity doubt.
     • Switch to a tinted brand-primary so the hover is unmistakable
       at a glance — same blue as the icons, low-alpha so it stays
       soft enough for the friendly palette.
     • Active/pressed state gets a slightly stronger tint so click
       feedback is also visible. */
.friendly-user-menu .dropdown-item:hover,
.friendly-user-menu .dropdown-item:focus,
.friendly-user-menu .dropdown-item:focus-visible {
  background-color: rgba(0, 149, 232, 0.10) !important;
  color: var(--brand-primary) !important;
  text-decoration: none;
}
.friendly-user-menu .dropdown-item:active,
.friendly-user-menu .dropdown-item.active {
  background-color: rgba(0, 149, 232, 0.18) !important;
  color: var(--brand-primary) !important;
}
.friendly-user-menu .dropdown-item:hover i,
.friendly-user-menu .dropdown-item:focus i,
.friendly-user-menu .dropdown-item:focus-visible i {
  color: var(--brand-primary);
}
.friendly-user-menu .dropdown-item i {
  color: var(--brand-primary);
  font-size: 1rem;
  width: 1.1em;
  text-align: center;
  transition: color 150ms;
}
.friendly-user-menu .dropdown-divider {
  /* Was `margin: .35rem .25rem` — the vertical .35rem on each side
     created an 11px-tall hover dead-zone between items where the
     mouse fell on the divider <li> and neither neighbor reacted.
     Zero margin keeps the dividing 1px line as the only gap; items
     now hit-test right up to it. */
  margin: 0;
  border-top-color: var(--hairline);
}

/* ---- User profile header --------------------------------------
   The top "card" of the dropdown. Avatar circle on the right (RTL
   natural order — flex's first child lands at the inline-start,
   which is the right side under dir="rtl"), name + identifier
   lines stacked on the left. The whole block is non-interactive
   (cursor: default, no hover) but lets users select/copy the
   text since the values are useful to read off. Slightly wider
   menu (260px) to accommodate the avatar without truncating
   short Hebrew names. */
.friendly-user-menu .user-profile-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  cursor: default;
  user-select: text;
}
.friendly-user-menu .user-profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tone-lavender);
  color: var(--tone-lavender-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Instructor avatar variant — mint tone instead of lavender so the
   chip reads differently from the student chip at a glance (both
   chips can appear on the same admin's screen when they cross
   between the customer-facing and instructor-facing portals). */
.friendly-user-menu .user-profile-avatar.is-instructor {
  background: var(--tone-mint);
  color: var(--tone-mint-deep);
}
.friendly-user-menu .user-profile-avatar i {
  font-size: 1.35rem;
  line-height: 1;
}
.friendly-user-menu .user-profile-meta {
  min-width: 0;
  flex: 1;
}
.friendly-user-menu .user-profile-name {
  font-weight: 600;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.2;
  margin-bottom: .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friendly-user-menu .user-profile-line {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--ink-soft);
  line-height: 1.45;
  min-width: 0;
}
.friendly-user-menu .user-profile-line i {
  font-size: .85rem;
  color: var(--brand-primary);
  opacity: .7;
  flex-shrink: 0;
}
.friendly-user-menu .user-profile-line .user-info-val {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: .01em;
}
/* Bump the menu width — 220px was tight once we added the avatar
   + name + multi-line meta. 260px fits a typical "first last" name
   plus an average email without truncation. */
.friendly-user-menu { min-width: 260px; }

/* ---- Destructive "logout" row — red text only -------------------
   No tinted background at idle OR hover (per design request) —
   the red text+icon alone signals the destructive nature. Hover
   still needs SOME feedback so the row reads as clickable; we use
   a neutral subtle gray wash (matches generic "list item" hover
   patterns) and deepen the red on hover.
   `!important` is required to override the page-level brand-primary
   blue hover rule defined above for `.dropdown-item:hover` — without
   it the row would turn blue on hover and lose its danger identity. */
.friendly-user-menu .dropdown-item.dropdown-item-danger {
  background-color: transparent;
  color: #b03540;
}
.friendly-user-menu .dropdown-item.dropdown-item-danger i {
  color: #c43d3d;
}
.friendly-user-menu .dropdown-item.dropdown-item-danger:hover,
.friendly-user-menu .dropdown-item.dropdown-item-danger:focus,
.friendly-user-menu .dropdown-item.dropdown-item-danger:focus-visible {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: #a01a26 !important;
}
.friendly-user-menu .dropdown-item.dropdown-item-danger:hover i,
.friendly-user-menu .dropdown-item.dropdown-item-danger:focus i,
.friendly-user-menu .dropdown-item.dropdown-item-danger:focus-visible i {
  color: #a01a26;
}

/* Mobile: keep the modal padding comfortable */
@media (max-width: 575.98px) {
  .friendly-login-modal .modal-body { padding: 1.25rem 1.25rem 1.5rem; }
  .friendly-login-modal .modal-content { border-radius: 18px; }
}

/* ============================================================
   5. MY EVENTS — "האימונים שלי" (public_contact_events)
   Extracted from the view's inline <style> (no inline styles rule).
   Shared class names (.event-date-badge / .event-meta / .date-time /
   .event-status-pill) are scoped under .my-event-card so they do NOT
   collide with instructor_events' own .instructor-event-card rules.
   ============================================================ */

/* Page width — narrower than the default container (was an inline
   style="max-width"). Two classes beat Bootstrap's .container rule. */
.container.my-events-shell { max-width: 880px; }

/* ---------- empty state ---------------------------------------- */
.my-events-empty { text-align: center; padding: 2.5rem 1.5rem; }
.my-events-empty i {
  font-size: 2.75rem;
  color: var(--tone-mint-deep);
  display: block;
  margin-bottom: .85rem;
}
.my-events-empty h3 {
  font-weight: 600;
  color: var(--ink);
  font-size: 1.15rem;
  margin: 0 0 .35rem;
}
.my-events-empty p { color: var(--ink-soft); margin: 0 0 1.25rem; }

/* ---------- section header (upcoming) -------------------------- */
.my-events-section-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: .02em;
  margin: 1.5rem .25rem .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.my-events-section-title i { color: var(--brand-primary); font-size: 1rem; }
.my-events-section-title .count {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: .82rem;
  background: #fff;
  border: 1px solid var(--hairline);
  padding: .12rem .55rem;
  border-radius: 999px;
}

/* ---------- labeled divider (line — label — line) -------------- */
/* The future/past separator the user asked for: a hairline rule with
   a centered "past" label sitting on it. */
.my-events-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.85rem 0 .95rem;
}
.my-events-divider::before,
.my-events-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--hairline);
}
.my-events-divider-label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.my-events-divider-label i { color: var(--brand-primary); font-size: 1rem; }
.my-events-divider-label .count {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: .8rem;
  background: #fff;
  border: 1px solid var(--hairline);
  padding: .1rem .5rem;
  border-radius: 999px;
}

.my-events-list { display: flex; flex-direction: column; gap: .65rem; }

/* ---------- event card ----------------------------------------- */
.my-event-card {
  display: grid;
  grid-template-columns: 76px 1fr auto; /* wider date column so the time range fits on one line */
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: .85rem 1rem;
  align-items: center;
  transition: box-shadow 180ms, transform 180ms, border-color 180ms;
}
/* Past rows: a cool off-white that is distinct from BOTH the white
   upcoming cards AND the warm cream page background (var(--cream-bg)),
   so every row reads as a card and never blends into the screen. */
.my-event-card.is-past { background: #eef1f6; }
.my-event-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 8px 24px rgba(0, 149, 232, 0.08);
  transform: translateY(-1px);
}
.my-event-card.is-past:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transform: none;
  border-color: var(--hairline);
}

/* date badge */
.my-event-card .event-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: .4rem .25rem .35rem;
  line-height: 1;
  min-width: 66px;
}
.my-event-card.is-past .event-date-badge { background: #fff; }
.my-event-card .event-date-badge .date-month {
  font-size: .68rem;
  font-weight: 600;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.my-event-card .event-date-badge .date-day {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin: .15rem 0 .2rem;
}
/* Time range on a single line — tabular figures + nowrap keep
   "20:00-21:00" from wrapping inside the narrow badge. */
.my-event-card .event-date-badge .date-time {
  font-size: .62rem;
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
/* Force LTR on the time range so start/end never reorder inside the RTL
   context (mirrors the instructor card's bdi rule). */
.my-event-card .event-date-badge .date-time bdi {
  unicode-bidi: isolate;
  direction: ltr;
}

/* meta column */
.my-event-card .event-meta { min-width: 0; }
.my-event-card .event-meta .event-group-line {
  font-size: .78rem;
  color: var(--ink-soft);
  margin-bottom: .15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-event-card .event-meta .event-name-line {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: .25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-event-card .event-meta .event-details-line {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  font-size: .78rem;
  color: var(--ink-soft);
}
.my-event-card .event-meta .event-details-line span,
.my-event-card .event-meta .event-details-line a {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.my-event-card .event-meta .event-details-line i {
  color: var(--brand-primary);
  opacity: .8;
  font-size: .85rem;
}
.my-event-card .event-meta .event-details-line a {
  color: var(--brand-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.my-event-card .event-meta .event-details-line a:hover {
  border-bottom-color: var(--brand-primary);
}

/* status pill — color comes inline from the i18n color list */
.my-event-card .event-status-pill {
  display: inline-flex;
  align-items: center;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
}

/* pagination (past list only) */
.my-events-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
}
.my-events-pagination .pagination {
  display: flex;
  gap: .25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.my-events-pagination .pagination li a,
.my-events-pagination .pagination li span {
  display: inline-flex;
  align-items: center;
  padding: .4rem .7rem;
  border-radius: 8px;
  font-size: .85rem;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid var(--hairline);
  background: #fff;
}
.my-events-pagination .pagination li.active a,
.my-events-pagination .pagination li.active span {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}
.my-events-pagination .dataTables_info {
  text-align: center;
  color: var(--ink-soft);
  font-size: .85rem;
  margin-top: .75rem;
}

/* back to home — extra breathing space + room for the global cart FAB */
.my-events-back {
  text-align: center;
  margin-top: 1.75rem;
  padding-bottom: 4rem;
}

/* mobile */
@media (max-width: 575.98px) {
  .my-event-card { grid-template-columns: 64px 1fr; gap: .75rem; }
  .my-event-card .event-status-pill {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: .25rem;
  }
  .my-event-card .event-date-badge { min-width: 58px; padding: .35rem .15rem; }
  .my-event-card .event-date-badge .date-day { font-size: 1.3rem; }
  .my-event-card .event-date-badge .date-time { font-size: .58rem; }
}

/* ============================================================
   Instructor calendar — status-colored chips, all-day lane,
   and the List/Calendar view switch. (Consumed by the
   instructor_events calendar view + friendly_calendar.js.)

   Class placement per render path (verified in friendly_calendar.js):
     - week hour chip  → status class on .cal-event anchor (chipHtml baseClass)
     - all-day chip    → status class on .cal-event anchor (same chipHtml path)
     - month chip      → status class on .month-event anchor
     - day-view chip   → status class on .day-event-body div (NOT on .day-event)
   ============================================================ */

/* -- Canceled: struck-through + dimmed.
   Border tint (#b20000) is applied inline by friendly_calendar.js colorFor;
   CSS only adds the visual affordance (strikethrough, opacity, cursor). --- */
.cal-event.is-canceled,
.month-event.is-canceled,
.day-event-body.is-canceled {
  text-decoration: line-through;
  opacity: .6;
  cursor: default;
}

/* -- needs-summary / summarized: border tinted via CSS (JS passes no inline
   color for these, so !important beats the inline fallback style). ---------- */
.cal-event.is-needs-summary,
.month-event.is-needs-summary {
  border-color: var(--tone-peach-deep) !important;
}
.day-event-body.is-needs-summary {
  border-right-color: var(--tone-peach-deep) !important;
}

.cal-event.is-summarized,
.month-event.is-summarized {
  border-color: var(--tone-mint-deep) !important;
}
.day-event-body.is-summarized {
  border-right-color: var(--tone-mint-deep) !important;
}

/* -- .is-upcoming intentionally has no override — keeps the category/default
   border color set by the org's activity color. ---------------------------- */

/* -- Week-grid all-day lane (full-day events pinned above the hour rows). -- */
.week-grid .allday-label { font-weight: 600; color: var(--ink-soft); align-self: center; }
.week-grid .allday-cell  { padding: .25rem; display: flex; flex-direction: column; gap: .25rem; }
.week-grid .allday-event { display: block; }

/* -- List <-> Calendar toggle (mirrors the future/past mode-toggle look). -- */
/* Centered on its own row, sitting above the (centered) month title. */
.view-switch-center {
  display: flex;
  justify-content: center;
  margin-bottom: .75rem;
}
.view-switch {
  display: inline-flex;
  gap: 2px;
  background: var(--cream-bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px;
}
.view-switch-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: .85rem;
  line-height: 1;
  text-decoration: none;
  color: var(--ink-soft);
  background: transparent;
  white-space: nowrap;
  transition: background-color 180ms, color 180ms, box-shadow 180ms;
}
.view-switch-pill.active {
  font-weight: 600;
  background: #fff;
  color: var(--brand-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.view-switch-pill:hover { text-decoration: none; color: var(--ink); }

/* Instructor calendar nav: drop the negative top-margin (that tuck-up is for
   the schedule page's hero handoff; here the centered view-switch sits above
   it, so the strip must not pull up and overlap the toggle). */
.week-nav.week-nav--instructor { margin-top: 0; }

/* -- Calendar feed-load error message. ------------------------------------ */
.calendar-error { text-align: center; color: #b20000; padding: 1rem; }


/* -- Schedule availability states (self_services/schedule ONLY) ----------
   Scoped to .student-schedule (the schedule page's #schedule-body — the
   instructor calendar reuses that id, so we key on the class instead).
   Classes come from friendly_calendar.js eventStateClasses() off the feed's
   is_past / reg_opens_at / is_full fields.
     past     → flat grey chip + clock badge
     locked   → registration window not open yet: dashed border + lock badge
     full     → "מלא" tag on the chip's top edge (replaces the people badge) */
.student-schedule .cal-event.is-past,
.student-schedule .month-event.is-past {
  border-color: #d9d4cc !important;
  background: #faf8f5;
  color: var(--ink-soft);
}
.student-schedule .cal-event.is-past .ev-title { font-weight: 500; }
.student-schedule .cal-event.is-past:hover,
.student-schedule .month-event.is-past:hover { transform: none; box-shadow: none; }

.student-schedule .cal-event.is-locked,
.student-schedule .month-event.is-locked {
  border-style: dashed;
  background: #fcfbff;
  color: var(--ink-soft);
}

/* Corner badges — same geometry as the shared registered/full badge. */
.student-schedule .cal-event.is-past:not(.is-registered)::after,
.student-schedule .month-event.is-past:not(.is-registered)::after,
.student-schedule .cal-event.is-locked:not(.is-registered)::after,
.student-schedule .month-event.is-locked:not(.is-registered)::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
  font-family: "bootstrap-icons";
  font-size: .62rem;
  line-height: 1;
  z-index: 2;
}
/* Keep the chip text clear of the badge (left = end side in RTL). */
.student-schedule .cal-event.is-past:not(.is-registered),
.student-schedule .month-event.is-past:not(.is-registered),
.student-schedule .cal-event.is-locked:not(.is-registered),
.student-schedule .month-event.is-locked:not(.is-registered) { padding-left: 1.3rem; }
.student-schedule .cal-event.is-past:not(.is-registered)::after,
.student-schedule .month-event.is-past:not(.is-registered)::after {
  content: "\f292"; /* bi-clock-history */
  color: #a9a39a;
}
.student-schedule .cal-event.is-locked:not(.is-registered)::after,
.student-schedule .month-event.is-locked:not(.is-registered)::after {
  content: "\f47b"; /* bi-lock */
  color: var(--tone-lavender-deep);
}

/* Full: "מלא" tag replaces the shared peach people badge on this page. */
.student-schedule .cal-event.is-full:not(.is-registered):not(.is-past)::after,
.student-schedule .month-event.is-full:not(.is-registered):not(.is-past)::after { content: none; }
.student-schedule .ev-full-tag {
  position: absolute;
  top: -7px;
  left: 6px;
  z-index: 2;
  font-size: .6rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 0 .4rem;
  border-radius: 6px;
  background: #8a3a3a;
  color: #fff;
  letter-spacing: .02em;
  pointer-events: none;
}

/* Mobile day view — no corner badges there, just de-emphasis. */
.student-schedule .day-event-body.is-past   { opacity: .55; }
.student-schedule .day-event-body.is-locked { opacity: .7; border-style: dashed; }