/*
 * Daylight pieces shared by the public site and the dashboard: progress bar,
 * theme menu, reveal/stagger motion, notification bell, announcements.
 * Colours come from the --dl-* tokens defined in daylight.css / daylight-dashboard.css.
 */

/* Cross-fade when switching palette (class added for ~300ms by daylight-core.js). */
.dl-theming, .dl-theming *, .dl-theming *::before, .dl-theming *::after {
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease !important;
}

/* ---------- Progress bar ---------- */
.dl-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100000; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.dl-progress.on { opacity: 1; }
.dl-progress.done { opacity: 0; transition-delay: .15s; }
.dl-progress i {
    display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, #fd861c, #ffb366);
    box-shadow: 0 0 10px rgba(253, 134, 28, .55);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
[dir="rtl"] .dl-progress i { transform-origin: 100% 50%; }

/* ---------- Theme menu ---------- */
.dl-theme { position: relative; display: inline-flex; }
.dl-round-btn {
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--dl-line-2); background: var(--dl-surface);
    color: var(--dl-ink); display: inline-grid; place-items: center; cursor: pointer; font-size: 17px;
    transition: border-color .2s, transform .15s;
}
.dl-round-btn:hover { border-color: var(--dl-ink); }
.dl-round-btn:active, .dl-theme-btn:active { transform: scale(.94); }
.dl-theme-btn i { font-size: 17px; line-height: 1; }
.dl-theme-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1100; min-width: 168px; padding: 6px;
    background: var(--dl-surface); border: 1px solid var(--dl-line); border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .16); display: grid; gap: 2px;
    opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; visibility: hidden;
    transition: opacity .18s ease, transform .22s cubic-bezier(.16, 1, .3, 1), visibility 0s .22s;
}
.dl-theme-menu.open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.dl-theme-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px;
    background: none; color: var(--dl-ink); font: 600 14px var(--dl-font, 'Manrope', sans-serif); cursor: pointer; text-align: left;
}
.dl-theme-menu button i { width: 18px; text-align: center; color: var(--dl-subtle); font-size: 15px; }
.dl-theme-menu button:hover, .dl-theme-menu button:focus-visible { background: var(--dl-muted-bg); outline: none; }
.dl-theme-menu button[aria-checked="true"] { background: var(--dl-tint); color: var(--dl-accent-text); }
.dl-theme-menu button[aria-checked="true"] i { color: var(--dl-accent-text); }
[dir="rtl"] .dl-theme-menu { right: auto; left: 0; transform-origin: top left; }

/* ---------- Motion ---------- */
.dl-js .dl-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
.dl-js .dl-stagger.in > * { opacity: 1; transform: none; }
.dl-ring { display: inline-block; animation: dl-ring 1s ease both; transform-origin: 50% 0; }
@keyframes dl-ring {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); }
    60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); }
}

/* ---------- Notification bell ---------- */
.dl-bell .notifications { width: 360px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.dl-bell .dropdown-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--dl-line); }
.dl-bell .dropdown-header b { color: var(--dl-ink); font-size: 15px; }
.dl-bell .dl-link-btn { border: 0; background: none; padding: 0; font: 700 13px var(--dl-font, sans-serif); color: var(--dl-accent-text); cursor: pointer; }
.dl-bell .dl-notes { max-height: 380px; overflow-y: auto; scrollbar-width: thin; }
.dl-bell .notification-item a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; color: inherit; }
.dl-bell .notification-item a:hover { background: var(--dl-muted-bg); }
.dl-bell .notification-item + .notification-item { border-top: 1px solid var(--dl-line); }
.dl-note-ic { flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--dl-tint); color: var(--dl-accent-text); font-size: 15px; }
.dl-bell .notification-item h4 { font-size: 14px; font-weight: 600; color: var(--dl-ink); margin: 0 0 2px; line-height: 1.45; letter-spacing: 0; }
.dl-bell .notification-item p { font-size: 12px; color: var(--dl-subtle); margin: 0; }
.dl-notes-empty { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 28px 20px 30px; }
.dl-notes-empty i { font-size: 26px; color: var(--dl-faint); margin-bottom: 6px; }
.dl-notes-empty b { color: var(--dl-ink); font-size: 15px; }
.dl-notes-empty span { color: var(--dl-subtle); font-size: 13px; max-width: 240px; }

