/* The personal trainers' page (personal-trainers.html), in the homepage's language (31 Oct 2026). Linked after site.css.
   Plural voice, a trainer working alone or with a few clients. Built from the shared inner-page kit (.ih, .ih-stage.dots, .st-card)
   and the homepage's own pieces: the trainee app's .ta-* on a .phone, the calendar's .cl-* and the class popup (in .trcal, not .cl,
   so site.js's calendar story never picks it up), the כרטסת's .fl-* (in .trm, not .fl, for the same reason), .price-card, .faq3,
   .closing2. Every mockup holds its finished state. Pieces copied from pilates.css and automations.css are renamed tr-. */

/* ---------- Hero ---------- */
.tr-hero .ih-sub { text-wrap: balance; }
@media (max-width: 760px) {
  .tr-hero .ih-sub { margin-top: 16px; font-size: 18px; }
  .tr-hero .actions { width: 100%; flex-direction: column; margin-top: 22px; }
  .tr-hero .btn { width: 100%; min-height: 56px; font-size: 17.5px; }
  .tr-hero .ih-note { text-wrap: balance; }
}

/* The stage: no photo fits a trainer working alone, so it's product-led: the trainee app on a phone in the middle of a light dot grid,
   and four frosted cards over its edges: the trainer's day and the reminder on the start side, the booking link and a payment on the other */
.tr-stage { --pw: 262px; --cw: 300px; --ov: 34px; height: 640px; }
.tr-phone { position: absolute; z-index: 2; top: 46px; left: 50%; width: var(--pw); margin-left: calc(var(--pw) / -2); }
.tr-phone .phone { width: 100%; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .5); }
/* the punch card: ten sessions, four left (the app's own dots, as in the homepage's 4-class month) */
.tr-dots10 { gap: 2px; }
.tr-stage .st-card { width: var(--cw); }
.tr-day, .tr-rem { inset-inline-start: calc(50% - var(--pw) / 2 - var(--cw) + var(--ov)); }
.tr-link, .tr-pay { inset-inline-end: calc(50% - var(--pw) / 2 - var(--cw) + var(--ov)); }
.tr-day { top: 34px; }
.tr-rem { bottom: 40px; }
.tr-link { top: 72px; }
.tr-pay { bottom: 58px; }
.tr-stage .st-card:not(.tr-day) { display: grid; gap: 10px; }

