/* TennisTime Widget styles (WIDGET-POC-01). ALL rules scoped under .ttw. The availability calendar is a faithful
   COPY of the iframe/embed: the timeline classes (.ttw-et*) mirror libs/embed .et*, the date-nav (.ttw-edn*) mirrors
   .edn*, using the SAME values (slot colours #dcfce7/#efbd73/#dbeafe, yellow #fffde7 heads, green selected day #64c271).
   Copied into the widget (not imported) so the widget stays portable + isolated; namespaced to avoid host collisions. */
/* WIDGET-THEME-01: every colour is consumed via var(--ttw-<semantic-token>, <stock value>) — the FALLBACK is the
   default theme, so with no theme configured not one variable is set and the widget renders exactly as before.
   Presets/overrides set inline --ttw-* vars on the widget HOST element only (see src/05-theme.js): per-instance
   scoping, no globals, and the host page's stylesheets can never beat the inline custom properties. */
/* direction:rtl + unicode-bidi:isolate — the widget is embedded in third-party host pages; isolate gives it a
   self-contained RTL bidi context so a host page's direction/bidi state can never leak in and reorder Persian labels
   (book-dev's app root is already rtl, so it renders correctly; this makes the embedded widget match everywhere). */
.ttw { font-family:'Vazirmatn','IRANSans',Tahoma,Arial,sans-serif; color:var(--ttw-widget-text-primary, #0b2540); box-sizing:border-box; direction:rtl; unicode-bidi:isolate; position:relative; }
.ttw *, .ttw *::before, .ttw *::after { box-sizing:border-box; }
/* IOS-CAL-TEXT-01 — iPhone/Safari colour normalization (colour-only, no behaviour/layout change). Two iOS-only
   ways the Persian calendar text rendered BLUE while desktop stayed black: (1) iOS Safari's UA paints <button>
   text -apple-system-blue (desktop buttontext is black) and the Jalali day cells are colourless <button>s;
   (2) WKWebView-based in-app browsers (Telegram/Instagram) auto-link detected dates/numbers and tint the
   injected anchor. Normalize: buttons inherit the widget text colour — :where() keeps ZERO specificity so the
   rule defeats the UA default (author origin always wins) yet loses to EVERY author colour rule below (slot
   states, modal buttons, selected day…); the date-nav additionally pins painted glyphs to currentColor via
   -webkit-text-fill-color (it inherits into UA-injected anchors) and strips injected-anchor link styling. */
:where(.ttw button) { color: inherit; }
.ttw-edn, .ttw-edn * { -webkit-text-fill-color: currentColor; }
.ttw-edn :where(a) { color: inherit; text-decoration: none; }
.ttw__card { border:1px solid var(--ttw-widget-border, #e7e2d8); border-radius:16px; background:var(--ttw-widget-background, #fffdf9); padding:14px 16px; }
.ttw__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ttw__title { font-size:1.05rem; font-weight:800; }
.ttw__badge { font-size:.72rem; font-weight:700; color:var(--ttw-accent, #1f6f5c); background:var(--ttw-accent-soft-background, #e7f3ef); border:1px solid var(--ttw-accent-soft-border, #c9e6dd); border-radius:999px; padding:3px 10px; }
.ttw__muted { color:var(--ttw-widget-text-muted, #5b6b7c); font-size:.82rem; }
.ttw__loading,.ttw__error { padding:24px; text-align:center; color:var(--ttw-widget-text-muted, #5b6b7c); }
.ttw__error { color:var(--ttw-widget-danger, #b91c1c); }

/* ---- header/login unit ---- */
.ttw-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ttw-header__brand { display:flex; align-items:center; gap:9px; font-weight:800; }
.ttw-header__crest { width:34px; height:34px; border-radius:50%; background:var(--ttw-accent, #1f6f5c); color:var(--ttw-accent-contrast, #fff); display:grid; place-items:center; }
.ttw-header__login { border:1px solid var(--ttw-widget-border, #e7e2d8); background:var(--ttw-widget-surface, #fff); color:var(--ttw-accent, #1f6f5c); font-weight:700; font-size:.9rem; padding:7px 15px; border-radius:999px; cursor:pointer; }
.ttw-header__login:hover { border-color:var(--ttw-accent-soft-border, #cbd6cd); }
.ttw-header__acct { display:flex; align-items:center; gap:8px; }
.ttw-header__profile { display:inline-flex; align-items:center; gap:6px; background:var(--ttw-accent-soft-background, #eef5f1); border:1px solid var(--ttw-accent-soft-border, #cfe4d9); border-radius:999px; padding:4px 12px 4px 8px; }
.ttw-header__avatar { width:22px; height:22px; border-radius:50%; background:var(--ttw-accent, #1f6f5c); color:var(--ttw-accent-contrast, #fff); display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; }
.ttw-header__name { font-weight:700; font-size:.9rem; color:var(--ttw-widget-text-primary, #0b2540); }

/* ---- account (WIDGET-ACCOUNT-01) — the optional standalone sign-in / identity control ----
   Chrome-less on purpose: no card, no background of its own, so it drops into a host navbar and inherits its
   surroundings. Every colour is a --ttw-* token with the stock fallback, so a host that wants it to sit on a dark
   bar overrides the tokens via data-tt-theme instead of writing CSS against our class names. */
.ttw-acct { display:inline-flex; align-items:center; gap:10px; max-width:100%; }
.ttw-acct__login { border:1px solid var(--ttw-widget-border, #e7e2d8); background:var(--ttw-widget-surface, #fff); color:var(--ttw-accent, #1f6f5c); font:inherit; font-weight:700; font-size:.9rem; padding:7px 16px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.ttw-acct__login:hover { border-color:var(--ttw-accent-soft-border, #cbd6cd); }
.ttw-acct__avatar { flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--ttw-accent-soft-background, #eef5f1); border:1px solid var(--ttw-accent-soft-border, #cfe4d9); color:var(--ttw-accent, #1f6f5c); display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.ttw-acct__avatar svg { width:17px; height:17px; display:block; }
/* The identity stack: name above, phone below. min-width:0 lets the ellipsis actually apply inside the flex row. */
.ttw-acct__id { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; min-width:0; line-height:1.25; }
.ttw-acct__name { font-weight:700; font-size:.92rem; color:var(--ttw-widget-text-primary, #0b2540); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ttw-acct__phone { font-weight:500; font-size:.74rem; color:var(--ttw-widget-text-muted, #5b6b7c); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; unicode-bidi:isolate; }
.ttw-acct__logout { flex:0 0 auto; border:1px solid var(--ttw-widget-border, #e7e2d8); background:transparent; color:var(--ttw-widget-text-muted, #5b6b7c); font:inherit; font-weight:700; font-size:.78rem; padding:5px 12px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.ttw-acct__logout:hover { color:var(--ttw-widget-danger, #b91c1c); border-color:var(--ttw-widget-danger, #b91c1c); }
/* Narrow hosts (a phone-width navbar): keep the identity, shed the avatar and cap the name so the sign-out
   control is never pushed off the bar. */
@media (max-width: 420px) {
  .ttw-acct { gap:8px; }
  .ttw-acct__avatar { display:none; }
  .ttw-acct__name { max-width:9.5rem; }
}

/* ---- search unit (from embed-search .es*) ---- */
.ttw-search__box { display:flex; align-items:center; gap:8px; background:var(--ttw-widget-surface, #fff); border:1px solid var(--ttw-widget-border, #e7e2d8); border-radius:999px; padding:9px 14px; box-shadow:0 8px 22px -14px rgba(15,40,23,.35); }
.ttw-search__icon { color:var(--ttw-widget-text-muted, #5b6b7c); flex:0 0 auto; display:inline-flex; }
.ttw-search__input { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:.98rem; color:var(--ttw-widget-text-primary, #0b2540); text-align:start; }
.ttw-search__clear { border:0; background:transparent; color:var(--ttw-widget-text-muted, #94a3b8); font-size:1.15rem; cursor:pointer; line-height:1; }
.ttw-search__results { list-style:none; margin:8px 0 0; padding:0; border:1px solid var(--ttw-widget-border, #e7e2d8); border-radius:12px; overflow:hidden; background:var(--ttw-widget-surface, #fff); }
.ttw-search__row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border:0; border-bottom:1px solid var(--ttw-widget-divider, #f1eee7); background:var(--ttw-widget-surface, #fff); cursor:pointer; font:inherit; text-align:start; }
.ttw-search__row:last-child { border-bottom:0; }
.ttw-search__row:hover { background:var(--ttw-widget-surface-hover, #f8f6f0); }
.ttw-search__row-name { font-weight:700; }
.ttw-search__row-tag { font-size:.72rem; color:var(--ttw-accent, #1f6f5c); background:var(--ttw-accent-soft-background, #eaf6ee); border-radius:999px; padding:2px 9px; margin-inline-start:6px; }
.ttw-search__empty { padding:12px 14px; color:var(--ttw-widget-text-muted, #5b6b7c); font-size:.9rem; }

/* FONT FIX: <button>/<input>/<select> do NOT inherit font-family (UA default) — force the widget font so the
   calendar day cells, nav buttons and inputs render in Vazirmatn like the timeline (which sets font:inherit). */
.ttw button, .ttw input, .ttw select, .ttw textarea { font-family: inherit; }

/* ================= availability = embed calendar (timeline + date-nav side by side) ================= */
.ttw-cal__layout { display:flex; flex-direction:row; align-items:stretch; gap:16px; }
.ttw-cal__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; padding-top:10px; border-top:1px solid var(--ttw-widget-border, #e7e2d8); }
.ttw-cal__summary { font-weight:700; font-size:.9rem; }
.ttw-cal__pay { border:0; border-radius:10px; padding:11px 18px; font:inherit; font-weight:800; background:var(--ttw-accent, #1f6f5c); color:var(--ttw-accent-contrast, #fff); cursor:pointer; }
.ttw-cal__pay:hover { filter:brightness(.96); }

/* ---- TIMELINE (copied from embed-timeline.scss .et*) ---- */
/* isolation:isolate = a self-contained stacking context so the sticky time-axis column (z-index below) can never
   paint above the page navbar/header when scrolling — the internal z-indexes stay contained to the timeline card. */
.ttw-et { --et-head-h:40px; flex:1 1 auto; min-width:0; position:relative; isolation:isolate; border:1px solid var(--ttw-widget-surface-border, #e5e7eb); border-radius:14px; background:var(--ttw-widget-surface, #fff); box-shadow:0 4px 10px var(--ttw-widget-shadow, rgba(15,23,42,.12)); overflow:hidden; }
.ttw-et__viewport { max-height:min(70vh,720px); overflow:auto; }
.ttw-et__grid { position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); }
.ttw-et__hours { position:sticky; inset-inline-start:0; z-index:5; display:flex; flex-direction:column; background:var(--ttw-timeline-hours-background, rgba(230,255,224,.9)); backdrop-filter:blur(3px); }
.ttw-et__hours-head { height:var(--et-head-h,40px); position:sticky; top:0; z-index:2; background:inherit; }
.ttw-et__hour { position:relative; display:flex; justify-content:center; }
.ttw-et__hour-label { transform:translateY(-8px); font-size:11px; color:var(--ttw-timeline-hour-label-text, #334155); background:var(--ttw-timeline-hour-label-background, rgba(255,255,255,.5)); border:1px dashed var(--ttw-timeline-hour-label-border, rgba(0,0,0,.2)); border-radius:20px; padding:1px 7px; height:fit-content; }
.ttw-et__columns { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(62px,104px); min-width:max-content; }
.ttw-et__columns::before { content:''; position:absolute; inset-inline:0; top:var(--et-head-h,40px); bottom:0; pointer-events:none; z-index:0;
  background-image:
    repeating-linear-gradient(to bottom, var(--ttw-timeline-guide, rgba(17,24,39,.18)), var(--ttw-timeline-guide, rgba(17,24,39,.18)) 2px, transparent 2px, transparent calc(var(--et-ppm,2px) * 60)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--et-ppm,2px) * 30 - 1px), var(--ttw-timeline-guide-faint, rgba(17,24,39,.10)) calc(var(--et-ppm,2px) * 30 - 1px), var(--ttw-timeline-guide-faint, rgba(17,24,39,.10)) calc(var(--et-ppm,2px) * 30)); }
.ttw-et__col { position:relative; border-inline-start:1px solid var(--ttw-timeline-column-border, rgba(17,24,39,.08)); }
.ttw-et__col-head { position:sticky; top:0; z-index:4; height:var(--et-head-h,40px); display:flex; align-items:center; justify-content:center; padding:0 6px; font-weight:700; font-size:12.5px; color:var(--ttw-timeline-header-text, #1f2933); text-align:center; background:var(--ttw-timeline-header-background, #fffde7); border-bottom:1px solid var(--ttw-widget-surface-border, #e5e7eb); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ttw-et__col-body { position:relative; }
/* z-index:1 mirrors the app's slot wrapper: the cell is its own stacking context, so the --past veil (::after,
   z-index:3) stays INSIDE the cell and the red now-line (z-index:3 at grid level) still crosses ABOVE it. */
.ttw-et-slot { position:absolute; inset-inline:0; z-index:1; padding:6px 7px; box-sizing:border-box; display:flex; flex-direction:column; gap:2px; align-items:flex-start; font:inherit; text-align:start; color:var(--ttw-slot-text, #1f2933); border:none; border-left:3px solid var(--ttw-slot-default-accent, #94a3b8); border-bottom:1px solid var(--ttw-slot-divider, #cfcfcfa3); box-shadow:0 2px 4px var(--ttw-slot-shadow, rgba(15,23,42,.08)); cursor:pointer; overflow:hidden; transition:filter .12s; }
.ttw-et-slot:hover:not(:disabled) { filter:brightness(.97); }
.ttw-et-slot:disabled { cursor:default; }
.ttw-et-slot__label { font-weight:700; font-size:11px; line-height:1.15; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ttw-et-slot__time { color:var(--ttw-slot-time-text, #4b5563); font-weight:700; font-size:9px; white-space:nowrap; }
.ttw-et-slot--available { background:var(--ttw-slot-available-background, #dcfce7); border-left-color:var(--ttw-slot-available-accent, #22c55e); }
.ttw-et-slot--held { background:var(--ttw-slot-held-background, #dcfce7); border-left-color:var(--ttw-slot-held-accent, #22c55e); }
.ttw-et-slot--booked { background:var(--ttw-slot-reserved-background, #efbd73); border-left-color:var(--ttw-slot-reserved-accent, #e27303); }
.ttw-et-slot--mine { background:var(--ttw-slot-reserved-by-user-background, #dbeafe); border-left-color:var(--ttw-slot-reserved-by-user-accent, #3b82f6); }
.ttw-et-slot--maintenance { background:var(--ttw-slot-disabled-background, #e5e7eb); border-left-color:var(--ttw-slot-disabled-accent, #9ca3af); }
.ttw-et-slot--basket-mine, .ttw-et-slot--selected { border-left-color:var(--ttw-slot-basket-accent, #179503); color:var(--ttw-slot-basket-text, #065f46);
  background-image:linear-gradient(45deg,var(--ttw-slot-basket-stripe-a, #79e395) 25%,var(--ttw-slot-basket-stripe-b, #9dffad) 25%,var(--ttw-slot-basket-stripe-b, #9dffad) 50%,var(--ttw-slot-basket-stripe-a, #79e395) 50%,var(--ttw-slot-basket-stripe-a, #79e395) 75%,var(--ttw-slot-basket-stripe-b, #9dffad) 75%,var(--ttw-slot-basket-stripe-b, #9dffad) 100%); background-size:12px 12px; animation:ttw-et-stripes 2s linear infinite; }
.ttw-et-slot--pending { border-left-color:var(--ttw-slot-pending-accent, #bc9602);
  background-image:linear-gradient(45deg,var(--ttw-slot-pending-stripe-a, #e3da79) 25%,var(--ttw-slot-pending-stripe-b, #fef08a) 25%,var(--ttw-slot-pending-stripe-b, #fef08a) 50%,var(--ttw-slot-pending-stripe-a, #e3da79) 50%,var(--ttw-slot-pending-stripe-a, #e3da79) 75%,var(--ttw-slot-pending-stripe-b, #fef08a) 75%,var(--ttw-slot-pending-stripe-b, #fef08a) 100%); background-size:12px 12px; animation:ttw-et-stripes 2s linear infinite; }
@keyframes ttw-et-stripes { from { background-position:0 0; } to { background-position:12px 0; } }
/* WIDGET-PAST-OVERLAY-01 — the app's past-time veil, byte-identical to the customer/admin rule
   (.timeline-slot-wrapper--past::after in libs/reservation + the provider/admin copies): an elapsed slot keeps its
   OWN state colour and gets a semi-transparent grey ::after over the whole cell, so slots/grid stay readable
   underneath. Purely visual (pointer-events:none) — clicking is blocked at the cell (disabled), like the app. */
.ttw-et-slot--past::after { content:''; position:absolute; inset:0; background:var(--ttw-slot-past-overlay, var(--tt-slot-past-overlay, rgba(107, 114, 128, 0.4))); pointer-events:none; z-index:3; border-radius:inherit; }
/* WIDGET-PAST-OVERLAY-01 — red current-time indicator, structured like the app's shared slot-timeline grid: the
   1px LINE spans the columns (child of .ttw-et__columns) and the pill DOT sits in the sticky hour rail. The line's
   z-index:3 stays BELOW the sticky col heads (z-4) and the hour rail (z-5); the dot's z-index:1 stays below the
   rail's own sticky head (z-2) — so the indicator scrolls with the content and never covers the sticky headers.
   Vertical position (top) is set from JS (venue clock, today-only); hidden on other days. */
.ttw-et__now { position:absolute; left:0; right:0; height:1px; background:var(--ttw-timeline-now-indicator, #ef4444); z-index:3; pointer-events:none; }
.ttw-et__now-dot { position:absolute; right:8px; width:35px; height:5px; border-radius:9999px; background:var(--ttw-timeline-now-indicator, #ef4444); box-shadow:0 0 0 2px var(--ttw-widget-surface, #ffffff); transform:translate(-50%,-50%); pointer-events:none; z-index:1; }
.ttw-et-slot__hold { position:absolute; bottom:4px; left:4px; width:15px; height:15px; display:inline-flex; align-items:center; justify-content:center; color:var(--ttw-slot-hold-icon, #065f46); pointer-events:none; animation:ttw-et-holdBlink 1.2s ease-in-out infinite; }
.ttw-et-slot__hold svg { width:100%; height:100%; }

/* WIDGET-SLOT-MODAL-01 — the "add to basket?" confirm modal, copied 1:1 from the book-dev app slot modal
   (libs/reservation .slot-modal*), scoped under .ttw-slot-modal. Overlays the widget host (position:relative on .ttw). */
.ttw-slot-modal { position:absolute; inset:0; z-index:1000; }
.ttw-slot-modal__backdrop { position:absolute; inset:0; background:var(--ttw-modal-backdrop, rgba(15,23,42,.35)); backdrop-filter:blur(2px); }
.ttw-slot-modal__content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(100% - 24px); max-width:360px; background-color:var(--ttw-modal-content-background, #ffffff5e); box-shadow:0 20px 40px rgba(15,23,42,.18); display:flex; flex-direction:column; overflow:hidden; border-radius:0; }
.ttw-slot-modal__header { display:flex; align-items:center; justify-content:flex-end; padding:7px 10px 7px 16px; background-color:var(--ttw-modal-surface, #f9fafb); }
.ttw-slot-modal__close { border:none; background-color:var(--ttw-modal-close-background, #f3f4f6); color:var(--ttw-modal-text-secondary, #374151); font-size:16px; line-height:1; border-radius:50%; padding:5px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background-color .2s ease, color .2s ease; }
.ttw-slot-modal__close:hover { background-color:var(--ttw-modal-close-background-hover, #e5e7eb); color:var(--ttw-modal-text, #111827); }
.ttw-slot-modal__close img { width:18px; height:18px; }  /* icon scale — change this px to resize */
.ttw-slot-modal__body { padding:16px 20px 18px; background-color:var(--ttw-modal-surface, #f9fafb); }
.ttw-slot-modal__body--narrative { display:grid; gap:2px; }
.ttw-slot-modal__intro { margin:0; font-size:14px; line-height:2; color:var(--ttw-modal-text, #111827); }
.ttw-slot-modal__line { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ttw-modal-text-secondary, #374151); }
.ttw-slot-modal__note { margin:4px 0 0 0; font-size:12.5px; color:var(--ttw-modal-text-muted, #6b7280); }
.ttw-slot-modal__highlight { font-weight:800; color:var(--ttw-accent, #0f766e); }
.ttw-slot-modal__emphasis { font-weight:800; color:var(--ttw-modal-text, #1f2937); }
.ttw-slot-modal__chip { display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; line-height:1.8; box-shadow:0 1px 2px rgba(15,23,42,.08); }
.ttw-slot-modal__chip--time { background-color:var(--ttw-info-chip-background, #eef2ff); color:var(--ttw-info-chip-text, #3730a3); box-shadow:0 0 0 1px var(--ttw-info-chip-border, #c7d2fe) inset, 0 1px 2px rgba(15,23,42,.08); }
.ttw-slot-modal__status { padding:4px 10px; border-radius:999px; font-weight:800; font-size:12px; display:inline-flex; align-items:center; justify-content:center; background-color:var(--ttw-slot-disabled-background, #e5e7eb); color:var(--ttw-slot-text, #1f2933); box-shadow:0 1px 2px rgba(15,23,42,.08); }
.ttw-slot-modal__status--available { background-color:var(--ttw-slot-available-background, #dcfce7); color:var(--ttw-slot-available-text, #166534); box-shadow:0 0 0 1px var(--ttw-slot-available-accent, #22c55e) inset, 0 1px 2px rgba(15,23,42,.08); }
.ttw-slot-modal__footer { display:flex; justify-content:flex-end; padding:15px; background-color:var(--ttw-confirm-footer-background, #8cf75a6e); border-top:1px solid rgba(15,23,42,.08); }
.ttw-slot-modal__button { min-width:130px; border-radius:0; padding:10px 20px; font-weight:800; font-size:13px; border:none; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.ttw-slot-modal__button--primary { background-color:var(--ttw-confirm-button-background, #166534); color:var(--ttw-confirm-button-text, #fff); }
/* WIDGET-LOGIN-GATE-01: login-required modal — informative BLUE theme (not an error/red), reuses the same modal shell */
.ttw-slot-modal__footer--info { background-color:var(--ttw-info-footer-background, rgba(59,130,246,.14)); border-top-color:var(--ttw-info-footer-border, rgba(59,130,246,.28)); }
.ttw-slot-modal__button--info { background-color:var(--ttw-info-accent, #1d4ed8); color:var(--ttw-accent-contrast, #fff); }
.ttw-slot-modal__button:hover { transform:translateY(-1px); }
.ttw-slot-modal__button:active { transform:translateY(0); }
@keyframes ttw-et-holdBlink { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.9); } }
.ttw-et--compact { --et-head-h:34px; }
.ttw-et--compact .ttw-et__columns { grid-auto-columns:minmax(60px,86px); }
.ttw-et--compact .ttw-et-slot { padding:3px 6px; }
.ttw-et--compact .ttw-et-slot__label { font-size:10.5px; }
.ttw-et--compact .ttw-et-slot__time { font-size:8.5px; }
.ttw-et--compact .ttw-et__col-head { font-size:12px; }
.ttw-et--compact .ttw-et__hour-label { font-size:10px; padding:1px 6px; }
.ttw-et--wide .ttw-et__columns { grid-auto-columns:minmax(74px,1fr); }
.ttw-et--wide .ttw-et__grid { grid-template-columns:64px minmax(0,1fr); }

/* ---- DATE-NAV (copied from embed-date-nav.scss .edn*) — icons are the app's ArrowRightCircle/ArrowLeftCircle/
   Buy/Calendar PNG chips, same chip/badge structure (.ttw-edn__icon-chip / __icon-img / __chip-badge) ---- */
.ttw-edn { flex:0 0 300px; }
.ttw-edn__month { background:var(--ttw-widget-surface, #fff); border:1px solid var(--ttw-widget-surface-border, #e5e7eb); border-radius:14px; box-shadow:0 4px 10px var(--ttw-widget-shadow, rgba(15,23,42,.12)); padding:16px; }
/* ITEM 2: in the WIDE (row) layout the date-nav column is stretched to the taller slot table; make the OPEN month
   card fill that height so its bottom edge aligns with the table. Extra height becomes empty space BELOW the grid
   (the grid keeps its natural row spacing — dates are NOT spread apart). Slim/compact carousels are unaffected. */
.ttw-cal__layout:not(.ttw-cal__layout--narrow) .ttw-edn:not(.ttw-edn--slim) .ttw-edn__month { height:100%; box-sizing:border-box; display:flex; flex-direction:column; }
.ttw-cal__layout:not(.ttw-cal__layout--narrow) .ttw-edn:not(.ttw-edn--slim) .ttw-edn__grid { flex:0 0 auto; }
.ttw-cal__layout:not(.ttw-cal__layout--narrow) .ttw-edn:not(.ttw-edn--slim) .ttw-edn__actions { margin-top:auto; }
.ttw-edn__month-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ttw-edn__month-label { font-weight:800; font-size:1rem; }
.ttw-edn__weekdays, .ttw-edn__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.ttw-edn__weekday { text-align:center; font-size:.72rem; color:var(--ttw-calendar-weekday-text, #94a3b8); padding-bottom:4px; }
.ttw-edn__day { width:25px; margin:0 auto; padding:6px 4px; border-radius:10px; display:flex; flex-direction:column; align-items:center; background:none; border:0; cursor:pointer; }
.ttw-edn__day:hover { background:var(--ttw-calendar-day-hover-background, #f1f5f9); }
.ttw-edn__day-j { font-size:.8rem; font-weight:600; line-height:1.2; }
.ttw-edn__day-g { font-size:.55rem; color:var(--ttw-calendar-day-secondary-text, #888); line-height:1; direction:ltr; }
.ttw-edn__day--out { opacity:.5; color:var(--ttw-calendar-day-secondary-text, #888); }
.ttw-edn__day--today { background:var(--ttw-calendar-today-background, #e0e7ef); border-radius:50%/35%; }
.ttw-edn__day--selected { background:var(--ttw-calendar-selected-background, #64c271); color:var(--ttw-calendar-selected-text, #fff); border-radius:50%/35%; }
.ttw-edn__day--selected:hover { background:var(--ttw-calendar-selected-background-hover, #56a662); }
.ttw-edn__day--selected .ttw-edn__day-g { color:rgba(255,255,255,.85); }
.ttw-edn__nav-btn { background:none; border:none; cursor:pointer; padding:5px; display:flex; align-items:center; justify-content:center; opacity:.6; transition:opacity .3s ease; flex:none; }
.ttw-edn__nav-btn:hover { opacity:1; }
.ttw-edn__nav-icon { width:25px; height:25px; object-fit:contain; filter:brightness(0) invert(0.75); }
.ttw-edn__chip-button { background:none; border:none; padding:0; cursor:pointer; position:relative; display:inline-flex; }
.ttw-edn__icon-chip { width:40px; height:40px; border-radius:999px; border:1px solid var(--ttw-widget-surface-border, #e5e7eb); display:inline-flex; align-items:center; justify-content:center; }
.ttw-edn__chip-button:hover .ttw-edn__icon-chip { background:var(--ttw-widget-surface-hover, #f9fafb); }
.ttw-edn__icon-chip--active { border-color:var(--ttw-chip-active-border, rgba(91,219,254,.95)); }
.ttw-edn__icon-chip--collapse { border-color:var(--ttw-widget-text-muted, #6b7280); }
.ttw-edn__icon-img { width:22px; height:22px; object-fit:contain; }
.ttw-edn__icon-img--up { transform:rotate(-90deg); }
.ttw-edn__chip-badge { position:absolute; top:-6px; inset-inline-end:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--ttw-accent, #1f6f5c); color:var(--ttw-accent-contrast, #fff); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.ttw-edn__actions { display:flex; align-items:center; justify-content:flex-start; gap:12px; margin-top:14px; }

/* ---- BASKET (copied from embed-basket.scss .embed-basket*) — fills the date-nav slot, Pay inside ---- */
.ttw-basket { display:flex; flex-direction:column; gap:12px; flex:1 1 auto; min-height:240px; min-width:260px; padding:14px 16px; border:1px solid var(--ttw-widget-surface-border, #e5e7eb); border-radius:16px; background:var(--ttw-widget-surface, #fff); }
.ttw-basket__head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ttw-basket__title { font-size:1rem; font-weight:800; color:var(--ttw-widget-text-primary, #0f172a); }
.ttw-basket__close { background:none; border:none; padding:0; cursor:pointer; display:inline-flex; }
.ttw-basket__close-icon { width:34px; height:34px; object-fit:contain; display:block; }
/* ITEM 3: in the narrow/horizontal cart bar the close/back arrow points UP (like the compact calendar toggle); the
   wide vertical side-panel keeps the default right-pointing arrow. */
.ttw-cal__layout--narrow .ttw-basket__close-icon { transform:rotate(-90deg); }
.ttw-basket__close:hover .ttw-basket__close-icon { opacity:.82; }
.ttw-basket__list { list-style:none; margin:0; padding:0; flex:1 1 auto; overflow:auto; }
.ttw-basket__item { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:9px 2px; border-bottom:1px dashed var(--ttw-widget-divider, #e7edf3); font-size:.9rem; color:var(--ttw-widget-text-primary, #111827); }
/* WIDGET-BASKET-TIMER-01: the blinking soft-hold clock on a basket item (same keyframe as the slot cell). */
.ttw-basket__item-hold { flex:0 0 auto; align-self:center; width:14px; height:14px; display:inline-flex; color:var(--ttw-slot-hold-icon, #065f46); animation:ttw-et-holdBlink 1.2s ease-in-out infinite; }
.ttw-basket__item-hold svg { width:100%; height:100%; }
.ttw-basket__item-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ttw-basket__item-price { flex:0 0 auto; font-weight:700; color:var(--ttw-widget-text-primary, #0f172a); }
.ttw-basket__item-remove { flex:0 0 auto; border:0; background:none; padding:2px 4px; cursor:pointer; font:inherit; font-size:.78rem; color:var(--ttw-widget-danger, #dc2626); }
.ttw-basket__item-remove:hover { text-decoration:underline; }
.ttw-basket__total { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px; border-top:1px solid var(--ttw-widget-surface-border, #e5e7eb); font-size:.95rem; color:var(--ttw-widget-text-primary, #0f172a); }
.ttw-basket__total strong { font-weight:800; }
.ttw-basket__empty { flex:1 1 auto; margin:0; display:flex; align-items:center; justify-content:center; color:var(--ttw-widget-text-muted, #5b6b7c); font-size:.9rem; }
.ttw-basket__pay { width:100%; border:0; border-radius:10px; padding:12px 14px; font:inherit; font-weight:800; background:var(--ttw-accent, #1f6f5c); color:var(--ttw-accent-contrast, #fff); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; }
.ttw-basket__pay-amount { font-weight:900; }
.ttw-basket__pay:disabled { opacity:.5; cursor:not-allowed; }

/* ---- date-nav collapse/expand (wide → slim vertical strip; narrow → horizontal rail on top), like the iframe ---- */
.ttw-cal__layout--narrow { flex-direction: column; }
.ttw-cal__layout--narrow .ttw-edn { flex: 1 1 auto; }
.ttw-edn, .ttw-et { transition: flex-basis .2s ease; }

/* WIDGET-FIT-H-01 — OPT-IN vertical fit (all rules gated by .ttw--fit-h, which is added ONLY when the host
   carries a bounded height via data-tt-height / data-tt-max-height). Without the flag these rules are inert,
   so every other site is byte-identical to today. Effect: the widget fills its bounded height and the SLOT
   TABLE flexes to fill whatever height the date-nav leaves — so opening the calendar shrinks the table (making
   room, no overlap) and closing it restores the table to full height, the vertical analogue of the horizontal
   sidebar shrink. The horizontal (flex-basis width) behavior is untouched. */
.ttw--fit-h { display: flex; flex-direction: column; }
.ttw--fit-h .ttw-cal { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ttw--fit-h .ttw-cal__layout { flex: 1 1 auto; min-height: 0; }
/* the slot table fills leftover height and scrolls its grid internally (both layouts) */
.ttw--fit-h .ttw-et { min-height: 0; display: flex; flex-direction: column; transition: flex-basis .2s ease, height .2s ease; }
.ttw--fit-h .ttw-et__viewport { flex: 1 1 auto; min-height: 0; max-height: none; }
/* NARROW/compact: nav = content height (rail + expanded month panel); the slot table takes the rest and
   shrinks as the panel opens (instead of the panel overlapping/pushing the table) */
.ttw--fit-h .ttw-cal__layout--narrow .ttw-edn { flex: 0 0 auto; }
.ttw--fit-h .ttw-cal__layout--narrow .ttw-et { flex: 1 1 auto; }
.ttw--fit-h .ttw-cal__layout--narrow .ttw-basket { flex: 0 0 auto; }
.ttw-edn--slim { flex: 0 0 auto; }
.ttw-edn--slim .ttw-edn__month { display:flex; flex-direction:column; align-items:center; gap:12px; width:64px; padding:14px 8px; height:100%; }
.ttw-edn__slim-date { writing-mode: vertical-rl; text-orientation: mixed; font-weight:700; font-size:.85rem; flex:1 1 auto; display:flex; align-items:center; justify-content:center; color:var(--ttw-widget-text-primary, #0b2540); }
.ttw-edn--compact .ttw-edn__month { padding:8px 10px; }
.ttw-edn__rail { display:flex; align-items:center; gap:6px; }
.ttw-edn__rail-date { flex:1 1 auto; min-width:0; text-align:center; font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ttw-edn__panel { margin-top:10px; padding-top:10px; border-top:1px solid var(--ttw-widget-surface-border, #e5e7eb); }

/* ---- LOGIN — copied VERBATIM from the Book app auth login100 template (sign-in/otp/sign-up .scss), scoped under
   .ttw so it renders exactly like the app login and cannot leak to a host page. NOT themed (WIDGET-THEME-01): this
   block renders only on the HOSTED login page (login.html / book-dev /widget-login), a separate same-origin page
   that deliberately keeps the app's own login look — never inside an embedded, themeable widget instance. ---- */
.ttw .limiter { width:100%; margin:0 auto; display:flex; align-items:center; justify-content:center; padding:15px; min-height:100vh; box-sizing:border-box; }
.ttw .container-login100 { width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding:15px; }
.ttw .wrap-login100 { width:100%; max-width:400px; background:#fff; border-radius:10px; padding:40px 45px 60px 45px; box-shadow:0 10px 30px rgba(0,0,0,.1); position:relative; }
.ttw .login100-form { width:100%; display:block; }
.ttw .login100-form-title { font-size:30px; font-weight:bold; color:#333; text-align:center; position:absolute; top:25px; left:50%; transform:translateX(-50%); }
.ttw .wrap-input100 { position:relative; margin-bottom:16px; }
.ttw .login100-form-title ~ .wrap-input100:first-of-type { margin-top:60px; }
.ttw .input100 { font-family:'Vazirmatn',sans-serif; width:100%; height:45px; padding:10px; padding-inline-end:50px; text-align:start; border:1px solid #ccc; border-radius:8px; font-size:16px; box-sizing:border-box; outline:none; background-color:#f5f5f5; }
.ttw .input100::placeholder { color:#999; }
.ttw .password-container { display:flex; align-items:center; position:relative; }
.ttw .show-password { position:absolute; inset-inline-end:15px; color:#64c271; font-size:14px; cursor:pointer; top:50%; transform:translateY(-50%); }
.ttw .container-login100-form-btn { display:flex; justify-content:center; margin-bottom:20px; }
.ttw .login100-form-btn { font-family:'Vazirmatn',sans-serif; width:100%; padding:12px; background-color:#64c271; border:none; border-radius:12px; color:#fff; font-size:18px; cursor:pointer; transition:background-color .3s; }
.ttw .login100-form-btn:hover:not(:disabled) { background-color:#56a662; }
.ttw .login100-form-btn:disabled { opacity:.6; cursor:default; }
.ttw .remember-me { display:flex; align-items:center; justify-content:flex-start; margin-bottom:20px; font-size:14px; color:#555; }
.ttw .remember-me label { display:flex; align-items:center; gap:8px; cursor:pointer; }
.ttw .remember-me input[type='checkbox'] { width:16px; height:16px; accent-color:#64c271; }
.ttw .text-center { text-align:center; }
.ttw .text-right { text-align:start; }
.ttw .txt1, .ttw .txt2 { color:#64c271; font-size:14px; cursor:pointer; text-decoration:none; }
.ttw .txt1:hover, .ttw .txt2:hover { text-decoration:underline; }
.ttw .p-t-20 { padding-top:20px; }
.ttw .p-r-20 { padding-inline-end:100px; }
.ttw .p-t-10 { padding-top:10px; }
.ttw .error-message { color:#dc2626; font-size:12px; margin-top:5px; }
.ttw .invalid .input100 { border-color:#dc2626; }
.ttw .logo-wrap { display:flex; justify-content:center; align-items:center; margin:0 auto 16px auto; width:100%; }
.ttw .logo-wrap img { max-width:80px; max-height:80px; width:auto; height:auto; object-fit:contain; }
.ttw .welcome-title { font-size:1.05rem; font-weight:400; color:#333; line-height:1.95; text-align:center; margin:0 0 6px; }
.ttw .welcome-title strong { font-weight:800; }
.ttw .subtitle { font-size:.9rem; color:#666; line-height:1.9; text-align:center; margin:0 0 18px; }

/* responsive: stack the calendar (date-nav above the timeline) on narrow, like the embed narrow layout */
@media (max-width:820px) { .ttw-cal__layout { flex-direction:column; } .ttw-edn { flex:1 1 auto; } }
/* WIDGET-ACCESS-ERROR-01: muted helper line under the access-denied message */
.ttw__error-help { margin-top:6px; font-size:.82rem; color:var(--ttw-widget-text-muted, #6b7280); font-weight:400; }