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

:root {
    --color-bg: #ffffff;
    --color-text: #111111;
    --color-text-light: #555555;
    --color-link: #111111;
    --color-link-hover: #000000;
    --color-border: #d0d0d0;
    --color-section-alt: #f5f5f5;
    --color-accent: #111111;
    --color-accent-hover: #333333;
    /* The interface is monochrome by design, so hue is reserved for state:
       if something is coloured, it is telling you what happened. Keeping the
       set this small is what lets a green badge read as "accepted" at a
       glance instead of as decoration. */
    --color-success: #15653c;
    --color-success-bg: #e3f6ea;
    --color-success-border: #a7dcbc;
    --color-error: #b3261e;
    --color-error-bg: #fdecea;
    --color-error-border: #f0b4b0;
    --color-warning: #8a5300;
    --color-warning-bg: #fdf3e0;
    --color-warning-border: #f0d19b;
    --color-socialines: #333333;
    --color-cas: #555555;
    /* The one brand yellow. It marks the thing to act on — the hero button, a
       day that has activity — and there is a single value so those read as the
       same idea rather than two near-misses. */
    --color-hero-accent: #fbbf24;
    --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --max-width: 1100px;
    --header-height: 64px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
}

/* ── Test banner ────────────────────────────────────────── */

.test-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #111111;
    color: #ffcc00;
    padding: 7px 16px;
    position: relative;
    z-index: 200;
}

.test-banner svg {
    flex-shrink: 0;
}

.test-banner span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

html {
    scroll-behavior: smooth;
}

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

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color 0.15s;
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* Links sitting inside a sentence are the same colour as the sentence, so
   without an underline there is nothing to tell people they can be clicked.
   Navigation, cards and buttons opt out below because their container is
   already the affordance. */
p a,
li a,
.form-hint a,
.checkbox-label a,
.auth-footer a,
.auth-forgot a,
.footer-legal a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(17, 17, 17, 0.35);
}

p a:hover,
li a:hover,
.form-hint a:hover,
.checkbox-label a:hover,
.auth-footer a:hover,
.auth-forgot a:hover,
.footer-legal a:hover {
    text-decoration-color: currentColor;
}

/* Whole-card and chrome links keep a clean surface. */
p a.btn-primary-lg,
p a.btn-secondary-lg,
p a.btn-sm,
li a.btn-sm {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Keyboard and switch users need to see where they are. Several controls in
   this codebase are inline-styled buttons with no focus treatment at all, so
   the ring is set once, globally, rather than per component. */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* On dark or photographic surfaces a black ring is invisible. */
.landing-hero :focus-visible,
.test-banner :focus-visible,
.site-footer :focus-visible {
    outline-color: #fff;
}

/* ── Header ─────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    height: var(--header-height);
    transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

.site-header.header-scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
}

.site-logo:hover {
    text-decoration: none;
    color: var(--color-text);
}

.site-logo .logo-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.site-nav ul {
    list-style: none;
    display: flex;
    gap: 2px;
}

.site-nav ul a {
    display: block;
    padding: 8px 14px;
    color: var(--color-text-light);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.site-nav ul a:hover {
    background: var(--color-section-alt);
    color: var(--color-text);
    text-decoration: none;
}

.site-nav ul a.active {
    color: var(--color-text);
    font-weight: 700;
    border-bottom: 2px solid var(--color-text);
    border-radius: 0;
}

/* Nav auth section */
.nav-auth {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--color-border);
}

.nav-auth-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-light);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.nav-auth-link:hover {
    background: var(--color-section-alt);
    color: var(--color-text);
    text-decoration: none;
}

.nav-auth-link.active {
    color: var(--color-accent);
    font-weight: 600;
}

/* Signing out is a real destination, not a disabled control; at 70% opacity on
   top of an already-light grey it read as unavailable. */
.nav-logout {
    font-size: 13px;
    color: var(--color-text-light);
}

.nav-auth-btn {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-family);
    color: #fff;
    background: var(--color-accent);
    padding: 7px 18px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.15s;
    letter-spacing: 0.01em;
}

.nav-auth-btn:hover {
    background: var(--color-accent-hover);
    color: #fff;
    text-decoration: none;
}

/* Mobile menu */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: transform 0.2s, opacity 0.2s;
}

.mobile-menu-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.open span:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Dims the page behind the open mobile menu so the panel has an edge and a
   tap anywhere outside it gets you back out. */
.nav-scrim {
    display: none;
}

/* ── Main content ──────────────────────────────────────── */

.site-main {
    min-height: calc(100vh - var(--header-height) - 80px);
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Section layout ─────────────────────────────────────── */

.section {
    padding: 48px 0;
}

.section-alt {
    background: var(--color-section-alt);
}

.section-title {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 16px;
}

.section-title.centered {
    text-align: center;
}

.section-subtitle {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.6;
    max-width: 520px;
}

.section-cta {
    text-align: center;
    margin-top: 32px;
}

/* ── Landing page hero ─────────────────────────────────── */

/* The hero photo changes, so the scrim cannot be tuned to one image. It is
   weighted towards the left, where the words are, and is dark enough that the
   lead paragraph clears contrast even over a bright subject. */
.landing-hero {
    background: linear-gradient(100deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.62) 45%, rgba(0,0,0,0.38) 100%),
                url('../img/hero-bg.jpg') center/cover no-repeat;
    color: #fff;
    padding: 80px 0 64px;
}

.landing-hero-has-video {
    position: relative;
    overflow: hidden;
    background: #111;
}

.landing-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.landing-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.62) 45%, rgba(0,0,0,0.38) 100%);
    z-index: 1;
}

.landing-hero-has-video .container {
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 640px;
}

.hero-content h1 {
    font-size: 52px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-content h1 .accent {
    color: #ffffff;
}

.hero-lead {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.94);
}

.hero-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--color-hero-accent);
    color: #111111;
    font-weight: 700;
    font-size: 16px;
    font-family: var(--font-family);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.btn-hero-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(251,191,36,0.4);
    text-decoration: none;
    color: #111111;
    background: #f59e0b;
}

/* At 15% white over an unpredictable photo this button used to disappear into
   the image and read as disabled. A blurred, more opaque pane keeps it legible
   on any frame while still deferring to the primary action. */
.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    font-family: var(--font-family);
    border-radius: var(--radius-md);
    border: 1.5px solid rgba(255,255,255,0.65);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    letter-spacing: 0.01em;
}

.btn-hero-secondary:hover {
    background: rgba(255,255,255,0.28);
    border-color: #fff;
    text-decoration: none;
    color: #fff;
}

.hero-stats {
    display: flex;
    gap: 40px;
}

.hero-stats .stat strong {
    display: block;
    font-size: 32px;
    font-weight: 900;
}

.hero-stats .stat span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

/* ── How it works ──────────────────────────────────────── */

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}

/* SHELVED: Tempo taškai. Preserve for re-enable; see docs/SHELVED-TEMPO-POINTS.md. */
.tempo-points-cta {
    margin-top: 40px;
}

.tempo-points-cta-text {
    font-size: 17px;
    font-weight: 700;
    /* Larger gap between text and button (Feedback #112) */
    margin-bottom: 28px;
}

/* Side-by-side organization / company CTA cards (Feedback #110) */
.cta-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-top: 32px;
}

.cta-duo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-section-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 32px 24px;
}

.cta-duo-card .cta-content {
    text-align: center;
    margin: 0 auto;
}

/* "Got ideas?" bar (Feedback #117) */
.ideas-cta {
    margin-top: 24px;
}

@media (max-width: 768px) {
    .cta-duo {
        grid-template-columns: 1fr;
    }
}

/* SHELVED: Tempo taškai rewards intro. Preserve for re-enable; see docs/SHELVED-TEMPO-POINTS.md. */
/* Tempo points page intro (Feedback #23/#127) */
.rewards-intro {
    background: var(--color-section-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.rewards-intro h2 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;
}

.rewards-intro p {
    font-size: 14px;
    color: var(--color-text-light);
    margin: 0;
}

/* Drafts panel in My applications (Feedback #114) */
.profile-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.drafts-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
    background: var(--color-section-alt);
}