/* a card's channel as the homepage's round badge: the link black, the app notification blue, the payment green */
.tr-ch { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; }
.st-card .tr-ch .ic { width: 13px; height: 13px; stroke-width: 2.3; }
.c-link { --c: #000; }
.c-push { --c: #3B87F7; }
.c-pay { --c: #16A34A; }

/* the trainer's day: a row a session, a coloured edge by type as in the product's calendar (personal teal, couple pink, trial blue) */
.tr-day-l { display: grid; gap: 6px; margin-top: 12px; }
.tr-day-l li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 46px; padding: 6px 10px; border-radius: 12px;
  background: var(--k-soft); box-shadow: inset 3px 0 0 var(--k); }
.tr-day-l li > b { font-family: "Wix Madefor Text", var(--sans); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-day-l span { display: grid; min-width: 0; line-height: 1.25; }
.tr-day-l span b { overflow: hidden; font-size: 14.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.tr-day-l span small { font-size: 12.5px; color: var(--k-ink); }
.tr-day-l em { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #fff; color: #3A3A3F; font-size: 11.5px; font-weight: 700; font-style: normal; white-space: nowrap; }
.tr-day-l em.ok { background: #E3F8EA; color: #1A7F4B; }
.tr-day-l em.new { background: #E8F1FE; color: #1F5FC8; }
.tr-day-l em .ic { width: 11px; height: 11px; color: #3B87F7; stroke-width: 3.4; }
.k-solo { --k: #20A39E; --k-soft: #E6F6F7; --k-ink: #126E6A; }
.k-duo { --k: #E6004F; --k-soft: #FCEDF2; --k-ink: #B0003C; }
.k-trial { --k: #3B87F7; --k-soft: #EBF2FC; --k-ink: #2050B0; }
.tr-day-l .k-free { background: none; box-shadow: inset 0 0 0 1.5px #C9C9CF; border: 0; }
.tr-day-l .k-free span b { color: var(--ink-2); }
.tr-day-l .k-free span small { color: var(--ink-2); }
/* (an RTL row: the coloured edge sits on the start side) */
[dir="rtl"] .tr-day-l li { box-shadow: inset -3px 0 0 var(--k); }
[dir="rtl"] .tr-day-l .k-free { box-shadow: inset 0 0 0 1.5px #C9C9CF; }

/* the booking link: tomorrow's open hours as chips, the one just booked in black, and who booked it */
.tr-k { font-size: 13px; color: var(--ink-2); }
.tr-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.tr-slots i { display: grid; place-items: center; height: 32px; padding: 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line); background: #fff;
  font-family: "Wix Madefor Text", var(--sans); font-size: 13px; font-weight: 600; font-style: normal; font-variant-numeric: tabular-nums; }
.tr-slots i.on { background: #000; color: #fff; box-shadow: none; }
.tr-booked { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.tr-booked > i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #E8F1FE; color: #1F5FC8; font-size: 13px; font-weight: 700; font-style: normal; }
.tr-booked span { display: grid; line-height: 1.3; }
.tr-booked b { font-size: 14.5px; font-weight: 700; }
.tr-booked small { font-size: 12.5px; }

/* the reminder and the payment */
.tr-card-t { display: block; font-size: 19px; font-weight: 700; line-height: 1.25; }
.tr-done { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }
.tr-done::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #000 var(--tick-white) center / 10px no-repeat; }
.tr-sum { display: flex; align-items: center; gap: 10px; }
.tr-sum b { font-family: "Wix Madefor Display", var(--display); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.tr-sum .fl-m { margin-inline-start: auto; height: 26px; }
.tr-pay-who { font-size: 14.5px; font-weight: 600; }

@media (max-width: 999px) {
  .tr-stage { --pw: 236px; --cw: min(250px, calc(50% - var(--pw) / 2 + var(--ov) - 12px)); --ov: 40px; height: 600px; }
  .tr-phone { top: 40px; }
  .tr-stage .st-card { padding: 12px 13px 13px; }
  .tr-stage .st-card-h { font-size: 13.5px; }
  .tr-day-l li { grid-template-columns: 38px minmax(0, 1fr); padding: 5px 8px; min-height: 42px; }
  .tr-day-l em { display: none; }
  .tr-day-l span b { font-size: 13.5px; }
  .tr-card-t { font-size: 17px; }
  .tr-sum b { font-size: 28px; }
  .tr-slots i { height: 30px; padding: 0 9px; font-size: 12.5px; }
  .tr-booked b { font-size: 13.5px; }
}
/* phones: the phone, then the trainer's day and the booking link under it, the day over the phone's lower edge */
@media (max-width: 699px) {
  .tr-stage { display: grid; justify-items: center; gap: 10px; height: auto; padding: 22px 12px 12px; }
  .tr-phone { position: relative; top: auto; left: auto; width: 228px; margin: 0; }
  .tr-stage .st-card { position: relative; inset: auto; width: 100%; padding: 12px 13px 14px; border-radius: 18px; }
  .tr-day { margin-top: -168px; }
  .tr-stage .st-card.tr-rem, .tr-stage .st-card.tr-pay { display: none; }
  .tr-day-l li { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .tr-day-l em { display: inline-flex; }
}

/* ---------- Copy beside the product ---------- */
.tr-lead { max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.tr-fine { font-size: 15px; color: var(--ink-2); }
.tr-cal .feat { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
@media (max-width: 899px) { .tr-cal .feat { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The calendar: the product's יומן on the trainer's week, the 07:30 couple session open over it
   (the homepage's calendar, end state; from pilates.css's .pcal). Pink is the couple session's colour, so its popup wears it ---------- */
.trcal-stage { position: relative; height: 640px; overflow: hidden; isolation: isolate; container: trcal / inline-size; border-radius: 26px;
  background: radial-gradient(rgba(0, 0, 0, .07) 1px, transparent 1.6px) 0 0 / 22px 22px, linear-gradient(165deg, #FCFCFD 0%, #E3E3E8 100%); }
.trcal { position: absolute; inset: 0; --cl-end: 40px; --ok: #16A34A; --pk: #E6004F; --pk-soft: #FCEDF2; --pk-ink: #B0003C; }
.trcal .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trcal p, .trcal dl, .trcal dd { margin: 0; }
.trcal-win { top: 36px; }
.trcal .cl-win::after { opacity: 1; }
/* site.css hides .pd-nav inside any container under 760px (the products tabs' unnamed @container rules); keep it here */
.trcal .pd-nav { display: flex; }
.trcal-main { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 22px 22px 0; }
.trcal-head { display: flex; align-items: center; gap: 8px; }
.trcal-title { margin-inline-end: auto; }
.trcal-title small { display: block; font-size: 11.5px; color: var(--ink-2); }
.trcal-title b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.trcal-cols { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: -6px -8px 0; }
.trcal-sel { z-index: 2; box-shadow: inset 0 0 0 1.5px var(--pk), 0 10px 24px -10px rgba(176, 0, 60, .45); }

.trcal-pop { position: absolute; z-index: 2; top: 52px; left: 18px; width: 356px; overflow: hidden; border-radius: 20px; background: #fff; color: #0B0B0C;
  font-size: 12.5px; line-height: 1.35; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 60px -20px rgba(0, 0, 0, .45); }
.trcal-pop-top { display: grid; gap: 9px; padding: 16px 18px 14px; background: var(--pk-soft); }
.trcal-pop .cl-d-h b { font-size: 17px; }
.trcal-pop .cl-d-h em { background: var(--pk-ink); color: #fff; }
.trcal-pop .cl-meta { gap: 5px 14px; font-size: 11.5px; color: #6E3446; }
.trcal-body { padding: 12px 16px 16px; }
.trcal .cl-th, .trcal .cl-r { grid-template-columns: minmax(0, 1fr) 66px 60px; gap: 8px; }
.trcal .cl-th { margin-top: 12px; }
.trcal .cl-r { min-height: 46px; padding-block: 4px; }
.trcal .cl-who { column-gap: 8px; grid-template-columns: 28px minmax(0, 1fr); }
.trcal .cl-who > i { width: 28px; height: 28px; font-size: 11.5px; }
.trcal .cl-who b { font-size: 12.5px; }
.trcal .cl-bal { font-size: 11.5px; }
.trcal .cl-att i { width: 25px; height: 25px; }
.trcal .cl-att .ic { width: 13px; height: 13px; }
/* the finished state: both in the list, attendance taken */
.trcal .cl-r, .trcal .cl-sum, .trcal .cl-r em { opacity: 1; transform: none; }
.trcal .cl-att i:first-child { background: var(--ok); color: #fff; box-shadow: 0 4px 10px -4px rgba(22, 163, 74, .6); }
.trcal .cl-att i:last-child { opacity: .3; }
/* the session's price, how it's paid, and its reminder */
.trcal-info { display: grid; gap: 0; margin-top: 12px; border-radius: 12px; background: #F6F6F8; }
.trcal-info div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; }
.trcal-info div + div { border-top: 1px solid #EBEBEF; }
.trcal-info dt { color: var(--ink-2); }
.trcal-info dd { font-weight: 700; }
.trcal-info dd.ok { display: inline-flex; align-items: center; gap: 6px; color: #1A7F4B; }
.trcal-info dd.ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px #E8F7EE; }

@container trcal (max-width: 599px) {
  /* phones: no menu strip, two days (today and tomorrow), and the session's popup over their lower part, without the balance */
  .trcal { --cl-end: 12px; }
  .trcal-win { top: 12px; inset-inline-start: 12px; grid-template-columns: minmax(0, 1fr); }
  .trcal-win .pd-nav, .trcal .cl-nav { display: none; }
  .trcal-main { gap: 12px; padding: 16px 14px 0; }
  .trcal-title b { font-size: 19px; }
  .trcal-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: -6px; }
  .trcal-cols .cl-col:nth-child(3) { display: none; }
  .trcal-pop { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; }
  .trcal-pop .cl-meta span:not(:nth-child(2)), .trcal .cl-seg span:last-child { display: none; }
}

/* ---------- Charging and receipts: the title beside the ticks, then a wide stage with the product's כרטסת (the homepage's money story,
   end state, in .trm so site.js leaves it alone) and the trainee's receipt on the phone beside it ---------- */
.tr-mhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.tr-mhead-t { display: grid; gap: 20px; justify-items: start; }
.tr-mhead .h2 .mute { display: block; }
.tr-mhead .h2 br { display: none; }
.tr-mhead-c { display: grid; gap: 16px; }
.tr-mhead .ticks { font-size: 18px; font-weight: 500; }
.tr-mhead .ticks mark { color: #000; padding: 0 .12em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 8.6 100 4.2 100 16.4 0 19.6Z' fill='%23BAFD4F'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 899px) { .tr-mhead { grid-template-columns: minmax(0, 1fr); } }

.trm-stage { position: relative; height: 580px; overflow: hidden; isolation: isolate; container: trm / inline-size; border-radius: 26px;
  background: radial-gradient(rgba(0, 0, 0, .07) 1px, transparent 1.6px) 0 0 / 22px 22px, linear-gradient(165deg, #FCFCFD 0%, #E3E3E8 100%); }
.trm { position: absolute; inset: 0; --ok: #16A34A; --ok-soft: #E8F7EE; }
.trm .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trm p { margin: 0; }
.trm .pd-nav { display: flex; } /* site.css hides it in any container under 760px; this one has its own queries */
.trm .fl-new { height: 52px; opacity: 1; background: #F2FBF5; }
.trm .fl-delta { opacity: 1; transform: none; }
.trm .fl-m svg { flex: none; }
/* the trainee's receipt, as the app shows it after paying (the homepage's receipt screen), the phone where the homepage puts it */
.trm-phone { position: absolute; z-index: 2; top: 56px; inset-inline-end: 56px; width: 236px; border: 7px solid #0B0B0C; border-radius: 44px;
  box-shadow: 0 0 0 1.5px #48484A, 0 44px 80px -34px rgba(0, 0, 0, .45); }
.trm-phone::before { top: 9px; width: 76px; height: 22px; margin-left: -38px; border-radius: 12px; background: #000; z-index: 4; }
.trm-phone .fl-paid { opacity: 1; transform: none; }

@container trm (max-width: 999px) {
  /* tablets: no search, month or date column; the phone a little smaller */
  .trm-win { width: calc(100% - 250px); }
  .trm .fl-search, .trm .fl-pill { display: none; }
  .trm .fl-th, .trm .fl-tr { grid-template-columns: minmax(0, 1fr) 92px 66px 96px; }
  .trm .fl-th span:nth-child(2), .trm .fl-date { display: none; }
  .trm-phone { inset-inline-end: 20px; width: 210px; }
}
@container trm (max-width: 759px) {
  .trm-win { width: calc(100% - 200px); grid-template-columns: minmax(0, 1fr); }
  .trm .pd-nav { display: none; }
  .trm .fl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trm .fl-stats p:nth-child(3) { display: none; }
  .trm .fl-th, .trm .fl-tr { grid-template-columns: minmax(0, 1fr) 62px 18px; }
  .trm .fl-th span:nth-child(3), .trm .fl-meth { display: none; }
  .trm .fl-th span:nth-child(5) { font-size: 0; }
  .trm .fl-tr em { font-size: 0; }
  .trm-phone { inset-inline-end: 14px; width: 196px; top: 70px; }
}
@container trm (max-width: 559px) {
  /* phones: the כרטסת on its own, full width; the new payment on top says it all */
  .trm-win { top: 16px; inset-inline: 12px; width: auto; }
  .trm .fl-main { padding: 16px 14px; gap: 12px; }
  .trm .fl-tabs { display: none; }
  .trm .fl-num b { font-size: 20px; }
  .trm .fl-num { flex-wrap: wrap; gap: 4px 8px; }
  .trm-phone { display: none; }
}
@media (max-width: 599px) { .trm-stage { height: 470px; } }

/* ---------- Price: the two plans a trainer needs, the smallest one first and black; the homepage's black "בכל מסלול" side ---------- */
.tr-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tr-plan { display: grid; gap: 6px; align-content: start; padding: 22px 22px 24px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tr-plan.on { background: #000; color: #fff; box-shadow: none; }
.tr-plan h3 { font-size: 16px; font-weight: 600; color: var(--ink-2); }
.tr-plan.on h3 { color: #A9A9AE; }
.tr-p { display: grid; font-family: "Wix Madefor Display", var(--display); font-size: clamp(46px, 5vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.tr-p small { margin-top: 8px; font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.tr-plan.on .tr-p small { color: #A9A9AE; }
.tr-for { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.tr-plan.on .tr-for { color: #D4D4D8; }
.tr-more { margin-top: 18px; font-size: 16px; color: var(--ink-2); }
.tr-price .actions { margin-top: 24px; }
.tr-price .side > b { font-size: 20px; font-weight: 700; }
.tr-price .side .ticks { font-size: 17px; }
@media (max-width: 459px) {
  .tr-plans { grid-template-columns: minmax(0, 1fr); }
  .tr-price .actions .btn { flex: 1 1 100%; }
}