/* Your original CSS exactly as provided */
@font-face {
    font-family: 'Arial Black';
    src: url('../fonts/Arial-Black.woff2') format('woff2'),
    url('../fonts/Arial-Black.woff') format('woff'),
    url('../fonts/arial-black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}


html, body {
    height: 100%;
    /* Kills the sideways rubber-band bounce on touch — nothing here is
       meant to scroll horizontally at the page level (the deliberate
       horizontal carousels, e.g. .feed-cards-wrapper/.uutisvirta, each set
       their own overflow-x: auto and keep scrolling fine; this only clips
       anything that accidentally runs a hair wider than the viewport). */
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: 'Arial Black', Arial, sans-serif;
    letter-spacing: 0;
    color: #000;
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    background-image: url("../img/1.jpeg");
    background-size: cover;        /* fills the whole screen */
    background-repeat: no-repeat;  /* no tiling */
    background-position: center;   /* centers the image */
    background-attachment: fixed;  /* optional: "parallax"-like effect */
}
header {
    padding: 0;
    text-align: center;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1rem;
    letter-spacing: 0;
}
.content {
    color: white;
    margin: 0;
    letter-spacing: -0.18rem;
    flex: 1;
    padding-bottom: 56px;
}

/* The negative letter-spacing above is tuned for the custom 'Arial Black'
   webfont (see @font-face). Text rendered in plain Arial — e.g. the search
   empty-state messages ("Ei julkisia projekteja", "Ei lokaatioita", …) — must
   reset to normal spacing, otherwise the glyphs render cramped/overlapping. */
[style*="font-family:Arial"] {
    letter-spacing: normal;
}


.nav-link {
    position: relative;
    font-size: 1.2rem;
    font-weight: bold;
    color: black;
    background-color: white;
    text-decoration: none;
    padding: 0.5rem 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
/* top and bottom lines, slightly inset */
.nav-link::before,
.nav-link::after {
    content: "";
    position: absolute;
    left: 10%;   /* inset from edges */
    width: 80%;  /* shorter than full width */
    height: 1px; /* thinner lines */
    background: white;
}

.nav-link::before { top: 0; }
.nav-link::after { bottom: 0; }

/* spacing between links */
.nav-link + .nav-link {
    margin-top: 0.6rem;
}



.topbar-pic {
    max-width: 100vw;
    max-height: 50vh;
    width: auto;
    height: auto;
    cursor: pointer;
}


.profile-container {
    text-align: center;
    margin:0;
    letter-spacing: -0.18rem;

}
.profile-container h1 {
    color: white;
    margin: 0;
    font-size: 2.5rem;
    margin-top: -11rem;
}
.profile-container h2 {
    margin:0;
    font-weight: normal;
    color: #efc239;
    font-size: 1rem;
    letter-spacing: -0.05rem;
}
.profile-container h3 {
    margin: 1.5rem 0;
    font-weight: normal;
    color: white;
    font-size: 0.7rem;
    letter-spacing: 0;
}
.menu {
    margin-top: 1.6rem;
    font-size: 1rem;
}
.menu span {
    display: block;
    color: white;
    font-family: Arial, sans-serif;
    font-weight: 700;
    padding: 0 1rem;
    letter-spacing: normal;
    font-size: 0.85rem;
    margin-left: 2rem;
    margin-bottom: 1.1rem;
}
.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 1.4rem;
    margin-bottom: 1.1rem;
}
.menu-header span {
    margin-bottom: 0;
}
.menu-arrow {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-item {
    display:block;
    margin-top: 1rem;
    background: transparent;       /* button itself is transparent */
    color: white;                  /* text color */
    border-top: 0.12rem solid white;   /* top border white */
    border-left: 0.12rem solid white;  /* left border white */
    border-bottom: 0.12rem solid transparent; /* bottom border invisible */
    border-right: 0.12rem solid transparent;  /* right border invisible */
    padding: 0.1rem 0.1rem;
    max-width:16rem;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    height:2rem;
}
.menu-item:hover { background: #f2f2f2; }
.menu-item i { font-size: 1.5rem; margin-right: 1rem; }
.menu-item span { font-size: 1.7rem; letter-spacing: -0.1rem;}
.feed.uutisvirta {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 0 1.2rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: transparent;
    /* no animation here */
}

.menu-input {
    display: block;
    margin-top: 0.55rem;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 0.1rem 1rem;
    max-width: 38rem;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    height: 2.3rem;
    font: inherit; /* make sure it matches text style */
    font-family: Helvetica, Arial, sans-serif;
    box-sizing: border-box;

}

/* Make inputs match exactly */
input.menu-input,
textarea.menu-input,
select.menu-input {
    -webkit-appearance: none; /* remove default input style on Safari */
    -moz-appearance: none;    /* remove default input style on Firefox */
    appearance: none;
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 0.1rem 1rem;
    max-width: 38rem;
    height: 2.3rem;
    cursor: text;
    margin: 0.55rem auto 0 auto;
    display: block;
    font: inherit;
    font-family: Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

input.menu-input::placeholder {
    color: rgba(255,255,255,0.8);
    font-size: 0.8rem;
    transform: translateY(0);
    transition: all 0.25s ease; /* smooth animation for both position & size */
    opacity: 1;
}

input.menu-input:focus::placeholder {
    color: #7e7e7e; /* optional accent color */
    transform: translateY(-0.9em); /* lift it upwards */
    font-size: 0.5rem; /* shrink it */
    opacity: 0.8; /* subtle fade */
}

.feed-card {
    border-radius: 12px;
    padding: 0;
    flex-shrink: 0;
    height: 5.3rem;
    width: 7.6rem;
    overflow: hidden;
}

.feed-card-poster {
    border-radius: 10px;
    padding: 0;
    flex-shrink: 0;
    margin-left:0.3rem;
    height: 11rem;
    width: 8rem;
    overflow: hidden;
}

.feed-card-wide {
    border-radius: 10px;
    padding: 0;
    flex-shrink: 0;
    margin-left:0.3rem;
    height: 7rem;
    width: 20rem;
    overflow: hidden;
}


.feed-card img, .feed-card-poster img, .feed-card-wide img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* <-- this is the magic */
}

/* Headshots are usually tall portraits cropped into a wide card — bias the
   crop toward the top so faces survive instead of landing on the chin/chest.
   No real face detection here, just a sane default for portrait photos. */
#userFeed .feed-card img,
.feed-card-profiili .feed-card-media img {
    /* The second selector is the one that matters now: Etusivu's block
       carousels render into lohko<N>Feed, not #userFeed, so the old rule
       never reached them and portraits were cropped through the forehead. */
    object-position: center 20%;
}

/* Movie poster feed ("Elokuvateatteri ensi-illat", reusing the poster reel
   data) uses a 2:3 portrait card instead of the standard wide one. The #id
   selector outranks the .feed-card class rules. */
#elokuvaEnsiiltaFeed .feed-card {
    width: 6.4rem;
    min-width: 6.4rem;
    height: 9.6rem;        /* 6.4rem × 3/2 = 9.6rem → 2:3 */
    aspect-ratio: 2 / 3;
}
/* Posters get a title + production company caption below the image, same as
   locations/profiles — the outer card must go back to auto height for that,
   overriding the fixed 2:3 height above (equal ID+class specificity, wins by
   source order). Only the inner media box keeps the 2:3 portrait shape. */
#elokuvaEnsiiltaFeed .feed-card-caption-below {
    height: auto;
    aspect-ratio: auto;
}
#elokuvaEnsiiltaFeed .feed-card-media {
    width: 6.4rem;
    height: 9.6rem;
}
#elokuvaEnsiiltaFeed .feed-card-caption {
    width: 6.4rem;
}


