/* ═══════════════════════════════════════════════════════ Tiki-Taka Tickets — Custom Date-Range Picker Dependency-free, RTL, responsive (popover on desktop, bottom-sheet on mobile). Supports a single date or a range. ═══════════════════════════════════════════════════════ */ /* Defined on :root (not just .tcl-dp) because the popover/backdrop are portaled to at open time — custom properties only inherit through the DOM tree, so a .tcl-dp-only definition would leave them unresolved once those elements are no longer its descendants. */ :root { --dp-accent: #1e3a8a; --dp-accent-hover: #172554; --dp-accent-soft: rgba(30, 58, 138, 0.12); } .tcl-dp { position: relative; width: 100%; max-width: 360px; font-family: inherit; } /* ─── Reset: shield the widget from theme button/svg styling ─── Scoped to BOTH .tcl-dp and .tcl-dp-popover: the popover (and its nav/ day/footer buttons) is portaled to at open time, so it's no longer a DOM descendant of .tcl-dp — a .tcl-dp-only reset would silently stop reaching every button and icon inside the calendar itself. */ .tcl-dp, .tcl-dp *, .tcl-dp *::before, .tcl-dp *::after, .tcl-dp-popover, .tcl-dp-popover *, .tcl-dp-popover *::before, .tcl-dp-popover *::after { box-sizing: border-box; } .tcl-dp button, .tcl-dp-popover button { margin: 0 !important; /* theme button margins break grid alignment */ min-width: 0; min-height: 0; -webkit-appearance: none; appearance: none; font-family: inherit; text-transform: none; letter-spacing: normal; text-shadow: none; } .tcl-dp svg, .tcl-dp-popover svg { display: inline-block !important; visibility: visible !important; opacity: 1 !important; vertical-align: middle; flex-shrink: 0; pointer-events: none; } .tcl-dp-popover { direction: rtl; } /* ─── Trigger field ─── */ .tcl-dp-trigger { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 14px; border: 2px solid #e5e7eb; border-radius: 12px; background: #ffffff !important; color: #6b7280 !important; font-size: 0.95rem; font-family: inherit; cursor: pointer; text-align: right; box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.06); transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } .tcl-dp-trigger:hover, .tcl-dp-trigger:focus { border-color: #d1d5db; color: #6b7280 !important; } .tcl-dp-trigger:focus-visible { outline: none; border-color: var(--dp-accent); box-shadow: 0 0 0 3px var(--dp-accent-soft); } .tcl-dp.has-value .tcl-dp-trigger, .tcl-dp.has-value .tcl-dp-trigger:hover, .tcl-dp.has-value .tcl-dp-trigger:focus { color: #111827 !important; border-color: var(--dp-accent); font-weight: 600; } .tcl-dp-trigger .tcl-dp-cal-icon { color: var(--dp-accent) !important; fill: none !important; stroke: currentColor !important; width: 18px !important; height: 18px !important; flex-shrink: 0; } .tcl-dp-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tcl-dp-trigger .tcl-dp-chevron { color: #9ca3af !important; fill: none !important; stroke: currentColor !important; width: 16px !important; height: 16px !important; flex-shrink: 0; transition: transform 0.25s ease; } .tcl-dp.is-open .tcl-dp-chevron { transform: rotate(180deg); } /* ─── Backdrop (mobile sheet only) ─── */ .tcl-dp-backdrop { display: none; } /* ─── Popover ─── */ .tcl-dp-popover { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-width: calc(100vw - 24px); background: #ffffff; border: 1px solid #eceef1; border-radius: 18px; box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.28), 0 6px 16px -8px rgba(0, 0, 0, 0.12); padding: 16px; box-sizing: border-box; z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right; /* Animate opacity/transform; flip visibility instantly on open, delay it on close */ transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; } /* .tcl-dp-popover is portaled to at open time (see positionPopover() in tcl-datepicker.js) so it can't be clipped by an ancestor's overflow:hidden (the search row needs that to round its pill corners). Its open state is therefore its own class, not an ancestor selector. */ .tcl-dp-popover.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s; } /* ─── Header (month nav) ─── */ .tcl-dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .tcl-dp-month { font-size: 1.02rem; font-weight: 800; color: #111827; } .tcl-dp-nav { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none !important; border-radius: 10px; background: #f3f4f6 !important; color: #374151 !important; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .tcl-dp-nav:hover, .tcl-dp-nav:focus { background: var(--dp-accent-soft) !important; color: var(--dp-accent) !important; } /* Icons inherit the button colour; force every visibility/paint property so a theme's global `button svg`/icon-font reset can't hide them */ .tcl-dp-nav svg { display: inline-block !important; visibility: visible !important; opacity: 1 !important; width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2.5 !important; flex-shrink: 0; pointer-events: none; } .tcl-dp-nav:focus-visible { outline: 2px solid var(--dp-accent); outline-offset: 2px; } /* ─── Weekday header + day grid ─── Weekday labels and day cells are children of this SAME grid (populated together in renderGrid()) so both rows share identical column tracks — two separate `repeat(7, 1fr)` grids could round fractional widths differently and drift the columns out of alignment by a pixel or two. */ .tcl-dp-grid { display: grid; /* minmax(0, 1fr), not bare 1fr — a bare 1fr track has an implicit auto minimum and refuses to shrink below its content's min-width, so if the popover is ever narrower than 7 columns' natural width the whole grid overflows past its own card instead of compressing. */ grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; direction: rtl; /* pin RTL so day columns line up with weekday headers */ } .tcl-dp-weekday { text-align: center; font-size: 0.72rem; font-weight: 700; color: #9ca3af; padding: 4px 0 8px; border-bottom: 1px solid #f0f1f3; } .tcl-dp-blank { height: 40px; } .tcl-dp-day { position: relative; height: 40px; width: 100%; border: none; background: transparent; color: #374151 !important; font-size: 0.92rem; font-family: inherit; border-radius: 10px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; z-index: 1; } .tcl-dp-day:hover:not(.is-disabled):not(.is-selected):not(.in-range) { background: var(--dp-accent-soft); color: var(--dp-accent) !important; } .tcl-dp-day.is-today { font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--dp-accent); } .tcl-dp-day.in-range { background: var(--dp-accent-soft) !important; border-radius: 4px; color: #1e3a8a !important; } .tcl-dp-day.is-selected { background: var(--dp-accent) !important; color: #ffffff !important; font-weight: 700; box-shadow: 0 4px 10px -3px rgba(30, 58, 138, 0.55); } .tcl-dp-day.is-disabled { color: #d1d5db !important; cursor: default; pointer-events: none; } /* ─── Footer ─── */ .tcl-dp-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0f1f3; } .tcl-dp-clear { border: none; background: none; color: #6b7280; font-size: 0.9rem; font-family: inherit; font-weight: 600; cursor: pointer; padding: 8px 6px; border-radius: 8px; transition: color 0.15s ease, background 0.15s ease; } .tcl-dp-clear:hover { color: #dc2626; background: #fee2e2; } .tcl-dp-apply { border: none; background: var(--dp-accent) !important; color: #ffffff !important; font-size: 0.92rem; font-family: inherit; font-weight: 700; cursor: pointer; padding: 10px 22px; border-radius: 10px; transition: background 0.15s ease, transform 0.1s ease; } .tcl-dp-apply:hover { background: var(--dp-accent-hover) !important; } .tcl-dp-apply:active { transform: scale(0.97); } /* ─── Mobile: bottom sheet ─── */ @media (max-width: 768px) { .tcl-dp { max-width: none; } .tcl-dp-backdrop.is-open { display: block; position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45); z-index: 9998; animation: tclDpFade 0.2s ease; } .tcl-dp-popover { position: fixed !important; top: auto !important; right: 0 !important; left: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 100vw !important; margin: 0 !important; box-sizing: border-box !important; border-radius: 22px 22px 0 0 !important; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transform-origin: bottom center; transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0s; box-shadow: 0 -12px 40px -8px rgba(0, 0, 0, 0.3); } .tcl-dp-popover.is-open { transform: translateY(0) !important; } /* Grab handle */ .tcl-dp-popover::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: #d1d5db; margin: -6px auto 14px; } .tcl-dp-day, .tcl-dp-blank { height: 46px; } .tcl-dp-nav { width: 40px; height: 40px; } } @keyframes tclDpFade { from { opacity: 0; } to { opacity: 1; } }