/*
 * Živi primjer javnog cjenika (partials/demo-preview). Svijetle boje kao
 * cjenik.css; veličine u em pa ih okvir (preglednik, mobitel) skalira.
 */
.dp { --dp-accent: oklch(0.5 0.1 190); --dp-ink: oklch(0.22 0.012 190); --dp-soft: oklch(0.36 0.012 190); --dp-muted: oklch(0.47 0.012 190); --dp-line: oklch(0.9 0.008 190); --dp-btn: linear-gradient(180deg, #2876b6 0%, #2471b0 100%); --dp-tint: #e8f6f7; --dp-tint-ink: #0b7780;
    container: dp / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75em; overflow: hidden; padding: 1.4em 1em 1em; background: oklch(0.968 0.003 190); color: var(--dp-ink); font: 400 13px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-align: left; }
.dp-phone { font-size: 10px; padding: 0.6em 0.75em 0.8em; gap: 1.25em; }
.dp p { margin: 0; }
.dp-ico { width: 1em; height: 1em; flex: none; }
/* Nalog 86: mjere u em prema pravom javnom cjeniku (1em = 16 px; javni-desktop.webp, javni-mobile.webp). */
.dp-top { display: flex; justify-content: flex-end; align-items: center; gap: 1.1em; margin-bottom: -0.5em; color: var(--dp-soft); font-size: 0.875em; }
.dp-top span { display: flex; gap: 1.1em; word-spacing: 0.9em; }
.dp-top b { color: var(--dp-accent); font-weight: 600; word-spacing: normal; box-shadow: inset 0 -0.15em 0 var(--dp-accent); padding-bottom: 0.15em; }
.dp-moon { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 999px; background: #fff; color: var(--dp-accent); box-shadow: 0 1px 3px oklch(0.3 0.02 190 / 0.15); }
.dp-moon .dp-ico { width: 1.15em; height: 1.15em; }
.dp-card { background: #fff; border-radius: 1.25em; box-shadow: 0 1px 2px oklch(0.3 0.02 190 / 0.05), 0 6px 18px -10px oklch(0.3 0.02 190 / 0.14); }
.dp-biz { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1em 1.4em; align-items: center; padding: 1.5em 1.9em 1.6em; overflow: visible; }
.dp-logo { display: grid; justify-items: center; gap: 0.6em; }
.dp-logo-cap { color: var(--dp-soft); font-size: 0.8em; white-space: nowrap; }
.dp-avatar { position: relative; display: grid; place-items: center; width: 4.4em; height: 4.4em; border-radius: 999px; background: var(--dp-accent); color: #fff; font-weight: 600; font-size: 1em; overflow: hidden; }
.dp-avatar img { width: 100%; height: 100%; display: block; }
.dp-avatar [hidden] { display: none; }
.dp-main { position: relative; min-width: 0; align-self: start; padding-top: 0.2em; }
.dp-badge-name { left: 0; bottom: calc(100% + 0.3em); }
.dp-badge-link { left: 0; bottom: calc(100% + 10px); }
.dp-name { font-size: 2em; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; overflow-wrap: anywhere; }
.dp-name span { display: inline-block; border-radius: 0.3em; }
.dp-addr { display: flex; align-items: center; gap: 0.5em; margin-top: 0.35em !important; color: var(--dp-soft); font-size: 1em; }
.dp-addr .dp-ico { width: 1.1em; height: 1.1em; }
.dp-desc { margin-top: 0.6em !important; color: var(--dp-soft); font-size: 0.85em; }
.dp-status { display: grid; justify-items: end; gap: 0.5em; align-self: start; text-align: right; }
.dp-pill { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.35em 0.8em; border-radius: 999px; background: oklch(0.55 0.12 160 / 0.12); color: oklch(0.5 0.12 160); font-size: 0.85em; font-weight: 600; white-space: nowrap; }
.dp-pill::before { content: ''; width: 0.45em; height: 0.45em; border-radius: 999px; background: currentColor; }
.dp-date { color: var(--dp-ink); font-size: 0.85em; font-weight: 500; white-space: nowrap; }
.dp-date small { display: block; margin-bottom: 0.3em; color: var(--dp-soft); font-size: 0.86em; font-weight: 400; }
.dp-tabs { display: inline-flex; justify-self: start; gap: 0.2em; margin: -0.3em 0 -0.6em; padding: 0.25em; border-radius: 999px; background: var(--dp-tint); font-size: 0.95em; }
.dp-tabs span { padding: 0.55em 1.6em; border-radius: 999px; color: var(--dp-ink); white-space: nowrap; }
.dp-tabs .is-on { background: var(--dp-btn); color: #fff; font-weight: 600; }
.dp-list { padding: 1.6em 1.9em 0.4em; }
.dp-list-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5em; }
.dp-title { font-size: 1.45em; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.dp-intro { margin-top: 0.2em !important; color: var(--dp-soft); font-size: 0.9em; }
.dp-pub { margin-top: 0.3em !important; color: var(--dp-soft); font-size: 0.85em; }
.dp-search { display: flex; align-items: center; gap: 0.6em; flex: 0 0 15.5em; padding: 0.55em 1em; border-radius: 999px; background: oklch(0.94 0.004 190); color: var(--dp-soft); font-size: 0.9em; white-space: nowrap; }
.dp-actions { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 1em !important; }
.dp-actions span { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.6em 1.15em; border-radius: 999px; background: var(--dp-tint); color: var(--dp-tint-ink); font-size: 0.85em; font-weight: 600; white-space: nowrap; }
.dp-actions .is-primary { background: var(--dp-btn); color: #fff; }
.dp-table { margin-top: 1.5em; }
.dp-row { display: grid; grid-template-columns: minmax(0, 3.9fr) minmax(0, 1.9fr) minmax(0, 3.3fr) minmax(0, 1fr); gap: 0.6em; align-items: center; padding: 0.95em 0; border-top: 1px solid var(--dp-line); }
.dp-head { padding: 0 0 0.65em; border-top: 0; color: var(--dp-soft); }
.dp-head span { font-size: 0.75em; }
.dp-head + .dp-row { border-top-width: 1.5px; }
.dp-item { font-size: 0.95em; font-weight: 500; }
.dp-price { font-weight: 650; font-size: 1em; }
.dp-ref { display: block; color: var(--dp-soft); font-size: 0.8em; line-height: 1.3; }
.dp-ref small { display: block; font-size: 0.87em; letter-spacing: 0.02em; }
.dp-order { justify-self: end; padding: 0.5em 1.1em; border-radius: 999px; background: var(--dp-btn); color: #fff; font-size: 0.8em; font-weight: 600; text-align: center; }
/* Uski okvir (mobitel): kao pravi mobilni cjenik. */
@container dp (max-width: 30rem) {
    .dp-top { justify-content: flex-end; margin-bottom: -0.25em; }
    .dp-biz { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 1em 1em 1.1em; }
    .dp-logo { display: flex; align-items: center; gap: 0.75em; margin-bottom: 0.9em; }
    .dp-avatar { width: 2.5em; height: 2.5em; }
    .dp-logo-cap { font-size: 0.85em; }
    .dp-name { font-size: 1.4em; }
    .dp-addr { font-size: 0.9em; }
    .dp-desc { font-size: 0.75em; line-height: 1.6; }
    .dp-status { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: 0.9em; padding-top: 0.9em; border-top: 1px solid var(--dp-line); }
    .dp-date small { display: inline; margin: 0 0.25em 0 0; }
    .dp-tabs { display: flex; justify-self: stretch; margin: 0; }
    .dp-tabs span { flex: 1; text-align: center; padding-inline: 0.5em; }
    .dp-list { padding: 1em 1em 0.2em; }
    .dp-list-head { flex-direction: column; align-items: stretch; gap: 0.9em; }
    .dp-title { font-size: 1.15em; }
    .dp-search { flex: none; }
    .dp-actions { flex-wrap: nowrap; gap: 0.5em; margin-top: 0.75em !important; }
    .dp-actions span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; justify-content: center; padding: 0.75em 0.3em; font-size: 0.7em; }
    .dp-actions .dp-ico { display: none; }
    .dp-table { margin-top: 0.4em; }
    .dp-head { display: none; }
    .dp-row { grid-template-columns: minmax(0, 1fr); row-gap: 0.35em; padding: 1em 0 1.1em; }
    .dp-row:first-child, .dp-head + .dp-row { border-top: 0; }
    .dp-item { margin-bottom: 0.3em; }
    .dp-num { display: flex; justify-content: space-between; align-items: baseline; }
    .dp-num::before { content: attr(data-label); color: var(--dp-soft); font-size: 0.85em; font-weight: 400; }
    .dp-price { font-size: 1.05em; }
    .dp-ref { text-align: right; }
    .dp-order { justify-self: stretch; margin-top: 0.6em; padding: 0.7em; border-radius: 0.7em; font-size: 0.85em; }
}
/* Isticanje onoga što se mijenja kad posjetitelj upiše svoj naziv */
.dp-custom [data-demo-name], .dp-custom [data-demo-slug] { background: oklch(0.85 0.14 190 / 0.35); box-shadow: 0 0 0 2px oklch(0.6 0.12 190); border-radius: 0.3em; padding-inline: 0.15em; }
.dp-custom [data-demo-mark] { box-shadow: 0 0 0 3px oklch(0.75 0.14 190); }
/* Nalog 86: naziv se mijenja i ispod loga i u opisu, ali istaknut je samo glavni naziv. */
.dp-custom .dp .dp-logo-cap[data-demo-name], .dp-custom .dp .dp-desc [data-demo-name] { background: none; box-shadow: none; padding-inline: 0; }
.dp-flash { animation: dp-flash 700ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes dp-flash { 0% { transform: scale(1.06); } 100% { transform: none; } }
.dp-badge { display: none; position: absolute; z-index: 3; padding: 4px 10px; border-radius: 999px; background: oklch(0.8 0.13 195); color: oklch(0.2 0.03 210); font: 600 12px/1.2 system-ui, sans-serif; white-space: nowrap; box-shadow: 0 8px 20px -8px oklch(0 0 0 / 0.6); pointer-events: none; }
.dp-badge::after { content: ''; position: absolute; left: 14px; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
.dp-custom .dp-badge { display: block; }
@media (prefers-reduced-motion: reduce) { .dp-flash { animation: none; } }
/* Sažeti primjer (naslovna, po slici vlasnika 06.10.2026.): izbornik jezika, redci sa strelicom, mobitel s gumbom za rezervaciju */
.dp.is-compact { gap: 0.8em; }
.dp-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75em; }
.dp-bar.is-top { color: var(--dp-soft); }
.dp-lang { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4em 0.75em; border-radius: 0.6em; background: #fff; color: var(--dp-soft); font-size: 0.8em; box-shadow: 0 1px 2px oklch(0.3 0.02 190 / 0.1); white-space: nowrap; }
.is-compact .dp-tabs .is-on { background: var(--dp-accent); color: #fff; }
.is-compact .dp-list { padding-bottom: 0.2em; }
.is-compact .dp-table { margin-top: 0.5em; }
.is-compact .dp-row { grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.7fr) minmax(0, 0.7fr) 1em; padding: 0.75em 0; }
.is-compact .dp-row:first-child { border-top: 0; }
.dp-item small { display: block; color: var(--dp-muted); font-size: 0.78em; font-weight: 400; }
.dp-chev { color: var(--dp-muted); display: grid; place-items: center; }
.dp-book { display: flex; align-items: center; justify-content: center; gap: 0.5em; margin-top: auto; padding: 0.95em; border-radius: 0.9em; background: oklch(0.42 0.08 190); color: #fff; font-weight: 600; font-size: 1.05em; }
@container dp (max-width: 30rem) {
    .is-compact .dp-biz { grid-template-columns: auto minmax(0, 1fr); padding: 0.9em 1em; }
    .is-compact .dp-row { grid-template-columns: minmax(0, 1fr) auto 1em; row-gap: 0; padding: 0.65em 0; }
    .is-compact .dp-num { display: block; }
    .is-compact .dp-num::before { content: none; }
    .is-compact .dp-list { padding: 0.9em 1em 0.2em; }
}