/* ==========================================================================
   Kompan — the global design system
   Palette and typography derived from the landing design (index_3).
   ========================================================================== */

:root {
    --bg: #17121F;
    --surface: #241C33;
    --border: #353041a3;
    --orange: #FF5722;
    --peach: #FF8A65;
    --yellow: #FCD34D;
    --purple: #7C3AED;
    --green: #10B981;
    --text: #F5EDE0;
    --muted: #A093B6;
    --card: #1B1626;

    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-body: 'DM Sans', sans-serif;
}

/* The light theme — override the palette; every component built on var() adapts itself.
   The accent colours (orange/purple/green…) stay as they are. */
:root[data-theme="light"] {
    --bg: #FAF6F0;
    --surface: #FFFFFF;
    --border: #E7DFD2;
    --text: #241C31;
    --muted: #766E82;
    --card: #FFFFFF;
}

/* Targeted fixes for hard-coded dark and light backgrounds in the light theme */
:root[data-theme="light"] .knav {
    background: rgba(255, 255, 255, 0.9);
}
:root[data-theme="light"] .tag-cat,
:root[data-theme="light"] .tag-age {
    background: rgba(36, 28, 49, 0.06);
}
:root[data-theme="light"] .app-page::before { background: rgba(255, 87, 34, 0.1); }
:root[data-theme="light"] .app-page::after { background: rgba(156, 111, 228, 0.08); }
/* The "Why Kompan" cards: the hover is dark purple — in the light theme give it a light tint so the text stays legible. */
:root[data-theme="light"] .sc:hover { background: #F1EBFA; }

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Scrollbari u stilu aplikacije (chat, liste, cijeli app)
   ========================================================================== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 100px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--orange);
    background-clip: padding-box;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

a {
    color: inherit;
}

/* Progressive enhancement: hide the fade-up only if JS is able to reveal it. */
html.js .fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

html.js .fade-up.visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.js .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* NAV ---------------------------------------------------------------------- */
.knav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px;
    background: rgba(26, 16, 22, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}

.knav-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* The highlighted create-event link in the header */
.nav-create {
    border: 1.5px solid var(--orange);
    color: var(--orange) !important;
    border-radius: 100px;
    padding: 6px 14px;
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease;
}
.nav-create:hover {
    background: var(--orange);
    color: #fff !important;
}

.nav-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}

.nav-back:hover {
    background: var(--card);
    border-color: var(--orange);
    transform: translateX(-2px);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--text);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.logo-mark {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

.logo-word span {
    color: var(--orange);
}

.nav-cta {
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--orange);
    color: #fff;
    padding: 9px 20px;
    border-radius: 100px;
    transition: opacity 0.2s, transform 0.15s;
}

.nav-cta:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* HERO --------------------------------------------------------------------- */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 140px 24px 80px;
    position: relative;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.blob-1 {
    width: 600px;
    height: 600px;
    background: rgba(255, 87, 34, 0.18);
    top: -150px;
    left: -150px;
}

.blob-2 {
    width: 400px;
    height: 400px;
    background: rgba(156, 111, 228, 0.15);
    bottom: -100px;
    right: -80px;
}

.blob-3 {
    width: 350px;
    height: 350px;
    background: rgba(255, 213, 79, 0.1);
    top: 30%;
    left: 55%;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--yellow);
    background: rgba(255, 213, 79, 0.1);
    border: 1.5px solid rgba(255, 213, 79, 0.25);
    border-radius: 100px;
    padding: 8px 20px;
    margin-bottom: 32px;
}

.dot {
    width: 7px;
    height: 7px;
    background: var(--yellow);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

h1 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 1.0;
    letter-spacing: -0.02em;
    max-width: 800px;
    margin-bottom: 24px;
}

.tilt-badge {
    display: inline-block;
    background: var(--yellow);
    color: #1A1016;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: -0.02em;
    padding: 2px 20px 6px;
    transform: rotate(-2.5deg);
    border-radius: 16px;
    line-height: 1.05;
}

.hero-tagline {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: 500;
    color: var(--muted);
    display: block;
    margin-top: 20px;
    line-height: 1.65;
}

.hero-sub {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 480px;
    margin-bottom: 44px;
    line-height: 1.8;
}

/* FORM --------------------------------------------------------------------- */
.form-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 460px;
}

.form-wrap input {
    flex: 1 1 200px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 14px 18px;
    border-radius: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.form-wrap input::placeholder {
    color: var(--muted);
}

.form-wrap input:focus {
    border-color: var(--orange);
}

.btn {
    background: var(--orange);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
    padding: 14px 28px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s;
}

.btn:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

.btn:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
}

.form-note {
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--muted);
}

.form-error {
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--peach);
    font-weight: 600;
}

.success-msg {
    color: var(--green);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    margin-top: 12px;
}

/* SOCIAL PROOF ------------------------------------------------------------- */
.social-proof {
    margin-top: 56px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.85rem;
    color: var(--muted);
}

.avatars {
    display: flex;
}

.avatars span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    margin-left: -8px;
    background: var(--card);
}

.avatars span:first-child {
    margin-left: 0;
}

/* TICKER ------------------------------------------------------------------- */
.ticker-wrap {
    width: 100%;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    background: var(--surface);
}

.ticker {
    display: flex;
    gap: 40px;
    animation: scroll 22s linear infinite;
    width: max-content;
}

.ticker-item {
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 14px;
}

.ticker-item span {
    color: var(--orange);
    font-size: 0.7rem;
}

@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* SECTIONS ----------------------------------------------------------------- */
.section {
    padding: 96px 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.section-label {
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 800;
    margin-bottom: 16px;
}

.section h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 18px;
}

.section > p {
    color: var(--muted);
    max-width: 520px;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* SCENARIO CARDS ----------------------------------------------------------- */
.scenarios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 52px;
}

.scenario-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    padding: 32px 26px;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.scenario-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 87, 34, 0.35);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.scenario-icon {
    font-size: 2.4rem;
    margin-bottom: 16px;
    display: block;
}

.scenario-card h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 10px;
}

.scenario-card p {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.7;
}

.card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-bottom: 20px;
    display: block;
}

.scenario-card:nth-child(1) .card-dot { background: var(--orange); }
.scenario-card:nth-child(2) .card-dot { background: var(--purple); }
.scenario-card:nth-child(3) .card-dot { background: var(--yellow); }
.scenario-card:nth-child(4) .card-dot { background: var(--green); }

/* HOW IT WORKS ------------------------------------------------------------- */
.how-section {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.how-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 96px 24px;
}

.how-h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    max-width: 560px;
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 52px;
    border: 1.5px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
}

.step {
    padding: 36px 30px;
    background: var(--card);
}

.step + .step {
    border-left: 1.5px solid var(--border);
}

.step-num {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 18px;
}

.step:nth-child(1) .step-num { color: var(--orange); }
.step:nth-child(2) .step-num { color: var(--purple); }
.step:nth-child(3) .step-num { color: var(--green); }

.step h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 10px;
}

.step p {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.7;
}

/* MOCKUP ------------------------------------------------------------------- */
.mockup-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 96px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.mockup-text h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 18px;
}

.mockup-text p {
    color: var(--muted);
    line-height: 1.8;
    margin-bottom: 14px;
}

/* EVENT CARD --------------------------------------------------------------- */
.event-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 28px;
    padding: 30px;
    position: relative;
}

.event-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--orange);
    border-radius: 28px 28px 0 0;
    opacity: 0.85;
}

.event-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

/* THE COVER VISUAL ON A HAPPENING CARD ------------------------------------ */
/* A photo (when given) or an illustration per category — so the cards are not dry. */
.hap-cover {
    position: relative;
    margin: -30px -30px 18px;
    height: 172px;
    border-radius: 27px 27px 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #64748B, #94A3B8);
}
.hap-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}
.hap-cover-emoji {
    position: relative;
    z-index: 2;
    font-size: 68px;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}
/* A soft sheen over the gradient (only when there is no photo). */
.hap-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(130% 130% at 82% 12%, rgba(255, 255, 255, 0.28), transparent 55%);
    pointer-events: none;
}
.hap-cover.has-photo::after { display: none; }

/* Colours per category (index = EventCategory). Defined as variables on the card so the same
   colour applies to the gradient and to the category tag alike — otherwise a card with a photo
   would carry no category colour at all and the visual language would not hold together. */
.cat-0 { --cat-a: #7C3AED; --cat-b: #EC4899; }
.cat-1 { --cat-a: #4F46E5; --cat-b: #0EA5E9; }
.cat-2 { --cat-a: #F97316; --cat-b: #FACC15; }
.cat-3 { --cat-a: #16A34A; --cat-b: #2DD4BF; }
.cat-4 { --cat-a: #E11D48; --cat-b: #F59E0B; }
.cat-5 { --cat-a: #F59E0B; --cat-b: #EF4444; }
.cat-6 { --cat-a: #64748B; --cat-b: #94A3B8; }
.cat-7 { --cat-a: #B91C1C; --cat-b: #7C3AED; }
.cat-8 { --cat-a: #2563EB; --cat-b: #06B6D4; }
.cat-9 { --cat-a: #6D28D9; --cat-b: #DB2777; }
.cat-10 { --cat-a: #9F1239; --cat-b: #D97706; }
.cat-11 { --cat-a: #0F766E; --cat-b: #EAB308; }

/* The backdrop when there is no photo. */
.event-card .hap-cover,
.hd .hd-cover {
    background: linear-gradient(135deg, var(--cat-a, #64748B), var(--cat-b, #94A3B8));
}

/* The category tag carries the same colour — visible on cards with a photo too. */
.event-card .tag-cat,
.hd .tag-cat {
    border-color: color-mix(in srgb, var(--cat-a, #64748B) 55%, transparent);
    background: color-mix(in srgb, var(--cat-a, #64748B) 18%, transparent);
}

/* Cards in a row have to be the same height with their buttons at the bottom, whether or not a
   card has a description. Without this the short cards "float" and the row looks wrong. */
.event-card.has-cover {
    display: flex;
    flex-direction: column;
}

.event-card.has-cover .event-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* margin-top:auto on .happening-actions now really does push the buttons to the bottom. */
.event-card.has-cover .event-title,
.event-card.has-cover .event-detail {
    flex: 0 0 auto;
}

/* U prikazu LISTE kartica ide vodoravno (slika lijevo, sadrzaj desno) — vrati smjer. */
.event-list .event-card.has-cover { flex-direction: row; }

/* The cover visual on a happening's detail page (a taller banner). */
.hd-cover {
    position: relative;
    margin: -26px -24px 20px;
    height: 240px;
    border-radius: 19px 19px 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #64748B, #94A3B8);
}
.hd-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}
.hd-cover-emoji {
    position: relative;
    z-index: 2;
    font-size: 76px;
    line-height: 1;
    filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.32));
}
.hd-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(130% 130% at 82% 12%, rgba(255, 255, 255, 0.28), transparent 55%);
    pointer-events: none;
}
.hd-cover.has-photo::after { display: none; }

/* THE VIEW TOGGLE: cards / list -------------------------------------------- */
.view-toggle {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin: -4px 0 18px;
}
.view-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.view-toggle button:hover { color: var(--text); border-color: var(--muted); }
.view-toggle button.active { background: var(--orange); border-color: var(--orange); color: #fff; }

/* A click on a happening card IN THE LIST navigates (the card-link overlay); only the buttons stay
   interactive. Limited to .has-cover cards in the list — .detail-card uses the same .event-card
   class, and there the content has to stay clickable (participants → profile, for instance). */
.event-card.has-cover > *:not(.card-link) { position: relative; z-index: 2; pointer-events: none; }
/* The .card-link layer covers the whole card (a click anywhere opens the details), so the actions
   have to claim their clicks back. We target button/a rather than individual classes — otherwise a
   newly added button falls silently through the layer and opens the details instead of doing its job. */
.event-card.has-cover .happening-actions button,
.event-card.has-cover .happening-actions a {
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

/* The LIST view: the image as a thumbnail on the left, the content on the right */
.event-list { display: flex; flex-direction: column; gap: 14px; }
.event-list .event-card { display: flex; align-items: stretch; padding: 0; overflow: hidden; }
.event-list .hap-cover {
    margin: 0;
    width: 240px;
    min-width: 240px;
    height: auto;
    align-self: stretch;
    border-radius: 0;
    flex: none;
}
.event-list .hap-cover-emoji { font-size: 52px; }
.event-list .event-body {
    flex: 1;
    min-width: 0;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.event-list .event-meta { margin-bottom: 0; }
.event-list .event-detail { margin: 0; }
.event-list .happening-actions { margin-top: 6px; }
@media (max-width: 560px) {
    .event-list .hap-cover { width: 132px; min-width: 132px; }
    .event-list .hap-cover-emoji { font-size: 38px; }
    .event-list .event-body { padding: 12px 14px; }
    .event-list .happening-desc { display: none; }
}

/* PROFIL U POPUPU (s detalja plana) ---------------------------------------- */
/* .modal-box has no background (where a whole card fills it) — this popup needs one of its own. */
/* .modal-box is defined later in the file (max-width 760) — hence the doubled class. */
.modal-box.profile-modal {
    max-width: 720px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0;                     /* the header runs to the very edge */
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow: hidden auto;          /* the rounded corners clip the gradient */
}
.profile-modal .modal-body { padding: 0 24px 24px; }

/* The close button: absolute (a float would otherwise push the content down) and legible on the gradient */
.profile-modal .modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    float: none;
    z-index: 3;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
}
.profile-modal .modal-close:hover { background: rgba(0, 0, 0, .5); color: #fff; }
/* A gradient header with the avatar overlapping it */
.pm-hero { position: relative; margin: 0 -24px; height: 96px; }
.pm-hero-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 45%, #FF5722 100%);
    opacity: .85;
}
.pm-hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 130% at 80% 10%, rgba(255,255,255,.25), transparent 55%);
    border-radius: inherit;
}
.pm-avatar-ring {
    position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
    width: 90px; height: 90px; border-radius: 50%;
    background: var(--card); padding: 5px; box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.pm-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block; }
.pm-avatar.avatar-default {
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--muted);
}
.pm-avatar.avatar-default svg { width: 42px; height: 42px; }

.pm-ident { text-align: center; margin: 44px 0 0; }
.pm-name {
    font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
    margin: 0; color: var(--text);
}
.pm-sub { font-size: .88rem; color: var(--muted); margin-top: 3px; }

/* The stats row (rating / interests / member since) */
.pm-stats {
    display: flex; justify-content: center; gap: 10px;
    margin: 16px 0 18px; flex-wrap: wrap;
}
.pm-stat {
    flex: 1 1 0; min-width: 90px; max-width: 150px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 10px 8px;
}
.pm-stat-v { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--text); }
.pm-stat-v.pm-stat-rating { color: var(--yellow); }
.pm-stat-v.pm-stat-new { color: var(--muted); }
.pm-stat-l { font-size: .72rem; color: var(--muted); text-align: center; line-height: 1.25; }

/* Opis kao citat */
.pm-bio {
    position: relative;
    font-size: .95rem; line-height: 1.6; color: var(--text);
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--orange);
    border-radius: 4px 14px 14px 4px;
    padding: 13px 15px; margin: 0 0 18px; white-space: pre-line;
}

/* Naslovi sekcija s ikonom */
.pm-label {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--font-body); font-weight: 700;
    font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 9px;
}
.pm-label-ico { font-size: .95rem; }
.pm-label-count {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 100px; padding: 1px 8px; font-size: .72rem; letter-spacing: 0;
}

/* PROFIL (stranica): isto gradijentno zaglavlje kao u popupu */
.profile-identity.has-hero {
    position: relative;
    padding-top: 0;
    overflow: hidden;   /* gradijent prati zaobljene kutove kartice */
}
.profile-hero {
    height: 88px;
    left: 0; right: 0; top: 0;
    border-radius: 0;
}
/* The avatar overlaps the header, with a ring in the card's colour */
.profile-identity.has-hero .profile-avatar-wrap {
    position: relative;
    z-index: 1;
    width: 84px;
    height: 84px;
    margin-top: 42px;
    border-radius: 50%;
    background: var(--card);
    padding: 5px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.profile-identity.has-hero .profile-avatar-img,
.profile-identity.has-hero .profile-avatar {
    width: 84px;
    height: 84px;
}
/* The edit button has to stay legible on the gradient */
.profile-identity.has-hero .profile-edit-btn {
    z-index: 2;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
}
.profile-identity.has-hero .profile-edit-btn:hover { background: rgba(0, 0, 0, .5); color: #fff; }
/* The bio: a pull-quote style, but without double spacing inside the card */
.profile-about .pm-bio { margin-bottom: 0; }
.pm-section { margin-top: 16px; }
.pm-rating-row {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 10px 13px; margin-top: 8px;
}
.pm-rating-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .88rem; }
.pm-rating-comment { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.pm-more { margin-top: 10px; width: 100%; font-size: .85rem; }

/* PITALICE (O meni) --------------------------------------------------------- */
.prompt-list { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.prompt-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 13px;
}
.prompt-q {
    font-size: .76rem;
    color: var(--muted);
    margin-bottom: 3px;
}
.prompt-a {
    font-size: .93rem;
    color: var(--text);
    line-height: 1.45;
}
/* Unos pitalice u formi */
.prompt-edit { margin-top: 10px; }
.prompt-edit .prompt-q { display: block; margin-bottom: 5px; font-weight: 600; }
.prompt-edit.answered .prompt-q { color: var(--orange); }

/* THE PROFILE — two independent columns: identity and the about text on the left, the tag cards
   stacked on the right. The columns lay out separately, so a longer about text leaves no gap on
   the right. */
.profile-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.profile-col > .profile-interests-card { margin-top: 0; }

/* What is shared with the viewer — colour only, no text: a green chip.
   "Looking for company for" is orange, so it gets a green border to show the match. */
.participant-chip.chip-lookingfor.is-match {
    border-color: rgba(77, 182, 172, .75);
    border-width: 1.5px;
}

/* EDITING THE PROFILE — a wider card and an airier layout --------------------- */
.wide-edit-card { padding: 34px 34px 30px; }
/* Name and gender, city and occupation, in two columns (on a wider screen). */
@media (min-width: 720px) {
    .wide-edit-card .field-row { display: flex; gap: 16px; }
    .wide-edit-card .field-row > .field { flex: 1; min-width: 0; }
    /* The chips (interests, looking for company for, languages) get more room in the wider layout. */
    .wide-edit-card .cat-subs { gap: 7px; }
}
/* The prompts: spaced a little so it is clear where one ends */
.wide-edit-card .prompt-edit + .prompt-edit {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* Primjeri odgovora — klik popuni polje */
.prompt-examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}
.prompt-examples .muted { font-size: .76rem; }
.prompt-example {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 100px;
    padding: 4px 11px;
    font-size: .78rem;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
    transition: color .15s, border-color .15s;
}
.prompt-example:hover {
    color: var(--text);
    border-color: var(--orange);
    border-style: solid;
}

/* "Looking for company for" — an emphasised chip (distinct from the interests).
   The specificity is deliberately higher: .participant-chip is defined later in the file. */
.participant-chip.chip-lookingfor {
    background: rgba(255, 87, 34, .14);
    border-color: rgba(255, 87, 34, .3);
    color: var(--peach);
}

/* The image preview in the admin form */
.hap-img-preview {
    margin: 4px 0 12px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    max-width: 260px;
}
.hap-img-preview img { display: block; width: 100%; height: 140px; object-fit: cover; }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 0.76rem;
    letter-spacing: 0;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 11px;
    line-height: 1.2;
}

.tag-event {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 87, 34, 0.12);
    color: var(--orange);
}

.tag-open {
    background: rgba(77, 182, 172, 0.12);
    color: var(--green);
}

/* An imported (official) event */
.tag-imported {
    background: rgba(255, 87, 34, 0.15);
    color: var(--orange);
}
.ext-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 16px;
    padding: 8px 14px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    color: var(--orange);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.ext-link:hover {
    border-color: var(--orange);
    background: rgba(255, 87, 34, 0.08);
}

/* Catalogue happenings */
.happening-desc {
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.happening-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}
/* A note in the form and on the event's detail page: the linked happening */
.from-happening {
    background: rgba(255, 87, 34, 0.1);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}
.linked-happening {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 16px;
    font-size: 0.9rem;
    color: var(--muted);
}
.linked-happening strong { color: var(--text); }
.linked-label { color: var(--muted); }

.event-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.event-detail {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 18px;
}

.event-desc {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 22px;
    padding: 16px 18px;
    background: var(--surface);
    border-radius: 14px;
    border-left: 4px solid var(--orange);
}

.event-organizer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.organizer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), var(--purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: white;
    font-family: var(--font-display);
}

.organizer-info small {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
}

.organizer-info span {
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-display);
}

/* The clickable, credible organiser on an event's detail page */
.organizer-link {
    align-items: flex-start;
    text-decoration: none;
    padding: 18px 10px 14px;
    margin: 0 -10px 18px;
    border-radius: 0 0 14px 14px;
    transition: background 0.15s ease;
}

.organizer-link:hover {
    background: rgba(255, 255, 255, 0.03);
}

.organizer-link .organizer-name {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--text);
}

/* The "✓ Verified" badge — used everywhere (profile, popup, organiser card).
   The font is reset because it sits inside a heading (display font, 800). */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.68rem;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--green);
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 2px 9px;
    border-radius: 100px;
    vertical-align: middle;
    white-space: nowrap;
}
/* Next to the name on the profile and in the popup — spaced away from it. */
.profile-name .verified-badge,
.pm-name .verified-badge {
    margin-left: 9px;
    position: relative;
    top: -2px;
}
.organizer-link .verified-badge { border: none; }

.organizer-link small span {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.78rem;
}

.organizer-link .org-rating {
    color: var(--yellow);
    font-weight: 700;
}

/* The gate: complete the profile before creating an event */
.profile-gate {
    text-align: center;
    padding: 12px 8px 8px;
}

.gate-emoji {
    font-size: 2.6rem;
    margin-bottom: 8px;
}

.profile-gate h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    margin: 0 0 8px;
}

.profile-gate p {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 auto 18px;
    max-width: 380px;
}

.profile-gate strong {
    color: var(--peach);
}

.event-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.event-spots {
    font-size: 0.85rem;
    color: var(--muted);
}

.event-spots strong {
    color: var(--text);
    font-weight: 700;
}

.btn-small {
    background: var(--orange);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.85rem;
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-small:hover {
    opacity: 0.85;
}

/* CTA ---------------------------------------------------------------------- */
.cta-bottom {
    background: var(--orange);
    text-align: center;
    padding: 100px 24px;
    position: relative;
    overflow: hidden;
}

.cta-bottom::before {
    content: '😊';
    position: absolute;
    font-size: 28vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.06;
    pointer-events: none;
    line-height: 1;
}

.cta-bottom h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.2rem, 6vw, 4rem);
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 16px;
}

.cta-bottom p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
    font-size: 1.05rem;
}

.cta-bottom .form-wrap input {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.cta-bottom .form-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

.cta-bottom .form-wrap input:focus {
    border-color: #fff;
}

.cta-bottom .btn {
    background: #fff;
    color: var(--orange);
}

.cta-bottom .form-note {
    color: rgba(255, 255, 255, 0.65);
}

.cta-bottom .form-error {
    color: #fff;
}

.cta-bottom .success-msg {
    color: #fff;
}

/* FOOTER ------------------------------------------------------------------- */
.kfooter {
    text-align: center;
    padding: 32px 24px;
    font-size: 0.82rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

/* RESPONSIVE --------------------------------------------------------------- */
@media (max-width: 760px) {
    .mockup-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .knav {
        padding: 14px 16px;
    }
    .knav .knav-right { gap: 6px; }
    .knav .knav-left { min-width: 0; flex-shrink: 1; }

    .step + .step {
        border-left: none;
        border-top: 1.5px solid var(--border);
    }
}

/* ==========================================================================
   Blazor template defaults (re-themed onto the Kompan palette)
   ========================================================================== */

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--green);
}

.invalid {
    outline: 1px solid var(--orange);
}

/* The inline error on a required field (the create-event form) */
.field input.invalid,
.field select.invalid,
.field textarea.invalid {
    border-color: #ff5e5e;
    outline: none;
}

.field-error {
    display: block;
    margin-top: 5px;
    color: #ff7a7a;
    font-size: 0.8rem;
    font-weight: 600;
}

.validation-message {
    color: var(--peach);
}

#blazor-error-ui {
    color: var(--text);
    background: var(--surface);
    border-top: 1px solid var(--border);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Dogodila se greška.";
}

/* ==========================================================================
   App stranice (eventi, auth, kreiranje) — Blazor klijent
   ========================================================================== */

.knav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* The tools (theme and language) — on mobile they stay next to the burger, outside the collapsed menu */
.knav-utils {
    display: flex;
    align-items: center;
    gap: 8px;
}

.knav-links {
    display: flex;
    gap: 18px;
    align-items: center;
}

.applink {
    color: var(--muted);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.applink:hover {
    color: var(--text);
}

/* Aktivni ekran u headeru */
.applink.active {
    color: var(--orange);
    position: relative;
}
.applink.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--orange);
}