.feed-cards-wrapper {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.feed-card {
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 0;
    flex-shrink: 0;
    text-align:left;

}

/* Location cards ("Viikon lokaatiot") — Airbnb-style: image on top, plain
   caption text in normal flow underneath, no gradient scrim. */
.feed-card-caption-below {
    height: auto;
    box-shadow: none;
    /* The base .feed-card rule's overflow:hidden + border-radius:12px was
       sized for the old fixed 5.3rem image-only card; here the box grows
       taller to fit the caption below the image, so that same rounding
       clips into the caption text at the bottom corners. .feed-card-media
       already has its own border-radius for the photo, so the outer box
       doesn't need to clip anything. */
    overflow: visible;
    border-radius: 0;
}
.feed-card-media {
    position: relative;
    width: 7.6rem;
    height: 5.3rem;
    border-radius: 12px;
    overflow: hidden;
}
.feed-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Artikkeli card's "Lue juttu" label, centered over the top of the image
   (2026-09 feedback batch item #10). */
.feed-card-artikkeli-label {
    position: absolute;
    top: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Public like button + "who liked this" count, top-right of the card image. */
.feed-card-fav-wrap {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 3px;
}
.feed-card-fav {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.feed-card-fav svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
}
.feed-card-fav.active svg {
    fill: #ff4d67;
    stroke: #ff4d67;
}
.feed-card-fav-count {
    min-width: 15px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: normal;
    text-align: center;
    cursor: pointer;
}
.feed-card-fav-count:empty {
    display: none;
}

/* "Who liked this" bottom sheet */
/* "Tykänneet" used to be a full-width dark bottom sheet; per the 2026-09
   feedback batch's item #7, it's now a centered white card — same look as
   Etsi's .result-card, just as a standalone floating panel instead of one
   row in a results list — so it reads as a small popover, not a takeover. */
.likers-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
}
.likers-panel {
    width: 100%;
    max-width: 360px;
    max-height: 70vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.likers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #eceef2;
    flex-shrink: 0;
}
.likers-header span {
    color: #14161c;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1rem;
}
.likers-close {
    background: none;
    border: none;
    color: #8a8f9a;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}
.likers-list {
    overflow-y: auto;
    padding: 0.4rem 0;
}
.likers-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 1.1rem;
}
.likers-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eceef2;
    object-fit: cover;
    flex-shrink: 0;
}
.likers-name {
    color: #14161c;
    font-family: Arial, sans-serif;
    font-size: 0.85rem;
    letter-spacing: normal;
}
.likers-empty {
    color: #8a8f9a;
    font-family: Arial, sans-serif;
    letter-spacing: normal;
    text-align: center;
    padding: 2rem 1rem;
    font-size: 0.85rem;
}
.feed-card-caption {
    width: 7.6rem;
    padding: 0.45rem 0.1rem 0;
}
.feed-card-caption-name {
    color: #fff;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 0.74rem;
    letter-spacing: -0.02em;
    line-height: 1.22;
}
.feed-card-caption-cat {
    color: rgba(255, 255, 255, 0.72);
    font-family: Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: normal;
    margin-top: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Single gradient scrim across the bottom of the card, behind the labels,
   so multiple stacked spans don't each draw their own background. */
.feed-card:not(.feed-card-all):not(.feed-card-promo):not(.feed-card-caption-below)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    pointer-events: none;
    border-radius: 0 0 10px 10px;

    background: linear-gradient(to top,
            rgba(0,0,0,0.7) 0%,
            rgba(0,0,0,0.3) 50%,
            rgba(0,0,0,0) 100%);
}

.feed-card span {
    position: absolute;
    left: 12px;
    right: 14px;
    bottom: -20px;
    z-index: 1;
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 1.2;

    /* Soft shadow instead of a hard outline */
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Pause animation on hover */
.feed.uutisvirta:hover .feed-cards-wrapper,
.feed.uutisvirta:focus .feed-cards-wrapper,
.feed.uutisvirta.scrolling .feed-cards-wrapper {
    animation-play-state: paused;
}


.profile-container {
    position: relative;
    display: flex;
    justify-content: center; /* center horizontally */
    align-items: center;     /* center vertically if needed */
}


.profile-container  .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: white;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    opacity: 0.85;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.profile-container .left-btn {
    left: 0.75rem;
}

.profile-container .right-btn {
    right: 0.75rem;
}

.profile-container .nav-btn:hover {
    background-color: rgba(0,0,0,0.6);
    opacity: 1;
}

.notification-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
}
.notification-icon .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: red;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    pointer-events: none;
}
/* Gallery modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
}
.modal-content {
    background: #fff;
    margin: 5% auto;
    padding: 1rem;
    border-radius: 10px;
    max-width: 500px;
    position: relative;
}
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

}
.gallery img, .gallery .add-photo {
    width: 100px; height: 100px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}
/* Close button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.close-btn:hover {
    background: #cc0000;
}
/* Contacts modal */
.contacts-list {
    max-height: 300px;
    overflow-y: auto;
}
.contact-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
}
.contact-item img {
    width: 40px; height: 40px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(8, 11, 28);
    padding: 0 40px;
    z-index: 10000;
    height: 76px;
}

.footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s ease;
    touch-action: manipulation;
}

.footer-item.active {
    opacity: 1;
}

.footer-item:hover {
    transform: translateY(-2px);
}

.footer p {
    font-size: 1rem;
    letter-spacing: 0;
    color: white;
    margin: 0;
}

.footer-icon {
    width: 24px;
    height: 24px;
    fill: white;
}




:root{
    --radio-size: 1.1rem;
    --radio-gap: 0.75rem;
    --label-font: 1rem;
    --accent: #efc239; /* change to your accent */
    --text-color: #fff;
    --muted: rgba(255,255,255,0.75);

    /* ── New visual system (2026 redesign) — rolled out page by page ──
       Do not remove the tokens above; older views still depend on them
       until they get redesigned too. */
    --st-bg: #05070d;
    --st-bg-soft: radial-gradient(ellipse 120% 70% at 50% 0%, #171d31 0%, #05070d 55%, #030409 100%);
    --st-surface: #141a2b;
    --st-surface-2: #1c2338;
    --st-accent: #5b7fe0;
    --st-accent-strong: #4a67c2;
    --st-text: #ffffff;
    --st-text-muted: #8891a8;
    --st-radius-lg: 20px;
    --st-radius-pill: 999px;
    --st-font-display: 'Arial Black', Arial, sans-serif;
    --st-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

.radio-menu {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    max-width: 24rem;
}

/* hide real radio but keep it accessible */
.radio-menu input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* label layout */
.radio-menu label {
    display: inline-flex;
    align-items: center;
    gap: var(--radio-gap);
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    user-select: none;
    border-radius: 0.375rem;
    transition: background 0.12s ease, color 0.12s ease;
    color: var(--text-color);
    font-size: var(--label-font);
}

/* hover / focus look */
.radio-menu label:hover {
    background: rgba(255,255,255,0.04);
}

/* custom circle */
.radio-circle {
    width: var(--radio-size);
    height: var(--radio-size);
    min-width: var(--radio-size);
    border-radius: 50%;
    border: 0.12rem solid var(--text-color);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.12s ease, background 0.12s ease;
}

/* inner dot that appears when checked */
.radio-circle::after {
    content: "";
    width: calc(var(--radio-size) * 0.55);
    height: calc(var(--radio-size) * 0.55);
    border-radius: 50%;
    background: transparent;
    transform: scale(0);
    transition: transform 0.14s cubic-bezier(.2,.9,.2,1);
    will-change: transform;
}

.radio-menu {
    margin-top:3rem;
}

/* checked state: scale the inner dot and optionally change border/background */
.radio-menu input[type="radio"]:checked + label .radio-circle {
    background: transparent;
}
.radio-menu input[type="radio"]:checked + label .radio-circle::after {
    background: white;      /* white filled circle */
    transform: scale(1.6);
}

/* keyboard focus ring on label when the radio has focus */
.radio-menu input[type="radio"]:focus + label {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.47);
    outline: none;
}

/* text styling */
.radio-label {
    color: var(--text-color);
    letter-spacing: -0.01rem;
}

/* optional: muted color for unselected labels */
.radio-menu input[type="radio"]:not(:checked) + label .radio-label {
    color: var(--muted);
}
.radio-menu input[type="radio"]:checked + label .radio-label {
    color: var(--text-color);
}


select.menu-select {
    display: block;
    width: 88%;
    max-width: 38rem;
    box-sizing: border-box;
    margin: 0.55rem auto 0;
    padding: 0.1rem 1rem;
    color: white;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
    cursor: pointer;
    height: 2.3rem;

    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 0;

    /* remove ugly native arrow (for Chrome/Edge/Safari) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* optional: custom arrow using background */
    background-image: linear-gradient(45deg, transparent 50%, white 50%),
    linear-gradient(135deg, white 50%, transparent 50%);
    background-position: calc(100% - 1.2rem) center, calc(100% - 1rem) center;
    background-size: 0.4rem 0.4rem;
    background-repeat: no-repeat;
}

select.menu-select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
}