.drafts-panel h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.draft-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px;
    margin-top: 10px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.draft-title {
    flex: 1;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text);
    min-width: 160px;
}

.draft-title:hover {
    color: var(--color-accent);
}

/* Organization gallery editor (Feedback #122) */
.gallery-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.gallery-edit-item {
    display: block;
    font-size: 12px;
}

.gallery-edit-item img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    margin-bottom: 4px;
}

/* Registration type switch (Feedback #113) */
.auth-type-switch {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: var(--color-section-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 4px;
}

.auth-type-switch a {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}

.auth-type-switch a.active {
    background: var(--color-accent);
    color: #fff;
}

.step-card {
    text-align: center;
    padding: 32px 24px;
}

/* One marker per step instead of an emoji and a numbered circle stacked: the
   icon says what the step is about, the small badge says where it sits. */
.step-token {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-accent);
}

.step-number {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-family);
    border: 2px solid var(--color-section-alt);
}

.step-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.step-card p {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* ── Features grid ─────────────────────────────────────── */

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.feature-card {
    background: #fff;
    padding: 28px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.feature-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.feature-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

.feature-card p {
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* ── CTA section ───────────────────────────────────────── */

.cta-section .cta-content {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 12px;
}

.cta-content p {
    font-size: 15px;
    color: var(--color-text-light);
    margin-bottom: 24px;
}

/* ── Buttons ───────────────────────────────────────────── */

.btn-primary-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    /* Transparent border keeps the height equal to outlined siblings. */
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    font-family: var(--font-family);
    letter-spacing: 0.01em;
}

.btn-primary-lg:hover {
    background: var(--color-accent-hover);
    text-decoration: none;
    color: #fff;
}

.btn-secondary-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: transparent;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--font-family);
}

.btn-secondary-lg:hover {
    background: var(--color-section-alt);
    border-color: var(--color-accent);
    text-decoration: none;
}

.btn-secondary-lg.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-family);
    letter-spacing: 0.01em;
}

.btn-sm:hover {
    background: var(--color-accent-hover);
    text-decoration: none;
    color: #fff;
}

.btn-sm.btn-outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-sm.btn-outline:hover {
    background: var(--color-section-alt);
    color: var(--color-text);
}

/* Four small-button treatments, deliberately distinct, because they routinely
   sit next to each other in one row: affirmative, neutral, negative decision,
   irreversible. Reject used to share the accept fill, which made the two
   opposite answers to an application look like the same button. */
.btn-sm.btn-accept {
    background: var(--color-accent);
}

/* Declining an application is a routine decision the organization can revisit,
   so it carries the warning tone and leaves red to mean "cannot be undone". */
.btn-sm.btn-reject {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-border);
}

.btn-sm.btn-reject:hover {
    background: var(--color-warning);
    color: #fff;
    border-color: var(--color-warning);
}

/* Irreversible deletes: outlined red on white, so they read differently from
   "Atmesti", which is only a decision. */
.btn-sm.btn-delete {
    background: transparent;
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

.btn-sm.btn-delete:hover {
    background: var(--color-error);
    color: #fff;
}

.btn-danger-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--color-error);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    font-family: var(--font-family);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
}
.btn-danger-lg:hover {
    background: #8c1c16;
    color: #fff;
}
.auth-form .btn-danger-lg {
    width: 100%;
    margin-top: 8px;
}

.account-danger-zone {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}
.account-danger-zone h2 {
    font-size: 16px;
    color: var(--color-text-light);
}
.account-danger-zone p {
    font-size: 14px;
    color: var(--color-text-light);
    margin-bottom: 16px;
}

.delete-account-warning {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 20px;
}
.delete-account-warning h3 {
    font-size: 15px;
    color: var(--color-error);
    margin-bottom: 8px;
}
.delete-account-warning ul {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    color: var(--color-text);
}
.delete-account-warning li {
    margin-bottom: 4px;
}

.btn-filter {
    display: block;
    width: 100%;
    padding: 10px;
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-family);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.btn-filter:hover {
    background: var(--color-accent-hover);
}

.btn-filter-clear {
    display: block;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-light);
}

/* ── Alerts ────────────────────────────────────────────── */

.alert {
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

.alert-success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.alert-error {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
    color: var(--color-error);
}

/* For information that is neither good nor bad news – "confirm your email
   first" – which should not borrow the colour of either. */
.alert-notice {
    background: var(--color-section-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* ── Auth pages ────────────────────────────────────────── */

.auth-page {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.auth-card {
    max-width: 480px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 28px;
}

.auth-logo img {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
}

.auth-logo h1 {
    font-size: 24px;
    font-weight: 700;
}

.auth-logo p {
    font-size: 14px;
    color: var(--color-text-light);
    margin-top: 4px;
}

.auth-error {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
}

.auth-form .form-group {
    margin-bottom: 16px;
}

.auth-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.auth-form input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

.auth-form .btn-primary-lg {
    width: 100%;
    margin-top: 8px;
}

.auth-alt {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--color-text-light);
}

.auth-alt a {
    font-weight: 600;
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(17, 17, 17, 0.35);
}

.auth-alt a:hover {
    text-decoration-color: currentColor;
}

.auth-type-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-section-alt);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.change-type {
    font-size: 12px;
    font-weight: 500;
}

/* Type chooser */
.type-chooser {
    text-align: center;
}

.type-chooser h2 {
    font-size: 18px;
    margin-bottom: 20px;
}

.type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 16px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.type-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    text-decoration: none;
    color: var(--color-text);
}

.type-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.type-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.type-card p {
    font-size: 12px;
    color: var(--color-text-light);
}

/* ── Forms (shared) ────────────────────────────────────── */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.required {
    color: var(--color-error);
}

/* An asterisk only means something once, somewhere on the form, you say so. */
.form-required-note {
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 16px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    background: #fff;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

/* The browser's stepper buttons clash with the rest of the form; these fields
   are small enough to type into directly. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-hint {
    display: block;
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: 4px;
}

/* The browser's raw "Choose file / No file chosen" was the one control on
   these forms that still looked like the 1990s. The button now matches the
   secondary buttons it sits next to; the widget stays native so it keeps
   working with keyboards, screen readers and drag-and-drop. */
input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text-light);
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 9px 18px;
    background: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

input[type="file"]::file-selector-button:hover {
    background: var(--color-section-alt);
    border-color: var(--color-accent);
}

/* The native file widget renders its button and "no file chosen" text in the
   browser's own language, which left English strings sitting in Lithuanian
   forms. footer.php wraps each input in .file-field and we drive a real
   <label> instead. The input stays in the DOM and in the tab order, so
   keyboards, screen readers and drag-and-drop keep working. */
.file-field {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.file-field .file-field-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.file-field-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 18px;
    background: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.file-field-button:hover {
    background: var(--color-section-alt);
    border-color: var(--color-accent);
}

.file-field-input:focus-visible + .file-field-button {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.file-field-name {
    font-size: 13px;
    color: var(--color-text-light);
    overflow-wrap: anywhere;
}

.file-field-name.has-file {
    color: var(--color-text);
    font-weight: 600;
}

.file-field-input:disabled + .file-field-button {
    opacity: 0.5;
    cursor: not-allowed;
}

.file-field-input:disabled + .file-field-button:hover {
    background: #fff;
    border-color: var(--color-border);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-accent);
}

/* "Small" used to mean a 13px checkbox with 4px of padding, which is a hard
   thing to hit with a thumb. The label stays small; the target does not. */
.checkbox-label.small-check {
    font-size: 13px;
    min-height: 36px;
    padding: 4px 0;
    align-items: center;
}

.checkbox-label.small-check input[type="checkbox"] {
    margin-top: 0;
    width: 17px;
    height: 17px;
}

.checkbox-label.eligibility-check {
    background: var(--color-section-alt);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.eligibility-check strong {
    display: block;
    font-size: 14px;
}

.eligibility-check small {
    display: block;
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: 2px;
}

/* ── Profile page ──────────────────────────────────────── */

.profile-page,
.opp-form-page,
.dashboard-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 0;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}

.profile-header h1 {
    font-size: 28px;
    font-weight: 900;
}

.profile-subtitle {
    font-size: 14px;
    color: var(--color-text-light);
    margin-top: 4px;
}

.form-section {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 28px;
    margin-bottom: 28px;
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.form-section-desc {
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 12px;
}

.form-actions-profile {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 12px;
}

/* Interest chips */
.interest-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.interest-chip {
    cursor: pointer;
}

/* Hidden but still focusable: display:none would drop these chips out of the
   tab order, leaving no keyboard way to pick an interest or a skill. */
.interest-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.interest-chip span {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
    background: #fff;
}

.interest-chip input:checked + span {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    font-weight: 700;
}

.interest-chip:hover span {
    border-color: var(--color-accent);
}

.interest-chip input:focus-visible + span {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Logo upload */
.logo-upload {
    display: flex;
    align-items: center;
    gap: 16px;
}

.current-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* ── Duration choice (opportunity form) ────────────────── */

.duration-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.duration-choice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.duration-choice:hover {
    border-color: var(--color-accent);
}

.duration-choice.is-active {
    border-color: var(--color-accent);
    background: var(--color-section-alt);
}

.duration-choice input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--color-accent);
    flex-shrink: 0;
}

.duration-choice-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.duration-choice-body strong {
    font-size: 15px;
}

.duration-choice-body small {
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.5;
}

.duration-fields {
    padding: 4px 16px 8px;
}

.duration-span-readout {
    font-size: 13px;
    color: var(--color-text-light);
    margin-top: 4px;
}

.duration-capacity {
    margin-top: 16px;
    margin-bottom: 0;
}

.duration-capacity input[type="number"] {
    max-width: 160px;
}

.status-field {
    margin-bottom: 0;
}

.status-field select {
    max-width: 240px;
}

.duration-toggles {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.duration-block {
    background: var(--color-section-alt);
    border-radius: var(--radius-sm);
    padding: 16px;
}

.slider-block {
    margin-top: 12px;
}

.slider-block label {
    font-size: 13px;
    margin-bottom: 6px;
    display: block;
}

.slider-block input[type="range"] {
    width: 100%;
    accent-color: var(--color-accent);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-text-light);
    margin-top: 4px;
}

/* ── Opportunities page layout ─────────────────────────── */

.opportunities-page {
    padding: 32px 0;
}

.opp-header {
    margin-bottom: 28px;
}

.opp-header h1 {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.opp-header p {
    font-size: 15px;
    color: var(--color-text-light);
}

.opp-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}

/* Filters sidebar (organization pages) */
.opp-filters {
    position: sticky;
    top: calc(var(--header-height) + 16px);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
}

/* ── Duration-first browsing (/galimybes) ──────────────── */

.opp-duration-chooser {
    margin-bottom: 20px;
}

/* Segmented control: the primary choice on the page */
.seg-control {
    position: relative;
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--color-section-alt);
    border-radius: 12px;
}

.seg-thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 0;
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.seg-control.is-ready .seg-thumb {
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
                width 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.seg-option {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-light);
    cursor: pointer;
    text-align: center;
    transition: color 0.15s ease;
}

.seg-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

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

.seg-option:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.seg-option.is-active {
    color: var(--color-text);
    font-weight: 700;
}

.seg-option:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.seg-option.is-active:active {
    transform: scale(0.98);
}

/* Only what the chosen duration needs */
.opp-duration-panel:not(:empty) {
    margin-top: 4px;
}

.duration-panel-block {
    padding-top: 16px;
}

.panel-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}

