/* dc-app.css — the app-style home page, the service detail pages and the cards for news and offers (feature 19).
 * Mobile first: it should feel like an app on a phone (big rounded icons, thumb-sized targets, horizontal swipe strips) and still read well on a desktop.
 * The rounded app icons are a deliberate exception to the square corners used elsewhere. Colours come from the c-<colour> classes of dc-theme.css. */
.dc-app { max-width: 1180px; margin: 0 auto; padding: 0 14px 28px; }
.dc-app-hero { padding: 18px 0 8px; }
.dc-app-hello { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--dc-ink, #0f172a); margin: 0; line-height: 1.2; }
.dc-app-hello span { background: var(--dc-grad, linear-gradient(135deg, #4f46e5, #7c3aed)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dc-app-sub { color: var(--dc-muted, #64748b); margin: 4px 0 14px; font-size: .95rem; }
.dc-app-search { position: relative; display: flex; align-items: center; background: #fff; border: 1.5px solid var(--dc-line, #e2e8f0); border-radius: 8px; padding: 4px 4px 4px 14px; box-shadow: 0 6px 24px rgba(15, 23, 42, .06); }
.dc-app-search i { color: #94a3b8; font-size: 1.1rem; }
.dc-app-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 12px 10px; font-size: 1rem; color: var(--dc-ink, #0f172a); }
.dc-app-search button { border-radius: 14px !important; padding: 10px 18px; }
.dc-app-search:focus-within { border-color: var(--dc-brand, #4f46e5); box-shadow: var(--dc-ring); }
.dc-app-quick { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 2px; scrollbar-width: none; }
.dc-app-quick::-webkit-scrollbar { display: none; }
.dc-app-quick a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--dc-line, #e2e8f0); color: var(--dc-ink, #0f172a) !important; font-weight: 700; font-size: .85rem; text-decoration: none !important; }
.dc-app-quick a i { color: var(--dc-brand, #4f46e5); }

/* section heads */
.dc-app-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 26px 0 10px; }
.dc-app-h h2 { font-size: 1.12rem; font-weight: 800; margin: 0; color: var(--dc-ink, #0f172a); letter-spacing: -.01em; }
.dc-app-h a { font-size: .85rem; font-weight: 700; text-decoration: none; }

/* floating templates (always on top of the page) */
.dc-float { position: relative; margin: 14px -14px 0; padding: 14px 0 18px; overflow: hidden; background: radial-gradient(120% 120% at 10% 0%, color-mix(in srgb, var(--dc-brand, #4f46e5) 14%, transparent), transparent 60%), radial-gradient(100% 100% at 100% 100%, color-mix(in srgb, var(--dc-brand-2, #7c3aed) 14%, transparent), transparent 55%); }
.dc-float-track { display: flex; gap: 16px; width: max-content; animation: dc-marq 55s linear infinite; padding: 8px 16px; }
.dc-float:hover .dc-float-track, .dc-float:focus-within .dc-float-track { animation-play-state: paused; }
@keyframes dc-marq { to { transform: translateX(-50%); } }
@keyframes dc-bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.dc-fcard { --r: 0deg; flex: none; width: 128px; text-decoration: none !important; color: inherit; animation: dc-bob 6.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.dc-fcard:nth-child(3n) { --r: -2deg; } .dc-fcard:nth-child(3n+1) { --r: 1.5deg; margin-top: 14px; }
.dc-fcard { display: block; }
.dc-fcard .sheet { display: block; position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 14px 30px rgba(15, 23, 42, .18); border: 1px solid rgba(15, 23, 42, .06); }
.dc-fcard .sheet .bg { position: absolute; inset: -8px; background-size: cover; background-position: center; filter: blur(12px); opacity: .55; }
.dc-fcard .sheet img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
.dc-fcard .sample { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px; color: #fff; background: linear-gradient(160deg, var(--s1, #6366f1), var(--s2, #a855f7)); }
.dc-fcard .sample i { font-size: 1.8rem; opacity: .9; } .dc-fcard .sample b { font-size: .95rem; line-height: 1.15; margin-top: 6px; } .dc-fcard .sample small { opacity: .85; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
.dc-fcard .cap { display: block; text-align: center; font-size: .72rem; font-weight: 700; color: var(--dc-text, #334155); margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) { .dc-fcard { width: 150px; } .dc-float { margin: 14px 0 0; border-radius: 10px; } }
@media (prefers-reduced-motion: reduce) { .dc-float-track { animation: none; overflow-x: auto; width: auto; } .dc-fcard { animation: none; } }

/* top placements: big banners */
.dc-banners { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 8px; scrollbar-width: none; }
.dc-banners::-webkit-scrollbar { display: none; }
.dc-banner { position: relative; flex: 0 0 min(92%, 520px); scroll-snap-align: start; display: grid; grid-template-columns: 1fr 42%; min-height: 148px; border-radius: 8px; overflow: hidden; text-decoration: none !important; color: #fff !important; background: linear-gradient(135deg, var(--c-dark, #3730a3), var(--c, #4f46e5)); box-shadow: 0 12px 30px rgba(var(--dc-rgb, 79, 70, 229), .25); }
.dc-banner .tx { padding: 16px 16px 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.dc-banner .tag { align-self: flex-start; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .22); padding: 2px 9px; border-radius: 999px; }
.dc-banner h3 { font-size: 1.08rem; font-weight: 800; margin: 0; line-height: 1.2; overflow-wrap: anywhere; } .dc-banner p { margin: 0; font-size: .85rem; opacity: .92; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-banner .go { align-self: flex-start; margin-top: 4px; background: #fff; color: #0f172a; font-weight: 800; font-size: .8rem; padding: 6px 14px; border-radius: 999px; }
.dc-banner .im { position: relative; background: rgba(255, 255, 255, .14) center / contain no-repeat; margin: 10px 10px 10px 0; border-radius: 16px; }
.dc-banner.noimg { grid-template-columns: 1fr; }
.dc-banner .sp { position: absolute; top: 8px; right: 12px; font-size: .62rem; opacity: .75; text-transform: uppercase; letter-spacing: .08em; }

/* the launcher: round-cornered app icons */
.dc-launch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
@media (min-width: 576px) { .dc-launch { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .dc-launch { grid-template-columns: repeat(6, 1fr); gap: 22px 14px; } }
.dc-app-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none !important; color: var(--dc-ink, #0f172a) !important; padding: 4px 2px; -webkit-tap-highlight-color: transparent; }
.dc-app-ico { position: relative; width: 68px; height: 68px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-size: 1.9rem; background: linear-gradient(145deg, var(--c), var(--c-dark)); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .18s, box-shadow .18s; }
.dc-app-ico::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .28), transparent 55%); pointer-events: none; }
.dc-app-tile:hover .dc-app-ico, .dc-app-tile:focus-visible .dc-app-ico { transform: translateY(-4px) scale(1.04); }
.dc-app-tile:active .dc-app-ico { transform: scale(.94); }
@media (min-width: 992px) { .dc-app-ico { width: 84px; height: 84px; font-size: 2.3rem; border-radius: 10px; } }
.dc-app-tile .t { margin-top: 9px; font-weight: 800; font-size: .86rem; line-height: 1.15; }
.dc-app-tile .d { margin-top: 2px; font-size: .7rem; color: var(--dc-muted, #64748b); line-height: 1.25; max-width: 11ch; }
@media (min-width: 576px) { .dc-app-tile .d { max-width: 18ch; } }
.dc-app-tile .nb { position: absolute; top: -2px; right: calc(50% - 44px); background: #ef4444; color: #fff; font-size: .6rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; border: 2px solid var(--bs-body-bg, #f8fafc); }

/* news and offers (cards used on the home page and in the Promote preview) */
.dc-news { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 12px; scrollbar-width: thin; }
.dc-news-card { --c: #4f46e5; --c-bg: #eef2ff; flex: 0 0 250px; scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--dc-line, #e2e8f0); border-radius: 8px; overflow: hidden; text-decoration: none !important; color: var(--dc-ink, #0f172a) !important; box-shadow: 0 6px 20px rgba(15, 23, 42, .06); transition: transform .18s, box-shadow .18s; }
a.dc-news-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 23, 42, .12); }
.dc-news-img { aspect-ratio: 16 / 9; background: var(--c-bg) center / contain no-repeat; display: grid; place-items: center; color: var(--c); }
.dc-news-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.dc-news-title { font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; } .dc-news-text { font-size: .84rem; color: var(--dc-muted, #64748b); overflow-wrap: anywhere; }
.dc-news-card .btn { align-self: flex-start; border-radius: 999px !important; }
.dc-news-card.add { border-style: dashed; background: transparent; justify-content: center; text-align: center; align-items: center; padding: 18px; gap: 8px; box-shadow: none; }
.dc-news-body, .dc-news-title, .dc-news-text { display: block; }
.dc-news-body { display: flex; }
.dc-news-card .sp { font-size: .62rem; color: var(--dc-muted, #64748b); text-transform: uppercase; letter-spacing: .08em; }

/* people */
.dc-people { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.dc-person { flex: 0 0 150px; text-align: center; text-decoration: none !important; color: var(--dc-ink, #0f172a) !important; background: #fff; border: 1px solid var(--dc-line, #e2e8f0); border-radius: 8px; padding: 14px 10px; }
.dc-person .av { position: relative; width: 72px; height: 72px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden; background: var(--c-bg, #eef2ff); display: grid; place-items: center; font-weight: 800; font-size: 1.6rem; color: var(--c, #4f46e5); }
.dc-person .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dc-person b { display: block; font-size: .88rem; line-height: 1.2; overflow-wrap: anywhere; } .dc-person small { display: block; color: var(--dc-muted, #64748b); font-size: .74rem; line-height: 1.25; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* call to action card */
.dc-app-cta { margin-top: 26px; border-radius: 10px; padding: 22px 20px; color: #fff; background: var(--dc-grad, linear-gradient(135deg, #4f46e5, #7c3aed)); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.dc-app-cta h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 2px; color: #fff; } .dc-app-cta p { margin: 0; opacity: .9; font-size: .92rem; }
.dc-app-cta .btn { border-radius: 999px !important; background: #fff; color: #0f172a !important; border: 0; font-weight: 800; padding: 10px 22px; box-shadow: none; }

/* service detail page */
.dc-hub-hero { color: #fff; padding: 26px 0 30px; background: linear-gradient(135deg, var(--c-dark), var(--c)); position: relative; overflow: hidden; }
.dc-hub-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.dc-hub-hero .back { color: rgba(255, 255, 255, .85) !important; text-decoration: none !important; font-weight: 700; font-size: .9rem; }
.dc-hub-ico { width: 72px; height: 72px; border-radius: 24px; background: rgba(255, 255, 255, .2); display: grid; place-items: center; font-size: 2.1rem; margin: 14px 0 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.dc-hub-hero h1 { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; margin: 0; color: #fff; } .dc-hub-hero .tag { opacity: .92; font-weight: 600; margin: 4px 0 0; } .dc-hub-hero .lead { font-size: 1rem; opacity: .95; margin: 12px 0 18px; max-width: 62ch; }
.dc-hub-hero .btn { border-radius: 999px !important; background: #fff; color: #0f172a !important; font-weight: 800; border: 0; padding: 11px 24px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.dc-steps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); counter-reset: st; }
.dc-step { counter-increment: st; background: #fff; border: 1px solid var(--dc-line, #e2e8f0); border-radius: 8px; padding: 16px; position: relative; }
.dc-step::before { content: counter(st); position: absolute; top: 12px; right: 14px; font-weight: 800; font-size: 1.6rem; color: color-mix(in srgb, var(--c) 22%, transparent); }
.dc-step i { font-size: 1.4rem; color: var(--c); } .dc-step b { display: block; margin-top: 6px; } .dc-step span { display: block; font-size: .85rem; color: var(--dc-muted, #64748b); }
.dc-feat { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--dc-line, #e2e8f0); border-radius: 8px; padding: 14px; text-decoration: none !important; color: var(--dc-ink, #0f172a) !important; height: 100%; transition: transform .15s, border-color .15s; }
a.dc-feat:hover { transform: translateY(-2px); border-color: var(--c); }
.dc-feat .ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--c-bg); color: var(--c); font-size: 1.25rem; }
.dc-feat b { display: block; line-height: 1.2; } .dc-feat span.d { display: block; font-size: .82rem; color: var(--dc-muted, #64748b); margin-top: 2px; }
.dc-feat .acc { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px; background: #fef3c7; color: #92400e; margin-left: 6px; vertical-align: middle; }

/* visitor bottom bar on phones */
body.has-vnav { padding-bottom: var(--nav-height, 70px); }
@media (min-width: 992px) { body.has-vnav { padding-bottom: 0; } }

/* dark mode for these pieces */
html[data-theme="dark"] .dc-app-search, html[data-theme="dark"] .dc-app-quick a, html[data-theme="dark"] .dc-news-card, html[data-theme="dark"] .dc-person, html[data-theme="dark"] .dc-step, html[data-theme="dark"] .dc-feat { background: #141c2e; border-color: #26314a; color: #e2e8f0 !important; }
html[data-theme="dark"] .dc-app-search input { color: #e2e8f0; } html[data-theme="dark"] .dc-app-hello, html[data-theme="dark"] .dc-app-h h2, html[data-theme="dark"] .dc-app-tile, html[data-theme="dark"] .dc-person { color: #f1f5f9 !important; }
html[data-theme="dark"] .dc-news-img { background-color: #19233a; } html[data-theme="dark"] .dc-fcard .cap { color: #cbd5e1; } html[data-theme="dark"] .dc-fcard .sheet { background: #1b2742; border-color: #26314a; box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .dc-app-tile .nb { border-color: #0b1220; } html[data-theme="dark"] .dc-feat b, html[data-theme="dark"] .dc-step b { color: #f1f5f9; }
html[data-theme="dark"] .dc-news-card.add { background: transparent; } html[data-theme="dark"] .dc-feat .acc { background: #3a2a08; color: #fcd34d; }
html[data-theme="dark"] .dc-float { background: radial-gradient(120% 120% at 10% 0%, color-mix(in srgb, var(--dc-btn-a, #4f46e5) 30%, transparent), transparent 60%), radial-gradient(100% 100% at 100% 100%, color-mix(in srgb, var(--dc-btn-b, #7c3aed) 24%, transparent), transparent 55%); }

/* the top bar of visitors holds more now (colour picker): tighten it between phone and wide desktop so "Sign up" is never pushed off the screen */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .navbar .dc-nav-groups .nav-link { padding: .5rem .55rem !important; font-size: .88rem; }
  .navbar .dc-nav-search { width: 8rem; }
  .navbar .btn.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .navbar .navbar-brand { font-size: 1.3rem; }
}

/* ================= Phone header: one row ================= */
@media (max-width: 991.98px) {
  .navbar { padding: 6px 0; }
  .navbar > .container-fluid, .navbar > .container { flex-wrap: nowrap; gap: 4px; }
  .navbar .navbar-brand { font-size: 1.15rem; margin-right: 0; min-width: 0; }
  .navbar .navbar-brand img { width: 30px; height: 29px; margin-right: .4rem !important; }
  .navbar .navbar-brand span { white-space: nowrap; }
  .dc-mrow .btn { padding: .4rem .55rem; }
  body { padding-top: 62px !important; }
}
@media (max-width: 359px) { .navbar .navbar-brand span { display: none; } }

/* ================= Phone menu (slides from the right) ================= */
.dc-menu { --bs-offcanvas-width: min(88vw, 340px); }
.dc-menu .offcanvas-header { padding: 14px 16px; border-bottom: 1px solid var(--dc-line, #e2e8f0); }
.dc-menu-ava { flex: none; width: 42px; height: 42px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--dc-grad, #4f46e5); border-radius: 12px; }
.dc-m-link, .dc-m-group > summary { display: flex; align-items: center; gap: 12px; padding: 11px 8px; color: var(--dc-ink, #0f172a) !important; text-decoration: none !important; font-weight: 700; font-size: .95rem; border-radius: 8px; list-style: none; cursor: pointer; }
.dc-m-group > summary::-webkit-details-marker { display: none; }
.dc-m-link:hover, .dc-m-group > summary:hover { background: rgba(var(--dc-rgb, 79, 70, 229), .08); }
.dc-m-link.active { background: rgba(var(--dc-rgb, 79, 70, 229), .12); color: var(--dc-brand, #4f46e5) !important; }
.dc-m-link > i:first-child, .dc-m-group > summary > i:first-child { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 1.1rem; color: var(--c, #475569); background: color-mix(in srgb, var(--c, #475569) 14%, transparent); }
.dc-m-group .chev { margin-left: auto; font-size: .75rem; opacity: .6; transition: transform .2s; }
.dc-m-group[open] > summary .chev { transform: rotate(180deg); }
.dc-m-sub { margin: 0 0 6px 22px; padding-left: 10px; border-left: 2px solid var(--dc-line, #e2e8f0); }
.dc-m-sub .dc-m-link { font-weight: 600; font-size: .9rem; padding: 8px 6px; } .dc-m-sub .dc-m-link > i:first-child { width: 28px; height: 28px; font-size: .95rem; }
.dc-m-sec { margin: 16px 4px 8px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dc-muted, #64748b); }
.nav-ico { color: var(--c, #475569); }
.app-sidebar .sb-link > i, .app-sidebar .sb-toggle > i:first-child { color: var(--c, inherit); }

/* ================= Bottom bar: coloured icons ================= */
.bottom-nav { padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
.bottom-nav-item { color: var(--dc-muted, #64748b) !important; gap: 1px; }
.bottom-nav-item i { color: var(--c, #64748b) !important; opacity: .85; font-size: 1.35rem; margin-bottom: 1px; padding: 3px 16px; border-radius: 14px; transform: none !important; transition: background .2s, opacity .2s; }
.bottom-nav-item.active { color: var(--c, #4f46e5) !important; }
.bottom-nav-item.active i { opacity: 1; background: color-mix(in srgb, var(--c) 16%, transparent); }

/* ================= Corners: near square for cards and panels (app icons stay softly rounded) ================= */
:root { --dc-radius: 6px; }
.card, .dc-ui .card, .content-card, .sidebar-card, .stat-tile, .dc-panel, .dc-locked, .dc-plan, .dc-tpl, .invite-card, .modal-content, .list-group, .alert, .progress, .swal2-popup, .cover-frame, .dropdown-menu,
.dc-news-card, .dc-banner, .dc-person, .dc-step, .dc-feat, .dc-app-search, .dc-app-cta, .dc-float, .dc-menu .dc-m-link, .dc-m-group > summary, .dc-menu-ava, .dc-hub-ico, .dc-app-search button,
.pf-head, .pf-sec, .pf-card, .pf-link, .pf-form input, .pf-form textarea, .pf-act, .pe-row, .pe-tpl, .pe-link-preview, .pe-phone iframe { border-radius: var(--dc-radius) !important; }
.dc-app-ico { border-radius: 16px; } .dc-fcard .sheet { border-radius: 6px; } .dc-banner .im { border-radius: 4px; } .dc-news-card .btn, .dc-hub-hero .btn { border-radius: 6px !important; } .dc-pchip, .dc-app-quick a { border-radius: 8px !important; }
.pe-phone { border-radius: 8px; } .pe-phone iframe { border-radius: 14px !important; } .pf-ava { border-radius: 12px; } .pf-t-classic .pf-ava, .pf-t-bold .pf-ava { border-radius: 50%; }
.card .card-header:first-child, .modal-header { border-radius: 0 !important; }

/* ================= Saved-draft banner and busy buttons (dc-forms.js) ================= */
.dc-draft { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 14px; margin-bottom: 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-left: 4px solid #3b82f6; color: #1e3a8a; font-size: .9rem; border-radius: 6px; }
.dc-draft .btn { padding: .2rem .7rem; }
html[data-theme="dark"] .dc-draft { background: #0f2540; border-color: #1e3a66; color: #bfdbfe; }
.dc-saving { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 3000; background: #0f172a; color: #fff; padding: 6px 14px; font-size: .8rem; font-weight: 700; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.dc-saving.on { opacity: .95; }
.btn.dc-busy { pointer-events: none; opacity: .8; }
.btn.dc-busy .spinner-border { width: 1em; height: 1em; border-width: .15em; vertical-align: -.12em; margin-right: .45rem; }

/* the phone menu and its dimmed background sit above the bottom bar and the cookie notice */
.offcanvas.dc-menu, .offcanvas#invPreview { z-index: 2100; } .offcanvas-backdrop { z-index: 2090; } .dc-cookie { z-index: 1040 !important; }

/* ================= Search suggestions ================= */
.dc-sug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2200; background: var(--bs-body-bg, #fff); border: 1px solid var(--dc-line, #e2e8f0); border-radius: 8px; box-shadow: 0 18px 40px rgba(15, 23, 42, .18); max-height: min(70vh, 420px); overflow-y: auto; min-width: 280px; }
.dc-sug a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-decoration: none !important; color: var(--dc-ink, #0f172a) !important; border-bottom: 1px solid color-mix(in srgb, var(--dc-line, #e2e8f0) 60%, transparent); }
.dc-sug a:last-child { border-bottom: 0; }
.dc-sug a.on, .dc-sug a:hover { background: rgba(var(--dc-rgb, 79, 70, 229), .09); }
.dc-sug i { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: rgba(var(--dc-rgb, 79, 70, 229), .1); color: var(--dc-brand, #4f46e5); }
.dc-sug .tx { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; } .dc-sug .tx b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dc-sug .tx small { color: var(--dc-muted, #64748b); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-sug em { flex: none; font-style: normal; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--dc-muted, #64748b); }
.dc-sug a.all { justify-content: center; font-weight: 700; font-size: .85rem; color: var(--dc-brand, #4f46e5) !important; }
html[data-theme="dark"] .dc-sug { background: #141c2e; border-color: #26314a; }

/* ================= Skeletons: a soft shimmer where a picture is still on its way (dc-forms.js sets .dc-skel) ================= */
.dc-skel { position: relative; }
.dc-skel::before { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%) -150% 0 / 60% 100% no-repeat, color-mix(in srgb, var(--dc-line, #e2e8f0) 80%, transparent); animation: dcSkel 1.2s linear infinite; }
@keyframes dcSkel { to { background-position: 250% 0, 0 0; } }
html[data-theme="dark"] .dc-skel::before { background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .1) 50%, transparent 80%) -150% 0 / 60% 100% no-repeat, #1b2742; }
@media (prefers-reduced-motion: reduce) { .dc-skel::before { animation: none; } }
.dc-sug .sk { height: 46px; margin: 6px 10px; border-radius: 6px; background: var(--dc-line, #e2e8f0); opacity: .6; animation: dcPulse 1s ease-in-out infinite; } @keyframes dcPulse { 50% { opacity: .25; } }

/* ================= Back to top ================= */
.dc-top { position: fixed; right: 16px; bottom: calc(var(--nav-height, 70px) + 74px); z-index: 1900; width: 44px; height: 44px; border: 0; border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem; color: #fff; background: var(--dc-grad, #4f46e5); box-shadow: 0 8px 22px rgba(var(--dc-rgb, 79, 70, 229), .4); cursor: pointer; animation: dcShFade .2s ease; }
.dc-top[hidden] { display: none; }
@media (min-width: 992px) { .dc-top { bottom: 168px; right: 24px; } }