select.menu-select option {
    background-color: #111; /* dropdown background */
    color: white;
    border: none;
}



.panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease, opacity 0.5s ease;
    will-change: transform, opacity;
}

/* Active panel */
.panel--left {
    transform: translateX(0);
    opacity: 1;
    z-index: 5;
}

/* Off-screen to the right */
.panel--right {
    transform: translateX(100%);
    opacity: 0;
    z-index: 4;
}

/* Moving out to the left */
.slide-out-left {
    transform: translateX(-100%);
    opacity: 0;
    z-index: 3;
}

/* Moving in from the right */
.slide-in {
    transform: translateX(0);
    opacity: 1;
    z-index: 6;
}

.forward-btn {
    position: fixed;
    bottom: 10rem;
    right: 1rem;
    color: white;
    font-size: 3rem;
    text-decoration: none;
    z-index: 9999; /* <— Add this line */
    pointer-events: auto;
}


/* poster grid */
.poster-grid{display:flex;gap:1rem;flex-wrap:wrap;margin-top:0.5rem;}
.poster-upload{
    width:100px;height:140px;border:2px dashed rgba(255,255,255,0.18);
    display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--fg);
    cursor:pointer;border-radius:6px;position:relative;overflow:hidden;background:transparent;
}
.poster-grid img{width:100px;height:140px;object-fit:cover;border-radius:6px;display:block;}
.poster-item{position:relative;}


