/* ============================================================
   CALENDAR BOOKING FEATURE
   Sidebar window -> monthly grid -> day slots -> sheet form -> confirmation.
   ============================================================ */

/* ----------------------------------------------------------
   Transparent title bar
   The window-title-bar is already position:absolute for all windows;
   only the background needs clearing here.
   ---------------------------------------------------------- */

[data-window-id="calendar"] .window-title-bar {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
}

/* macOS title bar height — 44px for sidebar breathing room.
   iOS gets its own 50px from .window-title-bar--ios, so we scope
   this override to non-iOS only. */
[data-window-id="calendar"]:not(.window--ios) .window-title-bar {
  height: 44px !important;
}

/* Traffic lights drop-shadow for readability on variable content;
   left offset matches the sidebar title bar (16px) so they sit in
   the same position as on Projects. */
[data-window-id="calendar"] .window-controls {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
  left: 16px !important;
}

/* ----------------------------------------------------------
   Navigator root page wrapper
   position:relative creates the containing block for the
   content-title-gradient overlay.
   ---------------------------------------------------------- */

.cal-root-page {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  /* No overflow — parent .cal-window__content is the scroll container. */
}

/* ----------------------------------------------------------
   Two-line navigation title — rendered inside the window title bar
   when a CalendarNavDayPage is pushed onto the navigator stack.

   Fits inside the 32px macOS title bar: primary (12px) + gap (2px)
   + secondary (10px) = 24px total, centered vertically.
   Both lines inherit pointer-events: none from the title container.
   ---------------------------------------------------------- */

.cal-nav-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
  text-align: center;
}

.cal-nav-title__primary {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-system-display);
  letter-spacing: -0.1px;
  white-space: nowrap;
}

.cal-nav-title__secondary {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-system-display);
  letter-spacing: 0px;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   Calendar content (no top padding — sidebar owns its own)
   ---------------------------------------------------------- */

.calendar-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0 16px 0;
  min-height: 260px;
  box-sizing: border-box;
}

/* ----------------------------------------------------------
   Loading / spinner state
   ---------------------------------------------------------- */

.calendar-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
  min-height: 200px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

/* ----------------------------------------------------------
   Error state
   ---------------------------------------------------------- */

.calendar-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-height: 200px;
  padding: 16px;
  text-align: center;
}

.calendar-error__icon {
  font-size: 32px;
  opacity: 0.5;
}

.calendar-error__message {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}

/* ----------------------------------------------------------
   Sticky header — month nav + booking-type tabs + weekday labels
   ---------------------------------------------------------- */

/* This element is a flex sibling ABOVE .cal-grid-scroll, the actual
   scroll container. It is outside the scrollable region by DOM structure
   alone — it cannot scroll regardless of how far the user scrolls.
   No position:sticky, no z-index stack needed.

   backdrop-filter blurs everything painted behind this element in the
   compositor. At runtime that is the window background and, through
   any transparent gap, the grid cells scrolling beneath. No opaque
   background is set here — the blur IS the background treatment. */
.cal-sticky-header {
  /* Absolute overlay — sits on top of .cal-grid-scroll which fills inset:0.
     The grid content scrolls behind this element through the blur. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  /* 36px clears the title-bar gradient overlay; 16px horizontal matches
     the grid column inset so all children align with day cells. */
  padding: 36px 16px 0;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

/* ----------------------------------------------------------
   Month navigation
   ---------------------------------------------------------- */

.cal-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  /* No horizontal padding — parent .cal-sticky-header provides 16px. */
  padding: 4px 0;
}

/* iOS title bar is 50px vs 44px macOS, so the sticky header needs more top
   clearance. Increase .cal-month-nav padding-top so the control group
   sits below the close button. Applied unconditionally on iOS — this
   window is full-screen so the @container cal-root (max-width:670px) query
   never fires there. */
.window--ios .cal-month-nav {
  padding-top: 24px;
}

/* iOS baseline scroll offset: 112px (macOS) + 20px (extra nav padding) = 132px.
   The container query in window.css overrides this to 180px when tabs are
   visible (132 + 48). */
.window--ios .cal-grid-scroll {
  padding-top: 132px;
}