/* The HR/EN language switch — a globe icon plus a dropdown */
.lang-menu {
    position: relative;
    margin-left: 4px;
}
.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid var(--border);
    background: none;
    cursor: pointer;
    color: var(--muted);
    padding: 5px 9px;
    border-radius: 999px;
    line-height: 1;
    transition: color 0.15s, border-color 0.15s;
}
.lang-trigger:hover { color: var(--text); border-color: var(--orange); }

/* The dark/light switch */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    border: 1.5px solid var(--border);
    background: none;
    cursor: pointer;
    color: var(--muted);
    border-radius: 999px;
    transition: color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { color: var(--orange); border-color: var(--orange); }

/* Narrow phones: the right-hand cluster (theme, language, burger) otherwise runs into the "kompan" logo. */
@media (max-width: 430px) {
    .knav-utils { gap: 5px; }
    .theme-toggle { width: 30px; height: 30px; }
    .theme-toggle svg { width: 16px; height: 16px; }
    .lang-trigger { padding: 4px 7px; gap: 3px; }
    .lang-trigger svg { width: 16px; height: 16px; }
    .lang-menu { margin-left: 0; }
}
.lang-current {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}
.lang-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
}
.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 201;
    min-width: 156px;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lang-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.12s;
}
.lang-opt:hover { background: rgba(255, 87, 34, 0.1); }
.lang-opt.active {
    background: var(--orange);
    color: #fff;
}
.flag {
    flex: 0 0 auto;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    display: block;
}

.verify-nag {
    color: var(--yellow);
}

.verify-nag:hover {
    color: var(--yellow);
    opacity: 0.85;
}

.app-page {
    min-height: 100vh;
    padding: 110px 24px 64px;
}

/* Soft glow blobs on every app page (the same depth as the landing page). */
.app-page::before,
.app-page::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
    z-index: -1;
    opacity: 0.5;
}

.app-page::before {
    width: 520px;
    height: 520px;
    background: rgba(255, 87, 34, 0.16);
    top: -170px;
    right: -130px;
}

.app-page::after {
    width: 460px;
    height: 460px;
    background: rgba(156, 111, 228, 0.14);
    bottom: -190px;
    left: -150px;
}

.app-container {
    max-width: 1100px;
    margin: 0 auto;
}

.app-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
}

.app-head h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: -0.02em;
}

.filter {
    display: flex;
    gap: 10px;
}

.filter input {
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 10px 16px;
    border-radius: 12px;
    outline: none;
}

.filter input:focus {
    border-color: var(--orange);
}

.muted {
    color: var(--muted);
    font-size: 0.95rem;
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* AUTH / FORM CARD --------------------------------------------------------- */
.auth-card {
    max-width: 420px;
    margin: 0 auto;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    padding: 36px 32px;
}

.auth-card h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

/* "ili" razdjelnik + Google gumb */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.google-signin {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.google-btn-host {
    display: flex;
    justify-content: center;
    min-height: 44px;
    color-scheme: light;
}

/* A defence against the "giant Google logo": the GIS button lives in the light DOM, so if its own
   CSS has not loaded yet the icon grows to its intrinsic size — we cap it. */
.google-btn-host svg {
    max-width: 22px !important;
    max-height: 22px !important;
}

.field {
    margin-bottom: 16px;
    flex: 1;
}

.field-row {
    display: flex;
    gap: 14px;
}

/* "More options" — the advanced fields collapsed by default (less clutter on the form) */
.more-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 14px 2px;
    margin: 4px 0 4px;
}
.more-toggle:hover { color: var(--text); }
.more-toggle svg { transition: transform 0.2s; color: var(--orange); }
.more-toggle.open svg { transform: rotate(180deg); }
.more-options { margin-bottom: 8px; }

.field label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 12px 14px;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--orange);
}

/* A light theme for the native picker popup (calendar and clock) so it is visible.
   The icon in the input stays light through an invert filter (the input is dark). */
.field input[type="datetime-local"],
.field input[type="date"],
.field input[type="time"] {
    color-scheme: light;
}
.field input[type="number"] {
    color-scheme: dark;
}
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.8);
    cursor: pointer;
    opacity: 0.85;
}
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.field input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.field textarea {
    resize: vertical;
}

/* EVENT DETAIL + CHAT ------------------------------------------------------ */
.event-title-link {
    text-decoration: none;
    display: block;
    transition: color 0.2s;
}

.event-title-link:hover {
    color: var(--orange);
}

.detail-wrap {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-card {
    padding: 32px;
}

.detail-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.8rem;
    letter-spacing: -0.02em;
    margin: 6px 0 4px;
}

/* Header detalja: veliki datum + naslov + meta chipovi */
.detail-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 10px 0 14px;
}
.date-badge {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 10px 12px 8px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-top: 3px solid var(--orange);
    border-radius: 14px;
}
.db-day {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--text);
}
.db-mon {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--orange);
    margin-top: 3px;
}
.detail-head-main { min-width: 0; }
.detail-head-main .detail-title { margin: 0 0 8px; }
.detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.d-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.82rem;
    color: var(--muted);
}
.d-chip svg { color: var(--orange); flex: 0 0 auto; }

/* MOBILE: a plan's details — 32px of padding ate half the width on a 375px screen, so the title
   wrapped against the date. Less padding, a smaller title and more compact chips. */
@media (max-width: 560px) {
    .detail-card { padding: 18px 16px 20px; }
    .detail-title { font-size: 1.4rem; }
    .detail-head { gap: 12px; margin: 8px 0 12px; }
    .date-badge { min-width: 52px; padding: 8px 9px 6px; }
    .db-day { font-size: 1.4rem; }
    .db-mon { font-size: 0.66rem; }
    .detail-chips { gap: 6px; }
    .d-chip { padding: 4px 10px; font-size: 0.78rem; gap: 5px; }
    .d-chip svg { width: 14px; height: 14px; }
    .detail-spots { margin: 14px 0 10px; }
    /* The details popup: use the full width of the screen */
    .modal-overlay { padding: 10px; }
    .modal-box { max-width: 100%; }
}

/* Seats in the group — a visual progress bar instead of a sentence */
.detail-spots {
    margin: 18px 0 12px;
}
.spots-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.88rem;
    color: var(--muted);
    margin-bottom: 8px;
}
.spots-line strong {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
}
.spots-free { color: var(--green); font-weight: 600; }
.spots-full { color: var(--peach); font-weight: 600; }
.spots-track {
    height: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    overflow: hidden;
}
.spots-fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--orange), var(--peach));
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.participants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

/* The padding is symmetric because most of these chips are plain text: interests, languages,
   "looking for company for". It used to be 4px on the left to sit tight against an avatar, which
   left the text 4.5px off-centre on every chip that has no avatar — six of the seven uses. */
.participant-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 4px 13px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}
/* Only a chip that really carries an avatar pulls its left edge back in. */
.participant-chip:has(> .participant-avatar) { padding-left: 4px; }
.participant-link {
    transition: border-color .15s, transform .15s;
}
.participant-link:hover {
    border-color: var(--orange);
    transform: translateY(-1px);
}
.participant-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}
.participant-avatar.avatar-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    color: var(--muted);
}
.participant-avatar.avatar-default svg { width: 15px; height: 15px; }

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.btn-ghost {
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--border);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.9rem;
    padding: 12px 22px;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.btn-ghost:hover {
    border-color: var(--orange);
    color: var(--text);
}

.in-team {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--green);
}

/* Request-only: the "pending" pill on a list card */
.pending-pill {
    background: rgba(252, 211, 77, 0.15) !important;
    color: var(--yellow) !important;
    cursor: default;
    white-space: nowrap;
}

/* The card: the user already has a seat at this event */
.in-pill {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--green) !important;
    cursor: default;
    white-space: nowrap;
}

/* The detail view: a prompt to complete the profile before joining */
.request-box.profile-needed .btn {
    align-self: flex-start;
}

/* Request-only: the explanation block plus the message field on the detail view */
.request-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.request-hint {
    font-size: 0.88rem;
    line-height: 1.4;
    margin: 0;
}

.request-hint strong {
    color: var(--peach);
}

/* NOTIFIKACIJE (zvono u headeru) ------------------------------------------- */
.notif-wrap {
    position: relative;
    display: inline-flex;
}

.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
    padding: 6px;
    border-radius: 12px;
    transition: background 0.15s ease, color 0.15s ease;
}

.notif-bell:hover {
    background: var(--surface);
    color: var(--text);
}

.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--orange);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--bg);
}

.notif-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
}

.notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 201;
    width: 320px;
    max-width: 86vw;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    padding: 8px;
}

.notif-head {
    font-family: var(--font-display);
    font-weight: 800;
    padding: 8px 10px;
    font-size: 0.95rem;
}

.notif-empty {
    padding: 10px;
    font-size: 0.9rem;
}

.notif-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s ease;
}

.notif-item:hover {
    background: var(--surface);
}

.notif-item.unread {
    background: rgba(255, 87, 34, 0.08);
}

.notif-ico {
    font-size: 1.05rem;
    line-height: 1.3;
}

.notif-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notif-text {
    font-size: 0.88rem;
    line-height: 1.35;
}

.notif-time {
    font-size: 0.72rem;
    color: var(--muted);
}

/* UNREAD CHAT (badge/pill) ------------------------------------------------- */
.chat-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chat-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--purple);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.chat-pill {
    display: inline-block;
    margin: 6px 0 2px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.16);
    color: var(--purple);
    font-size: 0.78rem;
    font-weight: 800;
}

/* Inbox upita (stranica /upiti) */
.request-event {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}

.request-event .applink {
    font-family: var(--font-display);
    font-weight: 800;
}

.request-event small {
    color: var(--muted);
    font-size: 0.8rem;
}

/* ===========================================================================
   CHAT — Messenger style (a conversation list plus a thread of bubbles)
   =========================================================================== */
.chat {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
}

.chat-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 360px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Lista razgovora + thread side-by-side */
.chat-screen {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 18px;
    align-items: stretch;
    height: 76vh;
}

.chat-convos {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.chat-convos-head {
    padding: 18px 18px 14px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    position: sticky;
    top: 0;
    background: var(--card);
    z-index: 1;
}

.chat-convos-empty {
    padding: 18px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.chat-convo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 0 8px 2px;
    background: none;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    transition: background 0.15s ease;
}

.chat-convo:hover {
    background: var(--surface);
}

.chat-convo.active {
    background: rgba(255, 87, 34, 0.12);
}

.chat-convo-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--purple), var(--orange));
}