.panel-note {
    font-size: 14px;
    color: var(--color-text-light);
    padding: 2px 0;
}

/* The day filter fills the panel it sits in rather than leaving half the row
   empty; the width is what pays for showing two months at once. */
.opp-cal-card {
    padding: 18px 20px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-section-alt);
}

.opp-cal-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Square cells would be enormous at this width, so the day is a fixed 44px tall
   — the smallest comfortable touch target — and free to stretch sideways. */
.opp-cal-card .tempo-cal-day,
.opp-cal-card .tempo-cal-empty {
    aspect-ratio: auto;
    height: 44px;
}

.cal-clear-pill {
    margin-top: 10px;
    padding: 8px 14px;
    min-height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.cal-clear-pill:hover {
    border-color: var(--color-accent);
}

/* Quiet toolbar: search plus the disclosure for everything secondary */
.opp-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
}

.opp-search {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* A search field is one of the few places where an icon is genuinely faster
   than a label; without it this box was indistinguishable from any other input. */
.opp-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--color-text-light);
    pointer-events: none;
}

.opp-search input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px 10px 40px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
}

.opp-search input:focus {
    border-color: var(--color-accent);
}

.opp-more-filters {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease;
}

.opp-more-filters:hover {
    border-color: var(--color-accent);
}

/* The panel opened with no change to the button, so nothing said the extra
   filters below belonged to it. */
.opp-more-filters[aria-expanded="true"] {
    border-color: var(--color-accent);
}

.filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--color-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.opp-more-panel {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    margin-top: 16px;
    padding: 20px;
    background: var(--color-section-alt);
    border-radius: var(--radius-md);
}

.more-filter-group h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    margin-bottom: 10px;
}

.more-filter-group select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    background: #fff;
    outline: none;
}

.more-filter-group .checkbox-label {
    margin-top: 10px;
}

.opp-noscript-actions {
    margin-top: 16px;
}

/* Results header and removable filter chips */
.opp-results-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 28px 0 12px;
}

.opp-results-head .opp-count {
    margin-bottom: 0;
}

.active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.active-filter-chip:hover {
    border-color: var(--color-accent);
}

.active-filter-chip span {
    color: var(--color-text-light);
    font-size: 11px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#oppList {
    transition: opacity 0.15s ease;
}

#oppList.is-loading {
    opacity: 0.45;
}

@media (max-width: 720px) {
    .opp-header h1 {
        font-size: 26px;
    }

    /* Wrapping four segments onto two rows turned one picker into what looked
       like a broken grid. Keeping the row intact and letting it scroll is both
       the familiar pattern and honest about there being more to the right. */
    .seg-control {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .seg-control::-webkit-scrollbar {
        display: none;
    }

    .seg-thumb {
        display: none;
    }

    .seg-option {
        flex: 0 0 auto;
        scroll-snap-align: center;
        padding: 0 18px;
    }

    .seg-option.is-active {
        background: #fff;
        border-radius: 9px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }

    .opp-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    /* Full width, it stopped looking like a button and started looking like a
       second text field under the search box. */
    .opp-more-filters {
        justify-content: center;
    }

    .opp-more-panel {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .seg-control.is-ready .seg-thumb,
    #oppList,
    .seg-option {
        transition: none;
    }
}

.filter-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.filter-section:last-of-type {
    border-bottom: none;
    margin-bottom: 16px;
}

.filter-section h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.filter-section input[type="text"],
.filter-section select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.filter-section input:focus,
.filter-section select:focus {
    border-color: var(--color-accent);
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    padding: 2px 0;
}

.radio-group input[type="radio"] {
    accent-color: var(--color-accent);
}

.duration-filter-detail {
    margin-top: 8px;
    padding: 8px;
    background: var(--color-section-alt);
    border-radius: var(--radius-sm);
}

.duration-filter-detail label {
    font-size: 12px;
    display: block;
    margin-bottom: 4px;
}

.range-pair {
    position: relative;
    height: 32px;
}

.range-pair input[type="range"] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    pointer-events: none;
    z-index: 2;
    height: 6px;
}

.range-pair input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    cursor: pointer;
    pointer-events: auto;
    /* Center the 18px thumb on the 6px track */
    margin-top: -6px;
}

.range-pair input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    cursor: pointer;
    pointer-events: auto;
}

.range-pair input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: transparent;
}

.range-pair input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: transparent;
}

.range-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 3px;
    background: var(--color-border);
    z-index: 0;
}

.range-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--color-accent);
    border-radius: 3px;
}

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

.filter-chip {
    cursor: pointer;
}

.filter-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* These were 11px labels in a 22px-tall pill: readable on a trackpad, a poor
   target on a phone, and small enough to pass for decoration. */