/* ---------- Toasts (Notiflix) ---------- */
[id^="NotiflixNotifyWrap"] > div { box-shadow: 0 18px 50px rgba(0, 0, 0, .28) !important; border: 1px solid rgba(255, 255, 255, .06); font-weight: 600 !important; padding: 14px 16px 14px 52px !important; line-height: 1.45 !important; }

@media (prefers-reduced-motion: reduce) {
    .dl-progress i { transition: none; }
    .dl-js .dl-stagger > * { opacity: 1; transform: none; transition: none; }
    .dl-ring { animation: none; }
    .dl-theme-menu { transition: none; }
}

/* ---------- Bootstrap follows the palette ---------- */
.daylight, .dl-app {
    --bs-body-bg: var(--dl-bg); --bs-body-color: var(--dl-body); --bs-emphasis-color: var(--dl-ink);
    --bs-secondary-color: var(--dl-subtle); --bs-tertiary-bg: var(--dl-muted-bg); --bs-secondary-bg: var(--dl-muted-bg);
    --bs-border-color: var(--dl-line); --bs-heading-color: var(--dl-ink); --bs-link-color: var(--dl-accent-text);
}
.daylight .dropdown-menu, .dl-app .dropdown-menu {
    --bs-dropdown-bg: var(--dl-surface); --bs-dropdown-color: var(--dl-body); --bs-dropdown-border-color: var(--dl-line);
    --bs-dropdown-link-color: var(--dl-body); --bs-dropdown-link-hover-color: var(--dl-ink); --bs-dropdown-link-hover-bg: var(--dl-muted-bg);
    --bs-dropdown-link-active-bg: var(--dl-tint); --bs-dropdown-link-active-color: var(--dl-accent-text);
    --bs-dropdown-header-color: var(--dl-subtle); --bs-dropdown-divider-bg: var(--dl-line);
}
.dl-app .dropdown-item i, .daylight .dropdown-item i { width: 18px; margin-right: 10px; text-align: center; color: var(--dl-subtle); }
.daylight .modal-content, .dl-app .modal-content, .dl-app .offcanvas { background: var(--dl-surface); color: var(--dl-body); }
.daylight .table, .dl-app .table { --bs-table-color: var(--dl-body); --bs-table-bg: transparent; --bs-table-border-color: var(--dl-line); --bs-table-hover-bg: var(--dl-muted-bg); --bs-table-hover-color: var(--dl-ink); }
.daylight .form-control, .daylight .form-select, .dl-app .form-control, .dl-app .form-select { color: var(--dl-ink); }
.daylight .form-control:disabled, .dl-app .form-control:disabled, .dl-app .form-control[readonly] { background-color: var(--dl-muted-bg); color: var(--dl-muted); }
.dl-app .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dl-ink); }
.dl-app .select2-dropdown { background: var(--dl-surface); border-color: var(--dl-line); color: var(--dl-body); }
.dl-app .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--dl-input); color: var(--dl-ink); border-color: var(--dl-line-2); }
.dl-app .select2-container--default .select2-results__option--highlighted[aria-selected],
.dl-app .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--dl-tint); color: var(--dl-accent-text); }
.dl-app .select2-container--default .select2-results__option[aria-selected=true],
.dl-app .select2-container--default .select2-results__option--selected { background: var(--dl-muted-bg); color: var(--dl-ink); }
.btn-close { filter: var(--dl-close-filter, none); }
:root[data-theme="dark"] { --dl-close-filter: invert(1) grayscale(1) brightness(2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --dl-close-filter: invert(1) grayscale(1) brightness(2); } }