.chat-convo-avatar.cat-0 { background: linear-gradient(135deg, #b15cff, var(--purple)); }
.chat-convo-avatar.cat-1 { background: linear-gradient(135deg, var(--peach), var(--orange)); }
.chat-convo-avatar.cat-2 { background: linear-gradient(135deg, var(--yellow), var(--orange)); }
.chat-convo-avatar.cat-3 { background: linear-gradient(135deg, var(--green), #0ea5a0); }
.chat-convo-avatar.cat-4 { background: linear-gradient(135deg, var(--peach), #ff5e8a); }
.chat-convo-avatar.cat-5 { background: linear-gradient(135deg, var(--orange), var(--yellow)); }
.chat-convo-avatar.cat-6 { background: linear-gradient(135deg, var(--muted), var(--purple)); }

.chat-convo-info {
    flex: 1;
    min-width: 0;
}

.chat-convo-title {
    color: var(--text);
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-convo-sub {
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Thread pane --- */
.chat-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
}

.chat-pane-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 24px;
}

.chat-pane-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.chat-pane-back {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
}
.chat-pane-back:hover { background: var(--surface); }

.chat-pane-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--purple), var(--orange));
}
.chat-pane-avatar.cat-0 { background: linear-gradient(135deg, #b15cff, var(--purple)); }
.chat-pane-avatar.cat-1 { background: linear-gradient(135deg, var(--peach), var(--orange)); }
.chat-pane-avatar.cat-2 { background: linear-gradient(135deg, var(--yellow), var(--orange)); }
.chat-pane-avatar.cat-3 { background: linear-gradient(135deg, var(--green), #0ea5a0); }
.chat-pane-avatar.cat-4 { background: linear-gradient(135deg, var(--peach), #ff5e8a); }
.chat-pane-avatar.cat-5 { background: linear-gradient(135deg, var(--orange), var(--yellow)); }
.chat-pane-avatar.cat-6 { background: linear-gradient(135deg, var(--muted), var(--purple)); }

.chat-pane-headinfo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.chat-pane-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-pane-title:hover { color: var(--orange); }

.chat-pane-sub {
    color: var(--muted);
    font-size: 0.8rem;
}

.chat-pane-open {
    flex-shrink: 0;
    color: var(--muted);
    padding: 6px;
    border-radius: 50%;
    display: flex;
}
.chat-pane-open:hover { background: var(--surface); color: var(--text); }

/* Chat inside the pane: no frame of its own, fills the height */
.chat-pane .chat.msgr {
    flex: 1;
    min-height: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}
.chat-pane .chat-body {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.chat-open-btn {
    width: 100%;
    text-align: center;
}

/* --- The bubbles (Messenger) --- */
.msgr-empty {
    margin: auto;
    text-align: center;
}
.msgr-empty-emoji { font-size: 2.4rem; margin-bottom: 6px; }

.msgr-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
}
.msgr-row.mine { flex-direction: row-reverse; }
.msgr-row.grp-first { margin-top: 12px; }

.msgr-avatar,
.msgr-avatar-spacer {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}
.msgr-avatar {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.8rem;
    color: #fff;
}
.msgr-avatar.av-0 { background: linear-gradient(135deg, #b15cff, var(--purple)); }
.msgr-avatar.av-1 { background: linear-gradient(135deg, var(--peach), var(--orange)); }
.msgr-avatar.av-2 { background: linear-gradient(135deg, var(--green), #0ea5a0); }
.msgr-avatar.av-3 { background: linear-gradient(135deg, var(--yellow), var(--orange)); }
.msgr-avatar.av-4 { background: linear-gradient(135deg, #ff5e8a, var(--peach)); }
.msgr-avatar.av-5 { background: linear-gradient(135deg, var(--purple), #3aa0ff); }

.msgr-bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: 72%;
}
.msgr-row.mine .msgr-bubble-wrap { align-items: flex-end; }

.msgr-name {
    font-size: 0.72rem;
    color: var(--muted);
    margin: 0 0 3px 12px;
    font-weight: 600;
}

.msgr-bubble {
    padding: 9px 14px;
    border-radius: 20px;
    font-size: 0.94rem;
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
}

/* other people's messages */
.msgr-row.they .msgr-bubble {
    background: var(--surface);
    color: var(--text);
}
.msgr-row.they:not(.grp-first) .msgr-bubble { border-top-left-radius: 6px; }
.msgr-row.they:not(.grp-last) .msgr-bubble { border-bottom-left-radius: 6px; }

/* moje poruke */
.msgr-row.mine .msgr-bubble {
    background: linear-gradient(135deg, var(--orange), var(--peach));
    color: #fff;
}
.msgr-row.mine:not(.grp-first) .msgr-bubble { border-top-right-radius: 6px; }
.msgr-row.mine:not(.grp-last) .msgr-bubble { border-bottom-right-radius: 6px; }

/* --- Compose bar --- */
.msgr-compose {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

/* Emoji toggle u inputu */
.emoji-toggle {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    display: flex;
    padding: 4px;
    margin-left: 4px;
    border-radius: 50%;
    transition: color 0.15s ease;
}
.emoji-toggle:hover:not(:disabled),
.emoji-toggle.active { color: var(--orange); }
.emoji-toggle:disabled { opacity: 0.5; cursor: default; }

/* Emoji panel (popover iznad compose bara) */
.emoji-panel {
    position: absolute;
    bottom: calc(100% - 4px);
    right: 16px;
    left: 16px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 2px;
    z-index: 5;
}

.emoji-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    padding: 6px;
    border-radius: 10px;
    transition: background 0.12s ease, transform 0.12s ease;
}
.emoji-btn:hover {
    background: var(--surface);
    transform: scale(1.15);
}

.msgr-input-pill {
    flex: 1;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 22px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    transition: border-color 0.18s ease;
}
.msgr-input-pill:focus-within { border-color: var(--orange); }
.msgr-input-pill.disabled { opacity: 0.55; }

.msgr-input-pill input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.94rem;
    padding: 11px 0;
}

.msgr-send {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--orange), var(--peach));
    transition: transform 0.12s ease, opacity 0.18s ease;
}
.msgr-send svg { margin-left: -1px; }
.msgr-send:hover:not(:disabled) { transform: scale(1.06); }
.msgr-send.empty,
.msgr-send:disabled {
    background: var(--surface);
    color: var(--muted);
    cursor: default;
}

@media (max-width: 760px) {
    /* The filters collapsed behind a button (it saves room on mobile).
       The .filter-bar prefix raises the specificity so it beats the base rules lower in the file. */
    .filter-bar .filters-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        align-self: flex-start;
        background: var(--surface);
        border: 1.5px solid var(--border);
        border-radius: 12px;
        padding: 11px 16px;
        color: var(--text);
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.92rem;
        cursor: pointer;
    }
    .filter-bar .filter-collapsible { display: none; }
    .filter-bar.filters-open .filter-collapsible { display: flex; }
    .filter-bar.filters-open .filters-chevron { transform: rotate(180deg); }

    /* Full-screen chat — only the messages scroll, the page does not. */
    .chat-page { padding: 0; min-height: 0; }
    .chat-page::before, .chat-page::after { display: none; }
    .chat-screen {
        grid-template-columns: 1fr;
        position: fixed;
        top: 58px;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        gap: 0;
    }
    .chat-screen.show-list .chat-pane { display: none; }
    .chat-screen.show-pane .chat-convos { display: none; }
    .chat-convos, .chat-pane { border-radius: 0; }
    .chat-pane-back { display: flex; }
    .msgr-bubble-wrap { max-width: 78%; }
}

/* REQUESTS PANEL (organizator) -------------------------------------------- */
.requests-panel {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
}

.request-row {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.request-who {
    display: flex;
    align-items: center;
    gap: 12px;
}

.request-msg {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.6;
    padding: 10px 14px;
    background: var(--surface);
    border-radius: 12px;
    border-left: 3px solid var(--orange);
}

.request-actions {
    display: flex;
    gap: 10px;
}

.request-actions .btn-ghost {
    padding: 10px 20px;
    font-size: 0.85rem;
}

/* RATING ------------------------------------------------------------------- */
.rate-row {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.rate-who {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
    min-width: 90px;
}

.stars {
    display: flex;
    gap: 2px;
}

.star {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--border);
    transition: color 0.15s, transform 0.1s;
    padding: 0 1px;
}

.star:hover {
    transform: scale(1.15);
}

.star.on {
    color: var(--yellow);
}

.rate-comment {
    flex: 1 1 160px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 9px 13px;
    border-radius: 12px;
    outline: none;
}

.rate-comment:focus {
    border-color: var(--orange);
}

.rate-done {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--green);
}

/* ==========================================================================
   EVENTS PAGE — moderni redizajn
   ========================================================================== */
.events-page {
    position: relative;
    overflow: hidden;
}

.page-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

.page-blob-a {
    width: 520px;
    height: 520px;
    background: rgba(255, 87, 34, 0.16);
    top: -160px;
    right: -120px;
}

.page-blob-b {
    width: 460px;
    height: 460px;
    background: rgba(156, 111, 228, 0.14);
    bottom: -180px;
    left: -140px;
}

.events-page .app-container {
    position: relative;
    z-index: 1;
}

.events-hero {
    margin-bottom: 28px;
}

.events-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.2rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 10px;
}

.events-title span {
    color: var(--orange);
}

.events-title .rot-word {
    color: var(--peach);
    display: inline-block;
    animation: rotWordIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rotWordIn {
    from { opacity: 0; transform: translateY(0.45em); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile: the heading over two lines — the rotating word goes onto its own. */
@media (max-width: 760px) {
    .events-title .rot-word { display: block; }
}

.events-sub {
    color: var(--muted);
    font-size: 1.05rem;
    max-width: 460px;
}

/* FILTER BAR --------------------------------------------------------------- */
.filter-bar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

/* The filters: always open on desktop, behind a button on mobile (collapsible). */
.filter-collapsible {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.filters-btn { display: none; }
.filters-count {
    background: var(--orange);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.filters-btn .filters-chevron { color: var(--muted); transition: transform 0.2s; }

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.search-box {
    flex: 1 1 280px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 4px 10px 4px 14px;
    transition: border-color 0.2s;
}

.search-box:focus-within {
    border-color: var(--orange);
}

.search-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 10px 4px;
    outline: none;
    min-width: 0;
}

.search-input::placeholder {
    color: var(--muted);
}

.search-clear {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px 6px;
}

.search-clear:hover {
    color: var(--text);
}

.city-select {
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.92rem;
    padding: 10px 14px;
    border-radius: 14px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.city-select:focus {
    border-color: var(--orange);
}

.filter-toggle {
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--muted);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 10px 16px;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.filter-toggle:hover {
    color: var(--text);
    border-color: rgba(16, 185, 129, 0.5);
}

.filter-toggle.active {
    background: rgba(16, 185, 129, 0.16);
    border-color: var(--green);
    color: var(--green);
}

.chip-clear {
    color: var(--peach);
    border-color: rgba(255, 138, 101, 0.4);
}

.empty-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}

/* Anti-duplication: suggestions of similar events while creating one */
.similar-box {
    background: rgba(252, 211, 77, 0.08);
    border: 1.5px solid rgba(252, 211, 77, 0.35);
    border-radius: 14px;
    padding: 12px;
    margin: -4px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.similar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--yellow);
    line-height: 1.35;
}
.similar-close {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 2px 4px;
    margin: -2px -2px 0 0;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.similar-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

.similar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.12s ease;
}

.similar-item:hover {
    border-color: var(--orange);
    transform: translateY(-1px);
}

.similar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.similar-title {
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.similar-meta {
    font-size: 0.78rem;
    color: var(--muted);
}

.similar-go {
    color: var(--orange);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The categories fold away behind one chip-shaped toggle (see Happenings.razor); the venue
   dropdown sits beside the search box and borrows the plans page's select. */
.cats-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cats-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 8px 16px;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s;
}
.cats-toggle:hover { border-color: rgba(255, 87, 34, 0.4); }
.cats-toggle .filters-chevron { color: var(--muted); transition: transform 0.2s; }
.cats-toggle.open .filters-chevron { transform: rotate(180deg); }
/* Shares the row with the search box and shrinks with it (min-width: 0 — without that the input's
   own minimum width pushes the box past the edge). On a phone it takes a row of its own, which
   also keeps the browser's suggestion list on screen. */
.venue-box { flex: 1 1 220px; min-width: 0; position: relative; }
.venue-box .search-input { min-width: 0; width: 100%; }
.venue-box.open { border-color: var(--orange); z-index: 31; }
/* While the list is open this invisible layer sits under it (and under the box itself, which is
   raised above it) — a click anywhere else lands here and closes the list. */
.venue-backdrop { position: fixed; inset: 0; z-index: 29; }
@media (max-width: 760px) {
    .filter-row .venue-box { flex-basis: 100%; }
}

/* The venue picker's own list (VenuePicker.razor), hung under the box in the page's own style. */
.venue-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgb(0 0 0 / 28%);
    max-height: 280px;
    overflow-y: auto;
}
.venue-option {
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.92rem;
    color: var(--text);
    cursor: pointer;
}
.venue-option:hover, .venue-option.active { background: var(--surface); }
.venue-option mark { background: none; color: var(--orange); font-weight: 700; }
.venue-empty { padding: 9px 12px; font-size: 0.85rem; color: var(--muted); }

.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--muted);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 16px;
    border-radius: 100px;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.2s, color 0.2s, background 0.2s;
    white-space: nowrap;
}

.cat-chip:hover {
    transform: translateY(-2px);
    color: var(--text);
    border-color: rgba(255, 87, 34, 0.4);
}

.cat-chip.active {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

.cat-emoji {
    font-size: 0.95em;
}

/* Brand line ikone kategorija (CategoryIcon.razor) */
.cat-ico {
    flex: none;
    vertical-align: -0.18em;
}
.tag-cat .cat-ico,
.tag-event .cat-ico {
    margin-right: 2px;
}

.city-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 4px 4px 4px 14px;
    transition: border-color 0.2s;
}

.city-search:focus-within {
    border-color: var(--orange);
}

.search-icon {
    font-size: 0.9rem;
    opacity: 0.7;
}

.city-search input {
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 8px 4px;
    outline: none;
    width: 120px;
}

.city-search input::placeholder {
    color: var(--muted);
}

/* INTERACTIVE EVENT CARD --------------------------------------------------- */
.event-card-i {
    position: relative;
    cursor: pointer;
    animation: cardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.event-grid .event-card-i:nth-child(2) { animation-delay: 0.05s; }
.event-grid .event-card-i:nth-child(3) { animation-delay: 0.1s; }
.event-grid .event-card-i:nth-child(4) { animation-delay: 0.15s; }
.event-grid .event-card-i:nth-child(5) { animation-delay: 0.2s; }
.event-grid .event-card-i:nth-child(6) { animation-delay: 0.25s; }

@keyframes cardIn {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.event-card-i:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 87, 34, 0.45);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 87, 34, 0.15);
}

.card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    cursor: pointer;
}

/* ==========================================================================
   Modal (popup) — npr. detalji eventa
   ========================================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(8, 5, 12, 0.72);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    animation: modalFade 0.2s ease;
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: auto;
    animation: modalUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes modalUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.modal-close {
    position: sticky;
    top: 0;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--surface);
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: background 0.15s ease;
}
.modal-close:hover { background: var(--card); color: var(--orange); }

.modal-body { clear: both; }

/* The chat icon (in the detail view's action row) plus a tooltip on hover */
.chat-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.chat-icon-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
    background: var(--card);
}
.chat-icon-btn .chat-badge {
    position: absolute;
    top: -3px;
    right: -3px;
}
.chat-icon-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.chat-icon-btn:hover .chat-icon-tip { opacity: 1; }

.event-card-i > *:not(.card-link) {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.event-card-i .card-join {
    pointer-events: auto;
}

.event-card-i .event-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.15rem;
    margin-bottom: 6px;
    transition: color 0.2s;
}

.event-card-i:hover .event-title {
    color: var(--orange);
}

/* The category accent on the bar (flat, one colour per category) */
.event-card-i.cat-0 .event-stripe { background: var(--orange); }
.event-card-i.cat-1 .event-stripe { background: var(--purple); }
.event-card-i.cat-2 .event-stripe { background: var(--yellow); }
.event-card-i.cat-3 .event-stripe { background: var(--green); }
.event-card-i.cat-4 .event-stripe { background: var(--peach); }
.event-card-i.cat-5 .event-stripe { background: var(--orange); }
.event-card-i.cat-6 .event-stripe { background: var(--muted); }

/* The category is the main tag; the rest are quieter (the same calm language). */
.tag-cat {
    background: rgba(245, 238, 232, 0.07);
    color: var(--text);
    font-weight: 700;
}

.tag-open {
    background: transparent;
    color: var(--green);
    padding-left: 4px;
    padding-right: 4px;
}
.tag-open::before,
.tag-request::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.tag-request {
    background: transparent;
    color: var(--purple);
    padding-left: 4px;
    padding-right: 4px;
}

.tag-women {
    background: rgba(236, 72, 153, 0.14);
    color: #F472B6;
}

.tag-men {
    background: rgba(56, 138, 221, 0.14);
    color: #60A5FA;
}

.tag-age {
    background: rgba(245, 238, 232, 0.07);
    color: var(--muted);
}

.spots-pill {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--green);
    background: rgba(77, 182, 172, 0.1);
    padding: 6px 14px;
    border-radius: 100px;
}

.spots-pill strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
}

.spots-pill.full {
    color: var(--muted);
    background: rgba(154, 138, 148, 0.12);
}

.card-join {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* SKELETON ----------------------------------------------------------------- */
.skeleton-card {
    pointer-events: none;
}

.sk {
    background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.3s linear infinite;
    border-radius: 8px;
}

@keyframes shimmer {
    to { background-position: -200% 0; }
}

.sk-tag { width: 90px; height: 22px; border-radius: 100px; margin-bottom: 18px; }
.sk-title { width: 80%; height: 20px; margin-bottom: 12px; }
.sk-line { width: 60%; height: 14px; margin-bottom: 24px; }
.sk-org { width: 50%; height: 40px; border-radius: 12px; margin-bottom: 22px; }
.sk-foot { width: 100%; height: 36px; }

/* EMPTY STATE -------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 64px 24px;
    max-width: 420px;
    margin: 0 auto;
}

.empty-emoji {
    font-size: 3.4rem;
    margin-bottom: 16px;
}

.empty-state h3 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.empty-state p {
    margin-bottom: 24px;
}

/* Globalni micro-interaction: pritisak gumba */
.btn:active, .btn-small:active, .cat-chip:active, .nav-cta:active {
    transform: scale(0.96);
}

/* ==========================================================================
   HOME — live landing dodaci
   ========================================================================== */
.hero-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 14px;
}

.hero-btn {
    text-decoration: none;
    font-size: 1rem;
    padding: 15px 30px;
}

.hero-note {
    font-size: 0.85rem;
    color: var(--muted);
}

.hero-note .applink {
    color: var(--orange);
}

/* Live events sekcija */
.live-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 36px;
}

.live-all {
    color: var(--orange);
    white-space: nowrap;
}

.live-events .event-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Trust strip */
.trust-strip {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.trust-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
}

.trust-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.trust-ico {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}

.trust-item strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 4px;
}

.trust-item small {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* The bottom CTA's ghost button on orange */
.cta-bottom .btn-ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    padding: 14px 28px;
    border-radius: 14px;
    text-decoration: none;
}

.cta-bottom .btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.cta-bottom-actions {
    margin-top: 8px;
}

/* ==========================================================================
   INDEX_5 — the refined theme (an override layer)
   Thin lines, softer corners, gradient-glow buttons, Bricolage + DM Sans.
   ========================================================================== */
:root {
    --orange-dark: #C0380F;
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Tighter headings (a Bricolage Grotesque feel) */
h1, .events-title, .section h2, .how-h2, .mockup-text h2, .myev-h,
.detail-title, .auth-card h2, .modal-head h2, .empty-state h3, .cta-bottom h2 {
    letter-spacing: -0.035em;
}

/* --- Gumbi: gradijent-glow (index_5) --- */
.btn {
    border-radius: 12px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(255, 87, 34, 0.3);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn:hover {
    background: var(--peach);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 87, 34, 0.4);
    opacity: 1;
}

.btn:active { transform: translateY(0); }

.btn-small {
    border-radius: 10px;
    font-weight: 500;
    transition: background 0.2s, transform 0.15s, opacity 0.2s;
}

.btn-small:hover { background: var(--peach); transform: translateY(-1px); opacity: 1; }
.btn-small:active { transform: translateY(0); }
.btn-small:disabled { opacity: 0.5; }

.nav-cta {
    font-weight: 500;
    transition: background 0.2s, transform 0.15s;
}

.nav-cta:hover { background: var(--peach); transform: translateY(-1px); }

.btn-ghost {
    border-width: 1.5px;
    border-radius: 12px;
    font-weight: 500;
    transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
}

.btn-ghost:hover { transform: translateY(-2px); }

/* --- The cards: thin lines, softer corners --- */
.event-card,
.auth-card,
.scenario-card {
    border-radius: 20px;
    border-width: 1px;
}

.chat, .requests-panel, .detail-card { border-width: 1px; }

.event-card-i {
    border-radius: 20px;
    transition: transform 0.25s ease, border-color 0.25s, box-shadow 0.25s;
}

.event-card-i:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 87, 34, 0.35);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
}

.scenario-card { transition: transform 0.25s ease, border-color 0.25s; }
.scenario-card:hover { transform: translateY(-4px); border-color: rgba(255, 87, 34, 0.3); }

/* --- Chipovi i tagovi: profinjeni --- */
.cat-chip {
    border-width: 1.5px;
    font-weight: 500;
    transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s;
}

.cat-chip:hover { transform: translateY(-1px); }
.cat-chip.active { transform: none; }

.tag {
    border-radius: 7px;
    font-weight: 500;
    letter-spacing: 0.06em;
}

/* --- Inputi --- */
.field input, .field select, .field textarea,
.form-wrap input, .city-search, .filter input, .rate-comment {
    border-radius: 12px;
}

.organizer-avatar { border: none; }
.empty-emoji { display: inline-block; }

/* PARTICIPANT LINK + RATINGS LIST ----------------------------------------- */
.participant-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.2s, color 0.2s;
}

.participant-link:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.chip-rating {
    color: var(--yellow);
    font-size: 0.75rem;
    font-weight: 800;
}

.ratings-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rating-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 16px;
}

.rating-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}

.rating-stars {
    color: var(--yellow);
    font-size: 1rem;
    letter-spacing: 1px;
}

.rating-stars-empty {
    color: var(--border);
}

.rating-meta {
    font-size: 0.78rem;
    color: var(--muted);
}

.rating-comment {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text);
}