.filter-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 17px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
}

.filter-chip:hover span {
    border-color: var(--color-accent);
}

.filter-chip input:checked + span {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    font-weight: 600;
}

.filter-chip input:focus-visible + span {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Opportunity results */
.opp-results {
    min-height: 300px;
}

.opp-count {
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 16px;
}

.opp-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--color-text-light);
}

.opp-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.opp-grid-home {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.opp-card {
    display: block;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
    overflow: hidden;
}

.opp-card.opp-card-with-image {
    padding: 0;
}

.opp-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.opp-card-with-image .opp-card-body {
    padding: 16px 20px 20px;
}

.opp-list .opp-card.opp-card-with-image {
    display: grid;
    grid-template-columns: 200px 1fr;
}

.opp-list .opp-card-image {
    height: 100%;
    aspect-ratio: auto;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.opp-list .opp-card-with-image .opp-card-body {
    min-width: 0;
}

.opp-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    text-decoration: none;
    color: var(--color-text);
}

.opp-card-past {
    opacity: 0.65;
}

.opp-card-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.opp-org-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

.opp-card-header h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.opp-org-name {
    font-size: 13px;
    color: var(--color-text-light);
}

/* When the opportunity happens, in words, right under the title */
.opp-card-when {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.when-type {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 12px;
    background: var(--color-text);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.when-type-ilgalaike {
    background: #444444;
}

.when-type-komanda {
    background: #666666;
}

.when-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

.opp-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.deadline-tag {
    background: #ebebeb;
    color: #333333;
}

/* Reserved for deadlines still close enough to act on. */
.deadline-tag.is-urgent {
    background: var(--color-text);
    color: #fff;
}

/* A deadline that has already passed is history, not a call to action, so it
   recedes instead of shouting from the loudest pill on the card. */
.deadline-tag.is-past {
    background: transparent;
    border: 1px dashed var(--color-border);
    color: var(--color-text-light);
}

.meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: var(--color-section-alt);
    color: var(--color-text-light);
    white-space: nowrap;
}

.location-tag {
    background: #e8e8e8;
    color: #333333;
}

.duration-tag {
    background: #ebebeb;
    color: #444444;
}

/* Which credit an opportunity counts towards is a category, not a status. It is
   told apart by its label and check mark, so colour stays free to mean urgency
   and outcome elsewhere on the same card. */
.badge-socialines,
.badge-cas {
    background: #fff;
    color: var(--color-socialines);
    border: 1px solid var(--color-border);
}

.badge-cas {
    color: var(--color-cas);
}

.team-invite-tag {
    background: #ebebeb;
    color: #444444;
}

.opp-card-desc {
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.5;
}

/* ── Opportunity detail page ───────────────────────────── */

.opp-detail-page {
    padding: 32px 0;
}

.opp-detail-back {
    margin-bottom: 20px;
}

.opp-detail-back a {
    font-size: 14px;
    color: var(--color-text-light);
}

.opp-detail-back a:hover {
    color: var(--color-accent);
}

.opp-detail-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

.opp-detail-hero {
    margin-bottom: 24px;
}

.opp-detail-hero img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.opp-detail-header h1 {
    font-size: 28px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 16px;
}

/* Closed opportunity notice (Feedback #148) */
.opp-closed-banner {
    display: inline-block;
    background: var(--color-section-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.opp-detail-org {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.opp-detail-org-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.org-link {
    font-weight: 600;
    display: block;
}

.org-city {
    font-size: 13px;
    color: var(--color-text-light);
}

.opp-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.opp-detail-body {
    margin-bottom: 28px;
}

.opp-detail-body h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.opp-detail-body p,
.opp-detail-body {
    font-size: 15px;
    line-height: 1.8;
}

.opp-detail-keywords h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}

.keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.keyword-tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--color-section-alt);
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
}

/* Sidebar cards */
.sidebar-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 16px;
}

.sidebar-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}

.info-list {
    font-size: 14px;
}

.info-list dt {
    font-weight: 600;
    color: var(--color-text-light);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 10px;
}

.info-list dt:first-child {
    margin-top: 0;
}

.info-list dd {
    margin-left: 0;
    margin-top: 2px;
}

.apply-card {
    border-color: var(--color-accent);
    border-width: 2px;
}

.apply-card .form-group {
    margin-bottom: 12px;
}

.apply-card label {
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.apply-card textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    outline: none;
}

.apply-card textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

.apply-success {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    color: var(--color-success);
    padding: 16px;
    border-radius: var(--radius-sm);
    text-align: center;
}

.apply-success p {
    font-size: 13px;
    margin-top: 4px;
}

.apply-done {
    text-align: center;
    padding: 12px;
    color: var(--color-text-light);
}

.apply-note {
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 12px;
}

/* ── Organization profile page ─────────────────────────── */

.org-profile-page {
    padding: 32px 0;
}

.org-profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.org-profile-meta {
    flex: 1;
    min-width: 200px;
}

.org-profile-logo {
    width: 160px;
    height: 160px;
    object-fit: contain;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

/* Organization gallery beside logo (Feedback #122) */
.org-profile-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 360px;
}

.org-gallery-thumb img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    display: block;
    cursor: zoom-in;
    transition: opacity 0.15s;
}

.org-gallery-thumb:hover img {
    opacity: 0.85;
}

/* Gallery lightbox (Feedback #140) */
body.lightbox-open {
    overflow: hidden;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 16px;
    background: rgba(17, 17, 17, 0.85);
}

.gallery-lightbox[hidden] {
    display: none;
}

.gallery-lightbox-img {
    max-width: min(1000px, 100%);
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: #fff;
    cursor: default;
}

.gallery-lightbox-nav,
.gallery-lightbox-close {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    color: var(--color-text);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    flex-shrink: 0;
}

.gallery-lightbox-nav {
    width: 48px;
    height: 48px;
    font-size: 30px;
}

.gallery-lightbox-nav:hover,
.gallery-lightbox-close:hover {
    background: #fff;
}

.gallery-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 18px;
}

.gallery-lightbox-counter {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .gallery-lightbox {
        gap: 6px;
        padding: 56px 8px;
    }

    .gallery-lightbox-nav {
        width: 38px;
        height: 38px;
        font-size: 24px;
    }
}

/* Organization links: web + donation (Feedback #123) */
.org-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 6px;
}

.org-donate-link {
    font-weight: 700;
    color: #b45309;
    text-decoration: none;
}

.org-donate-link:hover {
    text-decoration: underline;
}

/* 1.2% GPM donation section (Feedback #124) */
.org-gpm-section {
    margin: 8px 0 24px;
    padding: 18px 20px;
    background: var(--color-section-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.org-gpm-intro {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
}

.org-gpm-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.org-gpm-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    text-decoration: none;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.org-gpm-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
}

.org-gpm-code-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.org-gpm-code-wrap code {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    user-select: all;
}

.org-gpm-eds:hover {
    border-color: var(--color-accent);
}

.org-gpm-eds-link {
    font-weight: 700;
    color: var(--color-accent);
}

@media (max-width: 768px) {
    .org-gpm-row {
        grid-template-columns: 1fr;
    }
}

.org-profile-header h1 {
    font-size: 28px;
    font-weight: 900;
}

.org-type-badge {
    display: inline-block;
    background: var(--color-section-alt);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 8px;
}

.org-website {
    display: block;
    font-size: 13px;
    margin-top: 4px;
}

.org-profile-desc {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
}

.org-opps-section {
    margin-bottom: 32px;
}

.org-opps-section h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.opp-empty-text {
    font-size: 14px;
    color: var(--color-text-light);
}

/* ── Dashboard pages ───────────────────────────────────── */

.empty-state {
    text-align: center;
    padding: 48px 24px;
    background: var(--color-section-alt);
    border-radius: var(--radius-md);
}

.empty-state h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    color: var(--color-text-light);
    margin-bottom: 20px;
}

