/* Design tokens (colors, radii, fonts, Bootstrap var overrides) now live in tokens.css — loaded before this file in _Layout.cshtml. */


html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

body {
    background-color: var(--dmd-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--dmd-font);
    color: var(--dmd-ink);
}

/* Let <main> absorb the leftover vertical space in the flex column so the footer (and the
   bottom nav after it) land flush at the bottom on short pages instead of stacking right
   under the content. */
main {
    flex: 1 0 auto;
}

/* The bottom nav is `position: fixed` and overlays the page, so give the content enough
   bottom padding to clear it (including the safe-area inset the nav itself pads for) —
   otherwise the last bit of content on every page sits hidden underneath the nav. */
body.has-bottom-nav {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--dmd-font);
    font-weight: 800;
    letter-spacing: -0.01em;
}

main:focus {
    outline: none;
}

.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .5rem 1rem;
    background: #fff;
    border-radius: .5rem;
}

/* Visible focus states */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 3px solid #0a3622;
    outline-offset: 2px;
    box-shadow: none;
}

.navbar .nav-link.btn-link {
    text-decoration: none;
}

/* ---- Brand mark (navbar logo) ---- */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--dmd-ink) !important;
    text-decoration: none !important;
}

.brand-mark .brand-leaf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-mark .brand-hyphen {
    color: var(--dmd-accent);
}

/* ---- Buttons: comfortable tap targets, pill shape ---- */
.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border-radius: 999px;
    font-weight: 700;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

.btn-sm {
    min-height: 36px;
}

.btn-success,
.btn-primary {
    background-color: var(--dmd-green);
    border-color: var(--dmd-green);
}

.btn-success:hover,
.btn-success:focus,
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--dmd-green-dark);
    border-color: var(--dmd-green-dark);
}

.btn-outline-success {
    color: var(--dmd-green);
    border-color: var(--dmd-green);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: var(--dmd-green);
    border-color: var(--dmd-green);
}

/* Chip-style buttons/links (filter chips, "Toate cartierele", "Filtre") */
.btn-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: 0 .9rem;
    border-radius: 999px;
    border: none;
    background: var(--dmd-surface-soft);
    color: var(--dmd-ink);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}

.btn-chip:hover,
.btn-chip:focus {
    background: #e5e8e6;
    color: var(--dmd-ink);
}

/* Segmented control (Toate / Disponibile / Rezervate) */
.segmented {
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: var(--dmd-surface-soft);
}

.segmented .nav-link {
    flex: 1 1 0;
    text-align: center;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    color: var(--dmd-ink-soft);
    background: transparent;
    border: none;
}

.segmented .nav-link.active {
    background: #fff;
    color: var(--dmd-ink);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(11, 15, 13, .10);
}

/* Hero */
.hero {
    background: linear-gradient(135deg, var(--dmd-green-soft) 0%, #ffffff 70%);
    border-radius: var(--dmd-radius);
    padding: 3rem 1.5rem;
}

@media (min-width: 768px) {
    .hero {
        padding: 4.5rem 3rem;
    }
}

.hero-icon {
    font-size: 8rem;
    color: var(--dmd-green);
    opacity: .85;
}

.step-number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--dmd-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* Cards */
.card {
    border: 1px solid var(--dmd-border);
    border-radius: var(--dmd-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 20, .04), 0 8px 24px rgba(16, 24, 20, .06);
}

.card-img-top,
.donation-card-img {
    border-top-left-radius: var(--dmd-radius);
    border-top-right-radius: var(--dmd-radius);
}

.donation-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #eef1ef;
}

.donation-card {
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
}

.donation-card:hover,
.donation-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(16, 24, 20, .06), 0 12px 28px rgba(16, 24, 20, .10);
}

.donation-card .badge {
    border-radius: 999px;
    font-weight: 700;
    padding: .4em .7em;
}

.donation-detail-img {
    width: 100%;
    max-height: 480px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--dmd-radius);
    background: #eef1ef;
}

.donation-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: .75rem;
    background: #eef1ef;
    flex-shrink: 0;
}

.donation-thumb.image-placeholder i {
    font-size: 1.5rem !important;
}

.donation-thumb.image-placeholder span {
    display: none;
}

.image-placeholder {
    background: #eef1ef;
}

.donation-meta div {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .15rem 0;
}

.donation-meta dt {
    font-weight: 500;
    color: var(--dmd-ink-soft);
}

.donation-meta dd {
    margin: 0;
    text-align: right;
}

.summary-card .display-6 {
    font-weight: 700;
    color: var(--dmd-green-dark);
}

.empty-state {
    background: #fff;
    border-radius: var(--dmd-radius);
}

.form-card {
    max-width: 720px;
    margin: 0 auto;
}

.auth-card {
    max-width: 520px;
    margin: 0 auto;
}

/* Account type selection */
.field-validation-error,
.validation-summary-errors {
    color: #b02a37;
}

.input-validation-error {
    border-color: #b02a37;
}

.validation-summary-valid {
    display: none;
}
.min-w-0 { min-width: 0; }

/* ---- Food listing extras ---- */
.location-bar {
    border: 1px solid var(--dmd-border);
    border-left: 4px solid var(--dmd-green);
}

.donation-thumb-wide {
    width: 100%;
    height: 5.5rem;
    object-fit: cover;
}

/* ---- Mobile bottom tab bar (Acasă / Adaugă / Donații / Profil) ---- */
.bottom-nav {
    /* `position: fixed` is pinned to iOS Safari's "layout viewport", a logical viewport that
       can drift out of sync with the actually-visible "visual viewport" while the browser's
       own toolbars animate in/out during scroll — that's what made the bar float with a gap
       underneath it until some interaction forced a resync. We tried `position: sticky`
       instead (keeping it in normal document flow), but it didn't fully escape the same
       layout/visual-viewport mismatch and cost the "floating app bar" overlay feel on top of
       that. Back to `fixed`, and site.js actively compensates for the iOS quirk itself via
       the visualViewport API (see the IIFE near the bottom of that file). */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    /* Bottom-anchor every item instead of centering the row: the FAB (56px) is taller than a
       link's icon+label block (~42px), so centering left extra empty space underneath it
       compared to the links. Flush bottoms mean the FAB's extra height only pokes upward,
       which is the raised look we want, with nothing looking randomly offset. */
    align-items: flex-end;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .98);
    border-top: 1px solid var(--dmd-border);
}

/* Four equal-width columns (the three links plus the FAB's slot) so the raised "+" button
   always lands dead center between its neighbors, regardless of viewport width — fixed pixel
   widths plus space-around drifted off-center depending on how much free space there was. */
.bottom-nav .bottom-nav-link,
.bottom-nav .bottom-nav-fab-slot {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
}

.bottom-nav .bottom-nav-link {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: var(--dmd-ink-faint);
    font-size: 11px;
    font-weight: 600;
}

.bottom-nav .bottom-nav-link.active {
    color: var(--dmd-green);
    font-weight: 700;
}

.bottom-nav .bottom-nav-link i {
    font-size: 1.35rem;
}

.bottom-nav .bottom-nav-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--dmd-green);
    color: #fff;
    box-shadow: 0 8px 20px rgba(4, 120, 87, .35);
    text-decoration: none;
    flex-shrink: 0;
    font-size: 1.5rem;
}

.bottom-nav .bottom-nav-fab:hover,
.bottom-nav .bottom-nav-fab:focus {
    color: #fff;
    background: var(--dmd-green-dark);
}

@media (min-width: 768px) {
    .bottom-nav {
        display: none;
    }

    body.has-bottom-nav {
        padding-bottom: 0;
    }
}

/* Alerts (status messages, form banners): Bootstrap bakes subtle colors at build time rather
   than deriving them from --bs-success, so they need an explicit brand override here. */
.alert-success {
    background-color: var(--dmd-green-soft);
    border-color: #b9e6cf;
    color: var(--dmd-green-dark);
}

.alert-success .btn-close {
    filter: none;
}

/* Icon-in-circle badge (profile avatar, empty states) */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    flex-shrink: 0;
    font-size: 1.35rem;
}

.icon-circle-neutral {
    background: var(--dmd-surface-soft);
    color: var(--dmd-ink-soft);
}

.icon-circle-brand {
    background: var(--dmd-green-soft);
    color: var(--dmd-green);
}

/* Card-hosted list of settings rows (Profil) */
.card {
    overflow: hidden;
}

.list-group-item-action {
    border-color: var(--dmd-border);
    color: var(--dmd-ink);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--dmd-surface-soft);
    color: var(--dmd-ink);
}

/* Sign-out pill: quiet red, not a destructive-looking full button */
.btn-logout {
    background: #feecec;
    color: #c0262d;
    border: none;
}

.btn-logout:hover,
.btn-logout:focus {
    background: #fbd9d9;
    color: #c0262d;
}

/* Neutral pill CTA used in empty states (secondary emphasis, not the brand green) */
.btn-chip-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: 0 1.2rem;
    border-radius: 999px;
    border: none;
    background: var(--dmd-surface-soft);
    color: var(--dmd-ink);
    font-weight: 700;
    text-decoration: none;
}

.btn-chip-cta:hover,
.btn-chip-cta:focus {
    background: #e5e8e6;
    color: var(--dmd-ink);
}

/* ---- Form fields: rounded, bordered, brand focus glow (canvas: LocatieLogin / Filtre) ---- */
.form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--dmd-ink);
    margin-bottom: .375rem;
}

.form-control:not(textarea):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.form-select {
    min-height: 52px;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border: 1.5px solid var(--dmd-surface-soft);
    background-color: var(--dmd-surface-soft);
    font-size: .9375rem;
    font-weight: 500;
    color: var(--dmd-ink);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.form-control:not(textarea):not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
.form-select:focus {
    border-color: var(--dmd-green);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(4, 120, 87, .15);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--dmd-surface-soft);
    opacity: .6;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #c0262d;
    background-color: #feecec;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(192, 38, 45, .12);
}

textarea.form-control {
    border: 1.5px solid var(--dmd-surface-soft);
    background-color: var(--dmd-surface-soft);
}

textarea.form-control:focus {
    border-color: var(--dmd-green);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(4, 120, 87, .15);
}

.form-text {
    color: var(--dmd-ink-faint);
    font-size: .8125rem;
}

/* ---- Add-donation wizard: Fotografii -> Detalii -> Verifică și publică ---- */
.js-wizard-active .wizard-step {
    display: none;
}

.js-wizard-active .wizard-step.active {
    display: block;
}

.wizard-shell {
    max-width: 560px;
    margin: 0 auto;
}

.wizard-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.wizard-header h1 {
    margin: 0;
    flex-grow: 1;
}

.wizard-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--dmd-surface-soft);
    color: var(--dmd-ink);
    flex-shrink: 0;
    text-decoration: none;
}

.wizard-close:hover,
.wizard-close:focus {
    background: #e5e8e6;
    color: var(--dmd-ink);
}

.wizard-progress {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.wizard-progress-bar {
    display: flex;
    gap: 6px;
}

.wizard-progress-seg {
    flex: 1 1 0;
    height: 4px;
    border-radius: 2px;
    background: var(--dmd-border);
}

.wizard-progress-seg.done {
    background: var(--dmd-green);
}

.wizard-step-label {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--dmd-ink-soft);
}

.wizard-step-intro {
    color: var(--dmd-ink-soft);
    margin-bottom: 1rem;
}

.wizard-note {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .875rem 1rem;
    border-radius: var(--dmd-radius);
    background: #eaf1ff;
    color: #1d4ed8;
    margin-bottom: 1rem;
}

.wizard-note i {
    margin-top: .15rem;
    flex-shrink: 0;
}

.wizard-note strong {
    color: #1d4ed8;
}

.wizard-check {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    font-size: .9375rem;
    line-height: 1.4;
    margin-bottom: .5rem;
    cursor: pointer;
    color: var(--dmd-ink);
}

.wizard-check input {
    width: 22px;
    height: 22px;
    margin-top: .1rem;
    accent-color: var(--dmd-green);
    flex-shrink: 0;
}

.wizard-actions {
    margin-top: 1.5rem;
}

.wizard-actions.two {
    display: flex;
    gap: .75rem;
}

.wizard-review-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--dmd-radius);
    background: #fff;
    border: 1px solid var(--dmd-border);
    box-shadow: 0 1px 2px rgba(16, 24, 20, .04), 0 8px 24px rgba(16, 24, 20, .05);
    margin-bottom: 1rem;
}

.wizard-review-photos {
    display: flex;
    gap: 8px;
}

.wizard-review-photos img {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.wizard-review-body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.wizard-review-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--dmd-ink);
}

.wizard-review-sub {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--dmd-ink-soft);
    margin-top: -.4rem;
}

.wizard-review-card hr {
    margin: 0;
    border-color: var(--dmd-border);
    opacity: 1;
}

.wizard-review-row {
    display: flex;
    gap: .75rem;
    align-items: center;
    font-size: .875rem;
    color: var(--dmd-ink-soft);
}

.wizard-review-row i {
    flex-shrink: 0;
    color: var(--dmd-green);
    font-size: 1.1rem;
}

.wizard-review-label {
    display: block;
    font-size: .75rem;
    color: var(--dmd-ink-faint);
}

.wizard-review-value {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--dmd-ink);
}

.wizard-review-edit {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--dmd-green);
    text-decoration: none;
    margin-top: .25rem;
}

.wizard-review-edit:hover,
.wizard-review-edit:focus {
    color: var(--dmd-green-dark);
}