.cal-month-nav__label {
  font-size: 23px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.cal-month-nav__month {
  font-size: 23px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.cal-month-nav__year {
  font-size: 23px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
}

.window--ios .cal-month-nav__label {
  font-size: 19px;
}

.window--ios .cal-month-nav__month {
  font-size: 19px;
}

.window--ios .cal-month-nav__year {
  font-size: 19px;
}

/* ----------------------------------------------------------
   Calendar grid (Step 2)
   ---------------------------------------------------------- */

.cal-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px 0 6px;
}

.cal-grid-header__cell {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  padding: 2px 0;
}

/* ----------------------------------------------------------
   Calendar grid
   ---------------------------------------------------------- */

.cal-grid-wrapper {
  /* Position context kept for the error banner — not for the sheet overlay */
  position: relative;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding-top: 56px;
  margin-bottom: 14px;
}

.window--ios .cal-grid {
  padding-top: 24px;
}

/* Inline error + retry for slot loading failures */
.cal-slot-error-banner {
  font-size: 12px;
  color: rgba(255, 69, 58, 0.85);
  background: rgba(255, 69, 58, 0.09);
  border: 1px solid rgba(255, 69, 58, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 4px;
}

.cal-slot-error-banner__retry {
  color: rgba(10, 132, 255, 0.85);
  cursor: pointer;
  text-decoration: underline;
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.25);
  cursor: default;
  gap: 2px;
  transition: background 0.1s ease;
}

.cal-day--empty {
  visibility: hidden;
  pointer-events: none;
}

/* Days that have available slots — subtle blue tint, no dot */
.cal-day--available {
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.cal-day--available:hover {
  background: rgba(255, 255, 255, 0.05);
  border: rgba(255, 255, 255, 0.075) 1px solid;
}

.cal-day--today {
  font-weight: 600;
  color: #fff;
  position: relative;
  /* Creates a scoped stacking context so ::before at z-index:-1 only goes
     below this element's own (transparent) background, not behind ancestor
     opaque layers. Without this, z-index:-1 escapes to the nearest ancestor
     stacking context (e.g. cal-window__root via contain:layout) and the
     circle disappears behind intermediate backgrounds. */
  isolation: isolate;
}

/* systemBlue filled circle behind the day number — matches Apple Calendar */
.cal-day--today::before {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cupertino-blue);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

/* Today + available: keep white text on the blue circle; override the
   blue-tint cell background so the circle reads cleanly. */
.cal-day--today.cal-day--available {
  color: #fff;
  background: transparent;
  border-color: transparent;
}

/* Today but unavailable: dim only the day number, not the circle.
   color applies to the text node; ::before's background is unaffected. */
.cal-day--today:not(.cal-day--available) {
  color: rgba(255, 255, 255, 0.3);
}

/* Today + available: restore hover feedback.
   .cal-day--today.cal-day--available (0,2,0) is declared after
   .cal-day--available:hover (0,3,0) in cascade order, so the non-hover
   base rule would otherwise win and suppress the hover background.
   Explicit :hover rules here have specificity 0,3,0 and appear last,
   so they take precedence correctly. */
.cal-day--today.cal-day--available:hover {
  background: rgba(255, 255, 255, 0.05);
  border: rgba(255, 255, 255, 0.075) 1px solid;
}

.cal-day--today.cal-day--available:hover::before {
  background: var(--cupertino-blue);
}

/* ----------------------------------------------------------
   Day slots detail page (full-window — via WindowNavigator)
   ---------------------------------------------------------- */

/* Outer wrapper — provides position:relative for the sheet overlay.
   Does NOT clip vertical overflow — .cal-slots-view is the scroll
   container.  Only X overflow is hidden to prevent layout blowout. */
.cal-slots-page {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
}

/* Scrollable slot list */
.cal-slots-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 60px 14px 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* Slots view scrollbar — matches root content scrollbar aesthetic. */
.cal-slots-view::-webkit-scrollbar {
  width: 10px;
}

.cal-slots-view::-webkit-scrollbar-track {
  background: rgb(28, 28, 30);
}

.cal-slots-view::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
}

.cal-slots-view::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* "30 min · Video Call" header badge */
.cal-slots-type-info {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  align-self: flex-start;
}

/* "AVAILABLE TIMES" section label */
.cal-section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.33);
}