/* My applications (seeker) */
.applications-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.application-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.app-card-main .app-title {
    font-size: 16px;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

.app-card-main .app-org {
    font-size: 13px;
    color: var(--color-text-light);
    display: block;
    margin-bottom: 6px;
}

.app-card-status {
    text-align: right;
}

/* A status is usually the one thing a person came to the page to read, so each
   state gets its own fill, border and leading dot – never colour alone. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.status-pending {
    background: #fff;
    border-color: var(--color-border);
    color: var(--color-text-light);
}

.status-pending::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;
}

.status-reviewed {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning);
}

.status-accepted {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.status-rejected {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
    color: var(--color-error);
}

.app-date {
    display: block;
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: 4px;
}

/* My opportunities (org) */
.my-opps-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.my-opp-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* A flex item defaults to min-width:auto, so a long title used to push the
   card wider than the phone and give the whole page a sideways scroll. */
.my-opp-main {
    min-width: 0;
}

.my-opp-main h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.my-opp-main h3 a {
    color: inherit;
    text-decoration: none;
}

.my-opp-main h3 a:hover {
    color: var(--color-accent);
}

.my-opp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.app-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    font-size: 11px;
}

.btn-outline .app-count-badge {
    background: var(--color-section-alt);
}

.status-tag-active {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-tag-draft {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-tag-closed {
    background: var(--color-section-alt);
    color: var(--color-text-light);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Expandable detail section within cards */
.app-card-details {
    width: 100%;
    border-top: 1px solid var(--color-border);
    margin-top: 12px;
    padding-top: 12px;
    display: none;
}

.app-card-details.open {
    display: block;
}

.app-card-details .detail-field {
    margin-bottom: 10px;
}

.app-card-details .detail-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 2px;
}

.app-card-details .detail-value {
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.btn-toggle-details {
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 6px 0;
    font-family: var(--font-family);
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

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

/* Withdraw application (Feedback #142) */
.app-cancel-form {
    margin-top: 8px;
}

/* Withdrawing is destructive but it is not what this page is for, so the
   control stays low-emphasis until pointed at. Red text keeps it marked. */
.app-cancel-form .btn-delete {
    /* Negative margin keeps the label flush with the text above while the
       padding still gives the hover background room to breathe. */
    margin-left: -15px;
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.app-cancel-form .btn-delete:hover,
.app-cancel-form .btn-delete:focus-visible {
    background: var(--color-error-bg);
    color: var(--color-error);
    border-color: var(--color-error);
    text-decoration: none;
}

/* ── Applicants page ───────────────────────────────────── */

.applicants-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.applicant-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
}

/* Matches .inbox-card-new: applications still awaiting a decision get the
   accent so the ones needing action stand out in a long list. */
.applicant-card-new {
    border-left: 3px solid var(--color-accent);
}

.applicant-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.applicant-info h3 {
    font-size: 16px;
    font-weight: 700;
}

.applicant-email,
.applicant-age,
.applicant-edu {
    display: inline-block;
    font-size: 13px;
    color: var(--color-text-light);
    margin-right: 12px;
}

.applicant-status-section {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.app-selected-date {
    font-weight: 600;
    color: var(--color-accent);
}

/* Collapsible applicant card (Feedback #112/#116) */
.applicant-toggle {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    cursor: pointer;
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    white-space: nowrap;
    margin-top: 4px;
    /* Sized for the longer of the two labels so toggling does not shift it. */
    min-width: 164px;
    transition: background 0.15s, border-color 0.15s;
}

.applicant-toggle:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-text-light);
}

.applicant-toggle-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.applicant-card.expanded .applicant-toggle-arrow {
    transform: rotate(180deg);
}

.applicant-collapse {
    display: none;
}

.applicant-card.expanded .applicant-collapse {
    display: block;
}

/* Areas / skills tags on applicant card (Feedback #111) */
.applicant-tags-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 12px 0;
    border-top: 1px solid var(--color-border);
}

.applicant-tags-block strong {
    display: block;
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 6px;
}

.applicant-experience .applicant-exp-text {
    display: none;
    margin-top: 8px;
}

.applicant-experience .applicant-exp-text.open {
    display: block;
}

/* Inline icons sit on the text baseline by default, which reads a touch low
   next to a cap-height label. */
.icon {
    vertical-align: -0.125em;
}

/* Quiet square button for removing a row from a repeating field group. It only
   turns red on hover, so a list of them does not read as a list of warnings. */
.btn-icon-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-light);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-icon-remove:hover:not(:disabled) {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
    color: var(--color-error);
}

.btn-icon-remove:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Shared disclosure control: the chevron always points at where the content
   will go, so the button reads the same everywhere it appears. */
.disclosure-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

[aria-expanded="true"] > .disclosure-chevron {
    transform: rotate(180deg);
}

.applicant-body {
    padding: 12px 0;
    border-top: 1px solid var(--color-border);
}

.applicant-field {
    margin-bottom: 10px;
}

.applicant-field strong {
    display: block;
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 2px;
}

.applicant-field p {
    font-size: 14px;
    line-height: 1.6;
}

.applicant-actions {
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

/* ── Footer ─────────────────────────────────────────────── */

.site-footer {
    background: var(--color-section-alt);
    border-top: 1px solid var(--color-border);
    padding: 24px 0;
    text-align: center;
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    font-size: 13px;
    color: var(--color-text-light);
}

.footer-inner a {
    color: var(--color-text-light);
    text-decoration: underline;
}
.footer-inner a:hover {
    color: var(--color-primary);
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--color-text);
    font-weight: 700;
    font-size: 14px;
}

.footer-logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* ── Legacy page styles (kept for backward compat) ─────── */

.page-nav-bar {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 28px 24px 20px;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
}

.page-nav-bar strong {
    font-weight: 900;
}

.page-nav-bar a {
    color: var(--color-text);
    text-decoration: none;
}

.page-nav-bar a:hover {
    text-decoration: underline;
}

.nav-sep {
    margin: 0 6px;
    color: var(--color-text-light);
    font-weight: 300;
}

.hero-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 48px;
}

.hero-row .hero-image img {
    border-radius: 8px;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.hero-row .hero-caption {
    margin-top: 12px;
    font-size: 14px;
}

.hero-row .hero-caption a {
    display: inline;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.hero-row .hero-caption a:hover {
    text-decoration-thickness: 2px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.news-grid.three-col {
    grid-template-columns: repeat(3, 1fr);
}

.news-card img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}

.news-card p {
    font-size: 14px;
    line-height: 1.5;
}

.news-card a {
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.news-card a:hover {
    text-decoration-thickness: 2px;
}

.volunteer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.volunteer-card {
    display: flex;
    flex-direction: column;
}

.volunteer-card img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 16px;
}

.volunteer-card h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.volunteer-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 12px;
}

.volunteer-card .card-body {
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 12px;
}

.volunteer-card .card-link {
    font-size: 14px;
    font-weight: 600;
}

.collab-post {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 48px 0;
    border-bottom: 1px solid var(--color-border);
}

.collab-post:last-child {
    border-bottom: none;
}

.collab-post.image-left img {
    order: -1;
}

.collab-post img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 8px;
}

.collab-post h2 {
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 16px;
}

.collab-post .collab-body {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 12px;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.project-card {
    display: flex;
    flex-direction: column;
}

.project-card img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 16px;
}

.project-card h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
}

.project-card .budget {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12px;
}

.project-card .card-body {
    font-size: 13px;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 12px;
}

.project-card .card-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.challenge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.challenge-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: start;
}

.challenge-card .challenge-logo {
    width: 120px;
    height: 90px;
    object-fit: contain;
    border-radius: 4px;
}

.challenge-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
}

.challenge-card .budget {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}

.challenge-card .card-body {
    font-size: 13px;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 8px;
}

.about-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 48px;
    align-items: start;
    padding: 48px 0;
}

.about-logo-block {
    text-align: center;
}

.about-logo-block img,
.about-logo-block .about-logo-img {
    max-width: 220px;
    margin: 0 auto 16px;
}

.about-logo-block .org-name {
    font-style: italic;
    color: var(--color-text-light);
    font-size: 14px;
}

.about-content h1 {
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 24px;
}

.about-content p {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.8;
}

/* ── Article view ───────────────────────────────────────── */

