/* ==========================================================================
   inf026 design system (shared by the MVC layout, every Identity page and the React home page)
   Alpine editorial, modernised: deep navy + glacier blues, serif headings under a thin rule,
   soft rounded surfaces, gentle shadows, medium-weight type that stays readable.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Slab:wght@400;500&family=Permanent+Marker&display=swap");

:root {
  --snow: #eef0f0;
  --paper: #ffffff;
  --mist: #e3e6e6;
  --line: #d9dddd;
  --ink: #26282c;
  --night: #222428;
  --slate: #34373d;
  --steel: #238b7e;
  --steel-2: #2fa394;
  --stone: #6d7076;
  --sky: #8fd3c8;
  --brick: #b4432f;
  --moss: #2b7a5c;

  --serif: "Roboto Slab", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(34, 36, 40, 0.06), 0 2px 8px rgba(34, 36, 40, 0.05);
  --shadow: 0 1px 2px rgba(34, 36, 40, 0.05), 0 18px 40px -18px rgba(34, 36, 40, 0.28);
  --diag: 56px;
  --page: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--snow);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 500;
  color: inherit;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

a { color: var(--steel); text-decoration: none; border-bottom: 1px solid rgba(35, 139, 126, 0.3); transition: color .15s, border-color .15s; }
a:hover { color: var(--night);  }

::selection { background: var(--slate); color: #fff; }
:focus-visible { outline: 3px solid rgba(143, 211, 200, 0.75); outline-offset: 2px; }

/* ---------- header ---------- */