/* 3-column slot chips grid — 3 cols × ~96 px fits chips comfortably */
.cal-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* minmax(32px, auto): rows shrink to content, never expand to fill
     leftover space (1fr in grid-auto-rows within a scroll context causes
     rows to grow unbounded when the grid is a flex child with free space). */
  grid-auto-rows: minmax(32px, auto);
  gap: 6px;
}

/* Time-of-day group container */
.cal-slots-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* flex-shrink: 0 ensures each group retains its natural content height
     inside the overflow-y:auto scroll container (.cal-slots-view).
     Without this, flex will shrink groups below content height as the
     window shortens, causing groups to visually overlap. */
  flex: 0 0 auto;
}

/* Group divider label — acts as a section separator.
   A border-top rule + subtle uppercase label mirrors Apple’s menu section
   header pattern: structural, not decorative. */
.cal-slots-group__label {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.9);
  padding-top: 8px;
  padding-bottom: 4px;
}

/* First group has no top rule — avoid double-border with the type-info badge */
.cal-slots-group:first-of-type .cal-slots-group__label::before {
  display: none;
}

.cal-slot-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6px;
  min-height: 32px;
  border-radius: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.075);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.cal-slot-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.cal-slot-chip--selected {
  background: rgba(255, 255, 255, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: #fff !important;
  font-weight: 500;
}

.cal-no-slots {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  padding: 8px 2px;
  font-style: italic;
}

/* ----------------------------------------------------------
   Sheet overlay CSS moved to cupertino_sheet.css (reusable).
   Calendar-specific form content styles remain here.
   ---------------------------------------------------------- */

/* Selected slot recap at top of form */
.cal-slot-summary {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(10, 132, 255, 0.12);
  border: 1px solid rgba(10, 132, 255, 0.2);
}

.cal-slot-summary__title {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.cal-slot-summary__meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: -2px;
}

/* ── Form fields — Cupertino style ─────────────────────────── */

.cupertino-text-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cupertino-text-field__label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  padding: 0 2px;
}

.cupertino-text-field__input {
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
  width: 100%;
}

.cupertino-text-field__input:focus {
  border-color: rgba(10, 132, 255, 0.5);
  background: rgba(255, 255, 255, 0.09);
}

.cupertino-text-field__input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.cupertino-text-field__input--error {
  border-color: rgba(255, 69, 58, 0.5) !important;
}

.cupertino-text-field__error {
  font-size: 11px;
  color: rgb(255, 69, 58);
  padding: 0 2px;
}

.cupertino-text-field__textarea {
  resize: vertical;
  min-height: 64px;
}

/* ----------------------------------------------------------
   Confirmation screen (in-root after navigation pop)
   ---------------------------------------------------------- */

.cal-confirmed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 8px 8px;
  text-align: center;
}

.cal-confirmed__icon{
  mask-image: url('/images/icons/svg/checkmark.circle.svg');
  -webkit-mask-image: url('/images/icons/svg/checkmark.circle.svg');
  width: 64px;
  height: 64px;
  background-color: var(--cupertino-green);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
}