.newproject {
    width: 80px;                /* change to whatever diameter you want */
    height: 80px;               /* same as width */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;     /* visible border, center stays transparent */
    border-radius: 50%;
    background: transparent;
    box-sizing: border-box;
}


.newproject2 {
    width: 20px;                /* change to whatever diameter you want */
    height: 20px;               /* same as width */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;     /* visible border, center stays transparent */
    border-radius: 50%;
    background: transparent;
    box-sizing: border-box;
    font-size: 1rem;
    text-align:center;
}


.newprojectfooter {
    position: absolute;       /* ← REQUIRED for bottom to work */
    bottom: 8rem;             /* now it actually applies */
    left: 50%;
    transform: translateX(-50%);  /* centers it horizontally */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: transparent;
    color: white;
    font-size: 4rem;
}

.arial {
    font-family: 'Arial Black', Arial, sans-serif !important;
    letter-spacing:0 !important;
    font-weight:normal !important;
}

/* ── Create User Page ───────────────────────────────────────────────── */
body.page-createuser {
    font-family: Helvetica, Arial, sans-serif;
    background-color: #05070d;
    background-image: none;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}
/* Luo tili has many stacked rows — the photo carousel behind them (see
   .ws-bg-slides below) reads as clutter with that much on screen, unlike the
   welcome screen's single centered block. Plain dark background instead
   (body already sets background-color: #05070d above). */