.pp-header {
  position: sticky;
  top: 0;
  z-index: 1100; /* above everything, including Leaflet's map layers (up to 1000) */
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color .3s;
}
.pp-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #2b2d31;
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  transition: background .3s, opacity .3s;
}
.pp-header--over { position: fixed; left: 0; right: 0; border-bottom-color: transparent; }
.pp-header--over::before { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pp-header--over.is-scrolled { border-bottom-color: rgba(255, 255, 255, 0.07); }
.pp-header--over.is-scrolled::before { background: #2b2d31; -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); }

.pp-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pp-brand {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  border: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.pp-brand:hover { color: #fff; }

.pp-nav { display: flex; align-items: center; gap: 6px; }
.pp-nav a,
.pp-nav button.pp-nav__link {
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  border: 0;
  background: none;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pp-nav a:hover,
.pp-nav button.pp-nav__link:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.pp-nav form { margin: 0; }
.pp-nav a.pp-nav__cta { background: #fff; color: var(--night); font-weight: 600; margin-left: 6px; }
.pp-nav a.pp-nav__cta:hover { background: var(--mist); color: var(--night); }

.pp-nav a.pp-nav__account, .pp-nav button.pp-nav__account { padding: 5px 14px 5px 5px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); margin-left: 6px; }
.pp-nav a.pp-nav__account:hover, .pp-nav button.pp-nav__account:hover, .pp-menu:hover > .pp-nav__account { background: rgba(255, 255, 255, 0.18); }
.pp-nav__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--slate); display: grid; place-items: center; font-weight: 600; font-size: 0.85rem; color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); }

.pp-backdrop { display: none; }

/* menus: "Moj nalog" opens a list, and "Profil" / "Administracija" inside it open another one. Nothing here is a link itself. */
.pp-menu, .pp-menu__group { position: relative; }
.pp-menu__chev { flex-shrink: 0; margin-left: 2px; transition: transform .3s; }
.pp-menu__panel { display: none; position: absolute; top: 100%; right: 0; z-index: 80; min-width: 250px; margin-top: 12px; padding: 8px; border-radius: 18px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 30px 70px -20px rgba(34, 36, 40, 0.55); }
/* an invisible bridge, so the pointer can travel from the button to the list without it closing */
.pp-menu > .pp-menu__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
/* Profil / Administracija open downwards, inside the same list, pushing the items below them down */
.pp-menu__panel--sub { position: static; min-width: 0; margin: 0 0 4px 16px; padding: 2px 0 2px 8px; border: 0; border-left: 2px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.pp-nav .pp-menu__panel a, .pp-nav .pp-menu__panel .pp-menu__item, .pp-nav .pp-menu__panel .pp-mypage {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 10px 14px; border: 0; border-radius: 12px; background: none; color: var(--ink);
  font: inherit; font-size: 0.95rem; font-weight: 500; text-align: left; white-space: nowrap; cursor: pointer;
}
.pp-nav .pp-menu__panel a:hover, .pp-nav .pp-menu__panel .pp-menu__item:hover, .pp-nav .pp-menu__panel .pp-mypage:hover, .pp-menu__group:hover > .pp-menu__item { background: var(--mist); color: var(--night); }
.pp-nav .pp-menu__panel a.is-current { background: var(--night); color: #fff; }
.pp-menu__group > .pp-menu__item .pp-menu__chev { transform: rotate(0deg); }
@media (min-width: 861px) {
  .pp-menu:hover > .pp-menu__panel, .pp-menu:focus-within > .pp-menu__panel,
  /* a list that has been opened by hovering stays open until the pointer leaves the whole dropdown (see the script in _Layout),
     otherwise it would fold up again while you move down to the items below it and the dropdown would shrink away under the pointer */
  .pp-menu__group.is-hover-open > .pp-menu__panel--sub, .pp-menu__group:focus-within > .pp-menu__panel--sub { display: block; animation: ppDrop .25s cubic-bezier(.2, .8, .2, 1) both; }
  .pp-menu:hover > .pp-menu__toggle .pp-menu__chev, .pp-menu__group.is-hover-open > .pp-menu__item .pp-menu__chev { transform: rotate(180deg); }
}
.pp-nav a.is-current { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* filter menu: a dropdown under the "Filter" item */
.pp-filter { position: relative; }
.pp-filter__toggle svg { transition: transform .3s; }
.pp-filter.is-open .pp-filter__toggle svg { transform: rotate(180deg); }
.pp-filter.is-open > .pp-filter__toggle { background: rgba(255, 255, 255, 0.14); color: #fff; }
.pp-filter__panel { display: none; position: absolute; top: calc(100% + 14px); right: -48px; width: 350px; padding: 22px; gap: 14px; border-radius: 22px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 30px 70px -20px rgba(34, 36, 40, 0.55); }
.pp-filter.is-open .pp-filter__panel { display: grid; animation: ppDrop .3s cubic-bezier(.2, .8, .2, 1) both; margin-top:14px; }
@keyframes ppDrop { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }
.pp-filter__panel label { display: grid; gap: 6px; margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--stone); }
.pp-filter__panel .form-control, .pp-filter__panel .form-select { height: 46px; font-weight: 400; }
.pp-filter__panel .form-control::placeholder { color: #8f97b3; }
.pp-filter__actions { display: flex; align-items: center; gap: 12px; }
.pp-filter__actions .pp-btn { flex: 1; }
.pp-nav .pp-filter__reset { width: auto; padding: 10px 14px; color: var(--steel); background: none; font-weight: 600; }
.pp-nav .pp-filter__reset:hover { background: var(--mist); color: var(--night); }

/* "Vidi svoju stranu" (in the account tabs and in the drawer) with a small status next to it */
.pp-mypage { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.pp-subnav .pp-mypage { padding: 11px 14px; border-radius: var(--r-sm); color: var(--ink); font-size: 0.95rem; font-weight: 500; transition: background .15s; }
.pp-subnav .pp-mypage:hover { background: var(--mist); color: var(--night); }
.pp-nav__status { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; padding: 2px 9px; border-radius: 999px; background: #ecd58c; color: var(--night); white-space: nowrap; }
.pp-nav__status.is-ok { background: #bfe6d3; }

/* hamburger: three bars that turn into a cross */
.pp-nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.pp-nav-toggle:hover { background: rgba(255, 255, 255, 0.18); }
.pp-nav-toggle:active { transform: scale(0.94); }
.pp-burger { position: relative; display: block; width: 22px; height: 16px; }
.pp-burger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #fff; transition: transform .38s cubic-bezier(.6, -0.3, .3, 1.4), opacity .2s, width .3s, top .3s; }
.pp-burger span:nth-child(1) { top: 0; }
.pp-burger span:nth-child(2) { top: 7px; width: 70%; left: 30%; }
.pp-burger span:nth-child(3) { top: 14px; }
.pp-nav-toggle:hover .pp-burger span:nth-child(2) { width: 100%; left: 0; }
.pp-nav-toggle.is-open .pp-burger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.pp-nav-toggle.is-open .pp-burger span:nth-child(2) { opacity: 0; transform: translateX(14px); }
.pp-nav-toggle.is-open .pp-burger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* alert shown by buttons with data-pp-toast */
.pp-toast {
  position: fixed;
  z-index: 1200;
  top: 82px; left: 50%;
  width: min(440px, calc(100% - 24px));
  box-shadow: 0 24px 50px -16px rgba(34, 36, 40, 0.5);
  cursor: pointer;
  transform: translateX(-50%);
}
.pp-toast[hidden] { display: none; }
.pp-toast.is-in { animation: ppToast .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ppToast { from { opacity: 0; transform: translate(-50%, -14px) scale(0.97); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 860px) {
  /* the menu button sits on the left, where the drawer comes from */
  .pp-header__inner { height: 64px; padding: 0 18px; justify-content: flex-start; gap: 14px; }
  .pp-nav-toggle { display: grid; order: -1; position: relative; z-index: 3; }
  .pp-brand { position: relative; z-index: 3; }
  .pp-toast { top: 74px; }

  .pp-backdrop { display: block; position: fixed; inset: 0; z-index: 1090; background: rgba(20, 21, 24, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
  .pp-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
  body.pp-nav-open { overflow: hidden; }

  /* left drawer: slides in with a slanted edge, the links follow one after another */
  .pp-nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 2;
    width: min(88vw, 360px);
    margin: 0;
    padding: 84px 14px 28px 14px;
    padding-right: 42px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(420px 320px at 0% 100%, rgba(42, 157, 143, 0.45), transparent 70%),
      linear-gradient(180deg, #1e2024, var(--night));
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform .6s cubic-bezier(.77, 0, .18, 1), visibility 0s .6s;
  }
  .pp-nav.is-open { transform: none; visibility: visible; transition-delay: 0s; }

  .pp-nav > a, .pp-nav > form, .pp-nav > button, .pp-nav > .pp-menu, .pp-nav > .pp-filter { opacity: 0; transform: translateX(-34px); transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1), background .2s, color .2s; }
  .pp-nav.is-open > a, .pp-nav.is-open > form, .pp-nav.is-open > button, .pp-nav.is-open > .pp-menu, .pp-nav.is-open > .pp-filter { opacity: 1; transform: none; }
  .pp-nav.is-open > :nth-child(1) { transition-delay: .18s; }
  .pp-nav.is-open > :nth-child(2) { transition-delay: .23s; }
  .pp-nav.is-open > :nth-child(3) { transition-delay: .28s; }
  .pp-nav.is-open > :nth-child(4) { transition-delay: .33s; }
  .pp-nav.is-open > :nth-child(5) { transition-delay: .38s; }
  .pp-nav.is-open > :nth-child(6) { transition-delay: .43s; }
  .pp-nav.is-open > :nth-child(7) { transition-delay: .48s; }
  .pp-nav.is-open > :nth-child(8) { transition-delay: .53s; }
  .pp-nav.is-open > :nth-child(9) { transition-delay: .58s; }
  .pp-nav.is-open > :nth-child(10) { transition-delay: .63s; }
  .pp-nav a, .pp-nav button.pp-nav__link { padding: 14px 16px; width: 100%; border-radius: var(--r-sm); font-size: 1.02rem; }
  .pp-nav a.pp-nav__cta, .pp-nav a.pp-nav__account, .pp-nav button.pp-nav__account { margin-left: 0; }
  .pp-nav a.pp-nav__cta { justify-content: center; margin-top: 8px; }

  /* the filter opens inside the drawer */
  .pp-filter__toggle { width: 100%; justify-content: space-between; }
  .pp-filter__panel { position: static; right: auto; width: auto; margin: 10px 0 14px; padding: 22px 16px 16px; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; color: #fff; }
  .pp-filter__panel label { color: rgba(255, 255, 255, 0.7); }
  .pp-nav .pp-filter__reset { color: rgba(255, 255, 255, 0.85); width: auto; }
  .pp-nav .pp-filter__reset:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
  /* every account page is in the drawer, so the tile grid above the page is not needed */
  .pp-account__nav { display: none; }

  /* menus in the drawer: folded lists that open on tap (Moj nalog, then Profil / Administracija inside it) */
  .pp-menu { width: 100%; margin-top: 14px; }
  .pp-nav .pp-menu__toggle { width: 100%; justify-content: flex-start; }
  .pp-nav .pp-menu__toggle .pp-menu__chev { margin-left: auto; }
  .pp-menu.is-open > .pp-menu__toggle .pp-menu__chev, .pp-menu__group.is-open > .pp-menu__toggle .pp-menu__chev { transform: rotate(180deg); }
  .pp-menu__panel, .pp-menu__panel--sub {
    display: grid; position: static; z-index: auto; gap: 2px; min-width: 0;
    max-height: 0; overflow: hidden; margin: 0 0 0 18px; padding: 0 0 0 12px;
    border: 0; border-left: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; animation: none;
    transition: max-height .5s ease, margin .3s, border-color .3s;
  }
  .pp-menu > .pp-menu__panel::before { display: none; }
  .pp-menu.is-open > .pp-menu__panel, .pp-menu__group.is-open > .pp-menu__panel--sub { max-height: 1600px; margin: 2px 0 6px 18px; border-left-color: rgba(255, 255, 255, 0.14); }
  .pp-menu__group > .pp-menu__item .pp-menu__chev { transform: none; }
  .pp-nav .pp-menu__panel a, .pp-nav .pp-menu__panel .pp-menu__item, .pp-nav .pp-menu__panel .pp-mypage { padding: 10px 14px; border-radius: var(--r-sm); font-size: 0.95rem; color: rgba(255, 255, 255, 0.78); white-space: normal; }
  .pp-nav .pp-menu__panel a:hover, .pp-nav .pp-menu__panel .pp-menu__item:hover, .pp-nav .pp-menu__panel .pp-mypage:hover, .pp-menu__group:hover > .pp-menu__item { background: rgba(255, 255, 255, 0.12); color: #fff; }
  .pp-nav .pp-menu__panel a.is-current { background: rgba(255, 255, 255, 0.16); color: #fff; }
}

/* ---------- main + page ---------- */

.pp-main { flex: 1 0 auto; }
.pp-main--full { padding: 0; }

.pp-page { max-width: var(--page); margin: 0 auto; padding: 48px 28px 96px; width: 100%; }
@media (max-width: 600px) { .pp-page { padding: 28px 16px 64px; } }

.pp-title,
.pp-page > h1:first-child,
.pp-account__body > h1:first-child {
  text-align: center;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  margin: 0 0 36px;
  padding-top: 84px;
  position: relative;
}
.pp-title::before,
.pp-page > h1:first-child::before,
.pp-account__body > h1:first-child::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 2px; height: 60px;
  background: var(--night);
  transform: translateX(-50%);
  border-radius: 2px;
}
.pp-lede { text-align: center; max-width: 560px; margin: -18px auto 36px; color: var(--stone); font-size: 1.1rem; }

.pp-eyebrow { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); font-weight: 600; }

/* ---------- footer ---------- */

.pp-footer {
  position: relative;
  background: var(--night);
  color: rgba(255, 255, 255, 0.75);
  margin-top: var(--diag);
  padding: calc(var(--diag) + 28px) 28px 40px;
  font-size: 0.95rem;
}
.pp-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(var(--diag) * -1 + 1px);
  height: var(--diag);
  background: var(--night);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.pp-footer__inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.pp-footer__brand { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.pp-footer a { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.3); }
.pp-footer a:hover { color: #fff; border-color: #fff; }
.pp-footer__links { display: flex; gap: 24px; }

/* on the home page the last dark band runs straight into the footer */
.pp-main--full + .pp-footer { margin-top: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 44px; }
.pp-main--full + .pp-footer::before { display: none; }

/* ---------- buttons ---------- */

.pp-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 24px;
  line-height: 1.25;
  border: 1px solid var(--steel);
  background: var(--steel);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(35, 139, 126, 0.7);
  transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
  text-align: center;
}
.pp-btn:hover, .btn:hover { background: var(--night); border-color: var(--night); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(34, 36, 40, 0.7); }
.pp-btn:active, .btn:active { transform: translateY(0); }
.pp-btn--block, .btn.w-100 { display: flex; width: 100%; }
.pp-btn--ghost, .btn-outline-primary, .btn-outline-secondary { background: transparent; color: var(--steel); border-color: var(--line); box-shadow: none; }
.pp-btn--ghost:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover { background: var(--mist); color: var(--night); border-color: var(--sky); box-shadow: none; }
.pp-btn--danger, .btn-outline-danger, .btn-danger { background: transparent; color: var(--brick); border-color: rgba(180, 67, 47, 0.4); box-shadow: none; }
.pp-btn--danger:hover, .btn-outline-danger:hover, .btn-danger:hover { background: var(--brick); border-color: var(--brick); color: #fff; box-shadow: none; }
.btn-primary { background: var(--steel); border-color: var(--steel); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--night) !important; border-color: var(--night) !important; color: #fff; }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; border-radius: var(--r-sm); }
.btn-lg { padding: 15px 30px; font-size: 1rem; }
.btn-link { background: none; border: 0; color: var(--steel); padding: 0; box-shadow: none; text-decoration: underline; }
.btn-link:hover { background: none; color: var(--night); box-shadow: none; transform: none; }
.btn:focus, .btn:active:focus { box-shadow: none; outline: 3px solid rgba(143, 211, 200, 0.75); outline-offset: 2px; }
.btn-close { border-radius: 8px; }

/* ---------- forms ---------- */

.form-control,
.form-select,
.pp-input {
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background-color: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  box-shadow: none;
}
.form-control:focus, .form-select:focus { border-color: var(--steel); box-shadow: 0 0 0 4px rgba(35, 139, 126, 0.14); background-color: #fff; color: var(--ink); }
.form-control::placeholder { color: transparent; }
.form-control:disabled { background: var(--mist); color: var(--stone); }
.form-floating > label { color: var(--stone); font-size: 0.95rem; padding-left: 1rem; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--stone); }
.form-label { font-size: 0.85rem; font-weight: 600; color: var(--stone); margin-bottom: 6px; }
.form-text, .text-muted { color: var(--stone) !important; font-size: 0.9rem; }
.form-check-input { border-radius: 6px; border: 1.5px solid var(--stone); width: 1.15em; height: 1.15em; }
.form-check-input:checked { background-color: var(--steel); border-color: var(--steel); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(35, 139, 126, 0.14); border-color: var(--steel); }
.form-switch .form-check-input { border-radius: 2em; width: 2.4em; }
.checkbox label { font-size: 0.95rem; font-weight: 400; color: var(--ink); }
textarea.form-control { min-height: 120px; }
input[type="file"].form-control { padding: 14px 12px; }
input[type="file"]::file-selector-button { border: 0; background: var(--mist); color: var(--ink); border-radius: 8px; padding: 8px 14px; margin-right: 12px; font-weight: 600; cursor: pointer; }

.field-validation-error, .text-danger { color: var(--brick) !important; font-size: 0.9rem; }
.validation-summary-errors ul { margin: 0 0 16px; padding: 14px 18px 14px 36px; border-radius: 0; background: #f9e4df; color: #962f1f; }
.input-validation-error { border-color: var(--brick) !important; }

/* ---------- alerts: flat, pale background, darker text of the same colour, an icon; no border, no rounded corners ---------- */

:root {
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E");
  --icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9L2.4 17.5A2 2 0 004.1 20.5h15.8a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0zM12 9.5v4M12 17h.01'/%3E%3C/svg%3E");
  --icon-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5h.01'/%3E%3C/svg%3E");
  --icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E");
}

.alert,
.hm-notice,
.pp-toast {
  --alert-bg: #d9e8fb;
  --alert-fg: #1a3a7a;
  --alert-icon: var(--icon-info);
  position: relative;
  border: 0;
  border-radius: 0;
  background: var(--alert-bg);
  color: var(--alert-fg);
  font-size: 0.97rem;
  line-height: 1.55;
  padding: 14px 18px 14px 52px;
}
.alert::before,
.hm-notice::before,
.pp-toast::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 15px;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--alert-icon) center / contain no-repeat;
  mask: var(--alert-icon) center / contain no-repeat;
}
.alert-success { --alert-bg: #d3efe0; --alert-fg: #0f5c3a; --alert-icon: var(--icon-success); }
.alert-danger, .hm-notice--error { --alert-bg: #fbd8d2; --alert-fg: #8a1f12; --alert-icon: var(--icon-danger); }
.alert-warning, .hm-notice--warning, .pp-toast { --alert-bg: #fbeab5; --alert-fg: #6b4c00; --alert-icon: var(--icon-warning); }
.alert-info, .hm-notice--info { --alert-bg: #d9e8fb; --alert-fg: #1a3a7a; --alert-icon: var(--icon-info); }
.hm-notice { margin-top: 18px; font-size: 0.92rem; }
.alert p:last-child { margin-bottom: 0; }
.alert a { color: inherit; text-decoration: underline; border-bottom: 0; }

/* ---------- panels and auth pages ---------- */

.pp-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px; box-shadow: var(--shadow); }
@media (max-width: 600px) { .pp-panel { padding: 26px 20px; border-radius: 18px; } }

.pp-auth { max-width: 480px; margin: 0 auto; }
.pp-auth--wide { max-width: 680px; }
.pp-auth h2 { font-size: 1.3rem; margin: 0 0 14px; }
.pp-auth h2:not(:first-child) { margin-top: 26px; }
.pp-auth .row { display: block; margin: 0; }
.pp-auth .row > [class^="col-"] { width: 100%; padding: 0; }
.pp-auth__links { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--mist); font-size: 0.95rem; display: grid; gap: 10px; text-align: center; }
.pp-auth__links a { justify-self: center; }
.pp-auth__alt { margin-top: 20px; text-align: center; color: var(--stone); }

.pp-state { text-align: center; max-width: 540px; margin: 0 auto; }
.pp-state p { color: var(--stone); font-size: 1.1rem; }
.pp-state__mark { width: 72px; height: 72px; margin: 0 auto 24px; border-radius: 22px; background: var(--mist); display: grid; place-items: center; color: var(--steel); }
.pp-state__mark svg { width: 30px; height: 30px; }
.pp-state__mark--ok { background: #e6f3ed; color: var(--moss); }
.pp-state__mark--bad { background: #fbeeea; color: var(--brick); }

/* ---------- account area ---------- */

.pp-account { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
.pp-account__nav { position: sticky; top: 92px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--shadow-sm); }
.pp-account__body { min-width: 0; }
.pp-account__body > h1:first-child { text-align: left; padding-top: 0; margin-bottom: 28px; font-size: 2rem; }
.pp-account__body > h1:first-child::before { display: none; }
.pp-account__body h3 { font-size: 1.4rem; margin: 40px 0 10px; padding-top: 24px; border-top: 1px solid var(--line); }
.pp-account__body h3:first-child, .pp-account__body > h3:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.pp-account__body h4 { font-size: 1.1rem; margin: 26px 0 10px; }
.pp-account__body p { color: #38405f; }
.pp-account__body > .row { display: block; margin: 0; }
.pp-account__body > .row > div { padding: 0; width: 100%; max-width: 680px; }

.pp-subnav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pp-subnav a { display: block; border: 0; padding: 11px 14px; color: var(--ink); font-size: 0.95rem; font-weight: 500; border-radius: var(--r-sm); transition: background .15s, color .15s; }
.pp-subnav a:hover { background: var(--mist); color: var(--night); }
.pp-subnav a.active { background: var(--night); color: #fff; }
.pp-subnav__group { padding: 14px 14px 6px; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); font-weight: 700; }
.pp-subnav__group:first-child { padding-top: 6px; }
.pp-subnav__label { padding: 10px 14px 4px; color: var(--night); font-size: 0.95rem; font-weight: 700; }
.pp-subnav__child a { padding-left: 28px; font-size: 0.92rem; }

@media (max-width: 900px) {
  .pp-account { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pp-account__nav { position: static; padding: 8px; min-width: 0; }
  /* no sideways scrolling: every page is a tile in a wrapping grid, the group titles span the whole row */
  .pp-subnav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .pp-subnav a { text-align: center; padding: 12px 8px; background: var(--snow); overflow-wrap: anywhere; line-height: 1.3; }
  .pp-subnav a.active { background: var(--night); }
  .pp-subnav__group, .pp-subnav__label { grid-column: 1 / -1; padding: 10px 4px 2px; }
  .pp-subnav__child a { padding-left: 8px; }
}
@media (max-width: 340px) { .pp-subnav { grid-template-columns: minmax(0, 1fr); } }

.pp-count { display: inline-block; min-width: 22px; margin-left: 8px; padding: 0 7px; border-radius: 999px; background: var(--brick); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 22px; text-align: center; }
.pp-subnav a.active .pp-count { background: #fff; color: var(--night); }

/* support messages (owner and admin) */
.pp-messages { display: grid; gap: 14px; }
.pp-message { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-sm); animation: ppRise .5s backwards; }
.pp-message.is-handled { opacity: 0.65; }
.pp-message > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.pp-message p { margin: 0 0 10px; white-space: pre-line; overflow-wrap: anywhere; }
.pp-message time { font-size: 0.82rem; color: var(--stone); }
.pp-message__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pp-message__actions form { margin: 0; }
.pp-support-form { max-width: 620px; margin-bottom: 8px; }
.pp-address-hint { min-height: 1.4em; margin-top: 6px; }

.nav-pills .nav-link { border-radius: var(--r-sm); color: var(--ink); border: 0; }
.nav-pills .nav-link.active { background: var(--night); color: #fff; }

/* ---------- tables: stack into cards on small screens ---------- */

.card { border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm) !important; overflow: hidden; }
.table { --bs-table-bg: transparent; color: var(--ink); border-color: var(--mist); margin-bottom: 0; font-size: 0.97rem; }
.table > :not(caption) > * > * { padding: 16px 18px; border-bottom-color: var(--mist); }
.table thead th { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--stone); background: var(--snow); border-bottom: 1px solid var(--line); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--snow); }
.table tbody tr:last-child > * { border-bottom: 0; }

@media (max-width: 800px) {
  .pp-stack thead { display: none; }
  .pp-stack, .pp-stack tbody, .pp-stack tr, .pp-stack td { display: block; width: 100%; min-width: 0; }
  .table-responsive { overflow-x: visible; }
  .pp-stack tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .pp-stack tbody tr:last-child { border-bottom: 0; }
  /* label on the left, value on the right and cut with an ellipsis when it does not fit */
  .pp-stack td { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 2px; padding: 7px 0 !important; border: 0 !important; text-align: right; }
  .pp-stack td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 3; align-self: start; padding-top: 3px; text-align: left; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone); }
  .pp-stack td[data-label=""]::before { display: none; }
  .pp-stack td[data-label=""] { display: block; }
  .pp-stack td > div { grid-column: 2; min-width: 0; text-align: right; }
  .pp-stack td .pp-trunc { max-width: 100%; }
  .pp-stack td .pp-tags { justify-content: flex-end; }
  .pp-stack td.pp-cell-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 12px !important; }
  .pp-stack td.pp-cell-actions::before { display: none; }
}

/* long values are cut with an ellipsis (the full text is in the tooltip, see data-tip) instead of stretching the layout */
.pp-trunc { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table td .pp-trunc { max-width: 240px; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.badge { border-radius: 999px !important; font-family: var(--sans); font-weight: 600; font-size: 0.78rem; letter-spacing: 0; padding: 6px 12px; }
.badge.bg-primary { background: var(--steel) !important; }
.badge.bg-success { background: var(--moss) !important; }
.badge.bg-secondary { background: var(--stone) !important; }
.badge.bg-warning { background: #ecd58c !important; color: var(--night) !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded, .rounded-3 { border-radius: var(--r-sm) !important; }
.border { border-color: var(--line) !important; }
.shadow, .shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* ---------- business form ---------- */

.pp-account__body .form-floating { margin-bottom: 14px !important; }
.pp-account__body h3 + p { color: var(--stone); max-width: 62ch; }

/* a map keeps its layers (panes, zoom buttons) to itself, so it can never cover the menu or any dropdown */
.leaflet-container { z-index: 0; isolation: isolate; }

#business-map { border: 1px solid var(--line) !important; border-radius: var(--r-md) !important; overflow: hidden; }
#street-suggestions { border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; }
.list-group-item { border-color: var(--mist); font-size: 0.95rem; }
.list-group-item.active, .list-group-item-action:hover { background: var(--night); color: #fff; border-color: var(--night); }

.accordion { --bs-accordion-border-radius: var(--r-md); --bs-accordion-inner-border-radius: var(--r-md); --bs-accordion-border-color: var(--line); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: var(--mist); --bs-accordion-active-color: var(--night); }
/* every section is its own rounded card with a gap to the next one */
.accordion { display: grid; gap: 16px; }
.accordion-item { overflow: hidden; border: 1px solid var(--line) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-sm); transition: box-shadow .25s, border-color .25s; }
.accordion-item:hover { border-color: var(--sky) !important; }
.accordion-item .accordion-button { border-radius: 0 !important; }
.accordion-button { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; }
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-body { background: #fff; padding: 24px; }

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary { background: var(--night); border-color: var(--night); color: #fff; }
.btn-check:disabled + .btn-outline-primary { opacity: 0.35; }
.tag-picker .btn { border-radius: 999px; font-weight: 500; padding: 7px 16px; box-shadow: none; }

.product-row { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.product-row .form-label { font-size: 0.78rem; }

/* ---------- 2FA ---------- */

.pp-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; }
.pp-steps > li { counter-increment: step; position: relative; padding: 0 0 36px 68px; }
.pp-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 14px; background: var(--night); display: grid; place-items: center; font-family: var(--serif); font-size: 1.15rem; color: #fff; }
.pp-steps > li::after { content: ""; position: absolute; left: 21px; top: 52px; bottom: 6px; width: 2px; background: var(--line); border-radius: 2px; }
.pp-steps > li:last-child::after { display: none; }
.pp-steps h4 { margin: 8px 0 8px; font-size: 1.2rem; }

.pp-qr { display: inline-block; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); line-height: 0; box-shadow: var(--shadow-sm); }
.pp-qr img, .pp-qr canvas { width: 200px !important; height: 200px !important; }
kbd, .pp-key { display: inline-block; background: var(--mist); color: var(--night); border-radius: 8px; padding: 6px 12px; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.95rem; letter-spacing: 0.1em; word-break: break-all; }
.pp-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 440px; margin: 20px 0; }
.pp-codes code, code.recovery-code { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--night); padding: 12px 14px; text-align: center; font-size: 1rem; letter-spacing: 0.1em; }
.pp-code-input { text-align: center; letter-spacing: 0.4em; font-size: 1.6rem !important; font-family: var(--serif); }

/* ---------- diagonal band ---------- */

.pp-band { position: relative; color: #fff; background: var(--night); padding: calc(var(--diag) + 48px) 28px; }
.pp-band::before, .pp-band::after { content: ""; position: absolute; left: 0; right: 0; height: var(--diag); background: var(--snow); }
.pp-band::before { top: -1px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.pp-band::after { bottom: -1px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* ---------- small helpers ---------- */

.pp-avatar-edit { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.pp-avatar-edit img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); }
.pp-avatar-edit__empty { width: 120px; height: 120px; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-items: center; color: var(--stone); font-size: 0.85rem; }
.pp-avatar-edit > div:last-child { flex: 1 1 260px; }

.pp-cover-edit { display: grid; gap: 14px; margin-bottom: 8px; }
.pp-cover-edit__preview { aspect-ratio: 16 / 7; width: 100%; max-width: 520px; border-radius: var(--r-md); border: 2px dashed var(--line); background: var(--mist) center / cover no-repeat; display: grid; place-items: center; color: var(--stone); font-size: 0.9rem; overflow: hidden; }
.pp-cover-edit__preview.has-image { border-style: solid; border-color: var(--line); }
.pp-cover-edit__preview.has-image span { display: none; }
.pp-cover-edit .form-text { margin: 0; }

/* cover cropper: a 16:9 frame, the photo moves inside it */
.pp-crop { display: grid; gap: 12px; max-width: 640px; }
.pp-crop[hidden] { display: none; }
.pp-crop__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-md); background: var(--night); cursor: grab; touch-action: none; user-select: none; box-shadow: var(--shadow); }
.pp-crop__frame.is-dragging { cursor: grabbing; }
.pp-crop__frame img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.pp-crop__guide { position: absolute; left: 0; right: 0; top: 21%; bottom: 21%; border-block: 2px dashed rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 100vmax rgba(34, 36, 40, 0.4); clip-path: inset(-100vmax 0); pointer-events: none; display: flex; align-items: flex-end; justify-content: flex-end; }
.pp-crop__guide em { margin: 8px 10px; padding: 2px 8px; border-radius: 999px; background: rgba(34, 36, 40, 0.6); color: #fff; font-size: 0.7rem; font-style: normal; }
.pp-crop__controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp-crop__controls input[type="range"] { flex: 1 1 140px; accent-color: var(--steel); }

.pp-thumb { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.pp-thumb--empty { background: var(--mist); color: var(--stone); font-family: var(--serif); font-size: 1.1rem; }

hr { border: 0; border-top: 1px solid var(--line); opacity: 1; margin: 32px 0; }
img { max-width: 100%; }
code { color: var(--night); }

/* ---------- page motion ---------- */

@keyframes ppRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pp-page > *, .pp-account__body > *, .pp-account__nav { animation: ppRise .6s cubic-bezier(.2, .7, .2, 1) backwards; }
.pp-account__body > :nth-child(2) { animation-delay: .06s; }
.pp-account__body > :nth-child(3) { animation-delay: .12s; }
.pp-account__body > :nth-child(4) { animation-delay: .18s; }
.pp-account__body > :nth-child(n+5) { animation-delay: .24s; }
.pp-subnav li { animation: ppRise .45s cubic-bezier(.2, .7, .2, 1) backwards; }
.pp-subnav li:nth-child(2) { animation-delay: .04s; }
.pp-subnav li:nth-child(3) { animation-delay: .08s; }
.pp-subnav li:nth-child(4) { animation-delay: .12s; }
.pp-subnav li:nth-child(5) { animation-delay: .16s; }
.pp-subnav li:nth-child(n+6) { animation-delay: .2s; }
.pp-nav a:not(.pp-nav__cta) { position: relative; }
.alert { animation: ppRise .5s backwards; }
.pp-btn, .btn { position: relative; overflow: hidden; }
.pp-btn::after, .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: translateX(-130%) skewX(-20deg); pointer-events: none; }
.btn-outline-primary::after, .btn-outline-secondary::after, .btn-outline-danger::after, .btn-link::after { display: none; }
.pp-btn:hover::after, .btn:hover::after { animation: ppShine .8s ease; }
@keyframes ppShine { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- tooltip for the server-rendered pages (the React pages use the MUI Tooltip with the same look) ---------- */
.pp-tip { position: fixed; z-index: 1500; max-width: 320px; padding: 8px 12px; border-radius: 8px; background: #222428; color: #fff; font-family: var(--sans); font-size: 0.8rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; }
.pp-tip.is-on { opacity: 1; transform: none; }
.pp-tip::after { content: ""; position: absolute; left: var(--arrow, 50%); bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: #222428; transform: rotate(45deg); }
.pp-tip.is-below::after { bottom: auto; top: -5px; }

/* ==========================================================================
   Business name in the menu / phone header, logout colour, drawer spacing, admin "Izdvojeni biznisi"
   ========================================================================== */

/* The name is at most 30 characters; --len (set on the element) shrinks the font as the name gets longer:
   3 characters = 1.1rem, 30 characters = 0.7rem. */
.pp-bizname { font-size: calc(1.1rem - (var(--len, 9) - 3) * 0.0148rem); font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.pp-bizname--corner { display: none; }

.pp-nav button.pp-nav__logout { color: #ffb8b8; background: rgba(255, 120, 120, 0.12); }
.pp-nav button.pp-nav__logout:hover { background: rgba(255, 120, 120, 0.24); color: #ffd3d3; }

.pp-featured-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.pp-featured-list { list-style: none; margin: 0; padding: 0; }
.pp-featured-list li + li { border-top: 1px solid var(--mist); }
.pp-featured-row { display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 16px; cursor: pointer; transition: background .15s; }
.pp-featured-row:hover { background: var(--snow); }
.pp-featured-row input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--steel); }
.pp-featured-row input:disabled { cursor: not-allowed; }
.pp-featured-row:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.pp-featured-row__text { display: grid; min-width: 0; flex: 1; }

@media (max-width: 860px) {
  /* the business name sits in the upper right corner of the phone header, small enough for 30 characters on two lines */
  .pp-bizname--corner { display: block; margin-left: auto; max-width: 46vw; text-align: right; color: #fff; border: 0; white-space: normal; overflow-wrap: anywhere; font-size: calc(1rem - (var(--len, 9) - 3) * 0.0104rem); line-height: 1.15; position: relative; z-index: 3; }
  .pp-bizname--corner:hover { color: #fff; }
  .pp-nav .pp-bizname { white-space: normal; max-width: none; min-width: 0; overflow-wrap: anywhere; }

  /* a little more air in the drawer: above the filter, and between "Moj nalog" and "Profil" */
  .pp-nav > .pp-filter { margin-top: 14px; }
  .pp-filter__panel { margin: 14px 0 20px; }
  .pp-menu.is-open > .pp-menu__panel { margin-top: 14px; }
  .pp-nav .pp-nav__logout { margin-top: 12px; }
}

/* "Podrška" in the warning colours (same amber as the warning alerts and status pills) */
.pp-nav .pp-menu__panel a.pp-support, .pp-subnav a.pp-support { background: #f6edcf; color: #7a5a0f; font-weight: 600; }
.pp-nav .pp-menu__panel a.pp-support:hover, .pp-subnav a.pp-support:hover, .pp-subnav a.pp-support.active { background: #ecd58c; color: #5c420a; }
.pp-nav .pp-menu__panel a.pp-support.is-current { background: #ecd58c; color: #5c420a; }
@media (max-width: 860px) {
  .pp-nav .pp-menu__panel a.pp-support { background: rgba(236, 213, 140, 0.14); color: #ecd58c; }
  .pp-nav .pp-menu__panel a.pp-support:hover, .pp-nav .pp-menu__panel a.pp-support.is-current { background: rgba(236, 213, 140, 0.26); color: #f6edcf; }
}

/* admin: businesses waiting for approval are painted reddish, with their number */
.pp-nav .pp-menu__panel a.pp-pending, .pp-subnav a.pp-pending { display: flex; align-items: center; justify-content: space-between; background: #f9e4df; color: #962f1f; font-weight: 600; }
.pp-nav .pp-menu__panel a.pp-pending:hover, .pp-subnav a.pp-pending:hover, .pp-subnav a.pp-pending.active { background: #f1c9c0; color: #7a2314; }
.pp-nav .pp-menu__panel a.pp-pending .pp-count, .pp-nav .pp-menu__panel a[href*="SupportMessages"] .pp-count { margin-left: auto; }
.pp-subnav a.pp-pending .pp-count { margin-left: 8px; }
@media (max-width: 860px) {
  .pp-nav .pp-menu__panel a.pp-pending { background: rgba(255, 120, 120, 0.16); color: #ffb8b8; }
  .pp-nav .pp-menu__panel a.pp-pending:hover { background: rgba(255, 120, 120, 0.28); color: #ffd3d3; }
}
.pp-featured-row__no { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; color: #fff; background: transparent; }
.pp-featured-row__no:not(:empty) { background: var(--night); }

/* header pills (account + logout) are solid, so they read on any picture behind the header */
.pp-nav a.pp-nav__account, .pp-nav button.pp-nav__account { background: #36383d; border-color: rgba(255, 255, 255, 0.22); }
.pp-nav a.pp-nav__account:hover, .pp-nav button.pp-nav__account:hover, .pp-menu:hover > .pp-nav__account { background: #44474d; }

/* business name is also in the corner on a phone, so the name in the account pill is much smaller
   (3 characters = 0.92rem, 30 characters = 0.65rem) */
.pp-bizname { font-size: calc(0.92rem - (var(--len, 9) - 3) * 0.01rem); font-weight: 600; max-width: 190px; }
.pp-nav a.pp-nav__account, .pp-nav button.pp-nav__account { gap: 8px; padding: 4px 12px 4px 4px; }
.pp-nav__account .pp-nav__avatar { width: 28px; height: 28px; font-size: 0.78rem; }
@media (max-width: 860px) {
  .pp-bizname--corner { font-size: calc(0.85rem - (var(--len, 9) - 3) * 0.0085rem); max-width: 40vw; }
  .pp-nav .pp-bizname { max-width: none; }
}


/* Odjava: the solid red button */
.pp-nav button.pp-nav__logout { background: #d92e1b; color: #fff; font-weight: 600; }
.pp-nav button.pp-nav__logout:hover { background: #f0442e; color: #fff; }

/* in the phone drawer the business name is as big as the other menu items and wraps instead of shrinking */
@media (max-width: 860px) {
  .pp-nav .pp-nav__account .pp-bizname { font-size: 1.02rem; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; max-width: none; min-width: 0; flex: 1; text-align: left; }
  .pp-nav button.pp-nav__account, .pp-nav a.pp-nav__account { align-items: center; padding: 6px 14px 6px 6px; }
  .pp-nav__account .pp-nav__avatar { width: 34px; height: 34px; font-size: 0.85rem; }
}

/* with the phone drawer open the business name in the corner would sit over the dimmed page, and the drawer shows it already */
.pp-bizname--corner { transition: opacity .25s, visibility 0s; }
body.pp-nav-open .pp-bizname--corner { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility 0s .2s; }

/* ==========================================================================
   Account pages (Moj nalog, Moj biznis, administration) in the dashboard style:
   dark stone section list with a teal active item, content in a white panel.
   ========================================================================== */

.pp-account__nav { background: #2b2d31; border: 0; border-radius: 20px; padding: 14px; box-shadow: var(--shadow); }
.pp-account__nav .pp-subnav__group { color: rgba(255, 255, 255, 0.5); }
.pp-account__nav .pp-subnav__label { color: #fff; }
.pp-account__nav .pp-subnav a,
.pp-account__nav .pp-subnav .pp-mypage { color: rgba(255, 255, 255, 0.72); border-radius: 10px; }
.pp-account__nav .pp-subnav a:hover,
.pp-account__nav .pp-subnav .pp-mypage:hover { background: #36383d; color: #fff; }
.pp-account__nav .pp-subnav a.active { background: #2a9d8f; color: #fff; }
.pp-account__nav .pp-subnav a.active .pp-count { background: #fff; color: #238b7e; }
/* "Podrška" stays amber, light on the dark list */
.pp-account__nav .pp-subnav a.pp-support { background: rgba(236, 213, 140, 0.14); color: #ecd58c; }
.pp-account__nav .pp-subnav a.pp-support:hover { background: rgba(236, 213, 140, 0.26); color: #f6edcf; }
.pp-account__nav .pp-subnav a.pp-support.active { background: #ecd58c; color: #5c420a; }
/* the "Odobreno" / "Čeka" pill next to "Vidi svoju stranu" keeps its own colours */

.pp-account__body { background: #fff; border: 1px solid #dde1e1; border-radius: 20px; padding: 32px; box-shadow: var(--shadow-sm); }
.pp-account__body > h1:first-child { margin-bottom: 24px; }
.pp-account__body p { color: #4a4d53; }
@media (max-width: 860px) {
  .pp-account__body { padding: 22px 16px; border-radius: 16px; }
}
@media (max-width: 900px) {
  /* the tiles of the (narrow screen) list are lighter stone tiles on the dark list */
  .pp-account__nav .pp-subnav a { background: #36383d; }
  .pp-account__nav .pp-subnav a.active { background: #2a9d8f; }
  .pp-account__nav .pp-subnav a.pp-support { background: rgba(236, 213, 140, 0.14); }
}

/* ---------- accordions (the sections of "Moj biznis") in the dashboard style: light tile closed, soft teal with dark teal text open ---------- */
.accordion {
  --bs-accordion-bg: #f1f3f3;
  --bs-accordion-btn-bg: #f1f3f3;
  --bs-accordion-color: #24262a;
  --bs-accordion-btn-color: #24262a;
  --bs-accordion-active-bg: #d6eeea;
  --bs-accordion-active-color: #14675c;
  --bs-accordion-border-color: #dde1e1;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2324262a' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5L8 11L14 5'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2314675c' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5L8 11L14 5'/%3E%3C/svg%3E");
}
.accordion-item { background: #fff; }
.accordion-item:hover { border-color: #2a9d8f !important; }
.accordion-button { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; background: #f1f3f3; color: #24262a; }
.accordion-button:not(.collapsed) { background: #d6eeea; color: #14675c; }
.accordion-button:focus { border-color: #2a9d8f; box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.2); }
.accordion-button::after { background-image: var(--bs-accordion-btn-icon); }
.accordion-button:not(.collapsed)::after { background-image: var(--bs-accordion-btn-active-icon); }

/* accordion headers: the dark stone of the side lists, white text, open or closed */
.accordion {
  --bs-accordion-bg: #2b2d31;
  --bs-accordion-btn-bg: #2b2d31;
  --bs-accordion-btn-color: #fff;
  --bs-accordion-active-bg: #2b2d31;
  --bs-accordion-active-color: #fff;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5L8 11L14 5'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
.accordion-button, .accordion-button:not(.collapsed) { background: #2b2d31; color: #fff; }
.accordion-button:hover { background: #36383d; }
.accordion-item { border-color: #2b2d31 !important; }
.accordion-button:focus { border-color: #2a9d8f; box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.35); }

/* tag chips: light with dark text, dark stone with white text when picked */
.tag-picker .btn-outline-primary { background: #f1f3f3; border-color: #dde1e1; color: #24262a; }
.tag-picker .btn-outline-primary:hover { background: #e3e6e6; border-color: #c9cfcf; color: #24262a; }
.tag-picker .btn-check:checked + .btn-outline-primary,
.tag-picker .btn-check:active + .btn-outline-primary { background: #2b2d31; border-color: #2b2d31; color: #fff; }
.tag-picker .btn-check:focus-visible + .btn-outline-primary { outline: 3px solid rgba(42, 157, 143, 0.45); outline-offset: 2px; }
.tag-picker .btn-check:disabled + .btn-outline-primary { opacity: 0.35; }

/* a floating label sits on top of the textarea: when the text scrolls it showed through behind the label.
   A strip of the field's own background, drawn above the text and under the label, hides it (the right edge stays free for the scrollbar) */
.form-floating:has(> textarea.form-control)::before {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  right: 18px;
  height: 1.6rem;
  background: #fff;
  border-radius: var(--r-md) 0 0 0;
  pointer-events: none;
}

/* file fields: the "Choose File" button is the dark stone of the accordions, with room on the left */
input[type="file"].form-control { padding: 12px 14px 12px 18px; }
input[type="file"]::file-selector-button,
input[type="file"].form-control::file-selector-button { background: #2b2d31; color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; margin-right: 14px; font-weight: 600; cursor: pointer; transition: background .15s; }
/* hover: a light button with dark text (Bootstrap lightens it on hover; the text must follow, white on light was unreadable) */
input[type="file"]:hover::file-selector-button,
input[type="file"].form-control:hover:not(:disabled):not([readonly])::file-selector-button { background: #d9dddd; color: #24262a; }

/* the currency list in a price row: room for the value and the arrow */
.product-row .form-select { padding-right: 2rem; padding-left: 0.75rem; min-width: 0; }

/* price rows: the name takes what is left, the small fields have a fixed width so the currency is always readable */
@media (min-width: 768px) {
  .product-row__weight { width: 7rem; }
  .product-row__qty { width: 6.5rem; }
  .product-row__price { width: 7.5rem; }
  .product-row__currency { width: 7rem; }
  .product-row__name { min-width: 9rem; }
}
.product-row .form-select { padding: 0.375rem 2.25rem 0.375rem 0.85rem; min-width: 5.5rem; text-overflow: clip; }
.product-row__actions { display: flex; justify-content: flex-end; gap: 6px; }

/* ---------- menu spacing, one pass ---------- */
/* dropdown (computer): even air around the list and between its items, the current page in our teal */
.pp-menu__panel { padding: 10px; }
.pp-nav .pp-menu__panel a, .pp-nav .pp-menu__panel .pp-menu__item, .pp-nav .pp-menu__panel .pp-mypage { margin-block: 2px; padding: 10px 14px; }
.pp-nav .pp-menu__panel a.is-current { background: #2a9d8f; color: #fff; }
.pp-menu__panel--sub { margin: 0 0 6px 14px; padding: 2px 0 2px 10px; }
.pp-menu__panel--sub a { margin-block: 1px; }
/* the top bar: same side padding as the page, links with an even rhythm */
.pp-header__inner { padding: 0 28px; }
.pp-nav { gap: 4px; }
.pp-nav a, .pp-nav button.pp-nav__link { padding: 9px 16px; }
.pp-nav a.is-current { background: rgba(255, 255, 255, 0.16); }
@media (max-width: 860px) {
  .pp-header__inner { padding: 0 16px; }
  /* drawer: the same padding on both sides (the extra right padding was for the old slanted edge) */
  .pp-nav { padding: 84px 14px 28px 14px; }
  .pp-nav .pp-menu__panel a, .pp-nav .pp-menu__panel .pp-menu__item, .pp-nav .pp-menu__panel .pp-mypage { margin-block: 0; }
  .pp-nav .pp-menu__panel a.is-current { background: #2a9d8f; color: #fff; }
  .pp-menu.is-open > .pp-menu__panel, .pp-menu__group.is-open > .pp-menu__panel--sub { margin: 4px 0 8px 14px; }
}

/* phone drawer: tighter rhythm (less air between the entries) */
@media (max-width: 860px) {
  .pp-nav { padding-top: 76px; gap: 2px; }
  .pp-nav a, .pp-nav button.pp-nav__link { padding: 12px 16px; }
  .pp-menu { margin-top: 2px; }
  .pp-nav > .pp-filter { margin-top: 2px; }
  .pp-nav .pp-nav__logout { margin-top: 6px; }
  .pp-menu.is-open > .pp-menu__panel { margin-top: 4px; }
  .pp-nav .pp-menu__panel a, .pp-nav .pp-menu__panel .pp-menu__item, .pp-nav .pp-menu__panel .pp-mypage { padding: 9px 14px; }
}

/* phone drawer: Odjava sits at the bottom of the drawer, whatever is open above it */
@media (max-width: 860px) {
  .pp-nav > #logoutForm { margin-top: auto; padding-top: 16px; }
  .pp-nav .pp-nav__logout { margin-top: 0; }
}

/* no shine sweeping over buttons on hover: just the solid colour change */
.pp-btn::after, .btn::after, .pp-btn:hover::after, .btn:hover::after { display: none !important; animation: none !important; }

/* ==========================================================================
   One button system (Razor pages, Bootstrap buttons and the React pages all end up here)
   primary  = solid teal, white text         hover: dark stone, white text
   ghost    = white, dark text, grey border   hover: dark stone, white text
   danger   = white, red text, red border     hover: solid red, white text
   Same radius, weight and size everywhere; hovering only changes the colours (no lift, shadow or shine).
   ========================================================================== */

.pp-btn, .btn, .btn-primary {
  border: 1px solid #2a9d8f;
  border-radius: 12px;
  background: #2a9d8f;
  color: #fff;
  font-weight: 600;
  box-shadow: none;
  transform: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.pp-btn:hover, .btn:hover, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #2b2d31 !important;
  border-color: #2b2d31 !important;
  color: #fff !important;
  box-shadow: none;
  transform: none;
}
.pp-btn:active, .btn:active { transform: none; }
.btn-sm { border-radius: 10px; }

.pp-btn--ghost, .btn-outline-primary, .btn-outline-secondary {
  background: #fff;
  border-color: #d2d7d7;
  color: #24262a;
}
.pp-btn--ghost:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover {
  background: #2b2d31 !important;
  border-color: #2b2d31 !important;
  color: #fff !important;
}

.pp-btn--danger, .btn-outline-danger, .btn-danger {
  background: #fff;
  border-color: rgba(180, 67, 47, 0.45);
  color: #b4432f;
}
.pp-btn--danger:hover, .btn-outline-danger:hover, .btn-danger:hover {
  background: #b4432f !important;
  border-color: #b4432f !important;
  color: #fff !important;
}

.pp-btn:disabled, .btn:disabled, .btn.disabled { opacity: 0.5; cursor: default; }
.pp-btn:focus-visible, .btn:focus-visible { outline: 3px solid rgba(42, 157, 143, 0.4); outline-offset: 2px; }

/* phone drawer: a folded menu has no height at all (the desktop dropdown padding must not apply here, it made the first item peek out) */
@media (max-width: 860px) {
  .pp-menu__panel, .pp-menu__panel--sub { padding: 0 0 0 12px; border-width: 0 0 0 2px; }
  .pp-menu:not(.is-open) > .pp-menu__panel,
  .pp-menu__group:not(.is-open) > .pp-menu__panel--sub { max-height: 0; margin-top: 0; margin-bottom: 0; visibility: hidden; }
  .pp-menu.is-open > .pp-menu__panel, .pp-menu__group.is-open > .pp-menu__panel--sub { visibility: visible; }
}
@media (max-width: 860px) {
  /* hide only after the fold-up animation has finished; show at once when opening */
  .pp-menu:not(.is-open) > .pp-menu__panel,
  .pp-menu__group:not(.is-open) > .pp-menu__panel--sub { transition: max-height .5s ease, margin .3s, border-color .3s, visibility 0s linear .5s; }
  .pp-menu.is-open > .pp-menu__panel, .pp-menu__group.is-open > .pp-menu__panel--sub { transition: max-height .5s ease, margin .3s, border-color .3s, visibility 0s; }
}

/* ==========================================================================
   TEMPORARY EXPERIMENT: no rounded corners anywhere (to see the site without them).
   To bring them back, delete this whole block (everything from here to the end of the file).
   ========================================================================== */
*, *::before, *::after, ::file-selector-button { border-radius: 0 !important; }
/* the featured panels were also clipped to a rounded shape */
.hm-fx__item { clip-path: none !important; }
/* ...except the toggle switches and checkboxes, which look wrong when square */
.form-check-input { border-radius: 6px !important; }
.form-switch .form-check-input { border-radius: 2em !important; }

/* dropdowns: more room to the right of the arrow (it sat almost on the border), and the text keeps clear of it */
select, .form-select, .hm-bar__fields select, .dash-directory__filters select {
  background-position: right 16px center !important;
  padding-right: 2.75rem !important;
}
/* the plain selects (the filter bars) draw their own chevron, so its distance from the right edge can be set */
.hm-bar__fields select, .dash-directory__filters select, .pp-filter__panel select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2324262a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

/* "Izdvajamo danas" keeps its rounded corners (card, panels, pills, button) while the rest of the site is square for now */
.dash-featured { border-radius: 24px !important; }
.dash-featured .hm-fx__item { border-radius: 28px !important; clip-path: inset(0 round 28px) !important; }
.dash-featured .hm-fx__pill, .dash-featured .hm-fx__go { border-radius: 999px !important; }
@container dash-main (max-width: 640px) {
  .dash-featured .hm-fx__item { border-radius: 22px !important; clip-path: inset(0 round 22px) !important; }
}
@media (max-width: 860px) { .dash-featured { border-radius: 20px !important; } }