.article-view {
    max-width: 760px;
    margin: 0 auto;
}

.article-back {
    margin-bottom: 24px;
    font-size: 14px;
}

.article-back a {
    color: var(--color-text-light);
}

.article-back a:hover {
    color: var(--color-link);
}

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

.article-hero img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 10px;
}

.article-title {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 12px;
}

.article-budget {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12px;
}

.article-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 20px;
}

.article-body {
    font-size: 16px;
    line-height: 1.8;
}

.article-body p {
    margin-bottom: 18px;
}

.article-body h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 32px 0 12px;
}

.article-body h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 28px 0 10px;
}

.article-body ul,
.article-body ol {
    margin: 12px 0 18px 24px;
}

.article-body li {
    margin-bottom: 6px;
}

.article-body blockquote {
    border-left: 3px solid var(--color-border);
    padding: 12px 20px;
    margin: 18px 0;
    color: var(--color-text-light);
    font-style: italic;
}

.article-body img {
    max-width: 100%;
    border-radius: 8px;
    margin: 18px 0;
}

.article-body a {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.article-body a:hover {
    text-decoration-thickness: 2px;
}

/* ── School / Approval system ─────────────────────────── */

.type-cards-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Approval type selector */
.approval-type-selector,
.send-method-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.approval-type-option,
.send-method-option {
    cursor: pointer;
}

.approval-type-option input,
.send-method-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.approval-type-card,
.send-method-card {
    padding: 16px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.approval-type-card strong,
.send-method-card strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.approval-type-card small,
.send-method-card small {
    display: block;
    font-size: 12px;
    color: var(--color-text-light);
}

.approval-type-option input:checked + .approval-type-card,
.send-method-option input:checked + .send-method-card {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.approval-type-option:hover .approval-type-card,
.send-method-option:hover .send-method-card {
    border-color: var(--color-accent);
}

.approval-type-option input:focus-visible + .approval-type-card,
.send-method-option input:focus-visible + .send-method-card {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Activity banner */
.approval-activity-banner {
    background: var(--color-section-alt);
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    border-left: 3px solid var(--color-accent);
}

.approval-activity-banner strong {
    display: block;
    font-size: 15px;
}

.approval-activity-banner span {
    font-size: 13px;
    color: var(--color-text-light);
}

/* Preview card */
.approval-preview .preview-header {
    margin-bottom: 20px;
}

.approval-preview .preview-header h2 {
    font-size: 20px;
    font-weight: 700;
}

.preview-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.preview-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.preview-section:last-child {
    border-bottom: none;
}

.preview-section h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.preview-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 4px 0;
}

.preview-label {
    font-size: 13px;
    color: var(--color-text-light);
    flex-shrink: 0;
    margin-right: 16px;
}

.preview-value {
    font-size: 14px;
    font-weight: 500;
    text-align: right;
}

.consent-check {
    background: var(--color-section-alt);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
}

/* Approval requests list (student view) */
.approval-requests-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.approval-request-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.approval-card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

.approval-card-org {
    font-size: 13px;
    color: var(--color-text-light);
    display: block;
    margin-bottom: 6px;
}

.approval-card-school {
    display: block;
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: 4px;
}

.approval-card-status {
    text-align: right;
}

.approval-comment-box {
    background: var(--color-section-alt);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 12px 20px;
    margin-top: -12px;
    margin-bottom: 0;
    border: 1px solid var(--color-border);
    border-top: none;
    font-size: 13px;
}

.approval-comment-box strong {
    font-size: 12px;
    color: var(--color-text-light);
}

.approval-comment-box p {
    margin-top: 4px;
}

/* School inbox */
.inbox-filters {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.inbox-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-light);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
}

.inbox-filter-tab:hover {
    background: var(--color-section-alt);
    color: var(--color-text);
    text-decoration: none;
}

.inbox-filter-tab.active {
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
}

.inbox-filter-tab.active:hover {
    color: #fff;
}

.filter-count {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.8;
}

.inbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inbox-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.inbox-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: var(--color-text);
}

.inbox-card-new {
    border-left: 3px solid var(--color-accent);
}

.inbox-card-student {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

.inbox-card-class {
    font-weight: 400;
    font-size: 13px;
    color: var(--color-text-light);
}

.inbox-card-activity {
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 6px;
}

.inbox-card-right {
    text-align: right;
    flex-shrink: 0;
}

/* Review page */
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.review-header-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-header-main h1 {
    font-size: 24px;
    font-weight: 900;
}

.review-details {
    margin-bottom: 28px;
}

.review-section {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.review-section:last-child {
    border-bottom: none;
}

.review-section h2 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    margin-bottom: 12px;
}

.review-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.review-detail {
    margin-bottom: 4px;
}

.review-detail-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 2px;
}

.review-detail-value {
    font-size: 14px;
}

.review-description {
    margin-top: 12px;
}

.review-description p {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 4px;
}

/* Rating selector. Five loose pills gave no hint that the answers were one
   scale and that only one could be picked; joining them into a single track
   says "choose one point on this line" the way the duration picker does. */
.rating-selector {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
    background: var(--color-section-alt);
    border-radius: 12px;
}

.rating-option {
    cursor: pointer;
}

.rating-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.rating-option span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-light);
    transition: all 0.15s;
}

.rating-option input:checked + span {
    background: #fff;
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    font-weight: 700;
}

.rating-option:hover span {
    color: var(--color-text);
}

.rating-option input:focus-visible + span {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Review actions */
.review-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
}

.btn-approve-action {
    background: var(--color-success);
}

.btn-approve-action:hover {
    background: #0f4a2c;
}

/* "Atmesti" sits beside two large buttons, so it needs their height even
   though it must stay visually secondary. Colour comes from .btn-reject. */
.review-actions .btn-reject-action {
    padding: 12px 28px;
    font-size: 15px;
    border-radius: var(--radius-md);
}

/* Approval CTA on opportunity page */
.approval-cta {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

/* SHELVED: Tempo taškai header. Preserve for re-enable; see docs/SHELVED-TEMPO-POINTS.md. */
/* ── Tempo Points Box (header) ──────────────────────────── */

.tempo-points-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border: 2px solid var(--color-text);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    line-height: 1.2;
    transition: background 0.15s, border-color 0.15s;
    min-width: 80px;
}

.tempo-points-box:hover {
    background: var(--color-section-alt);
    text-decoration: none;
    color: var(--color-text);
}

.tempo-points-box.active {
    background: var(--color-text);
    color: #fff;
}

.tempo-points-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Plain black text inside the black outline (Feedback #138) */
    color: var(--color-text);
}

.tempo-points-box.active .tempo-points-label {
    color: #fff;
}

.tempo-points-value {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

/* ── Notification Bell ─────────────────────────────────── */

.notif-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.15s;
}

.notif-bell:hover {
    background: var(--color-section-alt);
    text-decoration: none;
    color: var(--color-text);
}

.notif-bell-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 4px;
}

/* Notification popup remains active; its points-only details are feature-gated in PHP. */
/* ── Notification Popup ────────────────────────────────── */

.notif-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
}

.notif-popup-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    max-width: 420px;
    width: calc(100vw - 32px);
    padding: 24px;
    position: relative;
    animation: notif-slide-up 0.25s ease-out;
}

@keyframes notif-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.notif-popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-light);
    line-height: 1;
}

.notif-popup-close:hover {
    color: var(--color-text);
}

.notif-popup-type {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.notif-popup-msg {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.4;
}

.notif-popup-detail {
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 4px;
}

.notif-popup-date {
    font-size: 12px;
    color: var(--color-text-light);
    opacity: 0.6;
    margin-top: 8px;
}

.notif-popup-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-text-light);
}

/* ── Notifications Page ────────────────────────────────── */

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

.notification-card {
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
}

a.notification-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}
a.notification-card-link:hover {
    border-color: var(--color-text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.notification-unread {
    border-left: 3px solid var(--color-text);
    background: var(--color-section-alt);
}

.notification-type-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    margin-bottom: 4px;
}

.notification-message {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
}

.notification-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--color-text-light);
}

