/* ═══════════════════════════════════════════════════ Cally datepicker – modern redesign. Loaded on any page that uses lagerboks_enqueue_cally(). ═══════════════════════════════════════════════════ */ /* ── Wrapper ── */ .lgbx-cally-wrapper { position: relative; display: inline-block; width: 100%; } /* ── Trigger button (replaces native date input) ── */ .lgbx-cally-trigger { display: flex; align-items: center; width: 100%; padding: 0.5rem 0.875rem; border: 1.5px solid #d2d2d7; border-radius: 10px; background: #fff; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.9375rem; line-height: 1.5; color: #aeaeb2; cursor: pointer; text-align: left; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; } .lgbx-cally-trigger:hover, .lgbx-cally-trigger:focus { border-color: #1d6fb8; outline: none; box-shadow: 0 0 0 3px rgba(29, 111, 184, 0.15); } .lgbx-cally-trigger--has-value { color: #1d1d1f; } /* ── Popover – appended to , fixed positioning ── */ .lgbx-cally-popover { display: none; position: fixed; z-index: 99999; padding: 16px 12px 12px; background: #fff; border: none; border-radius: 16px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06); } .lgbx-cally-popover--open { display: block; } /* ── Calendar font ── */ calendar-month { --color-accent: #3a3a3c; --color-text-on-accent: #fff; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; display: block; } /* ── Month / year heading ── */ calendar-month::part(heading) { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; font-size: 1.1rem; color: #1d1d1f; text-transform: capitalize; text-align: left; } /* ── Weekday labels ── */ calendar-month::part(weekday) { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: #6e6e73; letter-spacing: 0.05em; } /* ── Navigation buttons (< >) ── */ calendar-month::part(button previous), calendar-month::part(button next) { border: none; background: transparent; border-radius: 50%; width: 32px; height: 32px; padding: 0; font-size: 1rem; color: #1d1d1f; cursor: pointer; transition: background 0.12s; } calendar-month::part(button previous):hover, calendar-month::part(button next):hover { background: #e5e5ea; } /* ── All buttons in calendar-month (common base) ── */ calendar-month::part(button) { border-radius: 50%; min-width: 38px; min-height: 38px; border: none; cursor: pointer; transition: background 0.12s; } calendar-month::part(button):hover { background: #f2f2f7; } /* ── Individual date cells ── */ calendar-date::part(button) { border: none; background: transparent; border-radius: 50%; width: 38px; height: 38px; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.05rem; font-weight: 400; color: #1d1d1f; cursor: pointer; transition: background 0.12s; } calendar-date::part(button):hover { background: #f2f2f7; } /* ── Today ── */ calendar-month::part(today) { background: #e5e5ea; border-radius: 50%; font-weight: 500; outline: none; color: #1d1d1f; } /* ── Selected date ── */ calendar-month::part(selected) { background: #3a3a3c; color: #fff; border-radius: 50%; } /* ── Disabled / fully-booked days ── */ calendar-month::part(disallowed) { opacity: 0.25; text-decoration: none; cursor: not-allowed; } /* ── Outside current month ── */ calendar-month::part(outside) { opacity: 0.25; } /* ── Time picker select ── */ .lgbx-wizard select.lgbx-input { appearance: none; -webkit-appearance: none; padding: 0.5rem 2.5rem 0.5rem 0.875rem; font-size: 0.9375rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; border: 1px solid #d2d2d7; border-radius: 10px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; color: #1d1d1f; cursor: pointer; line-height: 1.5; box-sizing: border-box; width: 100%; transition: border-color 0.15s, box-shadow 0.15s; } .lgbx-wizard select.lgbx-input:focus { outline: none; border-color: #1d6fb8; box-shadow: 0 0 0 3px rgba(29, 111, 184, 0.15); } .lgbx-wizard select.lgbx-input:disabled { opacity: 0.45; cursor: not-allowed; color: #aeaeb2; } /* ── Birth date picker (year → month → day) ── */ .lgbx-cally-bd-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .lgbx-cally-bd-title { flex: 1; text-align: center; font-weight: 700; font-size: 1rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #1d1d1f; text-transform: capitalize; } .lgbx-cally-bd-nav, .lgbx-cally-bd-back { background: none; border: 1px solid #e5e5ea; border-radius: 50%; width: 32px; height: 32px; padding: 0; cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; color: #1d1d1f; transition: background 0.12s; } .lgbx-cally-bd-nav:hover, .lgbx-cally-bd-back:hover { background: #e5e5ea; } .lgbx-cally-bd-grid { display: grid; gap: 6px; } .lgbx-cally-bd-years { grid-template-columns: repeat(4, 1fr); } .lgbx-cally-bd-months { grid-template-columns: repeat(3, 1fr); } .lgbx-cally-bd-cell { padding: 10px 4px; border: 1px solid #e5e5ea; border-radius: 10px; background: #fff; cursor: pointer; text-align: center; font-size: 0.9em; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #1d1d1f; transition: background 0.12s; } .lgbx-cally-bd-cell:hover:not([disabled]) { background: #f2f2f7; } .lgbx-cally-bd-cell.is-selected { background: #3a3a3c; color: #fff; border-color: #3a3a3c; } .lgbx-cally-bd-cell[disabled] { opacity: 0.25; cursor: not-allowed; } /* Hide Cally's own heading/nav in birth date picker (we have our own) */ .lgbx-cally-birthdate calendar-date::part(button) { display: none; } .lgbx-cally-birthdate calendar-date::part(heading) { display: none; } /* ── Responsive ── */ @media (max-width: 600px) { .lgbx-cally-popover { left: 8px !important; right: 8px; width: auto !important; max-width: calc(100vw - 16px); padding: 16px 10px 12px; } .lgbx-cally-trigger { font-size: 16px; /* Prevents iOS zoom on focus */ } calendar-date::part(button) { min-width: 40px; min-height: 40px; font-size: 1rem; } .lgbx-cally-bd-cell { padding: 10px 6px; font-size: 0.95em; } .lgbx-cally-bd-nav, .lgbx-cally-bd-back { width: 36px; height: 36px; } }