/* 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);
}

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;
    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);
}

body.has-bottom-nav {
    padding-bottom: 82px;
}

/* ---- App shell (phones, signed in) ----
   iOS Safari moves `position: fixed` elements around while the page itself scrolls: its
   layout viewport drifts against the visible area as the toolbars animate (measured on an
   iPhone: offsets of 30-40px mid-scroll), so a fixed bottom bar jumps up and lets content show
   underneath it. Every CSS/JS workaround on top of document scrolling still jumped.
   Native-app structure instead: the page itself never scrolls. <body> is exactly one screen
   tall, `.app-scroll` (header + main + footer) is the only scrolling area, and the bottom nav
   is a plain flex item under it — nothing is `fixed`, so there is nothing for Safari to move. */
.app-scroll {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

@media (max-width: 767.98px) {
    body.has-bottom-nav {
        height: 100vh;
        height: 100dvh; /* dvh tracks Safari's toolbar, so the nav always sits on the visible bottom */
        min-height: 0;
        margin: 0;
        overflow: hidden;
        padding-bottom: 0;
    }

    body.has-bottom-nav .app-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    body.has-bottom-nav .bottom-nav {
        position: relative;
        flex-shrink: 0;
    }
}

@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);
}

/* ---- Unread messages bell (top bar, signed-in users) ---- */
.unread-bell {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    font-size: 1.35rem;
    color: var(--dmd-ink);
    text-decoration: none;
}

.unread-bell:hover,
.unread-bell:focus-visible {
    background: var(--dmd-green-soft);
    color: var(--dmd-green-dark);
}

.unread-bell-badge {
    font-size: .68rem;
    margin-top: 8px;
    margin-left: -8px;
}

.unread-conversation:hover {
    border-color: var(--dmd-green);
}