.cal-error__icon{
  /* Inlined as base64 data URI so the icon renders when the user is offline
     and the static-asset server is unreachable. If the source SVG changes,
     re-run: cat web/images/icons/svg/xmark.circle.svg | base64 | tr -d '\n'
     and update the two data: references below. */
  mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLUdlbmVyYXRvcjogQXBwbGUgTmF0aXZlIENvcmVTVkcgMzQxLS0+CjwhRE9DVFlQRSBzdmcKUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIKICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDI0LjI1NzggMjMuOTE4Ij4KIDxnPgogIDxyZWN0IGhlaWdodD0iMjMuOTE4IiBvcGFjaXR5PSIwIiB3aWR0aD0iMjQuMjU3OCIgeD0iMCIgeT0iMCIvPgogIDxwYXRoIGQ9Ik0xMS45NTMxIDIzLjkwNjJDMTguNTUwOCAyMy45MDYyIDIzLjkwNjIgMTguNTUwOCAyMy45MDYyIDExLjk1MzFDMjMuOTA2MiA1LjM1NTQ3IDE4LjU1MDggMCAxMS45NTMxIDBDNS4zNTU0NyAwIDAgNS4zNTU0NyAwIDExLjk1MzFDMCAxOC41NTA4IDUuMzU1NDcgMjMuOTA2MiAxMS45NTMxIDIzLjkwNjJaTTExLjk1MzEgMjEuOTE0MUM2LjQ0NTMxIDIxLjkxNDEgMS45OTIxOSAxNy40NjA5IDEuOTkyMTkgMTEuOTUzMUMxLjk5MjE5IDYuNDQ1MzEgNi40NDUzMSAxLjk5MjE5IDExLjk1MzEgMS45OTIxOUMxNy40NjA5IDEuOTkyMTkgMjEuOTE0MSA2LjQ0NTMxIDIxLjkxNDEgMTEuOTUzMUMyMS45MTQxIDE3LjQ2MDkgMTcuNDYwOSAyMS45MTQxIDExLjk1MzEgMjEuOTE0MVoiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuODUiLz4KICA8cGF0aCBkPSJNOC42MjUgMTYuNjE3MkwxNi42MDU1IDguNjI1QzE2Ljc5MyA4LjQ0OTIyIDE2Ljg4NjcgOC4yMjY1NiAxNi44ODY3IDcuOTY4NzVDMTYuODg2NyA3LjQ1MzEyIDE2LjQ2NDggNy4wNDI5NyAxNS45NDkyIDcuMDQyOTdDMTUuNjkxNCA3LjA0Mjk3IDE1LjQ4MDUgNy4xMzY3MiAxNS4zMDQ3IDcuMzI0MjJMNy4yODkwNiAxNS4yOTNDNy4xMTMyOCAxNS40ODA1IDcuMDA3ODEgMTUuNjkxNCA3LjAwNzgxIDE1Ljk2MDlDNy4wMDc4MSAxNi40ODgzIDcuNDI5NjkgMTYuOTEwMiA3Ljk0NTMxIDE2LjkxMDJDOC4yMjY1NiAxNi45MTAyIDguNDQ5MjIgMTYuNzkzIDguNjI1IDE2LjYxNzJaTTE1LjI4MTIgMTYuNjE3MkMxNS40NTcgMTYuNzkzIDE1LjY3OTcgMTYuOTEwMiAxNS45NDkyIDE2LjkxMDJDMTYuNDY0OCAxNi45MTAyIDE2Ljg4NjcgMTYuNDg4MyAxNi44ODY3IDE1Ljk2MDlDMTYuODg2NyAxNS42OTE0IDE2Ljc5MyAxNS40ODA1IDE2LjYwNTUgMTUuMjkzTDguNjAxNTYgNy4zMjQyMkM4LjQyNTc4IDcuMTM2NzIgOC4yMDMxMiA3LjA0Mjk3IDcuOTQ1MzEgNy4wNDI5N0M3LjQyOTY5IDcuMDQyOTcgNy4wMDc4MSA3LjQ1MzEyIDcuMDA3ODEgNy45Njg3NUM3LjAwNzgxIDguMjI2NTYgNy4xMTMyOCA4LjQ0OTIyIDcuMjg5MDYgOC42MjVaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+CiA8L2c+Cjwvc3ZnPgo=');
  -webkit-mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLUdlbmVyYXRvcjogQXBwbGUgTmF0aXZlIENvcmVTVkcgMzQxLS0+CjwhRE9DVFlQRSBzdmcKUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIKICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDI0LjI1NzggMjMuOTE4Ij4KIDxnPgogIDxyZWN0IGhlaWdodD0iMjMuOTE4IiBvcGFjaXR5PSIwIiB3aWR0aD0iMjQuMjU3OCIgeD0iMCIgeT0iMCIvPgogIDxwYXRoIGQ9Ik0xMS45NTMxIDIzLjkwNjJDMTguNTUwOCAyMy45MDYyIDIzLjkwNjIgMTguNTUwOCAyMy45MDYyIDExLjk1MzFDMjMuOTA2MiA1LjM1NTQ3IDE4LjU1MDggMCAxMS45NTMxIDBDNS4zNTU0NyAwIDAgNS4zNTU0NyAwIDExLjk1MzFDMCAxOC41NTA4IDUuMzU1NDcgMjMuOTA2MiAxMS45NTMxIDIzLjkwNjJaTTExLjk1MzEgMjEuOTE0MUM2LjQ0NTMxIDIxLjkxNDEgMS45OTIxOSAxNy40NjA5IDEuOTkyMTkgMTEuOTUzMUMxLjk5MjE5IDYuNDQ1MzEgNi40NDUzMSAxLjk5MjE5IDExLjk1MzEgMS45OTIxOUMxNy40NjA5IDEuOTkyMTkgMjEuOTE0MSA2LjQ0NTMxIDIxLjkxNDEgMTEuOTUzMUMyMS45MTQxIDE3LjQ2MDkgMTcuNDYwOSAyMS45MTQxIDExLjk1MzEgMjEuOTE0MVoiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuODUiLz4KICA8cGF0aCBkPSJNOC42MjUgMTYuNjE3MkwxNi42MDU1IDguNjI1QzE2Ljc5MyA4LjQ0OTIyIDE2Ljg4NjcgOC4yMjY1NiAxNi44ODY3IDcuOTY4NzVDMTYuODg2NyA3LjQ1MzEyIDE2LjQ2NDggNy4wNDI5NyAxNS45NDkyIDcuMDQyOTdDMTUuNjkxNCA3LjA0Mjk3IDE1LjQ4MDUgNy4xMzY3MiAxNS4zMDQ3IDcuMzI0MjJMNy4yODkwNiAxNS4yOTNDNy4xMTMyOCAxNS40ODA1IDcuMDA3ODEgMTUuNjkxNCA3LjAwNzgxIDE1Ljk2MDlDNy4wMDc4MSAxNi40ODgzIDcuNDI5NjkgMTYuOTEwMiA3Ljk0NTMxIDE2LjkxMDJDOC4yMjY1NiAxNi45MTAyIDguNDQ5MjIgMTYuNzkzIDguNjI1IDE2LjYxNzJaTTE1LjI4MTIgMTYuNjE3MkMxNS40NTcgMTYuNzkzIDE1LjY3OTcgMTYuOTEwMiAxNS45NDkyIDE2LjkxMDJDMTYuNDY0OCAxNi45MTAyIDE2Ljg4NjcgMTYuNDg4MyAxNi44ODY3IDE1Ljk2MDlDMTYuODg2NyAxNS42OTE0IDE2Ljc5MyAxNS40ODA1IDE2LjYwNTUgMTUuMjkzTDguNjAxNTYgNy4zMjQyMkM4LjQyNTc4IDcuMTM2NzIgOC4yMDMxMiA3LjA0Mjk3IDcuOTQ1MzEgNy4wNDI5N0M3LjQyOTY5IDcuMDQyOTcgNy4wMDc4MSA3LjQ1MzEyIDcuMDA3ODEgNy45Njg3NUM3LjAwNzgxIDguMjI2NTYgNy4xMTMyOCA4LjQ0OTIyIDcuMjg5MDYgOC42MjVaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+CiA8L2c+Cjwvc3ZnPgo=');
  width: 64px;
  height: 64px;
  background-color: var(--cupertino-red);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
}

.cal-confirmed__title {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.cal-confirmed__details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.cal-confirmed__meeting-title {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

.cal-confirmed__time {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.cal-confirmed__location {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

.cal-confirmed__id {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'SF Mono', Monaco, monospace;
  margin-top: 4px;
}

/* ----------------------------------------------------------
   Validation error inline banner
   ---------------------------------------------------------- */

.cal-validation-banner {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 69, 58, 0.12);
  border: 1px solid rgba(255, 69, 58, 0.25);
  font-size: 12px;
  color: rgba(255, 69, 58, 0.9);
  line-height: 1.5;
  white-space: pre-line;
}