/* MOJI EVENTI -------------------------------------------------------------- */
.myev-h {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    margin: 40px 0 18px;
}

.reviews-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.load-more {
    padding: 14px 40px;
}

/* MOJI EVENTI — tabovi + modal recenzija ---------------------------------- */
.myev-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 26px;
}

.reviews-btn {
    font-size: 0.95rem;
    padding: 12px 22px;
    white-space: nowrap;
}

.myev-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.myev-actions .btn {
    white-space: nowrap;
}

.tabs {
    display: inline-flex;
    gap: 6px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    padding: 6px;
    border-radius: 100px;
    margin-bottom: 28px;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.92rem;
    padding: 10px 22px;
    border-radius: 100px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s, background 0.2s, transform 0.12s var(--bounce);
}

.tab-btn:hover {
    color: var(--text);
}

.tab-btn.active {
    background: var(--orange);
    color: #fff;
}

.tab-count {
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.22);
    padding: 1px 8px;
    border-radius: 100px;
    min-width: 20px;
    text-align: center;
}

.tab-btn:not(.active) .tab-count {
    background: rgba(255, 255, 255, 0.07);
}

/* Modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(10, 6, 9, 0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.18s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 28px;
    width: 100%;
    max-width: 560px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn 0.28s var(--bounce);
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 0;
}

.modal-head h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.4rem;
}

.modal-close {
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.2s, border-color 0.2s, transform 0.12s var(--bounce);
}

.modal-close:hover {
    color: var(--text);
    border-color: var(--orange);
    transform: rotate(90deg);
}

.modal-tabs {
    margin: 18px 24px 0;
}

.modal-body {
    padding: 18px 24px 24px;
    overflow-y: auto;
}

/* OGLASNI SLOTOVI ---------------------------------------------------------- */
.ad-slot {
    position: relative;
    border: 1.5px dashed var(--border);
    border-radius: 24px;
    background: rgba(245, 238, 232, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ad-tag {
    position: absolute;
    top: 12px;
    left: 14px;
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 3px 9px;
    border-radius: 100px;
}

.ad-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    text-align: center;
    padding: 16px;
}

.ad-ico {
    font-size: 1.5rem;
    opacity: 0.6;
    margin-bottom: 2px;
}

.ad-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--text);
    opacity: 0.85;
}

.ad-sub {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ad-banner {
    width: 100%;
    min-height: 116px;
}

.ad-card {
    min-height: 280px;
}

/* MOBILNI HAMBURGER NAV ---------------------------------------------------- */
.nav-burger {
    display: none;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    transition: transform 0.12s var(--bounce);
}

.nav-burger:active {
    transform: scale(0.94);
}

.nav-burger span {
    display: block;
    width: 20px;
    height: 2.5px;
    background: var(--text);
    border-radius: 2px;
}

.nav-toggle-cb {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

@media (max-width: 760px) {
    .nav-burger {
        display: flex;
    }

    .knav-links {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        background: var(--card);
        border: 2px solid var(--border);
        border-radius: 20px;
        padding: 14px;
        min-width: 230px;
        max-width: calc(100vw - 24px);
        /* 100vh on mobile does NOT account for the address bar → the bottom of the menu (Sign out)
           stays hidden beneath it. dvh is the genuinely visible height; vh remains the fallback. */
        max-height: calc(100vh - 86px);
        max-height: calc(100dvh - 86px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        /* Air below the last item so "Sign out" is not glued to the edge. */
        padding-bottom: 26px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
        animation: menuIn 0.2s var(--bounce);
    }

    /* Open state lives on <body>, not on the menu itself. The menu is inside an interactive
       component, and the first render after the page becomes interactive rewrites what that
       component draws — a class put there by hand (by the tap that came before the connection
       was up) would be wiped, and the menu would shut by itself. Nobody renders <body>. */
    body.menu-open .knav-links,
    .nav-toggle-cb:checked ~ .knav-links {
        display: flex;
    }

    .knav-links .applink,
    .knav-links .nav-cta {
        padding: 11px 16px;
        text-align: center;
        border-radius: 12px;
    }

    .knav-links .nav-cta {
        box-shadow: 0 4px 0 var(--orange-dark);
    }
}

@keyframes menuIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   INDEX_5 LANDING — struktura (hero split, floating cards, how+demo, proof, CTA)
   ========================================================================== */
.lp-hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    align-items: center;
    gap: 40px;
    padding: 120px 64px 80px;
    max-width: 1340px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.lp-hero::before {
    content: '';
    position: absolute;
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, transparent 65%);
    top: -200px; right: -200px;
    pointer-events: none;
}

.lp-hero::after {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(255, 87, 34, 0.12) 0%, transparent 65%);
    bottom: -100px; left: 0;
    pointer-events: none;
}

.lp-left { position: relative; z-index: 2; }

.lp-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 87, 34, 0.1);
    border: 1px solid rgba(255, 87, 34, 0.25);
    color: var(--peach);
    font-size: 0.78rem; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 7px 16px; border-radius: 100px; margin-bottom: 30px;
}

.lp-pill-dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }

.lp-h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3rem, 5.5vw, 5rem);
    line-height: 1.0; letter-spacing: -0.04em;
    margin-bottom: 28px; color: var(--text);
}

.lp-h1 .hl { position: relative; display: inline-block; color: var(--orange); }
.lp-h1 .hl::after { content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 4px; background: var(--orange); opacity: 0.3; border-radius: 2px; }
.lp-h1 .strike { position: relative; color: var(--muted); }
.lp-h1 .strike::after { content: ''; position: absolute; top: 50%; left: -4px; right: -4px; height: 3px; background: var(--orange); border-radius: 2px; }

/* The hero heading's second line, a little smaller than "Ide ti se." */
.lp-h1 .lp-h1-sub {
    display: inline-block;
    font-size: 0.66em;
    line-height: 1.1;
    margin-top: 6px;
    white-space: nowrap;
}

/* The rotating category in the hero heading (as on /eventi) */
.lp-h1 .rot-word {
    color: var(--peach);
    display: inline-block;
    animation: rotWordIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.lp-sub { font-size: 1.1rem; color: var(--muted); max-width: 440px; margin-bottom: 40px; line-height: 1.75; }

.lp-trust { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.lp-trust-text { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.lp-trust-text strong { color: var(--text); font-weight: 500; }

/* Floating cards */
.lp-right { position: relative; height: 560px; display: flex; align-items: center; justify-content: center; }
.cards-stage { position: relative; width: 320px; height: 420px; perspective: 1200px; transition: transform 0.3s ease; }

.fc {
    position: absolute; width: 300px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 20px; padding: 22px; cursor: default;
    transition: transform 0.5s var(--bounce), box-shadow 0.4s;
    transform-style: preserve-3d; will-change: transform;
    text-decoration: none;
}
.fc:hover { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.fc-1 { top: 0; left: 0; transform: rotate(-6deg) translateY(10px); z-index: 1; }
.fc-2 { top: 20px; left: 10px; transform: rotate(-2deg); z-index: 2; }
.fc-3 { top: 10px; left: 5px; transform: rotate(2deg); z-index: 3; }
.cards-stage:hover .fc-1 { transform: rotate(-10deg) translateX(-30px) translateY(-20px); }
.cards-stage:hover .fc-2 { transform: rotate(0deg) translateY(-10px); }
.cards-stage:hover .fc-3 { transform: rotate(8deg) translateX(30px) translateY(-20px); }

.fc-stripe { height: 4px; border-radius: 4px; margin-bottom: 18px; }
.fc-1 .fc-stripe { background: var(--purple); }
.fc-2 .fc-stripe { background: var(--orange); }
.fc-3 .fc-stripe { background: var(--green); }
.fc-tags { display: flex; gap: 6px; margin-bottom: 14px; }
.fc-tag { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; border-radius: 6px; padding: 4px 10px; }
.tag-purple { background: rgba(124, 58, 237, 0.15); color: #A78BFA; }
.tag-orange { background: rgba(255, 87, 34, 0.12); color: var(--peach); }
.tag-green { background: rgba(16, 185, 129, 0.12); color: #34D399; }
.tag-req2 { background: rgba(252, 211, 77, 0.1); color: var(--yellow); }
.fc-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; margin-bottom: 5px; color: var(--text); }
.fc-meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 14px; }
.fc-user { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.fc-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; font-family: var(--font-display); }
.av-a { background: linear-gradient(135deg, #FF5722, #7C3AED); }
.av-b { background: linear-gradient(135deg, #7C3AED, #10B981); }
.av-c { background: linear-gradient(135deg, #10B981, #FF5722); }
.fc-uname { font-size: 0.85rem; font-weight: 500; color: var(--text); }
.fc-uname small { display: block; font-size: 0.72rem; color: var(--muted); font-weight: 400; }
.fc-quote { font-size: 0.82rem; color: var(--muted); line-height: 1.6; padding: 12px 14px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; border-left: 3px solid var(--orange); margin-bottom: 16px; }
.fc-footer { display: flex; align-items: center; justify-content: space-between; }
.fc-spots { font-size: 0.78rem; color: var(--muted); }
.fc-spots b { color: var(--text); }
.fc-btn { background: var(--orange); color: #fff; border: none; font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; padding: 8px 16px; border-radius: 8px; }

/* index_5 ticker */
.lp-ticker-wrap { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 15px 0; background: var(--surface); }
.lp-ticker { display: flex; animation: scroll 25s linear infinite; width: max-content; }
.lp-ticker-item { display: flex; align-items: center; gap: 14px; padding: 0 28px; font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--muted); border-right: 1px solid var(--border); white-space: nowrap; }

/* Problem / scenarios */
.lp-section { max-width: 1140px; margin: 0 auto; padding: 120px 48px; }
.lp-eyebrow { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); font-weight: 500; margin-bottom: 18px; }
.lp-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 18px; color: var(--text); }
.lp-p { color: var(--muted); font-size: 1.05rem; line-height: 1.8; max-width: none; margin-bottom: 56px; }

.lp-scenarios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.sc { background: var(--card); padding: 32px 26px; transition: background 0.25s; }
.sc:hover { background: #2A1A40; }
.sc-icon {
    width: 54px; height: 54px; margin-bottom: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 15px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.16), rgba(124, 58, 237, 0.16));
    color: var(--peach);
    transition: transform 0.25s ease;
}
.sc-icon svg { width: 28px; height: 28px; }
.sc:hover .sc-icon { transform: translateY(-2px) rotate(-3deg); }
/* A different accent per card */
.sc:nth-child(1) .sc-icon { color: var(--peach); background: linear-gradient(135deg, rgba(255, 87, 34, 0.18), rgba(255, 138, 101, 0.10)); }
.sc:nth-child(2) .sc-icon { color: var(--purple); background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(124, 58, 237, 0.06)); }
.sc:nth-child(3) .sc-icon { color: var(--green); background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.05)); }
.sc:nth-child(4) .sc-icon { color: var(--yellow); background: linear-gradient(135deg, rgba(252, 211, 77, 0.18), rgba(255, 138, 101, 0.06)); }
.sc-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--text); }
.sc-text { font-size: 0.88rem; color: var(--muted); line-height: 1.7; }

/* How */
.lp-how { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-how-inner { max-width: 1140px; margin: 0 auto; padding: 120px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.lp-steps { margin-top: 44px; }
.step-item { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--border); align-items: start; }
.step-item:last-child { border-bottom: none; }
.step-n { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.04em; line-height: 1; padding-top: 4px; }
.step-n-1 { color: var(--orange); }
.step-n-2 { color: var(--purple); }
.step-n-3 { color: var(--green); }
.step-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--text); }
.step-body p { font-size: 0.9rem; color: var(--muted); line-height: 1.7; }

.lp-how-right { position: sticky; top: 100px; }
.demo-card { background: var(--card); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; }
.demo-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 20px; display: flex; align-items: center; gap: 10px; }
.demo-dot { width: 10px; height: 10px; border-radius: 50%; }
.dd-r { background: #FF5F57; } .dd-y { background: #FFBD2E; } .dd-g { background: #28CA41; }
.demo-title-bar { flex: 1; text-align: center; font-size: 0.78rem; color: var(--muted); }
.demo-body { padding: 24px; }
.ep-stripe { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--orange), var(--purple)); margin-bottom: 16px; }
.ep-tags { display: flex; gap: 6px; margin-bottom: 12px; }
.ep-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; margin-bottom: 4px; color: var(--text); }
.ep-meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 14px; }
.ep-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.6; padding: 12px 14px; background: rgba(255, 255, 255, 0.03); border-left: 3px solid var(--orange); border-radius: 0 8px 8px 0; margin-bottom: 16px; }
.ep-user { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.ep-av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--purple)); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: #fff; font-family: var(--font-display); }
.ep-uinfo small { display: block; font-size: 0.72rem; color: var(--muted); }
.ep-uinfo span { font-size: 0.88rem; font-weight: 500; color: var(--text); }
.ep-footer { display: flex; align-items: center; justify-content: space-between; }
.ep-spots { font-size: 0.82rem; color: var(--muted); }
.ep-spots b { color: var(--text); }
.join-btn { background: var(--orange); color: #fff; border: none; font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; padding: 10px 20px; border-radius: 10px; cursor: default; display: inline-block; transition: all 0.2s; }
.join-btn:hover { background: var(--peach); }
.join-btn.joined { background: var(--green); animation: joinPop 0.4s var(--bounce); }
@keyframes joinPop { 0%{transform:scale(0.9)} 60%{transform:scale(1.08)} 100%{transform:scale(1)} }

/* Toast */
.lp-toast { position: fixed; bottom: 32px; right: 32px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); transform: translateY(100px); opacity: 0; transition: all 0.4s var(--bounce); z-index: 999; max-width: 300px; }
.lp-toast.show { transform: translateY(0); opacity: 1; }
.lp-toast-icon { font-size: 1.4rem; flex-shrink: 0; }
.lp-toast-body { font-size: 0.85rem; color: var(--text); line-height: 1.4; }
.lp-toast-body strong { display: block; font-weight: 500; margin-bottom: 2px; }
.lp-toast-body span { color: var(--muted); font-size: 0.78rem; }