body.page-createuser .ws-bg-slides,
body.page-createuser .ws-bg-scrim {
    display: none;
}
.page-createuser .container {
    margin: 2rem auto;
}
#dobDay, #dobMonth, #dobYear {
    min-width: 0;
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
    padding: 0.1rem 1.05rem 0.1rem 0.4rem !important;
    background-position: calc(100% - 0.55rem) center, calc(100% - 0.4rem) center;
    background-size: 0.32rem 0.32rem;
}
.page-createuser input[name="email"] {
    margin-top: 1.8rem !important;
}
.page-createuser header {
    color: #fff;
    padding: 0 1rem 1.6rem;
    text-align: center;
    margin-top: 1.4rem;
}
.page-createuser .container {
    margin: 1rem auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.page-createuser h1 {
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}
.page-createuser option {
    color: black;
    background: transparent;
}
.page-createuser select,
.page-createuser input {
    width: 88%;
    max-width: 38rem !important;
    box-sizing: border-box;
    margin: 0.55rem auto 0 !important;
}
.page-createuser input[type="checkbox"] {
    width: auto !important;
    max-width: none !important;
    margin: 0.15rem 0 0 !important;
    flex-shrink: 0;
}

/* ── Login Page — redesigned (2026), see --st-* tokens above ──────────── */
body.page-login {
    height: 100vh;
    height: 100dvh; /* mobile Safari's 100vh includes the address bar's
                       collapsed state, so it can be taller than what's
                       actually visible — 100dvh tracks the real viewport
                       and is what stops the page from "rocking". */
    overflow: hidden;
    overscroll-behavior: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--st-text);
    background: var(--st-bg-soft);
    background-color: var(--st-bg);
}
#title {
    font-family: var(--st-font-display);
    font-size: 3rem;
    letter-spacing: -0.15rem;
    margin-bottom: 0.4rem;
}
#loginlable {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--st-text-muted);
    margin-bottom: 1.6rem;
}
#titlediv {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    width: 88%;
    max-width: 38rem;
}
#loginForm {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
}
.trinput {
    position: relative;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
    font-weight: 400;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
    text-decoration: none;
    padding: 0 1.1rem;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    height: 2.3rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s;
}
.trinput:focus {
    border-color: var(--st-accent);
}
.trinput::placeholder {
    font-size: 0.9rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.55);
    text-align: left;
    opacity: 1;
}
#createaccountbutton.nav-link {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1e2b;
    background: #fff;
    border-radius: var(--st-radius-pill);
    padding: 0.75rem 2rem;
    margin-top: 0.6rem;
    box-shadow: none;
    width: auto;
    align-self: center;
}
#createaccountbutton.nav-link::before,
#createaccountbutton.nav-link::after {
    display: none;
}
#social-login {
    display: flex;
    flex-direction: row;
    gap: 0.7rem;
    margin-top: 0.3rem;
    margin-bottom: 2.4rem;
}
.social-icon {
    width: 42px;
    height: 42px;
    border: none;
    background: var(--st-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 12px;
}
.social-icon svg {
    width: 70%;
    height: 70%;
}
.social-icon.instagram {
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}
.social-icon.facebook { background: #1877f2; }
.social-icon.google   { background: white; }

/* ── Welcome / landing screen (Vinted-inspired) ────────────────────────── */
#welcomeScreen {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}
body.page-login .ws-bg-slides,
body.page-login .ws-bg-scrim {
    position: fixed;
}
.ws-bg-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.ws-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.4s ease;
    filter: brightness(0.5) saturate(0.9);
}
.ws-bg-slide.active { opacity: 1; }
.ws-bg-slide-1 { background-image: url('../img/landing/role_laulaja.jpg'); }
.ws-bg-slide-2 { background-image: url('../img/landing/user_tanssija.jpg'); }
.ws-bg-slide-3 { background-image: url('../img/landing/user_valokuvaaja.jpg'); }
.ws-bg-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(3, 4, 9, 0.35) 0%, rgba(3, 4, 9, 0.15) 30%, rgba(3, 4, 9, 0.45) 50%, rgba(3, 4, 9, 0.15) 70%, rgba(3, 4, 9, 0.4) 100%);
    pointer-events: none;
}

#wsFooter {
    position: absolute;
    bottom: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-family: Arial, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.4);
}
.ws-tag {
    position: absolute;
    font-family: var(--st-font-body);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--st-text-muted);
    background: rgba(5, 7, 13, 0.72);
    padding: 0.22rem 0.55rem;
    border-radius: var(--st-radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    pointer-events: none;
}
.ws-tag-users     { top: -2px; left: 2px; }
.ws-tag-locations { bottom: -2px; right: 2px; }
.ws-tag-projects  { top: -2px; right: 2px; }
.ws-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 86%;
    max-width: 320px;
}
#wsTitle {
    font-family: var(--st-font-display);
    font-size: 4.2rem;
    letter-spacing: -0.2rem;
    color: var(--st-text);
    margin-top: 0.6rem;
}
#wsSubtitle {
    font-family: Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    max-width: 220px;
    line-height: 1.7;
    margin-top: 0.15rem;
}
.ws-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    max-width: 260px;
    margin-top: 1.6rem;
}
.ws-btn {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    padding: 0.85rem 1.5rem;
    border-radius: 10px;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--st-text);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