/* ---------- Announcements ---------- */
.dl-ann-bar { --t: #fd861c; --t-bg: var(--dl-tint); position: relative; z-index: 1001; background: var(--t-bg); border-bottom: 1px solid var(--dl-line); color: var(--dl-ink); animation: dl-ann-down .45s cubic-bezier(.16, 1, .3, 1) both; }
.dl-ann-bar.out { animation: none; overflow: hidden; opacity: 0; transition: height .28s cubic-bezier(.16, 1, .3, 1), opacity .2s ease, border-color .28s; border-bottom-color: transparent; }
.dl-ann-bar.t-good { --t: #16a34a; --t-bg: var(--dl-good-bg); }
.dl-ann-bar.t-warn { --t: #d97706; --t-bg: var(--dl-warn-bg); }
.dl-ann-bar.t-bad { --t: #dc2626; --t-bg: var(--dl-bad-bg); }
.dl-ann-bar.t-info { --t: #2563eb; --t-bg: var(--dl-info-bg); }
.dl-ann-bar-inner { max-width: 1200px; margin: 0 auto; padding: 10px 56px 10px 32px; display: flex; align-items: center; gap: 12px; box-sizing: border-box; position: relative; }
.dl-ann-bar-ic { color: var(--t); font-size: 17px; flex: none; }
.dl-ann-bar-text { margin: 0; flex: 1; min-width: 0; font-size: 14px; color: var(--dl-body) !important; line-height: 1.45; }
.dl-ann-bar-text b { color: var(--dl-ink); }
.dl-ann-bar-cta { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--dl-ink) !important; white-space: nowrap; }
.dl-ann-bar-cta:hover i { transform: translateX(2px); }
.dl-ann-bar-cta i { transition: transform .2s; }
.dl-ann-bar-x { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--dl-ink); cursor: pointer; display: grid; place-items: center; }
.dl-ann-bar-x:hover { background: rgba(127, 127, 127, .14); }
@keyframes dl-ann-down { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dl-ann-up { to { transform: translateY(-100%); opacity: 0; } }
@media (max-width: 640px) {
    .dl-ann-bar-inner { padding: 10px 48px 10px 16px; flex-wrap: wrap; }
    .dl-ann-bar-text span { display: none; }
}

body.dl-ann-lock { overflow: hidden; }
.dl-ann-pop {
    position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
    background: rgba(12, 12, 14, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .25s ease; overflow-y: auto; scrollbar-width: none;
}
.dl-ann-pop::-webkit-scrollbar { display: none; }
.dl-ann-pop.open { opacity: 1; }
.dl-ann-card {
    --t: #fd861c; --t-bg: var(--dl-tint);
    position: relative; width: 100%; max-width: 480px; margin: auto; background: var(--dl-surface); color: var(--dl-body);
    border: 1px solid var(--dl-line); border-radius: 28px; padding: 32px; box-sizing: border-box;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .3); transform: translateY(16px) scale(.97); transition: transform .4s cubic-bezier(.16, 1, .3, 1);
    overflow: hidden;
}
.dl-ann-pop.open .dl-ann-card { transform: none; }
.dl-ann-card.t-good { --t: #16a34a; --t-bg: var(--dl-good-bg); }
.dl-ann-card.t-warn { --t: #d97706; --t-bg: var(--dl-warn-bg); }
.dl-ann-card.t-bad { --t: #dc2626; --t-bg: var(--dl-bad-bg); }
.dl-ann-card.t-info { --t: #2563eb; --t-bg: var(--dl-info-bg); }
.dl-ann-card::before {
    content: ''; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, var(--t-bg) 0%, transparent 70%);
}
.dl-ann-art { position: relative; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--t-bg); color: var(--t); font-size: 24px; }
.dl-ann-pill { position: relative; display: inline-block; margin-top: 18px; font-size: 12px; font-weight: 700; color: var(--t); text-transform: uppercase; letter-spacing: .06em; }
.dl-ann-title { position: relative; font-size: 24px !important; line-height: 1.25 !important; margin: 6px 40px 0 0 !important; color: var(--dl-ink) !important; letter-spacing: -.03em; }
.dl-ann-body { position: relative; margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--dl-body); max-height: 46vh; overflow-y: auto; }
.dl-ann-body p { margin: 0 0 10px; color: inherit; font-size: inherit !important; line-height: inherit !important; }
.dl-ann-body > :last-child { margin-bottom: 0; }
.dl-ann-body img { max-width: 100%; height: auto; border-radius: 14px; }
.dl-ann-body [style] { color: inherit !important; background: transparent !important; font-family: inherit !important; }
.dl-ann-foot { position: relative; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 24px; }
.dl-ann-ok, .dl-ann-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px;
    font: 700 15px var(--dl-font, 'Manrope', sans-serif); cursor: pointer; text-decoration: none; transition: transform .15s, background .2s;
}
.dl-ann-ok { border: 1px solid var(--dl-line-2); background: var(--dl-surface); color: var(--dl-ink); }
.dl-ann-ok:hover { border-color: var(--dl-ink); }
.dl-ann-cta { border: 0; background: #fd861c; color: #1c0d00 !important; box-shadow: 0 8px 24px rgba(253, 134, 28, .28); }
.dl-ann-cta:hover { background: #ff9a3d; }
.dl-ann-ok:active, .dl-ann-cta:active { transform: scale(.97); }
.dl-ann-x { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--dl-muted-bg); color: var(--dl-ink); cursor: pointer; display: grid; place-items: center; z-index: 1; }
.dl-ann-x:hover { background: var(--dl-line-2); }
@media (max-width: 575px) {
    .dl-ann-card { padding: 24px 20px; border-radius: 24px; }
    .dl-ann-title { font-size: 20px !important; }
    .dl-ann-foot > * { flex: 1; }
}

/* Dashboard announcement cards */
.dl-ann-cards { display: grid; gap: 12px; margin: 0 0 20px; padding: 0 !important; }
.dl-ann-cards:empty { display: none; }
.dl-ann-cardline {
    --t: #fd861c; --t-bg: var(--dl-tint);
    position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 20px 56px 20px 20px; border-radius: 22px;
    background: var(--dl-surface); border: 1px solid var(--dl-line); overflow: hidden;
}
.dl-ann-cardline::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--t); }
.dl-ann-cardline.t-good { --t: #16a34a; --t-bg: var(--dl-good-bg); }
.dl-ann-cardline.t-warn { --t: #d97706; --t-bg: var(--dl-warn-bg); }
.dl-ann-cardline.t-bad { --t: #dc2626; --t-bg: var(--dl-bad-bg); }
.dl-ann-cardline.t-info { --t: #2563eb; --t-bg: var(--dl-info-bg); }
.dl-ann-cardline .dl-ann-art { width: 44px; height: 44px; border-radius: 14px; font-size: 19px; flex: none; }
.dl-ann-cardline h3 { font-size: 16px; margin: 0 0 4px; color: var(--dl-ink); letter-spacing: -.01em; }
.dl-ann-cardline .dl-ann-meta { font-size: 12px; font-weight: 700; color: var(--t); text-transform: uppercase; letter-spacing: .05em; }
.dl-ann-cardline .dl-ann-body { margin-top: 4px; font-size: 14px; max-height: none; }
.dl-ann-cardline .dl-ann-cta { height: 38px; padding: 0 16px; font-size: 13px; margin-top: 10px; }
.dl-ann-cardline .dl-ann-x { top: 14px; right: 14px; width: 32px; height: 32px; }
.dl-ann-cardline.out { opacity: 0; transform: translateY(-6px); overflow: hidden; transition: opacity .2s, transform .25s, height .3s cubic-bezier(.16, 1, .3, 1), padding .3s, margin .3s; }
@media (prefers-reduced-motion: reduce) { .dl-ann-bar, .dl-ann-bar.out { animation: none; } .dl-ann-card, .dl-ann-pop { transition: none; } }
.dl-ann-pop .dl-ann-title, .dl-ann-cardline h3, .dl-ann-pill, .dl-ann-meta { text-transform: none; font-family: 'Manrope', system-ui, sans-serif; }
.dl-ann-pill, .dl-ann-cardline .dl-ann-meta { text-transform: uppercase; }
.dl-ann-pop .dl-ann-title::first-letter, .dl-ann-cardline h3::first-letter { text-transform: none; }
.dl-ann-pop, .dl-ann-bar { font-family: 'Manrope', system-ui, sans-serif; }

/* ---------- Cookie notice and "Install the app" card ----------
   Same corner (bottom-left, clear of the chat button), never both at once: the install
   card waits for the cookie answer. Full-width strip on phones. */
.dl-consent, .dl-pwa {
    position: fixed; left: 20px; bottom: 20px; z-index: 1040; width: 380px; max-width: calc(100% - 40px); box-sizing: border-box;
    background: var(--dl-surface); color: var(--dl-body); border: 1px solid var(--dl-line); border-radius: 20px;
    box-shadow: 0 24px 60px rgba(24, 24, 27, .16), 0 2px 6px rgba(24, 24, 27, .06);
    font: 500 14px/1.5 var(--dl-font, 'Manrope', system-ui, sans-serif);
    opacity: 0; transform: translateY(14px); transition: opacity .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.dl-consent[hidden], .dl-pwa[hidden] { display: none !important; }
.dl-consent.in, .dl-pwa.in { opacity: 1; transform: none; }
.dl-consent { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 18px; }
.dl-consent-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--dl-tint); color: #fd861c; font-size: 18px; }
.dl-consent-title { margin: 0; font-weight: 800; font-size: 15px; color: var(--dl-ink); letter-spacing: -.01em; }
.dl-consent-text { margin: 2px 0 0; font-size: 13.5px; color: var(--dl-muted); }
.dl-consent-text a { color: var(--dl-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.dl-consent-actions, .dl-pwa-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.dl-consent-actions button, .dl-pwa-actions button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px;
    font: 700 14px var(--dl-font, 'Manrope', system-ui, sans-serif); cursor: pointer; white-space: nowrap; transition: transform .15s, background .2s, border-color .2s;
}
.dl-consent-no, .dl-pwa-later { border: 1px solid var(--dl-line-2); background: var(--dl-surface); color: var(--dl-ink); }
.dl-consent-no:hover, .dl-pwa-later:hover { border-color: var(--dl-ink); }
.dl-consent-yes, .dl-pwa-install { border: 0; background: #fd861c; color: #1c0d00; }
.dl-consent-yes:hover, .dl-pwa-install:hover { background: #ff9a3d; }
.dl-consent-actions button:active, .dl-pwa-actions button:active { transform: scale(.97); }
.dl-consent-actions button:focus-visible, .dl-pwa-actions button:focus-visible, .dl-pwa-x:focus-visible { outline: 2px solid #fd861c; outline-offset: 2px; }

.dl-pwa { padding: 18px; }
.dl-pwa-head { display: flex; gap: 14px; align-items: center; padding-right: 32px; }
.dl-pwa-icon { width: 48px; height: 48px; border-radius: 13px; flex: none; object-fit: cover; background: #fff; border: 1px solid var(--dl-line); }
.dl-pwa-title { margin: 0; font-weight: 800; font-size: 15px; color: var(--dl-ink); letter-spacing: -.01em; }
.dl-pwa-sub { margin: 2px 0 0; font-size: 13.5px; color: var(--dl-muted); }
.dl-pwa-ios { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--dl-muted-bg); font-size: 13.5px; color: var(--dl-body); }
.dl-pwa-ios i { color: var(--dl-ink); }
.dl-pwa-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--dl-muted); cursor: pointer; display: grid; place-items: center; }
.dl-pwa-x:hover { background: var(--dl-muted-bg); color: var(--dl-ink); }

@media (max-width: 575.98px) {
    /* Above the live-chat button, which sits in the bottom-right corner. */
    .dl-consent, .dl-pwa { left: 10px; right: 10px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; border-radius: 18px; padding: 14px; }
    .dl-consent { grid-template-columns: 1fr; }
    .dl-consent-ic { display: none; }
    .dl-consent-actions, .dl-pwa-actions { margin-top: 10px; }
    .dl-consent-actions button, .dl-pwa-actions button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .dl-consent, .dl-pwa { transition: opacity .2s ease; transform: none; }
}