/* Social proof */
.lp-proof { max-width: 1140px; margin: 0 auto; padding: 120px 48px; text-align: center; }
.lp-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.proof-card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 28px; text-align: left; transition: transform 0.25s, border-color 0.25s; }
.proof-card:hover { transform: translateY(-4px); border-color: rgba(255, 87, 34, 0.3); }
.proof-stars { color: var(--orange); font-size: 0.85rem; margin-bottom: 14px; }
.proof-text { font-size: 0.92rem; color: var(--muted); line-height: 1.7; margin-bottom: 18px; font-style: italic; }
.proof-user { display: flex; align-items: center; gap: 10px; }
.proof-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; font-family: var(--font-display); }
.proof-av.pa { background: linear-gradient(135deg, #FF5722, #7C3AED); }
.proof-av.pb { background: linear-gradient(135deg, #7C3AED, #10B981); }
.proof-av.pc { background: linear-gradient(135deg, #10B981, #FF5722); }
.proof-name { font-size: 0.85rem; font-weight: 500; color: var(--text); }
.proof-city { font-size: 0.75rem; color: var(--muted); }

/* CTA */
/* PWA — "Install" (shown only on beforeinstallprompt).
   Desktop: a round icon in the header. Mobile: the last item in the hamburger menu. */
.install-app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--orange);
    background: rgba(255, 87, 34, 0.1);
    color: var(--orange);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.install-app-btn:hover { background: var(--orange); color: #fff; }

/* The mobile variant — hidden on desktop (it lives inside .knav-links). */
.install-mobile { display: none; }

@media (max-width: 760px) {
    .install-desktop { display: none; }        /* remove the desktop icon on mobile */
    .install-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 11px 16px;
        border: 1.5px solid var(--orange);
        background: rgba(255, 87, 34, 0.1);
        color: var(--orange);
        border-radius: 12px;
        cursor: pointer;
    }
    .install-mobile:hover { background: var(--orange); color: #fff; }
}

/* The FAQ — native details/summary (accessible, no JS) */
.lp-faq .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.faq-item { background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; padding: 16px 18px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--orange); font-size: 1.3rem; font-weight: 800; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover { color: var(--orange); }
.faq-item p { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }

.lp-cta { margin: 0 48px 80px; background: linear-gradient(135deg, var(--purple) 0%, #4C1D95 50%, #1A1228 100%); border-radius: 28px; padding: 80px 60px; position: relative; overflow: hidden; text-align: center; }
.lp-cta::after { content: ''; position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255, 87, 34, 0.25) 0%, transparent 70%); top: -100px; right: -100px; pointer-events: none; }
.lp-cta-inner { position: relative; z-index: 1; }
.lp-cta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -0.04em; line-height: 1.05; color: #fff; margin-bottom: 16px; }
.lp-cta p { color: rgba(255, 255, 255, 0.7); font-size: 1.05rem; margin-bottom: 36px; }
.lp-cta .btn-ghost { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.lp-cta .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* WAITLIST FORMA (email + grad + uloga) */
.wl-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 480px;
}

.wl-row {
    display: flex;
    gap: 10px;
}

.wl-row > .wl-input { flex: 1 1 0; min-width: 0; }

.wl-input {
    width: 100%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 14px 18px;
    border-radius: 12px;
}

.wl-input::placeholder { color: var(--muted); }
.wl-input:focus { border-color: var(--orange); outline: none; }

.wl-select { cursor: pointer; }
.wl-select:invalid, .wl-select option[value=""] { color: var(--muted); }

.wl-btn { width: 100%; }

/* Hero (tamna pozadina) — lijevo poravnato */
.lp-hero .lp-left .wl-form { margin: 0; }

/* The bottom CTA (a colourful background) — the white variant of the fields */
.lp-cta-form { display: flex; flex-direction: column; align-items: center; }
.lp-cta-form .wl-form { margin: 0 auto; }
.lp-cta-form .wl-input { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.lp-cta-form .wl-input::placeholder { color: rgba(255, 255, 255, 0.7); }
.lp-cta-form .wl-input:focus { border-color: #fff; }
.lp-cta-form .wl-select option { color: var(--text); }
.lp-cta-form .wl-btn { background: #fff; color: var(--orange); }
.lp-cta-form .form-note { color: rgba(255, 255, 255, 0.75); }
.lp-cta-form .success-msg { color: #fff; }

.lp-footer { text-align: center; padding: 32px 24px; font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--border); }
/* The links wrap: in one row they ran past the edge of a phone and stretched the whole page,
   which cut the hero text off on the right. */
.lp-footer-links { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; align-items: center; margin-bottom: 10px; }
.lp-footer-links a { color: var(--peach); text-decoration: none; }
.lp-footer-links a:hover { text-decoration: underline; }

/* The footer map: three named groups instead of one row of eleven links. Left-aligned inside
   the columns even though the footer is centred — a column of links reads down one edge. */
.lp-footer-map {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 32px;
    max-width: 680px;
    margin: 0 auto 22px;
    text-align: left;
}
.lp-footer-col { display: flex; flex-direction: column; gap: 5px; }
.lp-footer-title {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.7;
    margin-bottom: 2px;
}
.lp-footer-col a { color: var(--peach); text-decoration: none; }
.lp-footer-col a:hover { text-decoration: underline; }

@media (max-width: 560px) {
    /* Three columns on a phone leave three words per line; two keep the names whole. */
    .lp-footer-map { grid-template-columns: 1fr 1fr; gap: 18px; }
}

@media (max-width: 900px) {
    .lp-hero { grid-template-columns: 1fr; padding: 110px 24px 60px; }
    /* The rotating subheading runs over two lines (the category on its own) */
    .lp-h1 .lp-h1-sub { white-space: normal; }
    .lp-h1 .lp-h1-sub .rot-word { display: block; }
    /* The cards are shown on mobile too (below the text) */
    .lp-right { display: flex; height: auto; margin-top: 40px; }
    .cards-stage { transform: scale(0.92); transform-origin: top center; }
    .lp-scenarios { grid-template-columns: 1fr 1fr; }
    .lp-how-inner { grid-template-columns: 1fr; gap: 40px; }
    .lp-how-right { display: none; }
    .lp-proof-grid { grid-template-columns: 1fr; }
    .lp-cta { margin: 0 24px 60px; padding: 60px 28px; }
    .lp-section, .lp-proof { padding: 80px 24px; }
}

@media (max-width: 600px) {
    .lp-scenarios { grid-template-columns: 1fr; }
    .cards-stage { transform: scale(0.82); }
}

/* PROFILE ------------------------------------------------------------------ */
.profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}

/* ==========================================================================
   Karte (Leaflet) — prikaz evenata + picker kod kreiranja
   ========================================================================== */
.events-map {
    height: 62vh;
    min-height: 420px;
    border-radius: 20px;
    overflow: hidden;
    border: 1.5px solid var(--border);
    z-index: 0;
}
.map-picker {
    height: 260px;
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid var(--border);
    margin-top: 6px;
    z-index: 0;
}
.map-picked { display: block; color: var(--green); font-size: 0.8rem; margin-top: 6px; }
.map-hint { display: block; font-size: 0.8rem; margin-top: 6px; }
.leaflet-container {
    font-family: var(--font-body);
    /* Leaflet iznutra koristi z-index 400–1000 (paneli, zoom kontrole) i time probija
       iznad navigacije (z-index 100) — npr. mobilni izbornik bi bio ispod karte.
       Vlastiti stacking context zatvara te slojeve unutar karte. */
    position: relative;
    z-index: 0;
    isolation: isolate;
}

/* Brendirani pin — makni default Leaflet div-icon okvir, dodaj sjenu i suptilan hover */
.kompan-pin {
    background: none;
    border: none;
}
.kompan-pin svg {
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.28));
    transition: transform 0.15s ease;
    transform-origin: 50% 100%;
}
.kompan-pin:hover svg {
    transform: scale(1.12);
}

/* The list/map switch */
.view-switch {
    display: inline-flex;
    gap: 4px;
    margin-top: 14px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 3px;
}
.view-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 7px 16px;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.view-btn.active { background: var(--orange); color: #fff; }

/* The "Tonight" toggle accent */
.tonight-toggle.active { border-color: var(--purple); color: #fff; background: var(--purple); }

/* Napomena o dostupnom gradu (beta) */
.city-note {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--muted);
    background: rgba(255, 87, 34, 0.08);
    border: 1px solid rgba(255, 87, 34, 0.25);
    border-radius: 100px;
    padding: 6px 14px;
}
.city-note strong { color: var(--orange); }

/* Slika avatara: popuni krug definiran klasom (organizer-avatar, msgr-avatar…) */
.avatar-photo { object-fit: cover; background: var(--surface); }
.avatar-link { display: inline-flex; flex-shrink: 0; }

/* The default avatar (a silhouette) when a user has no picture */
.avatar-default { color: #fff; }
.avatar-default svg { width: 64%; height: 64%; opacity: 0.92; }

.profile-avatar-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.profile-avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--border);
}
.avatar-upload {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--bg);
    transition: transform 0.12s ease, background 0.18s ease;
}
.avatar-upload:hover { background: var(--peach); transform: scale(1.08); }
.avatar-upload svg { width: 15px; height: 15px; }
.avatar-upload input { display: none; }
.avatar-spinner { font-weight: 800; }
.profile-since { font-size: 0.8rem; margin-top: 2px !important; }

.profile-bio {
    color: var(--text);
    line-height: 1.7;
    margin-bottom: 20px;
}

.field-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* TASTE MATCH -------------------------------------------------------------- */
.taste {
    margin: 18px 0 4px;
}

.taste-match {
    color: var(--green);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 800;
}

.participant-chip.shared {
    background: rgba(77, 182, 172, 0.15);
    border-color: rgba(77, 182, 172, 0.5);
    color: var(--green);
}

/* TOAST -------------------------------------------------------------------- */
.app-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(90vw, 420px);
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
    color: var(--text);
    font-weight: 700;
    font-size: 0.95rem;
    transform: translate(-50%, 140%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.app-toast.show {
    transform: translate(-50%, 0);
    opacity: 1;
}

.app-toast.success {
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 16px 44px rgba(16, 185, 129, 0.25);
}

.app-toast.error {
    border-color: rgba(255, 87, 34, 0.6);
    box-shadow: 0 16px 44px rgba(255, 87, 34, 0.25);
}

.app-toast.info {
    border-color: rgba(124, 58, 237, 0.6);
    box-shadow: 0 16px 44px rgba(124, 58, 237, 0.28);
}

.app-toast-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.app-toast-msg {
    line-height: 1.3;
}

/* ==========================================================================
   GDPR cookie/consent banner
   ========================================================================== */
.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 200;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    padding: 16px 20px;
    animation: cookieUp 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cookieUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.cookie-text {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cookie-text strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
}
.cookie-text span {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}
.cookie-text a {
    color: var(--peach);
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-btn {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 10px 18px;
    border-radius: 100px;
    cursor: pointer;
    border: 1.5px solid var(--border);
    transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease;
}
.cookie-btn:active { transform: scale(0.96); }

.cookie-reject {
    background: var(--surface);
    color: var(--text);
}
.cookie-reject:hover { border-color: var(--muted); }

.cookie-accept {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
.cookie-accept:hover { background: var(--peach); border-color: var(--peach); }

@media (max-width: 560px) {
    .cookie-actions { width: 100%; }
    .cookie-btn { flex: 1; }
}

/* The consent checkbox on registration */
.consent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 16px;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.45;
    cursor: pointer;
}
.consent-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--orange);
    cursor: pointer;
}

/* ==========================================================================
   The GDPR section in the profile (export / account deletion)
   ========================================================================== */
.gdpr-box {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.gdpr-hint {
    font-size: 0.85rem;
    margin: 4px 0 14px;
}
.gdpr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.gdpr-confirm {
    margin-top: 14px;
    background: rgba(255, 94, 94, 0.08);
    border: 1px solid rgba(255, 94, 94, 0.35);
    border-radius: 14px;
    padding: 16px 18px;
}
.gdpr-confirm strong { font-family: var(--font-display); font-size: 1rem; }
.gdpr-confirm p { font-size: 0.85rem; margin: 6px 0 0; }

.btn-danger {
    background: #e23b3b;
    color: #fff;
    border: 1.5px solid #e23b3b;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 18px;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.12s ease;
}
.btn-danger:hover:not(:disabled) { background: #c92f2f; }
.btn-danger:active { transform: scale(0.96); }
.btn-danger:disabled { opacity: 0.6; cursor: default; }

/* The share button on an event's detail page */
.btn-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 18px;
    border-radius: 100px;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn-share:hover {
    border-color: var(--orange);
    color: var(--orange);
    transform: translateY(-1px);
}
.btn-share:active { transform: scale(0.96); }

/* Prijava korisnika (report) */
.report-box {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.report-link {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.15s ease;
}
.report-link:hover { color: #ff7a7a; }
.report-hint { font-size: 0.85rem; margin: 4px 0 12px; }
.report-thanks { font-size: 0.9rem; color: var(--green); }
.report-form .field { margin-top: 10px; }

/* ==========================================================================
   Pravne stranice (Pravila privatnosti / Uvjeti)
   ========================================================================== */
.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 100px 24px 80px;
}
.legal-page h1 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2rem;
    margin-bottom: 6px;
}
.legal-updated {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 28px;
}
.legal-page h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    margin: 28px 0 10px;
}
.legal-page p,
.legal-page li {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.65;
}
.legal-page ul {
    margin: 8px 0 8px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.legal-page a { color: var(--peach); text-decoration: underline; }
.legal-page .legal-note {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 18px;
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 32px;
}

/* ==========================================================================
   The ADMIN interface
   ========================================================================== */
.admin-h1 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.8rem;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}
.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
    border-bottom: 1.5px solid var(--border);
    padding-bottom: 12px;
}
.admin-tab {
    text-decoration: none;
    color: var(--muted);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 8px 14px;
    border-radius: 10px;
    transition: background 0.15s, color 0.15s;
}
.admin-tab:hover { color: var(--text); background: var(--surface); }
.admin-tab.active { color: #fff; background: var(--orange); }

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}
.stat-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stat-card.stat-alert { border-color: var(--orange); }
.stat-num { font-family: var(--font-display); font-weight: 900; font-size: 2.1rem; line-height: 1; color: var(--text); }
.stat-lbl { font-weight: 700; font-size: 0.9rem; margin-top: 6px; }
.stat-sub { font-size: 0.78rem; color: var(--muted); }

.admin-search, .admin-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.admin-search .search-input {
    flex: 1 1 240px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    padding: 10px 14px;
}

.admin-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 24px;
}
/* Section heading inside an admin card — one size down from .admin-h1. */
.admin-h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    margin: 0 0 4px;
}
.admin-h2-sub { font-size: 0.82rem; color: var(--muted); margin: 0 0 16px; }

/* A day-by-day bar chart (see AdminTrendChart.razor): bars driven by --p, the same technique
   as .kviz-bar above, scaled down and without the per-bar percentage label — thirty labels in
   a row would be noise, so only the first and last date are printed, and every bar carries its
   own date and count as a native tooltip. */
.admin-trend-bars { display: flex; align-items: flex-end; gap: 2px; height: 72px; }
.admin-trend-bar {
    flex: 1;
    min-width: 2px;
    height: calc(100% * var(--p, 0));
    min-height: 3px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, var(--peach), var(--orange));
}
.admin-trend-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 6px;
}

/* The day picker on /admin/pregled. The native date input is left as it is on purpose — the
   browser's own calendar is better than anything hand-rolled, and it already knows the locale. */
.day-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.day-pick label { font-size: 0.82rem; color: var(--muted); }
.day-pick input[type="date"] {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    color-scheme: dark light;   /* so the picker's own popup follows the page, not the OS alone */
}

.admin-city-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.admin-city-list li {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    padding: 7px 10px;
    background: var(--surface);
    border-radius: 8px;
}
.admin-city-list li span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

.admin-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 12px 16px;
}
.admin-row-col { align-items: flex-start; }
.admin-cell-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.admin-name { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-sub { font-size: 0.8rem; color: var(--muted); }
.admin-quote { font-size: 0.85rem; color: var(--text); font-style: italic; margin-top: 4px; }
.admin-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

.admin-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
}
.admin-pager-info { font-size: 0.85rem; color: var(--muted); min-width: 90px; text-align: center; }

.admin-badge {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: var(--orange);
    color: #fff;
    padding: 2px 7px;
    border-radius: 999px;
}
.admin-status {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
}
.status-active, .status-published { background: rgba(16, 185, 129, 0.15); color: var(--green); }
.status-suspended, .status-cancelled, .status-open { background: rgba(255, 87, 34, 0.15); color: var(--orange); }
.status-reviewed, .status-completed { background: rgba(124, 58, 237, 0.15); color: var(--purple); }
.status-dismissed, .status-draft { background: rgba(154, 138, 148, 0.15); color: var(--muted); }

.admin-link.active::after { background: var(--orange); }

@media (max-width: 600px) {
    .admin-row { flex-direction: column; align-items: stretch; }
}

/* PROFILE — category/subcategory interest picker ------------------------------ */
.cat-picker {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
    margin-top: 6px;
}
.cat-group + .cat-group {
    border-top: 1px solid var(--border);
}
.cat-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 13px 14px;
    text-align: left;
}
.cat-group-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 1;
}
.cat-group-count {
    background: var(--orange);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cat-group-chevron {
    color: var(--muted);
    transition: transform 0.18s ease;
    flex: none;
}
.cat-group.open .cat-group-chevron {
    transform: rotate(180deg);
}
.cat-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 14px 15px;
}
.sub-chip {
    background: var(--card);
    border: 1.5px solid var(--border);
    color: var(--muted);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 6px 13px;
    border-radius: 100px;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.sub-chip:hover {
    border-color: var(--orange);
    color: var(--text);
}
.sub-chip.selected {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
.custom-interests {
    margin-top: 12px;
}

/* MY EVENTS — role filter + direct edit on card ------------------------------ */
.myev-role {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 2px;
}
.event-card-i .card-edit {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
    background: var(--surface);
    border: 1.5px solid var(--orange);
    color: var(--orange);
    border-radius: 100px;
    font-weight: 700;
    padding: 5px 13px;
    transition: background 0.15s, color 0.15s;
}
.event-card-i .card-edit:hover {
    background: var(--orange);
    color: #fff;
}

/* AUTH — password toggle + strength ------------------------------------------ */
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 44px; }
.pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: 1.05rem;
    padding: 4px 8px; line-height: 1; opacity: .75;
}
.pw-toggle:hover { opacity: 1; }
.pw-strength { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pw-bars { display: flex; gap: 4px; flex: 1; }
.pw-bar { height: 5px; flex: 1; border-radius: 100px; background: var(--border); transition: background .2s; }
.pw-bar.on.lvl-1 { background: #ef4444; }
.pw-bar.on.lvl-2 { background: #f59e0b; }
.pw-bar.on.lvl-3 { background: #eab308; }
.pw-bar.on.lvl-4 { background: var(--green); }
.pw-strength-label { font-size: .78rem; font-weight: 700; }
.pw-strength-label.lvl-1 { color: #ef4444; }
.pw-strength-label.lvl-2 { color: #f59e0b; }
.pw-strength-label.lvl-3 { color: #eab308; }
.pw-strength-label.lvl-4 { color: var(--green); }

/* Email-verify banner + welcome box ------------------------------------------ */
.verify-banner {
    display: flex; align-items: center; gap: 12px;
    background: rgba(252,211,77,.12); border-bottom: 1px solid rgba(252,211,77,.32);
    color: var(--text); padding: 10px 16px; font-size: .88rem;
}
.verify-banner-txt { flex: 1; }
.verify-banner-cta { font-weight: 700; color: var(--orange); text-decoration: none; white-space: nowrap; }
.verify-banner-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .9rem; padding: 4px 6px; }
.welcome-box {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(255,87,34,.10); border: 1px solid rgba(255,87,34,.28);
    border-radius: 14px; padding: 14px 16px; margin-bottom: 18px;
}
.welcome-emoji { font-size: 1.6rem; line-height: 1; }

/* EVENT DETAIL — urgency on remaining spots ---------------------------------- */
.spots-urgent { color: var(--orange); font-weight: 800; }

/* EVENTS — urgency on card spots pill ---------------------------------------- */
.spots-pill.urgent {
    color: var(--orange);
    background: rgba(255, 87, 34, 0.12);
}

/* FORMS — description char counter; MyEvents rate hint ------------------------ */
.char-count { display: block; text-align: right; font-size: .72rem; color: var(--muted); margin-top: 4px; }
.char-count.low { color: #f59e0b; }
.event-card-i .rate-hint { color: var(--yellow); font-weight: 700; }

/* PUSH — toggle switch + box ------------------------------------------------- */
.push-box {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 18px;
    background: var(--surface);
}
.push-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.push-text { flex: 1; }
.push-hint { margin: 3px 0 0; font-size: .82rem; }
.push-note { margin: 8px 0 0; font-size: .8rem; }
.switch {
    position: relative; width: 46px; height: 26px; flex: none;
    border: none; border-radius: 100px; background: var(--border);
    cursor: pointer; padding: 0; transition: background .2s;
}
.switch.on { background: var(--orange); }
.switch:disabled { opacity: .6; cursor: default; }
.switch-knob {
    position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; transition: transform .2s;
}
.switch.on .switch-knob { transform: translateX(20px); }

/* NAV — icons on the links plus the account dropdown -------------------------- */
.nav-ico { width: 18px; height: 18px; flex: none; }

.acct-menu { position: relative; display: inline-flex; align-items: center; }
.acct-trigger {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--surface); border: 1.5px solid var(--border); color: var(--text);
    border-radius: 100px; padding: 7px 9px 7px 11px; cursor: pointer;
    transition: border-color .18s, color .18s;
}
.acct-trigger:hover, .acct-trigger.active { border-color: var(--orange); color: var(--orange); }
.acct-caret { flex: none; opacity: .7; }
.acct-dropdown {
    display: none;
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    min-width: 186px; background: var(--card); border: 1px solid var(--border);
    border-radius: 14px; padding: 6px; box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
}
.acct-dropdown.open { display: flex; flex-direction: column; }
.acct-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: 10px; text-decoration: none;
    color: var(--text); font-family: var(--font-body); font-weight: 600; font-size: .9rem;
    background: none; border: none; cursor: pointer; text-align: left; width: 100%;
}
.acct-item svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.acct-item:hover { background: var(--surface); }
.acct-item.active, .acct-item.active svg { color: var(--orange); }
.acct-logout, .acct-logout svg { color: var(--orange); }
.acct-sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* Mobile: flatten the account menu into the burger (no dropdown) */
@media (max-width: 760px) {
    .acct-menu { display: block; width: 100%; }
    .acct-trigger, .acct-caret { display: none; }
    .acct-dropdown {
        display: flex !important; flex-direction: column;
        position: static; box-shadow: none; border: none; padding: 0;
        min-width: 0; background: none;
    }
    .acct-item { padding: 13px 6px; font-size: 1rem; }
    .acct-sep { margin: 4px 0; }
}

/* PROFILE — obavezna polja --------------------------------------------------- */
.req { color: #ef4444; font-weight: 700; }
.req-note { font-size: .82rem; margin: -6px 0 14px; }

/* NAV — Facebook style ---------------------------------------------------------
   Desktop: icon tabs (a tooltip on hover), the active one highlighted, a "New event" pill.
   Mobile: an FB-style menu (a framed icon plus a title and a description). */
@media (min-width: 761px) {
    .nav-menu-head { display: none; }
    .knav-links { gap: 6px; }
    /* An icon plus a title that "unrolls" to the right on hover. */
    .knav-links .applink .nav-text { display: inline-flex; align-items: center; }
    .knav-links .applink .nav-desc { display: none; }
    .knav-links .applink .nav-label {
        max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
        font-family: var(--font-display); font-weight: 700; font-size: .9rem;
        transition: max-width .28s ease, opacity .2s ease, margin-left .28s ease;
    }
    .knav-links .applink:hover .nav-label,
    .knav-links .applink:focus-visible .nav-label {
        max-width: 170px; opacity: 1; margin-left: 8px;
    }
    .knav-links .applink {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 0; height: 42px; padding: 0 11px;
        border-radius: 12px; color: var(--muted);
        transition: background .15s, color .15s;
    }
    .knav-links .applink .nav-ico { width: 23px; height: 23px; }
    .knav-links .applink:hover { background: var(--surface); color: var(--text); }
    .knav-links .applink.active { color: var(--orange); background: rgba(255, 87, 34, .14); }
    .knav-links .applink.nav-create { color: var(--orange); }
    .knav-links .applink.nav-create:hover { background: rgba(255, 87, 34, .14); color: var(--orange); }
    .knav-links .notif-bell { width: 48px; height: 42px; padding: 0; }
    .knav-links .notif-bell .nav-ico { width: 23px; height: 23px; }
    .knav-links .notif-bell .nav-text { display: none; }
}
@media (max-width: 760px) {
    .nav-menu-head {
        font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
        color: var(--text); padding: 2px 6px 12px;
    }
    body.menu-open .knav-links .notif-wrap { width: 100%; display: block; }
    body.menu-open .knav-links .applink,
    body.menu-open .knav-links .acct-item,
    body.menu-open .knav-links .notif-bell {
        display: flex; align-items: center; justify-content: flex-start; gap: 14px;
        padding: 11px 10px; border-radius: 12px; width: 100%;
        color: var(--text); text-decoration: none; text-align: left;
    }
    body.menu-open .knav-links .applink:hover,
    body.menu-open .knav-links .acct-item:hover,
    body.menu-open .knav-links .notif-bell:hover { background: var(--surface); }
    body.menu-open .knav-links .applink.active { background: rgba(255, 87, 34, .12); }
    .knav-links .applink .nav-ico,
    .knav-links .notif-bell .nav-ico,
    .acct-item svg {
        width: 22px; height: 22px; flex: none; box-sizing: content-box; padding: 9px;
        background: var(--surface); border-radius: 12px; color: var(--orange);
    }
    .knav-links .applink.active .nav-ico { background: rgba(255, 87, 34, .18); }
    body.menu-open .knav-links .notif-bell .notif-badge { left: 32px; right: auto; top: 6px; }
    .nav-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .nav-label { font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--text); }
    .nav-desc { font-size: .8rem; color: var(--muted); }
    .knav-links .applink.nav-create { background: none; color: var(--text); border-radius: 12px; }
    .knav-links .applink.nav-create .nav-ico { background: var(--orange); color: #fff; }
    .knav-links .applink.nav-create .nav-desc { display: block; }
}

/* HAPPENING DETAIL --------------------------------------------------------- */
/* Place and happening details: a facts grid and a map need a bit more than a column of text. */
.app-container.narrow { max-width: 880px; }
.tag-src {
    background: rgba(154, 138, 148, .14); color: var(--muted);
    font-size: .72rem; font-weight: 700; text-transform: lowercase;
}
.hd { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 26px 24px; }
.hd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hd-source { font-size: .82rem; color: var(--muted); font-weight: 600; }
.hd-title { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1.15; margin: 0 0 16px; color: var(--text); }
.hd-facts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.hd-fact { display: flex; align-items: center; gap: 10px; font-size: .98rem; color: var(--text); }
.hd-fact .hd-ico { flex: none; font-size: 1.05rem; }
.hd-desc { font-size: .98rem; line-height: 1.6; color: var(--text); white-space: pre-line; margin: 0 0 18px; }
.hd-map { height: 260px; border-radius: 14px; overflow: hidden; margin: 0 0 20px; border: 1px solid var(--border); }
.hd-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hd-note { font-size: .8rem; margin: 18px 0 0; }

/* "I'd go" on a happening's page. On a card the button takes its size from .btn-small, while here
   it sits next to .btn and .btn-ghost, which are larger — without this it would look as if it had
   accidentally been left smaller. The colours and the pressed state still come from .interest-btn. */
.hd-actions .interest-btn {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.9rem;
    /* The links beside it inherit the text's line height and the button does not — without this it is
       4px shorter and looks as if it had slipped a little too low next to them. */
    line-height: 1.7;
    padding: 12px 22px;
    border-width: 1.5px;
    border-radius: 12px;
}
.hd-actions .interest-btn.raised { padding-inline: 18px; }

/* The signup that opens under the actions once someone says they would go: a card rather than a
   section, so it reads as an answer to the click and not as a second page. */
.event-signup {
    margin: 18px 0 0;
    padding: 16px 18px;
    max-width: 460px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 16px;
}
.event-signup-lead { margin: 0 0 6px; font-size: .95rem; line-height: 1.55; }
.event-signup-weekly { margin: 0 0 12px; font-size: .84rem; color: var(--muted); line-height: 1.5; }
.event-signup-form { display: flex; flex-wrap: wrap; gap: 8px; }
.event-signup-form .wl-input { flex: 1 1 200px; min-width: 0; }
.event-signup-form .btn { flex: 0 0 auto; }
.event-signup .form-note, .event-signup .form-error { margin: 10px 0 0; }
/* The confirmation takes the place of the form, so the card does not change height for nothing. */
.event-signup-done { margin: 0; font-size: .95rem; line-height: 1.55; }

/* PAGER (Happenings paginacija) -------------------------------------------- */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 26px 0 4px; }
.pager-btn {
    min-width: 38px; height: 38px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--card); border: 1.5px solid var(--border); color: var(--text);
    border-radius: 10px; cursor: pointer; font-weight: 700; font-size: .92rem;
    transition: border-color .15s, background .15s, color .15s;
}
.pager-btn:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.pager-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.pager-btn:disabled { opacity: .4; cursor: default; }

/* The wider modal variant (creating an event) */
.modal-card.modal-card-wide { max-width: 760px; }

/* "Novi event" gumb u hero-u Events stranice */
.hero-create { margin-top: 16px; }

/* THE APP SPLASH — while Blazor WASM loads ----------------------------------- */
#app-splash {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    transition: opacity .35s ease, visibility .35s ease;
}
#app-splash.splash-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.splash-logo { animation: splashPulse 1.6s ease-in-out infinite; }
.splash-word {
    font-family: var(--font-display); font-weight: 800; font-size: 1.7rem;
    letter-spacing: -.02em; color: var(--text);
}
.splash-word span { color: var(--orange); }
.splash-spinner {
    width: 26px; height: 26px; margin-top: 4px;
    border: 3px solid var(--border); border-top-color: var(--orange);
    border-radius: 50%; animation: splashSpin .8s linear infinite;
}
@keyframes splashSpin { to { transform: rotate(360deg); } }

/* The inline loader (Loader.razor) — for fetching content inside a page or card */
.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 16px;
    color: var(--muted);
}
.loader-compact { padding: 22px 12px; gap: 9px; }
.loader-spinner {
    width: 26px; height: 26px;
    border: 3px solid var(--border);
    border-top-color: var(--orange);
    border-radius: 50%;
    animation: splashSpin .8s linear infinite;
}
.loader-compact .loader-spinner { width: 20px; height: 20px; border-width: 2.5px; }
.loader-text { font-size: .88rem; }
@media (prefers-reduced-motion: reduce) {
    .loader-spinner { animation-duration: 2.4s; }
}
@keyframes splashPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .7; } }

/* THE PROFILE — a wider two-column layout ------------------------------------ */
.profile-view { max-width: 920px; margin: 0 auto; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.profile-view .pcard { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 22px; }
.profile-identity { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.profile-identity .profile-avatar-wrap { margin-bottom: 8px; }
.profile-name { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.15; margin: 4px 0 0; color: var(--text); }
.profile-sub { margin: 4px 0 0; font-size: .95rem; }
.profile-since { margin: 3px 0 0; font-size: .82rem; }
.profile-identity .profile-bio { margin: 14px 0 0; text-align: left; align-self: stretch; }
.pcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rating-badge { background: rgba(255, 193, 7, .16); color: var(--text); font-weight: 700; font-size: .85rem; padding: 3px 11px; border-radius: 100px; white-space: nowrap; }
.ratings-all-btn { margin-top: 12px; width: 100%; }
.profile-interests-card { margin-top: 16px; }
/* In the masonry layout the spacing comes from the card's margin-bottom — cancel the doubling. */
.profile-masonry .profile-interests-card { margin-top: 0; }
@media (max-width: 720px) {
    .profile-grid { grid-template-columns: 1fr; }
}

/* Ocjene unutar identitet-kartice (lijevo poravnate ispod identiteta) */
.profile-ratings-block { align-self: stretch; width: 100%; text-align: left; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.profile-about .field-label { margin-top: 0; }

/* Edit ikona u kutu identitet-kartice */
.profile-identity { position: relative; }
.profile-edit-btn {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1.5px solid var(--border); color: var(--muted);
    border-radius: 10px; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.profile-edit-btn:hover { border-color: var(--orange); color: var(--orange); }

/* The ratings are a clickable summary (a count plus an arrow), with no inline list */
.ratings-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ratings-summary-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    background: none; border: none; padding: 4px 0; cursor: pointer; color: var(--text); text-align: left;
}
.ratings-summary-right { display: inline-flex; align-items: center; gap: 8px; }
.ratings-summary-btn .chev { color: var(--muted); transition: color .15s, transform .15s; }
.ratings-summary-btn:hover .chev { color: var(--orange); transform: translateX(2px); }

/* The "For you" switch (personalisation) */
.foryou-toggle.active { background: rgba(255, 87, 34, .14); border-color: var(--orange); color: var(--orange); }

/* LOADING OVERLAY — prijelazi (prijava/registracija) --------------------------- */
.loading-overlay {
    position: fixed; inset: 0; z-index: 5000;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(2px);
    animation: overlayIn .18s ease;
}
.loading-overlay-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.loading-overlay-text { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 1rem; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

/* A happening's detail page — the list of plans (the groups that are going) */
.hd-plans { margin-top: 22px; }
/* Where a happening's page leads on to: other dates, the same venue, similar evenings */
.hd-related { margin-top: 22px; }
.hd-related-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.hd-more { margin-top: 18px; font-weight: 700; }
.hd-more a { color: var(--orange); text-decoration: none; }
.hd-more a:hover { text-decoration: underline; }
.hd-plans-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.hd-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.hd-plan:hover { border-color: var(--orange); transform: translateY(-1px); }
.hd-plan-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-plan-title { font-weight: 700; }
.hd-plan-meta { font-size: .82rem; color: var(--muted); }
.hd-plan-spots { flex: none; font-size: .82rem; font-weight: 700; color: var(--orange); white-space: nowrap; }
.hd-plan-spots.full { color: var(--muted); }


/* THE PROFILE: the identity card spanning the full row (like the popup's header) */
.profile-identity-wide {
    margin-bottom: 16px;
}
.profile-identity-wide .profile-hero { height: 104px; }
.profile-identity-wide .profile-avatar-wrap { margin-top: 52px; }
/* Full-width ratings look better centred within a capped width */
.profile-identity-wide .profile-ratings-block {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* The popup always starts at the top (the content begins at the top, not caught at the bottom). */
.modal-overlay { scroll-behavior: auto; }
.modal-overlay > .modal-box { scroll-behavior: auto; }

/* The gender symbol next to a name (♀ / ♂). For "unspecified" and "other" it is not rendered at all. */
.gender-ico {
    display: inline-block;
    margin-left: 7px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .8em;
    line-height: 1;
    vertical-align: middle;
    padding: 3px 7px;
    border-radius: 100px;
}
.gender-ico.g-1 { color: #F0799B; background: rgba(236, 72, 153, .14); }  /* female */
.gender-ico.g-2 { color: #6FA8F5; background: rgba(59, 130, 246, .16); }  /* male */

/* THE ERROR PAGES (404 / 500 / the rest) — the same style as the maintenance page */
.status-card {
    max-width: 520px;
    margin: 40px auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.status-hero { position: relative; height: 88px; }
.status-body { padding: 24px 28px 30px; text-align: center; }
.status-logo {
    display: inline-block; margin-bottom: 10px; text-decoration: none;
    font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
    letter-spacing: -.02em; color: var(--text);
}
.status-logo span { color: var(--orange); }
.status-code {
    font-family: var(--font-display); font-weight: 800; font-size: 2.6rem;
    line-height: 1; color: var(--muted); opacity: .55; margin-bottom: 6px;
}
.status-title { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; margin: 0 0 10px; color: var(--text); }
.status-text { color: var(--muted); line-height: 1.6; margin: 0 0 20px; }
.status-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.status-ref { margin: 18px 0 0; font-size: .78rem; color: var(--muted); }
.status-ref code { font-size: .74rem; opacity: .8; }

/* THE GLOBAL PROGRESS BAR (navigation) — above everything, and it does not shift the content */
#nav-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 2000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
html.nav-loading #nav-progress { opacity: 1; }
.nav-progress-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--orange), #EC4899, #7C3AED);
    transform-origin: left;
    transform: scaleX(0);
}
html.nav-loading #nav-progress .nav-progress-bar { animation: navProgress 1.1s ease-out forwards; }
@keyframes navProgress {
    0%   { transform: scaleX(0); }
    35%  { transform: scaleX(.55); }
    70%  { transform: scaleX(.82); }
    100% { transform: scaleX(.95); }
}
@media (prefers-reduced-motion: reduce) {
    html.nav-loading #nav-progress .nav-progress-bar { animation: none; transform: scaleX(.9); }
}

/* NOTIFICATIONS — the bell lives in the top bar, the panel is independent of the mobile menu */
.knav-utils .notif-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1.5px solid var(--border);
    background: none;
    color: var(--muted);
    border-radius: 999px;
    position: relative;
}
.knav-utils .notif-bell:hover { color: var(--orange); border-color: var(--orange); }
.knav-utils .notif-bell .nav-ico { width: 18px; height: 18px; }
.knav-utils .notif-bell .nav-text { display: none; }
.knav-utils .notif-badge { top: -4px; right: -4px; }

@media (max-width: 430px) {
    .knav-utils .notif-bell { width: 30px; height: 30px; }
    .knav-utils .notif-bell .nav-ico { width: 16px; height: 16px; }
}

/* Mobile: the panel as a sheet across the screen rather than a narrow dropdown */
@media (max-width: 760px) {
    .notif-panel {
        position: fixed;
        top: 68px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 92px);
        max-height: calc(100dvh - 92px);
        z-index: 1300;
    }
    .notif-backdrop { z-index: 1290; }
}

/* Narrow screens: the theme and language move into the account menu (settings) and the bar stays
   airy. Signed-out visitors have no such menu, so their controls stay in the bar. */
@media (max-width: 560px) {
    .knav-auth .knav-utils .theme-toggle,
    .knav-auth .knav-utils .lang-menu { display: none; }
}
/* U izborniku/postavkama ikone tih stavki neka izgledaju kao ostale */
.acct-dropdown .acct-item svg { flex: none; }

/* A full-screen loader until the new page appears (it only starts after 250 ms) */
#nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    pointer-events: none;
}
html.nav-loading-slow #nav-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;   /* prevent double clicks while it loads */
}
.nav-overlay-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.nav-overlay-inner .loader-spinner { width: 26px; height: 26px; }
/* --- Reconnecting (server rendering) ---------------------------------------
   Blazor puts its own classes on #components-reconnect-modal, but we DELIBERATELY do not use them
   to show anything: a short outage resolves itself in silence and the user need never see it. The
   bar is shown by js/connection.js, and only after several seconds, through the .conn-visible class.

   The bar sits at the top and does not cover the content: a dropped connection is not an error the
   user has to acknowledge, but a state that passes on its own. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    justify-content: center;
    padding: 8px 12px;
    pointer-events: none;
}

#components-reconnect-modal.conn-visible {
    display: flex;
}

.conn-bar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .88rem;
    background: var(--card);
    color: var(--muted);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
    pointer-events: auto;
}

.conn-bar .loader-spinner {
    width: 16px;
    height: 16px;
}

/* The button and the server-is-down message stand ready, but appear only once the silent reload
   has failed several times. Until then there is nothing to click. */
.conn-text-down,
.conn-button {
    display: none;
}

.conn-gave-up .loader-spinner,
.conn-gave-up .conn-text:not(.conn-text-down) {
    display: none;
}

.conn-gave-up .conn-text-down,
.conn-gave-up .conn-button {
    display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
    .conn-bar .loader-spinner { animation: none; }
}


/* While the next page of the list is on its way the old one stays, only quieter. Replacing it
   with skeletons would be the flicker all over again, and most answers arrive inside 200 ms. */
.event-grid.is-loading, .event-list.is-loading { opacity: .55; transition: opacity .15s ease .1s; }

/* --- "I'd go" on a happening card ----------------------------------------- */
.interest-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    /* The button must never wrap onto a second line — the card would jump in height. */
    white-space: nowrap;
    flex: 0 0 auto;
}

/* After voting only the hand and the number remain, so the button can be narrower. */
.interest-btn.raised { padding-left: 10px; padding-right: 10px; }

.interest-btn:hover:not(:disabled) {
    border-color: var(--orange);
    background: color-mix(in srgb, var(--orange) 10%, transparent);
}

.interest-hand {
    /* It "raises a hand" a little on hover — small, without a circus. */
    display: inline-block;
    transition: transform .15s ease;
}

.interest-btn:hover:not(:disabled) .interest-hand { transform: translateY(-2px); }

.interest-btn.raised {
    border-color: var(--orange);
    background: color-mix(in srgb, var(--orange) 16%, transparent);
    cursor: default;
    opacity: 1;
}

.interest-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--orange);
    color: #fff;
}

/* --- The plan-count badge on a happening card ----------------------------- */
/* Rendered only when a plan exists (the condition lives in the Razor), so there is no empty state.
   The selector has to beat `.event-card.has-cover > *:not(.card-link)`, which puts every child of
   the card into position:relative — hence .event-card.has-cover in the selector. */
.event-card .plan-badge,
.event-card.has-cover .plan-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    /* It has to sit ABOVE .hap-cover: that image is also z-index 2 and comes later in the document,
       so at an equal layer it would cover the badge. */
    z-index: 3;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    background: rgb(0 0 0 / 62%);
    backdrop-filter: blur(4px);
    border: 1px solid rgb(255 255 255 / 18%);
    pointer-events: none;
}

.event-list .plan-badge { top: 8px; right: 8px; }

/* --- Vremenski cipovi (Danas / Sutra / Vikend / Ovaj tjedan / Datum) ------- */
.date-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.date-chip {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: .86rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.date-chip:hover { border-color: var(--orange); }

.date-chip.active {
    border-color: var(--orange);
    background: var(--orange);
    color: #fff;
    font-weight: 600;
}

.date-chip-input {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--orange);
    background: var(--surface);
    color: var(--text);
    font-size: .86rem;
    /* Without this the browser draws its calendar icon in a dark colour and it disappears against a
       dark background. color-scheme tells it the surface is dark. */
    color-scheme: dark;
}

:root[data-theme="light"] .date-chip-input { color-scheme: light; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .date-chip-input { color-scheme: light; }
}

/* Sitno povecanje ikone da bude lakse pogoditi prstom. */
.date-chip-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .9;
    filter: brightness(1.6);
}

/* The happening count next to a category chip (the order follows that count). */
.cat-chip-count {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: rgb(255 255 255 / 12%);
}

.cat-chip.active .cat-chip-count { background: rgb(0 0 0 / 22%); }

/* Uvod ispod naslova stranice dogadjanja. */
.events-intro {
    max-width: 62ch;
    margin: 6px 0 0;
    line-height: 1.55;
}

.events-intro-muted { color: var(--muted); font-size: .94rem; }

/* The description on a happening card: no backdrop and no rounding, but a straight rule along the
   left edge. The rule used to be curved because the block had a border-radius, so it read as the
   edge of a frame rather than as a rule. */
.event-card .happening-desc {
    padding: 2px 0 2px 12px;
    background: none;
    border-radius: 0;
    border-left: 3px solid var(--orange);
    margin-bottom: 14px;
}

/* Once there is a number the button shows only the hand and the count — with the text it wraps
   onto a second line in a narrow card. The text is there only while there is no number yet. */
.interest-btn.has-count .interest-label { display: none; }

/* --- Vodici i landing stranice --------------------------------------------- */
.guide-wrap { max-width: 760px; }

.guide-crumbs { font-size: .86rem; color: var(--muted); margin-bottom: 18px; }
.guide-crumbs a { color: var(--muted); text-decoration: none; }
.guide-crumbs a:hover { color: var(--orange); }

.guide-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 22px;
}

/* The body text: a comfortable line length (~70 characters) and airy spacing. */
.guide-body { font-size: 1.05rem; line-height: 1.75; }
.guide-body p { margin: 0 0 18px; }
.guide-body h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.32rem;
    line-height: 1.3;
    margin: 34px 0 12px;
}
.guide-body ul, .guide-body ol { margin: 0 0 18px; padding-left: 22px; }
.guide-body li { margin-bottom: 8px; }
.guide-body a { color: var(--orange); }
.guide-body strong { font-weight: 700; }

/* An illustration within the text. Deliberately a drawing rather than a stock photo: the texts are
   about particular places in Zagreb, so a generic model holding a coffee would read as filler. This
   way the image carries the category's colour and holds the same visual language as the guide's
   header. The width and height are stated so the text does not jump while the image loads. */
.guide-figure { margin: 32px 0 28px; }
.guide-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    border-radius: 18px;
    border: 1px solid var(--border);
}

.guide-cta {
    margin: 34px 0 10px;
    padding: 22px 24px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--orange);
}
.guide-cta p { margin: 0 0 14px; line-height: 1.6; }

.guide-faq { margin-top: 34px; }
.guide-faq h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin-bottom: 14px; }
.guide-faq h3 { font-size: 1rem; font-weight: 700; margin: 18px 0 6px; }
.guide-faq p { margin: 0; color: var(--muted); line-height: 1.65; }

.guide-more, .landing-links { margin-top: 36px; }
.landing-links-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    margin: 0 0 12px;
}

/* Popis vodica */
.guide-list { display: flex; flex-direction: column; gap: 16px; }
.guide-card {
    padding: 22px 24px;
    border-radius: 20px;
    background: var(--card);
    border: 1.5px solid var(--border);
}
.guide-card-title { margin: 0 0 8px; font-size: 1.2rem; line-height: 1.35; }
.guide-card-title a { color: var(--text); text-decoration: none; }
.guide-card-title a:hover { color: var(--orange); }
.guide-card-lead { margin: 0 0 12px; color: var(--muted); line-height: 1.6; }
.guide-card-more { color: var(--orange); text-decoration: none; font-weight: 600; font-size: .92rem; }

/* A landing chip that is a link rather than a button */
a.cat-chip { text-decoration: none; }

/* --- Waiting-list signup progress (carried over from the static landing page) --- */
.waitprogress { margin: 0 0 32px; max-width: 440px; }
.wp-headline { font-size: 0.9rem; color: var(--muted); margin-bottom: 10px; }
.wp-remain { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.wp-remain strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--orange);
    font-variant-numeric: tabular-nums;
}
.wp-bar {
    height: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 100px;
    overflow: hidden;
}
.wp-fill {
    height: 100%;
    width: 0;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--orange), var(--peach));
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-sub { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }
.wp-sub strong { color: var(--text); font-weight: 700; }
/* What the signup brings before the app itself does — read under the headline of the form. */
.wp-weekly { font-size: 0.84rem; color: var(--muted); line-height: 1.5; margin: -4px 0 12px; }

/* The city as a chip: one field fewer to fill in, and a click turns it into an input. */
.wl-city-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.wl-city-chip:hover { border-color: var(--orange); }
.wl-city-chip small {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.78rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wl-proof { margin: 0; font-size: 0.85rem; color: var(--muted); }
.wl-proof strong { color: var(--orange); }

/* The cities people are waiting in besides this one — quieter than the note above it. */
.wl-cities { margin: 6px 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--muted); opacity: 0.85; }

/* The page that answers one question about the places (where to watch the match). A numbered
   list rather than a grid of cards: the reader is comparing a dozen venues on what they offer,
   not glancing at pictures, and the facts have to be readable one under the other. */
.pg-list { list-style: none; counter-reset: pg; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.pg-item {
    counter-increment: pg;
    position: relative;
    padding: 18px 18px 16px 52px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}
.pg-item::before {
    content: counter(pg);
    position: absolute; left: 18px; top: 18px;
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 0.78rem; font-weight: 700;
    color: var(--orange); background: rgba(255, 87, 34, 0.12);
}
.pg-name { margin: 0; font-size: 1.05rem; }
.pg-name a { color: inherit; text-decoration: none; }
.pg-name a:hover { color: var(--orange); }
.pg-where { margin: 2px 0 0; font-size: 0.82rem; color: var(--muted); }
.sport-what { margin: 10px 0 0; font-size: 0.9rem; line-height: 1.55; }
.pg-facts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.pg-facts li { font-size: 0.85rem; line-height: 1.5; }
.pg-checked { margin: 10px 0 0; font-size: 0.75rem; color: var(--muted); }
.pg-more { margin: 20px 0 0; font-size: 0.9rem; display: flex; gap: 8px; flex-wrap: wrap; }
.places-pointer { margin: 10px 0 0; font-size: 0.9rem; display: flex; gap: 14px; flex-wrap: wrap; }

/* The standing pub quiz timetable: a night of the week, then the quizzes on it. The time is a
   column of its own so the eye can run down it — that is how a timetable is read. */
.quiz-day { margin: 26px 0 0; }
.quiz-day-name { margin: 0 0 8px; font-size: 1rem; color: var(--orange); }
.quiz-day-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.quiz-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    align-items: baseline;
    padding: 10px 12px;
    border-radius: 10px;
}
.quiz-row:nth-child(odd) { background: var(--card); }
.quiz-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.9rem; }
.quiz-what a { color: inherit; text-decoration: none; }
.quiz-what a:hover { color: var(--orange); }
.quiz-venue { display: block; font-size: 0.8rem; color: var(--muted); }
.quiz-venue a { color: inherit; }
.quiz-next { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }

@media (max-width: 520px) {
    .quiz-row { grid-template-columns: 48px 1fr; gap: 8px; }
    .quiz-next { grid-column: 2; }
}

@media (max-width: 520px) {
    .pg-item { padding: 16px 14px 14px 44px; }
    .pg-item::before { left: 12px; top: 16px; }
}

/* An irreversible admin action (deleting) — set apart visually from the other buttons. */
.btn-small.danger {
    border-color: #e11d48;
    color: #fff;
    background: #e11d48;
}
.btn-small.danger:hover:not(:disabled) { background: #be123c; border-color: #be123c; }

/* --- Happenings on the home page ------------------------------------------ */
.home-happenings { text-align: center; }
.home-hap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin: 28px 0 26px;
    text-align: left;
}

.home-hap {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    background: var(--card);
    border: 1.5px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: transform .18s var(--bounce), border-color .18s;
}
.home-hap:hover { transform: translateY(-3px); border-color: var(--orange); }

.home-hap-cover {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cat-a, #64748B), var(--cat-b, #94A3B8));
}
.home-hap-cover img { width: 100%; height: 100%; object-fit: cover; }
.home-hap-emoji { font-size: 40px; }

.home-hap-body { padding: 14px 16px 16px; }
.home-hap-cat { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.home-hap-title {
    margin: 6px 0 6px;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
    /* The titles vary in length — two lines keep the cards equal. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-hap-when { font-size: .84rem; color: var(--muted); }

.home-hap-more { display: inline-flex; }

/* --- Vodic: zaglavlje, okvir i naglasci ------------------------------------ */
/* The article sits in a card like the rest of the app, rather than as bare text on the background. */
.guide {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    padding: 0 0 34px;
    overflow: hidden;
}

/* The colour comes from --cat-a/--cat-b (the cat-N class on the article), as on the happening cards. */
.guide-hero {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cat-a, #64748B), var(--cat-b, #94A3B8));
}
.guide-hero-emoji {
    font-size: 62px;
    line-height: 1;
    filter: drop-shadow(0 6px 14px rgb(0 0 0 / 28%));
}

.guide-title,
.guide .guide-body,
.guide .guide-faq { padding-inline: clamp(20px, 5vw, 44px); }

/* The CTA has a background and a border of its own, so the same spacing has to go OUTSIDE its box
   (margin), not inside it (padding). With padding the box stretches to the card's edges and ends up
   wider than the text above it. */
.guide .guide-cta { margin-inline: clamp(20px, 5vw, 44px); }

.guide-title { margin-top: 30px; }

/* The opening sentence sits visually above the rest of the text — it sets the tone before reading starts. */

/* Podnaslovi dobivaju crticu u boji vodica — oko lakse hvata strukturu teksta. */
.guide-body h2 {
    position: relative;
    padding-top: 10px;
}
.guide-body h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: var(--cat-a, var(--orange));
}

.guide-body strong { color: var(--text); }

/* Popis vodica: mala plocica u boji umjesto samog teksta. */
.guide-card { display: flex; gap: 16px; align-items: flex-start; }
.guide-card-mark {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: linear-gradient(135deg, var(--cat-a, #64748B), var(--cat-b, #94A3B8));
}

@media (max-width: 560px) {
    .guide-hero { height: 118px; }
    .guide-hero-emoji { font-size: 48px; }
}

/* A guide's first paragraph is its lead — set apart visually without repeating the text. */
.guide-body > p:first-of-type {
    font-size: 1.14rem;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
    margin-bottom: 22px;
}

/* --- "Jos vodica": kartice umjesto cipova --------------------------------- */
.guide-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.guide-more-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--card);
    border: 1.5px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, transform .15s var(--bounce);
}
.guide-more-card:hover { border-color: var(--orange); transform: translateY(-2px); }

.guide-more-mark {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    background: linear-gradient(135deg, var(--cat-a, #64748B), var(--cat-b, #94A3B8));
}

.guide-more-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.guide-more-title { font-weight: 700; font-size: .96rem; line-height: 1.35; }
.guide-more-lead {
    font-size: .84rem;
    color: var(--muted);
    line-height: 1.5;
    /* Two lines, so the cards stay equal whatever the length of the lead. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- The waiting-list signup inside a guide's CTA block -------------------- */
/* Without this the field, the city chip and the button squeeze together against the left edge. */
.guide-cta .wl-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    margin-top: 14px;
    max-width: 460px;
}
.guide-cta .wl-input { width: 100%; }
.guide-cta .wl-btn { width: 100%; }
.guide-cta .form-note,
.guide-cta .form-error,
.guide-cta .wl-proof { margin-top: 8px; }
.guide-cta .waitprogress { margin-bottom: 18px; }

/* --- Uvoz s programa dvorana (admin) -------------------------------------- */
/* The import takes minutes, so its state has to be visible without refreshing the page. */
.import-state {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--orange);
    border-radius: 12px;
    background: var(--surface);
}
.import-line { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.import-spin {
    width: 14px; height: 14px; flex: 0 0 auto;
    border: 2px solid var(--border);
    border-top-color: var(--orange);
    border-radius: 50%;
    animation: import-spin 0.8s linear infinite;
}
@keyframes import-spin { to { transform: rotate(360deg); } }
.import-counts { display: flex; gap: 18px; margin-top: 8px; font-size: 0.9rem; color: var(--muted); }
.import-log { margin: 10px 0 0; padding-left: 18px; font-size: 0.88rem; color: var(--muted); line-height: 1.6; }

/* Respect the "reduced motion" setting — a spinner otherwise bothers people sensitive to movement. */
@media (prefers-reduced-motion: reduce) {
    .import-spin { animation: none; border-top-color: var(--orange); }
}

/* The possible-duplicate marker in the queue. Yellow, not red: it is not an error but something to
   look at before publishing. */
.dup-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #241C31;
    background: var(--yellow);
    vertical-align: middle;
}

/* A checkbox with a label in an admin form — without this the box and the text are not aligned. */
.check-line { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.check-line input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--orange); cursor: pointer; }
.check-line input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; }

/* --- Bulk selection in the queue ------------------------------------------ */
.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    /* It stays visible while a list 300 items long is scrolled. */
    position: sticky;
    top: 8px;
    z-index: 3;
}
.bulk-count { font-size: 0.9rem; color: var(--muted); }
.bulk-actions { display: flex; gap: 8px; margin-left: auto; }

.row-check { display: flex; align-items: center; padding-right: 12px; cursor: pointer; }
.row-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--orange); cursor: pointer; }

/* A selected row has to be obvious at a glance, but without shouting. */
.admin-row.row-selected {
    background: color-mix(in srgb, var(--orange) 8%, transparent);
    border-color: color-mix(in srgb, var(--orange) 40%, var(--border));
}

@media (max-width: 640px) {
    .bulk-bar { position: static; }
    .bulk-actions { margin-left: 0; width: 100%; }
}

/* A queue row has three columns: the checkbox, the content, the buttons. Without this the content
   does not stretch, so "space-between" pushes it to the middle and the buttons wrap onto a second line. */
.admin-row .row-check { flex: 0 0 auto; }
.admin-row .admin-row-main {
    flex: 1 1 auto;
    min-width: 0;              /* a long title wraps rather than widening the row */
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-row .admin-row-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 720px) {
    .admin-row { flex-wrap: wrap; }
    .admin-row .admin-row-actions { width: 100%; justify-content: flex-end; }
}

/* --- Stranica "O Kompanu" -------------------------------------------------- */
/* The same frame as the guides, but calmer: here one reads about a person, not a catalogue. */
.about {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    padding: 0 0 34px;
    overflow: hidden;
}
.about-hero {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--orange), var(--purple));
}
.about-hero-mark { font-size: 3rem; line-height: 1; }

.about-title,
.about .about-body { padding-inline: clamp(20px, 5vw, 44px); }
.about .guide-cta { margin-inline: clamp(20px, 5vw, 44px); }

.about-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    line-height: 1.2;
    margin: 30px 0 18px;
}
.about-body { font-size: 1.05rem; line-height: 1.75; }
.about-body p { margin: 0 0 18px; }
.about-body a { color: var(--orange); }
.about-body h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    margin: 30px 0 10px;
}
/* The first sentence carries the whole message, so it stands apart. */
.about-lead {
    font-size: 1.12rem;
    color: var(--text);
    border-left: 3px solid var(--orange);
    padding-left: 16px;
}

/* --- Admin: Kompan places ------------------------------------------------
   Entering a venue's facts is batch work: you open their page and fill things in one after another.
   So the fields sit in a grid, narrow and dense, rather than stacked one below another across the
   full width. */
.place-import-note { margin: .25rem 0 .75rem; }

.place-source {
    margin: 1rem 0 .25rem;
    padding: .75rem;
    border: 1px dashed var(--line, #d8d8d8);
    border-radius: 8px;
}

.place-section { margin-top: 1.25rem; }

.place-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem 1rem;
    margin-top: .5rem;
}

.place-field { display: flex; flex-direction: column; gap: .25rem; }

.place-field label { font-size: .85rem; font-weight: 500; }

.place-field input,
.place-field select { width: 100%; }

.place-field .field-hint { margin: 0; }

/* --- Kompan places, public -----------------------------------------------
   The list is not browsed but asked: the intent chips are the first thing seen, and a card carries
   only what answers that question. */
.places-hero { margin-bottom: 1.25rem; }

.places-intents {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
}

.place-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border: 1px solid var(--line, #d8d8d8);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}

.place-chip:hover { border-color: var(--brand, #ff6b35); }

.place-chip.active {
    background: var(--brand, #ff6b35);
    border-color: var(--brand, #ff6b35);
    color: #fff;
}

.place-chip-count {
    font-size: .78rem;
    opacity: .7;
}

.places-search { margin-bottom: 1rem; }

.places-count {
    font-size: .9rem;
    opacity: .7;
    margin: 0 0 .75rem;
}

.places-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.place-card {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line, #d8d8d8);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.place-card:hover {
    border-color: var(--brand, #ff6b35);
    transform: translateY(-2px);
}

.place-kind {
    display: inline-block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
}

.place-name { font-size: 1.1rem; margin: .3rem 1rem .15rem; }

.place-address { font-size: .88rem; opacity: .7; margin: 0 1rem .6rem; }

.place-signs { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 1rem 1rem; }

.place-sign {
    font-size: .8rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: var(--surface-2, rgba(128, 128, 128, .12));
}

.places-note { margin-top: 2rem; font-size: .85rem; }


/* --- An individual place's page -------------------------------------------
   The source is NOT repeated next to every fact. With fourteen of them, the same grey line beneath
   each is noise that buries what the reader came for. The sources appear once, at the bottom; next
   to an individual fact there is only an asterisk when it is unverified. */
.place-back {
    display: block;
    margin-bottom: 1rem;
    font-size: .9rem;
    text-decoration: none;
    opacity: .75;
}

.place-header {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line, #e6e6e6);
    margin-bottom: 1.5rem;
}

.place-h1 { margin: .35rem 0 .5rem; }

.place-subtitle {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: .95rem;
}

.place-dot-separator { margin: 0 .4rem; opacity: .5; }

.place-links { display: flex; flex-wrap: wrap; gap: .5rem; }

/* The four things the page is opened for, large and before everything else. */
.place-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
    margin-bottom: 1.75rem;
}

.place-tile {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .85rem .9rem;
    border-radius: 12px;
    background: var(--surface-2, rgba(128, 128, 128, .1));
    border: 1px solid var(--line, #e6e6e6);
}

.place-tile-icon { font-size: 1.15rem; line-height: 1.4; }

.place-tile-value {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
}

.place-tile-label {
    font-size: .78rem;
    color: var(--muted);
}

.place-section-public { margin-bottom: 1.75rem; }

.place-h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin: 0 0 .75rem;
}

.place-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .1rem 1.5rem;
}

/* The icon on the left, the label and the value stacked — the eye looks for the value, not the
   label, so it is the value that is emphasised. */
.place-fact {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    grid-template-rows: auto auto;
    align-items: baseline;
    padding: .55rem 0;
    border-bottom: 1px solid var(--line, #ececec);
}

.place-fact-icon {
    grid-row: 1 / span 2;
    font-size: 1rem;
    opacity: .9;
}

.place-fact-label {
    font-size: .78rem;
    color: var(--muted);
}

.place-fact-value {
    font-weight: 500;
    line-height: 1.35;
}

.place-unknown,
.place-sources { margin-bottom: 1.5rem; }

.place-sources-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .85rem;
}

.place-sources-list li {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .3rem 0;
}

.place-source-detail { color: var(--muted); }

/* An unverified source gets no asterisk; it names itself instead. */
.place-source-unverified > span:first-child { color: var(--brand, #ff6b35); }

.place-legend { margin-top: .6rem; font-size: .82rem; }

.place-empty { margin-top: 1.5rem; }

.place-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line, #e6e6e6);
    font-size: .85rem;
}

.place-licence { margin-top: .35rem; }

/* --- The place illustrations ------------------------------------------------
   They are not photographs of the venues and do not pretend to be: a drawing per kind (café, bar,
   pub, restaurant, club) with a slight colour shift per slug, so the cards in a grid differ. A
   photograph arrives only when the venue itself gives one, with permission. */
.place-kind {
    display: inline-block;
    margin: .85rem 1rem 0;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
}

.place-image {
    display: block;
    aspect-ratio: 20 / 9;
    background: var(--surface-2, rgba(128, 128, 128, .12));
}

.place-image img,
.place-image-large img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The venue's own photo: no tint, and credited under the large one */
.place-image.has-photo, .place-image-large.has-photo { filter: none; overflow: hidden; }
.place-image-large { display: block; }
.place-photo-credit { margin: -.85rem 0 1.1rem; font-size: .78rem; color: var(--muted); }
.place-photo-credit a { color: inherit; }

.place-image-large {
    aspect-ratio: 20 / 7;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

/* On a place's page the kind label sits in the text, not on a card. */
.mjesto .place-kind { margin: 0; }

/* The map on the places list: how many have no location, so it does not look as if they vanished. */
.places-no-location { margin-top: .75rem; font-size: .85rem; text-align: center; }

/* --- The daily quiz ---------------------------------------------------------
   Two pieces: the little button that follows the page in the bottom-right corner, and the popup
   the quiz is played in. The button is quiet on purpose — it is an offer, not the point of the
   page it is sitting on. */

/* Both corner buttons live in one fixed stack, so neither has to know the other's height and
   nothing has to be re-measured when one of them changes. The quiz sits at the bottom, nearest
   the thumb: it is the house feature, the game is an offer alongside it. */
.corner-actions {
    position: fixed;
    right: 24px;
    bottom: 24px;
    /* Under the cookie banner (200) and the toasts (999+), above everything in the page flow. */
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.corner-btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 14px 24px;
    border-radius: 100px;
    border: 1.5px solid color-mix(in srgb, var(--text) 40%, transparent);
    background: var(--card);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.corner-btn:hover {
    transform: translateY(-2px);
    border-color: var(--orange);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
}

.corner-btn:active { transform: translateY(0); }

/* The game is a side offer, not the thing this site is for: smaller, quieter edge, and it never
   hops. Two things competing for attention in one corner is the same as neither. */
.corner-game {
    padding: 11px 20px;
    font-size: 0.86rem;
    color: var(--muted);
    border-color: color-mix(in srgb, var(--text) 18%, transparent);
}

.corner-game:hover { color: var(--text); }

/* The name of the game rides behind the word that says what it is. On a phone it drops away —
   the corner is too small to spend on a brand nobody has heard of yet. */
.corner-game-name { color: var(--muted); font-weight: 500; font-size: 0.86em; opacity: 0.85; }

@media (max-width: 640px) {
    .corner-game-name { display: none; }
}

/* --- the game popup ---------------------------------------------------------
   A game needs room, so this modal is far larger than the quiz one and centres itself instead of
   hanging from the top of the page like the others. */

.game-overlay { align-items: center; padding: 24px 16px; }

.modal-box.game-box {
    max-width: min(1240px, 94vw);
    background: var(--card);
    border: 1.5px solid color-mix(in srgb, var(--text) 40%, transparent);
    border-radius: 20px;
    padding: 12px 14px 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The close button gets its own row rather than floating over the frame: anything laid on top of
   a game is something to be clicked by accident mid-play. */
.game-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.game-box .modal-close { position: static; float: none; }

.game-frame {
    display: block;
    width: 100%;
    /* The game sizes its board by frame HEIGHT (HUD row above, ability bar below), so
       give it as much of the viewport as the dialog chrome allows. */
    height: min(820px, calc(100dvh - 140px));
    border: 0;
    border-radius: 14px;
    background: var(--surface);
}

.game-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--muted);
}
.game-foot a { color: var(--muted); text-decoration: underline; }
.game-foot a:hover { color: var(--text); }

@media (max-width: 720px) {
    /* On a phone a game in a boxed dialog is not a game. It takes the whole screen. */
    .game-overlay { padding: 0; }

    .modal-box.game-box {
        max-width: 100vw;
        height: 100dvh;
        border-radius: 0;
        border: 0;
        padding: 8px 10px;
    }

    .game-frame { flex: 1; height: auto; border-radius: 10px; }
}


/* A small hop every so often, not a permanent bounce: the button has to be noticed once, and
   then get out of the way. It stops for good once the day's quiz is solved — there is nothing
   left to call anyone over for. */
@keyframes quizNudge {
    0%, 86%, 100% { transform: translateY(0); }
    90% { transform: translateY(-7px); }
    94% { transform: translateY(0); }
    97% { transform: translateY(-3px); }
}

.quiz-fab:not(.done) { animation: quizNudge 10s ease-in-out 4s infinite; }

/* The hover lift is a transform too, and the animation would win. Dropping the animation on
   hover lets the button answer the pointer instead of carrying on hopping under it. */
.quiz-fab:hover { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .quiz-fab:not(.done) { animation: none; }
}

.quiz-fab-streak { color: var(--muted); font-weight: 800; font-size: 0.8rem; }

/* An unsolved quiz gets a dot. Once solved the button stays, only quieter — the result has to
   remain reachable, and a corner that empties itself halfway through the day reads as a glitch. */
.quiz-fab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 25%, transparent);
}

.quiz-fab.done { color: var(--muted); }
.quiz-fab.done:hover { color: var(--text); }

/* The home page toast pops up in the same corner: it steps above the whole stack rather than
   over it, and never takes the pointer. It is hidden with opacity, which still hit-tests, so
   without this the invisible toast quietly swallowed every click on the buttons underneath. */
.lp-toast { bottom: 150px; pointer-events: none; }

/* --- the popup --- */

.modal-box.quiz-box {
    max-width: 620px;
    background: var(--card);
    border: 1.5px solid color-mix(in srgb, var(--text) 40%, transparent);
    border-radius: 20px;
    padding: 18px 26px 26px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.quiz-body { display: flex; flex-direction: column; gap: 18px; }

.quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.quiz-eyebrow {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange);
}

/* One dot per question: how far in, and how it has gone so far. */
.quiz-dots { display: inline-flex; gap: 6px; }

.quiz-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.2s, transform 0.2s;
}
.quiz-dot.done { background: var(--muted); }
.quiz-dot.now { background: var(--orange); transform: scale(1.2); }

.quiz-question {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.35;
    color: var(--text);
    text-wrap: balance;
}

.quiz-options { display: grid; gap: 8px; }

.quiz-option {
    display: flex;
    align-items: baseline;
    gap: 12px;
    text-align: left;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 12px 16px;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
/* Only where there is a real pointer: on a phone a tap leaves :hover stuck on the button, and the
   next question would open with that position already looking picked. */
@media (hover: hover) {
    .quiz-option:hover:not(:disabled) { border-color: var(--orange); }
}
.quiz-option:disabled { cursor: default; }

.quiz-letter {
    flex: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--muted);
}

/* The pick is held while the server judges, so the click registers. Deliberately neutral: a
   green or a red here would answer the question the player was not meant to have answered yet. */
.quiz-option.picked {
    border-color: var(--orange);
    background: color-mix(in srgb, var(--orange) 12%, var(--surface));
}
.quiz-option.picked .quiz-letter { color: var(--orange); }

.quiz-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.quiz-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 6px 0 2px;
}

.quiz-score {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--text);
}
.quiz-score span { color: var(--muted); font-size: 1.5rem; }

/* The emoji square is what gets shared, so it is shown at the size it will be read at. */
.quiz-grid { font-size: 1.7rem; letter-spacing: 4px; }

.quiz-verdict-line { color: var(--text); font-weight: 500; }
.quiz-streak { color: var(--orange); font-family: var(--font-display); font-weight: 800; }
.quiz-note { color: var(--muted); font-size: 0.85rem; }

@media (max-width: 640px) {
    .corner-actions {
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
    }
    .corner-btn { padding: 12px 20px; font-size: 0.9rem; }
    .corner-game { padding: 9px 16px; font-size: 0.8rem; }
    .lp-toast { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
    .modal-box.quiz-box { padding: 14px 18px 22px; }
    .quiz-question { font-size: 1.12rem; }
    .quiz-score { font-size: 2.6rem; }
    .quiz-grid { font-size: 1.45rem; }
}

/* --- /kviz ------------------------------------------------------------------
   The quiz with room around it, the day board, and the week of real pub quizzes. Same palette and
   faces as the rest of the site; what is new here is the shape, not the voice. */

/* The top padding clears the fixed header, as on every other app page (.app-page). */
.kviz-page { max-width: 1140px; margin: 0 auto; padding: 110px 24px 100px; }

.kviz-hero { max-width: 62ch; margin-bottom: 36px; }

.kviz-eyebrow {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange);
}

.kviz-h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 10px 0 14px;
    text-wrap: balance;
}

.kviz-lead { color: var(--muted); line-height: 1.65; max-width: 60ch; }

/* The one figure that belongs on this page: a fact about Zagreb, not about us. */
.kviz-fact {
    margin-top: 22px;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 100px;
    border: 1.5px solid color-mix(in srgb, var(--text) 25%, transparent);
    color: var(--muted);
    font-size: 0.95rem;
}

.kviz-fact strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--orange);
}

/* --- the quiz and the board, side by side --- */

.kviz-main {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 56px;
}

.kviz-card {
    background: var(--card);
    border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent);
    border-radius: 20px;
    padding: 24px 26px;
}

/* The quiz parts were written for a dialog; here they only need room to breathe. */
.kviz-play { display: flex; flex-direction: column; gap: 18px; }
.kviz-play .quiz-question { font-size: 1.45rem; }
.kviz-play .quiz-options { gap: 10px; }
.kviz-play .quiz-option { padding: 15px 18px; font-size: 1.02rem; }

.kviz-h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--text);
    margin-bottom: 14px;
}

.kviz-h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 22px 0 10px;
}

.kviz-board-stats { display: flex; gap: 26px; margin-bottom: 18px; }
.kviz-board-stats div { display: flex; flex-direction: column; gap: 2px; }

.kviz-board-stats b {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.kviz-board-stats span {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --- the board --- */

.kviz-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }

.kviz-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 0.92rem;
}
.kviz-row:nth-child(odd) { background: var(--surface); }

/* The reader own row, so they can find themselves without reading the list. */
.kviz-row.mine {
    background: color-mix(in srgb, var(--orange) 14%, var(--surface));
    box-shadow: inset 2px 0 0 var(--orange);
}

.kviz-rank {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.kviz-who { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kviz-marks { font-size: 0.7rem; letter-spacing: 1px; }

.kviz-pts {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* --- per-question bars --- */

.kviz-bars { display: flex; gap: 8px; align-items: flex-end; }

.kviz-bar {
    position: relative;
    flex: 1;
    height: 136px;
    background: var(--surface);
    border-radius: 8px;
}

/* The fill grows only in the room between the question number (bottom) and the percentage
   (top); as a share of the whole bar it ran over the figure above it at high scores. */
.kviz-bar-fill {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 27px;
    height: calc((100% - 63px) * var(--p, 0));
    min-height: 3px;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--peach), var(--orange));
}

.kviz-bar-pct {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.kviz-bar-pct i { font-style: normal; font-size: 0.62rem; color: var(--muted); }

.kviz-bar-n {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.72rem;
    color: var(--muted);
}

/* --- signing the board --- */

.quiz-sign { display: flex; gap: 8px; width: 100%; max-width: 340px; }

.quiz-name {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 11px 14px;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
}
.quiz-name::placeholder { color: var(--muted); }
.quiz-name:focus { border-color: var(--orange); outline: none; }

/* The way out of the popup and into the page that has the board and the real quizzes. */
.quiz-more {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: none;
}
.quiz-more:hover { color: var(--orange); }

/* --- the week of real pub quizzes --- */

.kviz-week { margin-top: 10px; }

.kviz-days {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.kviz-day {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
}

/* The night the city actually quizzes gets the weight. On this data that is Monday, by a mile. */
.kviz-day.big {
    border-color: color-mix(in srgb, var(--orange) 45%, transparent);
    grid-column: span 2;
}

.kviz-day-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.kviz-day-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--text);
    text-transform: capitalize;
}

.kviz-day-date { font-size: 0.82rem; color: var(--muted); }

.kviz-day-n {
    margin-left: auto;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--orange);
}

.kviz-quizzes { list-style: none; display: flex; flex-direction: column; gap: 1px; }

.kviz-quizzes a {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 4px 10px;
    padding: 8px 10px;
    border-radius: 9px;
    text-decoration: none;
    color: inherit;
}
.kviz-quizzes a:hover { background: var(--surface); }

.kviz-time {
    grid-row: span 2;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--orange);
    font-variant-numeric: tabular-nums;
}

.kviz-name-t { color: var(--text); font-weight: 500; font-size: 0.94rem; }
.kviz-venue { color: var(--muted); font-size: 0.82rem; }

.kviz-outro { margin-top: 20px; color: var(--muted); font-size: 0.9rem; }
.kviz-outro a { color: var(--orange); text-decoration: none; font-weight: 500; }
.kviz-outro a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .kviz-main { grid-template-columns: minmax(0, 1fr); }
    .kviz-day.big { grid-column: span 1; }
}

@media (max-width: 640px) {
    .kviz-page { padding: 110px 18px 90px; }
    .kviz-card { padding: 18px 18px; }
    .kviz-play .quiz-question { font-size: 1.2rem; }
    .kviz-bars { gap: 5px; }
    .kviz-bar { height: 124px; }
}

/* --- Research package additions --------------------------------------------
   Activities under the header, the research label, the full reading list, and the
   read-only research verdict in the admin. */
.place-activities { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.place-activities .place-chip { cursor: default; }
.place-research-label { margin: -4px 0 12px; font-size: 0.85rem; }
.place-research { margin: 14px 0; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 12px; }
.place-research p { margin: 4px 0; }
.place-sport-offer { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; }
.place-sport-offer span { font-size: 0.85rem; }

/* --- Home page led by content ------------------------------------------------------------
   Two ways in from the hero, real happenings on its right, then places by intent, the quiz
   week and the guides — each a tighter section than the old marketing blocks. */
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: -12px 0 0; }
/* How full the waiting list is, beside the two buttons: a link down to the form, styled as a chip
   so it does not read as a third button. */
.lp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--orange) 40%, var(--border));
    background: color-mix(in srgb, var(--orange) 10%, transparent);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
}
.lp-hero-badge:hover { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 18%, transparent); }
.lp-hero .lp-right.lp-right-live { height: auto; }
.lp-section.lp-tight { padding-top: 64px; padding-bottom: 64px; }
.lp-soon-form { max-width: 520px; margin-top: 40px; }
.lp-soon-form .lp-p { margin-bottom: 18px; }

.home-next { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; }
.home-next-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); font-weight: 500; }
.home-next-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 12px; text-decoration: none; color: inherit; transition: transform 0.2s, border-color 0.2s; }
.home-next-card:hover { transform: translateY(-2px); border-color: var(--orange); }
.home-next-cover { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface); font-size: 1.8rem; }
.home-next-cover img { width: 100%; height: 100%; object-fit: cover; }
.home-next-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-next-when { font-size: 0.76rem; color: var(--orange); font-weight: 600; }
.home-next-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-next-venue { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.home-places-head .lp-p { margin-bottom: 32px; }
.home-places-grid { margin-bottom: 32px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .home-places-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .home-places-grid { grid-template-columns: minmax(0, 1fr); } }

.home-actions { display: flex; flex-wrap: wrap; gap: 12px; }



/* --- Weekend articles ---------------------------------------------------------------------
   The list reads as a stack of dated entries rather than a grid of cards: there is one a week,
   and the date is what a reader looks for first. */
.weekend-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.weekend-card { display: block; padding: 20px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--border); text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s; }
.weekend-card:hover { border-color: var(--orange); transform: translateY(-2px); }
.weekend-card-date { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); font-weight: 600; }
.weekend-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: var(--text); margin: 6px 0 0; }
.weekend-card-lead { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 8px 0 0; }
.guide-body .weekend-meta { color: var(--orange); font-weight: 600; font-size: 0.88rem; margin: -6px 0 10px; }
.guide-body h3 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; margin: 28px 0 6px; }
.guide-body h3 a { color: var(--text); text-decoration: none; border-bottom: 2px solid transparent; }
.guide-body h3 a:hover { border-bottom-color: var(--orange); }
.guide-body .weekend-photo { margin: 10px 0 12px; }
.guide-body .weekend-photo img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 16px; display: block; }
.guide-body .weekend-source { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.guide-body .weekend-photo-empty a { display: flex; align-items: center; justify-content: center; height: 180px; border-radius: 16px; background: linear-gradient(135deg, var(--surface), var(--card)); border: 1px solid var(--border); text-decoration: none; }
.guide-body .weekend-photo-empty span { font-size: 3rem; line-height: 1; }

/* --- "Add to calendar" on a happening's page --------------------------------------------- */
.calendar-menu { position: relative; display: inline-block; }
.calendar-menu > summary { list-style: none; cursor: pointer; }
.calendar-menu > summary::-webkit-details-marker { display: none; }
.calendar-menu-list {
    position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 230px;
    display: flex; flex-direction: column; padding: 6px;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.calendar-menu-list a { padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: .92rem; }
.calendar-menu-list a:hover { background: var(--surface); color: var(--orange); }

/* Admin: photos of places waiting for review */
.place-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.place-image-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.place-image-card img { width: 100%; aspect-ratio: 20 / 9; object-fit: cover; background: var(--bg); }
.place-image-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; }
.place-image-body a { word-break: break-all; }
.place-images-shown { margin-top: 12px; }

/* The right answers, under the score once the quiz is done */
.quiz-review { width: 100%; margin: 16px 0 6px; text-align: left; }
.quiz-review summary { cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--text); text-align: center; }
.quiz-review ol { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.quiz-review li { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.quiz-review p { margin: 0; }
.quiz-review-q { font-size: .88rem; color: var(--muted); line-height: 1.35; }
.quiz-review-mark { font-weight: 800; margin-right: 2px; }
.quiz-review li.right .quiz-review-mark { color: var(--green); }
.quiz-review li.wrong .quiz-review-mark { color: var(--orange); }
.quiz-review-a { margin-top: 4px !important; font-weight: 700; color: var(--text); }
.quiz-review-mine { margin-top: 2px !important; font-size: .82rem; color: var(--muted); text-decoration: line-through; }
.quiz-review-why { margin-top: 4px !important; font-size: .82rem; color: var(--muted); line-height: 1.4; }

/* Venue pages: /lokacije and /lokacija/{slug} */
.venue-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.venue-item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--text); transition: border-color .15s; }
.venue-item:hover { border-color: var(--orange); }
.venue-name { font-family: var(--font-display); font-weight: 700; }
.venue-meta { font-size: .85rem; color: var(--muted); }
.venue-place-link { margin-top: 10px; font-weight: 600; }
.venue-place-link a { color: var(--orange); text-decoration: none; }
.venue-place-link a:hover { text-decoration: underline; }
.venue-map { margin: 0 0 20px; border-radius: 14px; overflow: hidden; }
.hd-venue-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--orange) 60%, transparent); text-underline-offset: 3px; }
.hd-venue-link:hover { color: var(--orange); }

/* The week of quizzes above the cards on /kvizovi/zagreb */
.landing-week { margin: 0 0 32px; }

/* The programme sits between the profile and the sources; give it room on both sides */
.place-programme { margin: 28px 0 36px; }
.place-programme .hd-more { margin-bottom: 0; }

/* Admin → Duplikati: one group of copies per card; the row to keep wears a green badge, the rest
   a delete button. */
.dup-group { margin-bottom: 14px; }
.dup-group .admin-row { border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }
.dup-group .admin-row:last-child { border-bottom: 0; }
.keep-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0F2A1A;
    background: #7BE0A8;
    vertical-align: middle;
}
.dup-group .admin-row.row-keep { background: rgba(123, 224, 168, 0.06); }