#wsLangBtn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    position: fixed;
    top: 1.2rem;
    left: 1.2rem;
    padding: 0.4rem 0.7rem 0.4rem 0.55rem;
    border-radius: var(--st-radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--st-text);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 5;
}
#wsLangBtn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
#wsLangChevron {
    width: 11px !important;
    height: 11px !important;
    margin-left: 0.1rem;
    transition: transform 0.15s ease;
}
#wsLangBtn[aria-expanded="true"] #wsLangChevron { transform: rotate(180deg); }
.ws-lang-menu {
    display: none;
    position: fixed;
    top: 3.6rem;
    left: 1.2rem;
    min-width: 8.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(10, 12, 20, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    z-index: 6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.ws-lang-menu.open { display: block; }
.ws-lang-option {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.9rem;
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--st-text);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.ws-lang-option:first-child { border-top: none; }
.ws-lang-option:hover,
.ws-lang-option.active { background: rgba(255, 255, 255, 0.1); }
.ws-lang-option.active { font-weight: 700; }
.ws-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 1.2rem;
    left: 1.2rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: var(--st-text);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
}
#wsBackBtn { display: none; }

/* Etusivu alert banner ("häly") — dark panel with gold accent, matching theme */
.haly-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #141a2e;
    border-left: 4px solid #efc239;
    color: #f4f4f5;
    padding: 0.75rem 1rem;
    font-family: Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
}
.haly-banner-text { flex: 1; letter-spacing: normal; }
.haly-banner-close {
    background: none;
    border: none;
    color: #efc239;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    flex-shrink: 0;
}

/* Toggle row (label + iOS-style switch). Shared by the signup form (createuser.html,
   which only loads this stylesheet) and the SPA, where spa.css mirrors these rules.
   Keeps the label white and on the same line as the switch. */
.np-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    cursor: pointer;
}
.np-toggle-label {
    color: rgba(255,255,255,0.85);
    font-size: 0.88rem;
}
.np-toggle-wrap {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}
.np-toggle-wrap input { opacity: 0; width: 0; height: 0; }
.np-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    border-radius: 24px;
    transition: background 0.2s;
}
.np-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}
.np-toggle-wrap input:checked + .np-toggle-slider { background: #4a9eff; }
.np-toggle-wrap input:checked + .np-toggle-slider::before { transform: translateX(18px); }

/* Uuden salasanan ohje ja näytä/piilota-nappi (js/salasana.js). Nappi on
   tekstilinkki kentän alla eikä ikoni kentän sisällä: kentillä on kolmessa
   kohdassa eri tyylit, eikä kenttää kääritä. */
.salasana-ohje {
    max-width: 19rem;
    margin: 0.45rem auto 0;
    /* Ilman omaa fonttia tämä peri rungon Arial Blackin, jolloin
       salasanaohje oli lihavampi kuin kenttä jota se neuvoo. Arial Black
       kuuluu vain sivun yläotsikkoon. */
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 0.78rem;
    line-height: 1.4;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
}
.salasana-naytto {
    display: block;
    margin: 0.45rem auto 0;
    padding: 0.2rem 0.4rem;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.8);
    font: inherit;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
}
.salasana-naytto:hover { color: #fff; }
/* Kirjautumis- ja rekisteröitymissivut ovat tummia valkoisella tekstillä,
   mutta runko on musta, joten väri annetaan suoraan. Sovelluksen
   lomakesivuilla (.np-view-light) teksti seuraa sivun omaa väriä, jonka
   teemanvaihto kääntää. */
.np-view-light .salasana-ohje { color: inherit; opacity: 0.7; }
.np-view-light .salasana-naytto { color: inherit; opacity: 0.8; }
.np-view-light .salasana-naytto:hover { opacity: 1; }