.notification-date {
    font-size: 12px;
    color: var(--color-text-light);
    opacity: 0.6;
    display: block;
    margin-top: 6px;
}

/* ── Hour Declarations (seeker side) ───────────────────── */

.declaration-section-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    margin-top: 12px;
}

.declaration-list {
    padding: 12px 0 0;
    border-top: 1px solid var(--color-border);
}

.declaration-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    flex-wrap: wrap;
}

.declaration-row + .declaration-row {
    border-top: 1px solid var(--color-border);
}

.declaration-period {
    font-weight: 600;
    min-width: 80px;
}

.declaration-hours {
    color: var(--color-text-light);
}

.declaration-form-wrapper {
    padding: 12px 0 0;
    border-top: 1px solid var(--color-border);
}

.declaration-form {
    padding: 0;
}

.declaration-fields {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.declaration-field-group {
    margin-bottom: 0;
}

/* The submit sits on the same row as the inputs, so it has to share their height. */
.declaration-fields > button {
    align-self: stretch;
    min-height: 45px;
    padding: 0 20px;
}

.declaration-field-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.declaration-field-group select,
.declaration-field-group input {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font-family);
    min-width: 120px;
}

/* ── Hour Declarations (org review side) ───────────────── */

.declaration-review-section {
    width: 100%;
    padding: 12px 0 0;
    margin-top: 12px;
    border-top: 1px solid var(--color-border);
}

.declaration-review-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    flex-wrap: wrap;
}

.declaration-review-row + .declaration-review-row {
    border-top: 1px solid var(--color-border);
}

.declaration-review-info {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 14px;
}

.declaration-review-form {
    display: contents;
}

.declaration-review-fields {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}

.declaration-review-fields label {
    font-weight: 600;
    white-space: nowrap;
}

.decl-hours-input {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font-family);
    text-align: center;
}

/* ── Declaration approve / change flow ──────────────────── */

.declaration-review-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.declaration-change-form {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.declaration-change-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.declaration-change-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.declaration-change-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.decl-comment-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font-family);
    resize: vertical;
    min-height: 50px;
}

.decl-comment-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 79, 70, 229), 0.12);
}

.declaration-change-buttons {
    display: flex;
    gap: 8px;
}

.declaration-approved-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.declaration-org-comment {
    display: block;
    width: 100%;
    font-size: 13px;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 4px;
    padding: 6px 10px;
    background: var(--color-surface);
    border-left: 3px solid var(--color-warning, #f59e0b);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* SHELVED: Tempo taškai rewards and tiers. Preserve for re-enable; see docs/SHELVED-TEMPO-POINTS.md. */
/* ── Rewards Page ──────────────────────────────────────── */

.rewards-page {
    padding: 32px 0 48px;
}

.rewards-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.rewards-balance-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border: 2px solid var(--color-text);
    border-radius: var(--radius-md);
}

.rewards-balance-main {
    display: flex;
    flex-direction: column;
}

.rewards-balance-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
}

.rewards-balance-number {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.1;
}

.rewards-tier-card {
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tier-current {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tier-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-none    { background: #f0f0f0; color: #888; }
.tier-bronze  { background: #e8d5b7; color: #7c5c2e; }
.tier-silver  { background: #e0e0e0; color: #555; }
.tier-gold    { background: #fde68a; color: #92400e; }

.tier-hours {
    font-size: 14px;
    color: var(--color-text-light);
}

.tier-progress-section {
    margin-top: auto;
}

.tier-progress-label {
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--color-text-light);
}

.tier-progress-bar {
    height: 8px;
    background: var(--color-section-alt);
    border-radius: 4px;
    overflow: hidden;
}

.tier-progress-fill {
    height: 100%;
    background: var(--color-text);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.rewards-terms {
    margin-bottom: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.rewards-terms summary {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.rewards-terms-body {
    padding: 0 16px 16px;
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.6;
}

.rewards-terms-body ul {
    margin-left: 20px;
}

.rewards-terms-body li {
    margin-bottom: 4px;
}

/* ── Transactions Table ────────────────────────────────── */

.transactions-section {
    margin-top: 24px;
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header-row h2 {
    margin: 0;
    font-size: 22px;
}

.transactions-table-wrap {
    overflow-x: auto;
}

.transactions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.transactions-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    border-bottom: 2px solid var(--color-border);
}

.transactions-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.tx-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.tx-earned    { background: #d1fae5; color: #065f46; }
.tx-redeemed  { background: #dbeafe; color: #1e40af; }
.tx-expired   { background: #f3f4f6; color: #6b7280; }
.tx-adjusted  { background: #fef3c7; color: #92400e; }

.tx-positive { color: #065f46; font-weight: 700; }
.tx-negative { color: #dc2626; font-weight: 700; }

.text-muted {
    color: var(--color-text-light);
    font-size: 14px;
}

/* ── Rewards Grid ──────────────────────────────────────── */

.rewards-feed-section {
    margin-top: 24px;
}

.rewards-feed-section h2 {
    font-size: 22px;
    margin-bottom: 16px;
}

.rewards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.reward-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}

.reward-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.reward-card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.reward-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reward-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.reward-card-body h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.reward-partner {
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.reward-desc {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-bottom: 12px;
    flex: 1;
}

.reward-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.reward-cost {
    font-size: 18px;
    font-weight: 900;
}

.reward-stock {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-light);
}

.reward-stock.out-of-stock {
    color: #dc2626;
}

.reward-redeem-btn {
    width: 100%;
    text-align: center;
}

.reward-shortfall {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-light);
    padding: 10px;
    background: var(--color-section-alt);
    border-radius: var(--radius-sm);
}

/* ── Redeem Success Popup ──────────────────────────────── */

.redeem-success-popup {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.redeem-success-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: calc(100vw - 32px);
    padding: 32px;
    text-align: center;
}

.redeem-success-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.redeem-success-card h2 {
    font-size: 24px;
    margin-bottom: 8px;
}

.redeem-success-card p {
    font-size: 15px;
    color: var(--color-text-light);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* ── High-contrast / forced-colors accessibility ──────── */

@media (forced-colors: active) {
    a {
        text-decoration: underline;
    }
}

@media (prefers-contrast: more) {
    :root {
        --color-link: #000000;
    }
    a {
        text-decoration: underline;
    }
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 900px) {
    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-grid.three-col {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .opp-grid-home {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .type-cards-3 {
        grid-template-columns: 1fr;
    }

    /* SHELVED: Tempo taškai responsive rules are intentionally preserved. */
    .rewards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .tempo-points-box {
        flex-direction: row;
        gap: 6px;
        padding: 4px 10px;
        min-width: auto;
    }

    .tempo-points-label {
        font-size: 9px;
    }

    .tempo-points-value {
        font-size: 14px;
    }

    .rewards-top {
        grid-template-columns: 1fr;
    }

    .rewards-grid {
        grid-template-columns: 1fr;
    }

    .rewards-balance-number {
        font-size: 32px;
    }

    .declaration-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .declaration-review-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .declaration-review-fields {
        width: 100%;
    }

    .declaration-review-actions {
        width: 100%;
    }

    .declaration-change-buttons {
        flex-direction: column;
    }

    .declaration-change-buttons .btn-sm {
        width: 100%;
        text-align: center;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 12px 24px rgba(0,0,0,0.12);
        flex-direction: column;
        /* The base rule centres items for the desktop row. Left unreset, it
           parks the whole menu at an arbitrary indent in the middle of the
           panel; stretching puts every row on the page's own left margin. */
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
    }

    .site-nav.open {
        display: flex;
    }

    .nav-scrim.open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(0, 0, 0, 0.35);
    }

    body.nav-open {
        overflow: hidden;
    }

    /* The feedback widget floats above everything, so it would otherwise sit
       on top of the scrim and compete with the open menu. */
    body.nav-open .fw-trigger {
        opacity: 0;
        pointer-events: none;
    }

    .site-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 16px;
    }

    .site-nav ul a {
        padding: 12px 8px;
        font-size: 16px;
        border-radius: var(--radius-sm);
    }

    .site-nav ul a.active {
        border-bottom: none;
        font-weight: 700;
        background: var(--color-section-alt);
    }

    /* One tappable row per destination, instead of four labels wrapping
       inside a single squeezed line. */
    .nav-auth {
        border-left: none;
        border-top: 1px solid var(--color-border);
        margin-left: 0;
        padding: 8px 16px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .nav-auth-link,
    .nav-auth-btn {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 8px;
        font-size: 16px;
    }

    .nav-auth-btn {
        justify-content: center;
        margin-top: 8px;
        padding: 12px 8px;
    }

    .nav-logout {
        font-size: 16px;
        opacity: 1;
        margin-top: 8px;
        border-top: 1px solid var(--color-border);
        padding-top: 14px;
    }

    .notif-bell {
        width: auto;
        height: auto;
        min-height: 44px;
        justify-content: flex-start;
        padding: 10px 8px;
        gap: 10px;
        border-radius: var(--radius-sm);
    }

    /* The bell is the only nav item with no words; on a stacked menu the icon
       alone gives no clue what the row is. */
    .notif-bell::after {
        content: "Pranešimai";
        font-size: 16px;
        font-weight: 500;
    }

    .notif-bell-badge {
        position: static;
        margin-left: auto;
    }

    .landing-hero {
        padding: 48px 0 40px;
    }

    .hero-content h1 {
        font-size: 36px;
    }

    .hero-stats {
        gap: 24px;
    }

    .hero-stats .stat strong {
        font-size: 24px;
    }

    .steps-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .opp-layout {
        grid-template-columns: 1fr;
    }

    .opp-filters {
        position: static;
    }

    .opp-grid-home {
        grid-template-columns: 1fr;
    }

    .opp-detail-layout {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .type-cards {
        grid-template-columns: 1fr;
    }

    .hero-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .news-grid,
    .news-grid.three-col,
    .volunteer-grid,
    .challenge-grid {
        grid-template-columns: 1fr;
    }

    .project-grid {
        grid-template-columns: 1fr;
    }

    .collab-post {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .collab-post img {
        order: -1 !important;
    }

    .about-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .container {
        padding: 0 16px;
    }

    .section-title {
        font-size: 26px;
    }

    .profile-page,
    .opp-form-page,
    .dashboard-page {
        padding: 24px 0;
    }

    .profile-header {
        flex-direction: column;
    }

    .org-profile-header {
        flex-direction: column;
        text-align: center;
    }

    .application-card,
    /* The row keeps flex-wrap on desktop, but a wrapping *column* lays items out
       in several columns and stops containing their width, which gave the phone
       a sideways scroll. Stack them in one column and let them fill it. */
    .my-opp-card {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .app-card-status {
        text-align: left;
    }

    .applicant-header {
        flex-direction: column;
    }

    .applicant-status-section {
        text-align: left;
    }

    .approval-type-selector,
    .send-method-selector {
        grid-template-columns: 1fr;
    }

    .approval-request-card,
    .inbox-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .approval-card-status,
    .inbox-card-right {
        text-align: left;
    }

    .review-detail-grid {
        grid-template-columns: 1fr;
    }

    .review-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .preview-row {
        flex-direction: column;
        gap: 2px;
    }

    .preview-value {
        text-align: left;
    }

    .review-actions {
        flex-direction: column;
    }

    .review-actions .btn-primary-lg,
    .review-actions .btn-secondary-lg {
        width: 100%;
        text-align: center;
    }

    .inbox-filters {
        gap: 2px;
    }

    .inbox-filter-tab {
        padding: 6px 10px;
        font-size: 12px;
    }

    .article-title {
        font-size: 26px;
    }

    .article-hero img {
        max-height: 280px;
    }

    .page-nav-bar {
        font-size: 16px;
        padding: 20px 16px;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 28px;
    }

    .hero-cta {
        flex-direction: column;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        text-align: center;
    }

    .page-nav-bar {
        font-size: 14px;
    }

    .nav-sep {
        margin: 0 3px;
    }

    .auth-card {
        padding: 24px;
    }

    .opp-list .opp-card.opp-card-with-image {
        grid-template-columns: 1fr;
    }

    .opp-list .opp-card-image {
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        max-height: 180px;
        aspect-ratio: 16 / 9;
    }
}

/* ── Tempo calendar widget ─────────────────────────────── */

.tempo-cal {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px;
    width: 100%;
    max-width: 420px;
}

/* Several months side by side: the widget spans its container and the months
   share the row, so a date next month is visible instead of hidden behind "›". */
.tempo-cal-multi {
    max-width: none;
}

.tempo-cal-months {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 28px;
}

.tempo-cal-multi .tempo-cal-months {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* With months side by side each caption is that month's heading, so the shared
   header keeps only the arrows and drops a title that would say it twice. */
.tempo-cal-month-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 8px;
}

/* One month needs no caption: the header already names it. */
.tempo-cal:not(.tempo-cal-multi) .tempo-cal-month-name {
    display: none;
}

.tempo-cal-multi .tempo-cal-title {
    display: none;
}

.tempo-cal-multi .tempo-cal-header {
    justify-content: space-between;
    margin-bottom: -22px;
    position: relative;
    z-index: 1;
}

.tempo-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.tempo-cal-title {
    font-weight: 700;
    font-size: 14px;
}

.tempo-cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--color-text);
}

.tempo-cal-nav:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.tempo-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.tempo-cal-dow {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-light);
    padding: 4px 0;
    text-transform: uppercase;
}

.tempo-cal-empty {
    aspect-ratio: 1 / 1;
}

.tempo-cal-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text);
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: #fff;
}

.tempo-cal-day.cal-selectable {
    cursor: pointer;
    border-color: var(--color-border);
}

.tempo-cal-day.cal-selectable:hover {
    border-color: var(--color-accent);
}

.tempo-cal-day.cal-marked {
    background: var(--color-hero-accent);
    border-color: #d9a306;
    font-weight: 700;
}

.tempo-cal-day.cal-marked.cal-selectable:hover {
    border-color: var(--color-accent);
}

.tempo-cal-day.cal-selected {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* A day you cannot pick should not be drawn as a button. Dropping the box
   leaves only the actionable days looking pressable, which is what let the
   old grid read as 31 buttons of which only three worked. */
.tempo-cal-day.cal-muted {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-light);
    opacity: 0.55;
}

.tempo-cal-day.cal-marked.cal-muted {
    background: transparent;
    border: 1px dashed var(--color-border);
    color: var(--color-text-light);
    font-weight: 400;
    opacity: 1;
}

.tempo-cal-day .cal-count {
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    padding: 0 4px;
    /* Ring in the cell's own colour so the badge reads as attached to this day
       rather than colliding with the neighbouring cell. */
    box-shadow: 0 0 0 2px #fff;
}

.tempo-cal-day.cal-selected .cal-count {
    box-shadow: 0 0 0 2px var(--color-accent);
}

.tempo-cal-hint {
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: 8px;
}

/* Calendar day-count editor panel (opportunity form) */
.cal-day-editor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    background: var(--color-bg, #f8fafc);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.cal-day-editor strong {
    font-size: 13px;
}

.cal-day-editor input[type="number"],
.cal-day-row-count {
    width: 72px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.cal-day-editor input[type="number"]:focus,
.cal-day-row-count:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

/* List of all marked calendar days with per-day volunteer counts */
.cal-day-list {
    margin-top: 16px;
}

.cal-day-list-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.cal-day-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: var(--color-bg, #f8fafc);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.cal-day-row-date {
    font-size: 13px;
    min-width: 96px;
}

.cal-day-row-label {
    font-size: 13px;
    margin: 0;
}


/* Date filter calendar on the opportunities list */
.opp-date-filter {
    margin-bottom: 16px;
}

.opp-date-filter-active {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    margin-top: 8px;
}

.opp-date-filter-active a {
    font-size: 13px;
}

/* Dropdowns: swap the native chevron for one that matches the flat inputs.
   Kept at the end of the file so it wins over the `background` shorthands in
   the per-section select rules above. */
.form-group select,
.more-filter-group select,
.filter-section select,
.declaration-field-group select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5' fill='none' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 11px 7px;
    cursor: pointer;
}