/* Calendar "Add event" in the composer look shared by Create, Community,
   Map Post, the shop Add item sheet and the booking Add service sheet.
   The page repaints modals with !important from several sheets, so rules
   here are doubled-id and !important; the field rules use four ids to beat
   the template's [data-theme] textarea/input chains. The ids the calendar
   script reads and toggles (display:flex/none on the wrappers) are kept, so
   every wrapper it touches is a flex row here. */

#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal {
    align-items: stretch !important; justify-content: stretch !important; padding: 0 !important;
    background: #FBFBF9 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
    color-scheme: light !important;
    font-family: Manrope, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal * { box-sizing: border-box; font-family: Manrope, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important; letter-spacing: 0; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal button { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; text-shadow: none !important; -webkit-font-smoothing: antialiased !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .mobile-blocspace-calendar-modal-panel {
    display: block !important; width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: #FBFBF9 !important; color: #111214 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-shell {
    width: 100% !important; min-height: 100dvh !important; margin: 0 !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .mobile-blocspace-calendar-event-form { display: block !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; }

/* ---- header bar ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 14px !important; padding: 6px 0 0 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar-cancel, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar-spacer { width: 64px !important; flex: 0 0 64px !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar-cancel {
    min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 8px 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; text-align: left !important;
    font-size: 13px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar-title { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; min-width: 0 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar-title strong { background: transparent !important; padding: 0 !important; border-radius: 0 !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar-title small { background: transparent !important; padding: 0 !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }

/* ---- Added by ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting-avatar { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; border-radius: 12px !important; overflow: hidden !important; background: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting-avatar span { font-size: 13px !important; font-weight: 800 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting-copy { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting-label { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting-name { font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* ---- eyebrows ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-eyebrow, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-eyebrow span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-eyebrow { display: flex !important; align-items: baseline !important; justify-content: space-between !important; margin: 16px 0 8px !important; padding: 0 4px !important; }

/* ---- cards and rows ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card { margin: 0 !important; padding: 0 !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; overflow: visible !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; min-height: 50px !important; margin: 0 !important; padding: 0 14px !important; position: relative !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; }
/* The script hides rows with display:none inline; a hidden row must not
   leave its rule behind, so the line sits on the row itself, not between. */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row + .cal-row { border-top: 1px solid #EFEFEB !important; }
/* The script hides and shows rows with an inline display, which a plain
   inline value cannot do against the !important above; the hidden state is
   read back off the attribute instead. Both spellings: the markup writes
   "display:none", the script writes "display: none". */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row[style*="display:none"],
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row[style*="display: none"] { display: none !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row > span, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row-line > span { flex: 0 0 auto !important; font-size: 13px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row--field > span:first-child, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row-line > span:first-child { flex: 0 0 84px !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row--field input, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row--field select { text-align: right !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card input:not([type="date"]):not([type="time"]):not([type="hidden"]),
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card select,
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card textarea,
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card input:not([type="date"]):not([type="time"]):not([type="hidden"]):focus,
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card select:focus,
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card textarea:focus {
    flex: 1 1 auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 50px !important; min-height: 50px !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; background-color: transparent !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; caret-color: #0FBFA4 !important;
    -webkit-appearance: none !important; appearance: none !important; color-scheme: light !important;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card select { background-image: none !important; padding-right: 0 !important; direction: rtl !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card select option { direction: ltr !important; background: #FFFFFF !important; color: #111214 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card--text { padding: 2px 4px !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card--text textarea, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card--text textarea:focus { height: auto !important; min-height: 96px !important; padding: 14px 10px !important; resize: none !important; font-weight: 500 !important; line-height: 1.5 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card input::placeholder, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card textarea::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; opacity: 1 !important; }

/* ---- date and time: the value on the right, the native picker under it ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-pick, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal button.cal-pick {
    position: relative !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important;
    min-height: 50px !important; height: 50px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; overflow: hidden !important; text-align: right !important; cursor: pointer;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-pick > span { flex: 0 0 auto !important; font-size: 14px !important; font-weight: 600 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-pick > span.is-empty { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-pick input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; border: 0 !important; background: transparent !important; color-scheme: light !important; cursor: pointer; }

/* ---- stacked rows: the online-meeting note, the address/link row ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row--stack, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row--location { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row-line { display: flex !important; align-items: center !important; gap: 10px !important; min-height: 50px !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; min-height: 44px !important; padding-top: 4px !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row-top .mobile-blocspace-calendar-field-label { margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-badge { display: none; align-items: center !important; padding: 4px 9px !important; border-radius: 999px !important; background: rgba(15, 191, 164, 0.12) !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #0B8F7B !important; -webkit-text-fill-color: #0B8F7B !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-helper { margin: 0 !important; padding: 0 0 12px !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.45 !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-link-actions { display: none; gap: 8px !important; margin: 0 !important; padding: 0 0 12px !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-link-actions button {
    flex: 0 0 auto !important; min-height: 0 !important; height: 32px !important; margin: 0 !important; padding: 0 14px !important; border: 1px solid #EAEAE6 !important; border-radius: 999px !important;
    background: #F1F1ED !important; box-shadow: none !important; font-size: 12px !important; font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; cursor: pointer;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .mobile-blocspace-calendar-suggestions { margin: 0 0 10px !important; }

/* ---- submit ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-foot { display: block !important; margin: 18px 0 0 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-submit, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal button.cal-submit, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-submit:disabled {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; height: 54px !important; min-height: 54px !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 16px !important; background: #EDEDE8 !important; box-shadow: none !important; transform: none !important; opacity: 1 !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-submit::before, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-submit::after { content: none !important; display: none !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-submit.is-ready { background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-note { background: transparent !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; margin: 9px 0 0 !important; text-align: center !important; font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }