/* =====================================================
   SWAPNEAR - COMPLETE MAIN STYLESHEET
   Bootstrap-based custom styling
===================================================== */

/* =====================================================
   ROOT
===================================================== */

:root {
    --sn-primary: #198754;
    --sn-primary-dark: #146c43;
    --sn-primary-light: #e8f8ee;

    --sn-text: #16243b;
    --sn-text-dark: #1f2d24;
    --sn-muted: #6b7280;

    --sn-bg: #f5f7f6;
    --sn-white: #ffffff;
    --sn-border: #e0e7e2;

    --sn-radius-sm: 8px;
    --sn-radius-md: 14px;
    --sn-radius-lg: 20px;
}

/* =====================================================
   PASSWORD FIELDS
   Edge/IE inject their own eye icon into password inputs
   once they have text — it overlaps our custom show/hide
   toggle button, so turn it off everywhere.
===================================================== */

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* =====================================================
   GENERAL
===================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;

    color: var(--sn-text);

    background: var(--sn-white);
}

/* =====================================================
   GUEST NAVBAR
===================================================== */

.navbar {
    min-height: 68px;

    position: sticky;
    top: 0;

    z-index: 1050;

    background: #ffffff !important;

    border-bottom:
        1px solid rgba(0, 0, 0, 0.05);
}

.navbar .navbar-brand {
    color: var(--sn-primary) !important;

    font-weight: 800;
}

.navbar .nav-link {
    position: relative;

    padding: 10px 18px !important;

    color: #555555 !important;

    font-size: 15px;
    font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--sn-primary) !important;
}

.navbar .nav-link.active {
    font-weight: 600;
}

.navbar .nav-link.active::after {
    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 2px;

    height: 2px;

    background: var(--sn-primary);

    border-radius: 10px;
}

.navbar .btn-success {
    background: var(--sn-primary) !important;

    border-color: var(--sn-primary) !important;
}

.navbar .btn-success:hover {
    background: var(--sn-primary-dark) !important;

    border-color: var(--sn-primary-dark) !important;
}

.navbar .btn-link:hover {
    color: var(--sn-primary) !important;
}

/* =====================================================
   LANDING PAGE HERO
===================================================== */

.hero {
    min-height: calc(100vh - 76px);

    display: flex;
    align-items: center;

    padding: 15px 0 35px;

    background: #ffffff;
}

.hero .row {
    min-height: 580px;

    align-items: center;
}

.hero h1 {
    color: var(--sn-text);

    line-height: 1.1;
}

.hero p {
    max-width: 600px;

    line-height: 1.7;
}

.hero-card {
    padding: 20px;
}

.hero-card img {
    width: 100%;
    max-height: 500px;

    object-fit: cover;
}

/* =====================================================
   NEARBY ITEMS
===================================================== */

#nearby-items {
    scroll-margin-top: 70px;
}

.nearby-items-section {
    min-height: calc(100vh - 76px);

    display: flex;
    align-items: center;

    padding: 70px 0 120px;

    background: #f7f9f8;
}

.nearby-items-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;
}

.nearby-items-header h2 {
    margin: 12px 0 5px;

    color: var(--sn-text);

    font-size: 30px;
    font-weight: 800;
}

.nearby-items-header p {
    margin: 0;

    color: var(--sn-muted);

    font-size: 14px;
}

.browse-more-link {
    color: var(--sn-primary);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}

.browse-more-link:hover {
    color: var(--sn-primary-dark);
}

/* =====================================================
   ITEMS SLIDER
===================================================== */

.items-slider-wrapper {
    position: relative;

    display: flex;
    align-items: center;
}

.items-slider {
    width: 100%;

    display: flex;

    gap: 20px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    padding: 5px 3px 15px;
}

.items-slider::-webkit-scrollbar {
    display: none;
}

.home-item-card {
    flex: 0 0 calc(25% - 15px);

    min-width: 240px;

    background: #ffffff;

    border: 1px solid #e4eae6;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.03);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.home-item-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08);
}

.home-item-image {
    position: relative;

    height: 180px;

    overflow: hidden;

    background: #eef2ef;
}

.home-item-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.home-item-type {
    position: absolute;

    top: 12px;
    left: 12px;

    padding: 6px 10px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: 700;
}

.home-item-type.exchange {
    background: var(--sn-primary-light);

    color: var(--sn-primary);
}

.home-item-type.resale {
    background: #fff3cd;

    color: #8a6500;
}

.home-item-body {
    padding: 16px;
}

.home-item-body h5 {
    margin: 0 0 7px;

    color: var(--sn-text);

    font-size: 16px;
    font-weight: 700;
}

.home-item-body p {
    min-height: 38px;

    margin: 0 0 10px;

    color: var(--sn-muted);

    font-size: 12px;

    line-height: 1.5;
}

.home-item-body small {
    color: var(--sn-primary);

    font-size: 11px;
    font-weight: 600;
}

/* =====================================================
   SLIDER BUTTONS
===================================================== */

.items-slider-arrow {
    position: absolute;

    z-index: 5;

    width: 42px;
    height: 42px;

    border: 1px solid #dce3df;

    border-radius: 50%;

    background: #ffffff;

    color: var(--sn-primary);

    font-size: 24px;

    cursor: pointer;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08);
}

.items-slider-arrow:hover {
    background: var(--sn-primary);

    border-color: var(--sn-primary);

    color: #ffffff;
}

.items-slider-prev {
    left: -20px;
}

.items-slider-next {
    right: -20px;
}

/* =====================================================
   ABOUT SECTION
===================================================== */

#about {
    scroll-margin-top: 70px;
}

.about-section {
    padding: 70px 0;

    background: #ffffff;
}

.about-badge {
    display: inline-block;

    padding: 7px 14px;

    background: var(--sn-primary-light);

    color: var(--sn-primary);

    border-radius: 30px;

    font-size: 11px;
    font-weight: 700;
}

.about-title {
    margin: 18px 0 20px;

    color: var(--sn-text);

    font-size: 40px;
    font-weight: 800;

    line-height: 1.2;
}

.about-text {
    max-width: 560px;

    margin-bottom: 15px;

    color: var(--sn-muted);

    font-size: 14px;

    line-height: 1.8;
}

.about-features {
    margin-top: 28px;
}

.about-feature {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    margin-bottom: 20px;
}

.about-feature-icon {
    width: 34px;
    height: 34px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--sn-primary-light);

    color: var(--sn-primary);
}

.about-feature h5 {
    margin: 0 0 4px;

    color: var(--sn-text);

    font-size: 14px;
    font-weight: 700;
}

.about-feature p {
    margin: 0;

    color: var(--sn-muted);

    font-size: 12px;

    line-height: 1.5;
}

.about-visual {
    position: relative;

    padding: 15px;
}

.about-image {
    width: 100%;
    height: 450px;

    object-fit: cover;

    border-radius: 28px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.10);
}

.about-stat-card {
    position: absolute;

    left: 0;
    bottom: 40px;

    display: flex;
    flex-direction: column;

    padding: 18px 22px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12);
}

.about-stat-card strong {
    color: var(--sn-primary);
}

.about-stat-card span {
    margin-top: 3px;

    color: var(--sn-muted);

    font-size: 11px;
}

/* =====================================================
   LOGIN
===================================================== */

.login-password-wrapper {
    position: relative;

    width: 100%;
}

.login-password-wrapper input {
    padding-right: 50px !important;
}

.login-password-toggle {
    position: absolute;

    top: 50%;
    right: 12px;

    width: 32px;
    height: 32px;

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

    transform: translateY(-50%);

    border: none;

    background: transparent;

    color: #6b7280;

    cursor: pointer;
}

.login-password-toggle:hover {
    color: var(--sn-primary);
}

/* =====================================================
   REGISTER PAGE
===================================================== */

.register-page {
    min-height: 100vh;

    background: #f7f9fc;

    color: #17243a;
}

.register-header {
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 22px;

    background: #ffffff;

    border-bottom:
        1px solid #e5e7eb;
}

.register-logo {
    color: var(--sn-primary);

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;
}

.register-login {
    color: #303936;

    font-size: 13px;
}

.register-login a {
    margin-left: 7px;

    color: var(--sn-primary);

    font-weight: 700;

    text-decoration: none;
}

/* =====================================================
   REGISTER LAYOUT
===================================================== */

.register-container {
    display: grid;

    grid-template-columns: 44% 56%;

    max-width: 1250px;

    margin: 0 auto;

    padding: 20px 35px 45px;

    align-items: start;
}

.register-intro {
    max-width: 520px;

    padding: 35px 45px 40px 20px;
}

.register-intro h1 {
    margin: 0;

    color: #102039;

    font-size: 34px;
    font-weight: 800;

    line-height: 1.12;
}

.register-intro h1 span {
    display: block;

    color: var(--sn-primary);
}

.register-intro > p {
    max-width: 430px;

    margin-top: 18px;
    margin-bottom: 22px;

    color: #39453f;

    font-size: 15px;

    line-height: 1.55;
}

/* =====================================================
   REGISTER INFORMATION
===================================================== */

.register-info-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    max-width: 430px;
}

.register-info-card {
    min-height: 88px;

    padding: 14px;

    background: #edf3ff;

    border: 1px solid #dce5f5;

    border-radius: 9px;
}

.info-icon {
    margin-bottom: 5px;

    color: var(--sn-primary);

    font-size: 19px;
}

.register-info-card strong {
    display: block;

    color: var(--sn-text);

    font-size: 11px;
}

.register-info-card small {
    display: block;

    color: #4f5d68;

    font-size: 9px;
}

/* =====================================================
   REGISTER FORM
===================================================== */

.register-form-wrapper {
    padding: 10px 15px 0;
}

.register-form-card {
    width: 100%;

    padding: 27px 31px;

    background: #ffffff;

    border: 1px solid #dce1df;

    border-radius: 8px;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.03);
}

.register-form-heading {
    margin-bottom: 20px;
}

.register-form-heading h2 {
    margin: 0 0 4px;

    color: var(--sn-text);

    font-size: 18px;
    font-weight: 800;
}

.register-form-heading p {
    margin: 0;

    color: #3f4844;

    font-size: 12px;
}

.register-form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-bottom: 18px;
}

.register-field {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.register-field label {
    margin: 0;

    color: var(--sn-text);

    font-size: 10px;
    font-weight: 700;
}

.register-field input,
.register-field select,
.manual-location select {
    width: 100%;
    height: 36px;

    padding: 0 11px;

    border: 1px solid #bdcbbf;

    border-radius: 6px;

    background: #fbfcff;

    color: #26352f;

    font-size: 11px;

    outline: none;
}

.register-field input:focus,
.register-field select:focus,
.manual-location select:focus {
    border-color: var(--sn-primary);

    box-shadow:
        0 0 0 2px rgba(25, 135, 84, 0.10);
}

/* Province set for the user (SwapNear serves one province for now): shown, not changeable. */
.manual-location select.is-locked {
    background: #eef2ef;
    color: #5b6b63;
    pointer-events: none;
}

/* =====================================================
   REGISTER PASSWORD
===================================================== */

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 42px !important;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 10px;

    transform: translateY(-50%);

    border: none;

    background: transparent;

    color: #6b7280;

    cursor: pointer;
}

.password-toggle:hover {
    color: var(--sn-primary);
}

/* =====================================================
   LOCATION
===================================================== */

.location-heading {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 14px;
}

.location-heading-icon {
    width: 29px;
    height: 29px;

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

    border-radius: 50%;

    background: #d9f8e5;

    color: var(--sn-primary);
}

.location-section {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-bottom: 20px;
}

.detect-location-btn {
    width: 100%;
    height: 76px;

    border:
        2px solid var(--sn-primary);

    border-radius: 7px;

    background: #effbf3;

    color: var(--sn-primary);

    cursor: pointer;
}

.detect-location-btn:hover {
    background: #e1f8e9;
}

.detect-location-btn:disabled {
    opacity: .7;
    cursor: progress;
}

.detect-location-status {
    grid-column: 1 / -1;
    min-height: 16px;
    margin-top: -6px;
    color: #146c43;
    font-size: 12px;
    font-weight: 600;
}

.manual-location {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.location-select-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;
}

/* =====================================================
   REGISTER BUTTON
===================================================== */

.create-account-btn {
    width: 100%;
    height: 50px;

    border: none;

    border-radius: 7px;

    background: var(--sn-primary);

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.create-account-btn:hover {
    background: var(--sn-primary-dark);
}

/* =====================================================
   MEMBER DASHBOARD
===================================================== */

.dashboard-body {
    margin: 0;

    min-height: 100vh;

    background: #f5f2eb;

    color: var(--sn-text-dark);
}

.dashboard-wrapper {
    min-height: 100vh;
}

/* =====================================================
   DASHBOARD SIDEBAR
===================================================== */

.dashboard-sidebar {
    position: fixed;

    top: 0;
    left: 0;

    width: 312px;
    height: 100vh;

    display: flex;
    flex-direction: column;

    background: #0f2419;

    color: #f4f7f4;

    border-right:
        1px solid rgba(255, 255, 255, 0.04);

    z-index: 1000;

    overflow-y: auto;
}

/* =====================================================
   DASHBOARD BRAND
===================================================== */

.dashboard-brand {
    display: flex;
    align-items: center;

    min-height: 104px;

    padding: 26px 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);
}

.dashboard-brand a {
    color: #f5f1e8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;
    font-weight: 700;

    letter-spacing: -0.3px;

    text-decoration: none;
}

/* =====================================================
   DASHBOARD USER
===================================================== */

.dashboard-user {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 18px 14px 24px;

    padding: 14px 15px;

    background: #193a27;

    border:
        1px solid rgba(90, 155, 105, 0.22);

    border-radius: 11px;
}

.dashboard-avatar {
    width: 44px;
    height: 44px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #216b45;

    color: #e1f0e5;

    font-size: 17px;
    font-weight: 600;
}

.dashboard-user-info {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.dashboard-user-info strong {
    color: #f2f3e8;

    font-size: 15px;
    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.dashboard-user-info span {
    margin-top: 3px;

    color: #9aad9f;

    font-size: 13px;
}

/* =====================================================
   DASHBOARD MENU
===================================================== */

.dashboard-menu {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 0 9px;

    flex: 1;
}

.dashboard-menu-link {
    display: flex;
    align-items: center;

    gap: 16px;

    min-height: 53px;

    padding: 0 16px;

    border-radius: 10px;

    color: #aebbb2;

    font-size: 16px;
    font-weight: 500;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.dashboard-menu-link i {
    width: 20px;

    text-align: center;

    color: #91a79a;

    font-size: 19px;
}

.dashboard-menu-link:hover {
    background:
        rgba(255, 255, 255, 0.06);

    color: #ffffff;
}

.dashboard-menu-link:hover i {
    color: #d7e4da;
}

.dashboard-menu-link.active {
    background: #358a52;

    color: #ffffff;

    font-weight: 600;
}

.dashboard-menu-link.active i {
    color: #ffffff;
}

/* =====================================================
   SIDEBAR BOTTOM
===================================================== */

.dashboard-sidebar-bottom {
    margin-top: auto;

    padding: 18px 9px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-logout {
    display: flex;
    align-items: center;

    gap: 16px;

    width: 100%;
    min-height: 52px;

    padding: 0 16px;

    border: none;

    border-radius: 10px;

    background: transparent;

    color: #aebbb2;

    font-size: 16px;
    font-weight: 500;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.dashboard-logout i {
    width: 20px;

    text-align: center;

    font-size: 19px;
}

.dashboard-logout:hover {
    background:
        rgba(255, 255, 255, 0.06);

    color: #ffffff;
}

/* =====================================================
   DASHBOARD MAIN

   IMPORTANT:
   Sidebar = 312px
   Main content starts AFTER sidebar
===================================================== */

.dashboard-main {
    width: calc(100% - 312px);

    min-height: 100vh;

    margin-left: 312px;

    background: #f5f2eb;

    overflow-x: hidden;
}

/* =====================================================
   DASHBOARD TOPBAR
===================================================== */

.dashboard-topbar {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 16px 30px;

    background: #ffffff;

    border-bottom:
        1px solid #e3e0d8;
}

.dashboard-topbar h1 {
    margin: 0;

    color: var(--sn-text-dark);

    font-size: 24px;
    font-weight: 700;
}

.dashboard-topbar p {
    margin: 4px 0 0;

    color: #7b857d;

    font-size: 13px;
}

.dashboard-topbar-actions {
    display: flex;
    align-items: center;

    gap: 14px;
}

.dashboard-notification {
    width: 42px;
    height: 42px;

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

    border:
        1px solid #e1e7e3;

    border-radius: 50%;

    background: #ffffff;

    color: #526056;

    cursor: pointer;
}

.dashboard-notification:hover {
    background: #eef5f0;

    color: var(--sn-primary);
}

/* =====================================================
   DASHBOARD CONTENT
===================================================== */

.dashboard-content {
    width: 100%;

    padding: 30px;
}

.member-dashboard {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
}

/* =====================================================
   DASHBOARD HEADER
===================================================== */

.dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;
}

.dashboard-eyebrow {
    display: block;

    margin-bottom: 7px;

    color: var(--sn-primary);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;
}

.dashboard-header h1 {
    margin: 0 0 8px;

    color: var(--sn-text);

    font-size: 30px;
    font-weight: 800;
}

.dashboard-header p {
    margin: 0;

    color: #6f786f;

    font-size: 14px;
}

.create-listing-btn {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 12px 18px;

    border-radius: 10px;

    background: var(--sn-primary);

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background 0.2s ease;
}

.create-listing-btn:hover {
    background: var(--sn-primary-dark);

    color: #ffffff;
}

/* =====================================================
   DASHBOARD STATISTICS
===================================================== */

.dashboard-stats {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 24px;
}

.member-stat-card {
    min-height: 145px;

    padding: 20px;

    background: #ffffff;

    border:
        1px solid var(--sn-border);

    border-radius: 14px;

    box-shadow:
        0 3px 12px rgba(20, 40, 25, 0.03);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.member-stat-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(20, 40, 25, 0.08);
}

.stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.stat-label {
    color: #7a847c;

    font-size: 12px;
    font-weight: 600;
}

.member-stat-card h2 {
    margin: 8px 0 0;

    color: var(--sn-text-dark);

    font-size: 32px;
    font-weight: 800;
}

.member-stat-card > p {
    margin: 14px 0 0;

    color: #89928b;

    font-size: 12px;
}

.stat-symbol {
    width: 42px;
    height: 42px;

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

    border-radius: 11px;

    background: var(--sn-primary-light);

    color: var(--sn-primary);

    font-size: 20px;
}

/* =====================================================
   DASHBOARD GRID
===================================================== */

.dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, 1fr);

    gap: 24px;
}

.dashboard-main-column,
.dashboard-side-column {
    display: flex;
    flex-direction: column;

    gap: 24px;

    min-width: 0;
}

/* =====================================================
   DASHBOARD CARDS
===================================================== */

.member-dashboard-card {
    background: #ffffff;

    border:
        1px solid var(--sn-border);

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 3px 12px rgba(20, 40, 25, 0.03);
}

.card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    padding: 22px 24px 18px;

    border-bottom:
        1px solid #edf0ed;
}

.card-heading h3 {
    margin: 0;

    color: #203027;

    font-size: 18px;
    font-weight: 700;
}

.card-heading p {
    margin: 5px 0 0;

    color: #7a847c;

    font-size: 13px;
}

.card-heading a {
    color: var(--sn-primary);

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}

/* =====================================================
   EMPTY STATES
===================================================== */

.nearby-empty-state {
    min-height: 270px;

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

    padding: 30px;

    text-align: center;
}

.empty-icon {
    width: 56px;
    height: 56px;

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

    margin-bottom: 15px;

    border-radius: 50%;

    background: var(--sn-primary-light);

    color: var(--sn-primary);

    font-size: 24px;
}

.nearby-empty-state h4 {
    margin: 0 0 7px;

    color: #25342a;

    font-size: 17px;
    font-weight: 700;
}

.nearby-empty-state p {
    max-width: 400px;

    margin: 0;

    color: #7b857d;

    font-size: 13px;

    line-height: 1.6;
}

.outline-dashboard-btn {
    display: inline-flex;

    margin-top: 18px;

    padding: 10px 17px;

    border:
        1px solid var(--sn-primary);

    border-radius: 8px;

    color: var(--sn-primary);

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}

.outline-dashboard-btn:hover {
    background: var(--sn-primary);

    color: #ffffff;
}

/* =====================================================
   SMART MATCH
===================================================== */

.match-empty-state {
    min-height: 150px;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 24px;
}

.match-icon {
    width: 48px;
    height: 48px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--sn-primary-light);

    color: var(--sn-primary);
}

.match-empty-state h4 {
    margin: 0 0 5px;

    color: #25342a;

    font-size: 15px;
}

.match-empty-state p {
    margin: 0;

    color: #7b857d;

    font-size: 12px;
}

/* =====================================================
   ACTIVITY
===================================================== */

.activity-list {
    padding: 8px 24px 18px;
}

.activity-row {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 17px 0;

    border-bottom:
        1px solid #edf0ed;
}

.activity-row:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--sn-primary-light);

    color: var(--sn-primary);
}

.activity-row strong {
    display: block;

    color: #29382e;

    font-size: 13px;
}

.activity-row p {
    margin: 4px 0 0;

    color: #7a847c;

    font-size: 12px;
}

/* =====================================================
   QUICK ACTIONS
===================================================== */

.quick-actions {
    padding: 8px 16px 16px;
}

.quick-action-item {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px 10px;

    border-bottom:
        1px solid #edf0ed;

    color: #26352c;

    text-decoration: none;
}

.quick-action-item:hover {
    background: #f7faf7;
}

/* Title on one line, its short description under it. */
.quick-action-item strong,
.quick-action-item span {
    display: block;
}

.quick-action-item strong {
    font-size: 14.5px;
}

.quick-action-item span {
    margin-top: 2px;
    color: #6b7280;
    font-size: 13px;
}

.quick-action-icon {
    flex: none;
    width: 38px;
    height: 38px;

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

    border-radius: 9px;

    background: var(--sn-primary-light);

    color: var(--sn-primary);
}

/* =====================================================
   ACCOUNT INFORMATION
===================================================== */

.account-info {
    padding: 8px 24px;
}

.account-info-row {
    padding: 15px 0;

    border-bottom:
        1px solid #edf0ed;
}

.account-info-row:last-child {
    border-bottom: none;
}

.account-info-row span {
    display: block;

    margin-bottom: 5px;

    color: #8a938b;

    font-size: 10px;
    font-weight: 700;
}

.account-info-row strong {
    display: block;

    color: #2a382f;

    font-size: 13px;
}

.profile-btn {
    display: block;

    margin: 16px 24px 24px;

    padding: 10px;

    border:
        1px solid var(--sn-primary);

    border-radius: 8px;

    color: var(--sn-primary);

    font-size: 13px;
    font-weight: 600;

    text-align: center;

    text-decoration: none;
}

.profile-btn:hover {
    background: var(--sn-primary);

    color: #ffffff;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1200px) {

    .dashboard-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 991px) {

    .register-container {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        width: 250px;
    }

    .dashboard-main {
        width: calc(100% - 250px);

        margin-left: 250px;
    }

    .dashboard-content {
        padding: 24px;
    }

    .home-item-card {
        flex: 0 0 calc(50% - 10px);
    }
}

@media (max-width: 767px) {

    .navbar .nav-link {
        padding: 10px 0 !important;
    }

    .register-container {
        padding: 20px;
    }

    .register-form-row,
    .location-section,
    .register-info-row,
    .location-select-row {
        grid-template-columns: 1fr;
    }

    .dashboard-wrapper {
        display: block;
    }

    .dashboard-sidebar {
        position: relative;

        width: 100%;
        height: auto;

        min-height: auto;

        overflow: visible;
    }

    .dashboard-main {
        width: 100%;

        margin-left: 0;
    }

    .dashboard-menu {
        flex-direction: row;

        overflow-x: auto;

        padding-bottom: 10px;
    }

    .dashboard-menu-link {
        flex-shrink: 0;
    }

    .dashboard-sidebar-bottom {
        display: none;
    }

    .dashboard-topbar {
        padding: 15px 18px;
    }

    .dashboard-content {
        padding: 18px;
    }

    .dashboard-header {
        flex-direction: column;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .nearby-items-header {
        flex-direction: column;

        align-items: flex-start;
    }

    .about-title {
        font-size: 32px;
    }

    .about-image {
        height: 350px;
    }

    .card-heading {
        padding-left: 18px;

        padding-right: 18px;
    }
}

@media (max-width: 575px) {

    .hero h1 {
        font-size: 32px;
    }

    .home-item-card {
        flex: 0 0 85%;
    }

    .items-slider-prev {
        left: 5px;
    }

    .items-slider-next {
        right: 5px;
    }

    .dashboard-topbar h1 {
        font-size: 19px;
    }

    .dashboard-header h1 {
        font-size: 25px;
    }

    .card-heading,
    .activity-list,
    .account-info {
        padding-left: 18px;

        padding-right: 18px;
    }

    .dashboard-user {
        margin-left: 10px;

        margin-right: 10px;
    }

    
}

/* =========================================================
   POST LISTING PAGE
========================================================= */

.post-listing-page {
    max-width: 1400px;
    margin: 0 auto;
}

/* PAGE HEADER */

.post-listing-header {
    margin-bottom: 30px;
}

.back-dashboard-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #6b7280;
    text-decoration: none;

    font-size: 14px;
    margin-bottom: 14px;

    transition: 0.2s ease;
}

.back-dashboard-link:hover {
    color: #198754;
}

.post-listing-header h2 {
    margin: 0 0 8px;

    font-size: 28px;
    font-weight: 700;

    color: #1f2937;
}

.post-listing-header p {
    margin: 0;

    color: #6b7280;
}

/* =========================================================
   PAGE GRID
========================================================= */

.post-listing-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        340px;

    gap: 24px;

    align-items: start;
}

/* =========================================================
   FORM CARDS
========================================================= */

.listing-form-card {
    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 16px;

    padding: 28px;

    margin-bottom: 24px;

    box-shadow:
        0 4px 20px
        rgba(0, 0, 0, 0.04);
}

.listing-form-card h3 {
    margin: 0 0 8px;

    font-size: 18px;
    font-weight: 700;

    color: #1f2937;
}

.listing-form-description {
    color: #6b7280;

    font-size: 14px;

    margin-bottom: 22px;
}

.listing-location-summary {
    display: flex;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid #cfe0d4;
    border-radius: 10px;
    background: #f4fbf6;
    font-size: 13.5px;
    color: #35513f;
}
.listing-location-summary i { color: #198754; font-size: 16px; flex: 0 0 auto; }
.listing-location-summary strong { color: #14432b; }
.listing-location-summary a { color: #146c43; font-weight: 600; }

.listing-location-summary.is-missing {
    border-color: #e7cfa6;
    background: #fdf7ec;
    color: #6b4f1d;
}
.listing-location-summary.is-missing i { color: #b5820f; }

/* =========================================================
   FORM CONTROLS
========================================================= */

.post-listing-form .form-label {
    font-weight: 600;

    color: #374151;

    margin-bottom: 8px;
}

.post-listing-form .form-control,
.post-listing-form .form-select {
    min-height: 48px;

    border: 1px solid #d1d5db;

    border-radius: 10px;

    padding-left: 14px;
    padding-right: 14px;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.post-listing-form textarea.form-control {
    min-height: 150px;

    padding-top: 12px;

    resize: vertical;
}

.post-listing-form .form-control:focus,
.post-listing-form .form-select:focus {
    border-color: #198754;

    box-shadow:
        0 0 0 3px
        rgba(25, 135, 84, 0.12);
}

/* =========================================================
   LISTING TYPE
========================================================= */

.listing-type-option {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    width: 100%;
    min-height: 105px;

    padding: 18px;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.listing-type-option:hover {
    border-color: #198754;

    background: #f0fdf4;

    transform: translateY(-2px);
}

.listing-type-option input {
    margin-top: 4px;

    accent-color: #198754;
}

.listing-type-option span {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.listing-type-option strong {
    color: #1f2937;

    font-size: 15px;
}

.listing-type-option small {
    color: #6b7280;

    font-size: 13px;
}

/* SELECTED LISTING TYPE */

.listing-type-option:has(
    input:checked
) {
    border-color: #198754;

    background: #ecfdf5;

    box-shadow:
        0 0 0 2px
        rgba(25, 135, 84, 0.1);
}

/* =========================================================
   PREFERENCE CATEGORY CHIPS (onboarding + profile)
========================================================= */

.pref-category-grid { display: flex; flex-wrap: wrap; gap: 10px; }

.pref-category-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.pref-category-chip input { position: absolute; opacity: 0; width: 0; height: 0; }

.pref-category-chip:hover { border-color: #198754; background: #f0fdf4; }

.pref-category-chip:has(input:checked) {
    border-color: #198754;
    background: #198754;
    color: #fff;
}

/* =========================================================
   ONBOARDING PREFERENCES — step-wizard modal
========================================================= */

.onboarding-modal-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background: linear-gradient(135deg, #0f2419, #146c43 55%, #198754);
}

.onboarding-modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 36px 32px 28px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(15, 23, 42, .35);
}

.onboarding-skip-form {
    position: absolute;
    top: 18px;
    right: 20px;
    margin: 0;
}

.onboarding-modal-skip {
    border: none;
    background: none;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.onboarding-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #198754;
    font-size: 15px;
    font-weight: 800;
}

.onboarding-intro {
    margin: 8px 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1ee;
    color: #6b7280;
    font-size: 14px;
}

.onboarding-modal-skip:hover {
    color: #198754;
    text-decoration: underline;
}

.onboarding-step { display: none; min-height: 220px; }
.onboarding-step.is-active { display: block; }

.onboarding-step h3 {
    margin: 6px 0 6px;
    color: #1f2937;
    font-size: 20px;
    font-weight: 800;
}

.onboarding-step > p {
    margin: 0 0 20px;
    color: #6b7280;
}

.onboarding-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.onboarding-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 20px 0 22px;
}

.onboarding-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #d1d5db;
    transition: background .2s ease, width .2s ease;
}

.onboarding-dot.is-active {
    width: 22px;
    background: #198754;
}

.onboarding-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.onboarding-nav .onboarding-next,
.onboarding-nav .onboarding-submit {
    margin-left: auto;
}

.onboarding-back.is-hidden {
    visibility: hidden;
}

@media (max-width: 600px) {
    .onboarding-modal { padding: 30px 20px 22px; }
}

/* =========================================================
   PRICE
========================================================= */

.post-listing-form .input-group-text {
    border-radius: 10px 0 0 10px;

    background: #f9fafb;

    border-color: #d1d5db;

    font-weight: 600;
}

.post-listing-form .input-group .form-control {
    border-radius: 0 10px 10px 0;
}

/* =========================================================
   IMAGE UPLOAD
========================================================= */

/* =========================================================
   LISTING IMAGE UPLOAD
========================================================= */

.listing-image-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 280px;

    position: relative;
    overflow: hidden;

    padding: 0;

    border: 2px dashed #cbd5e1;
    border-radius: 16px;

    background: #f8fafc;

    cursor: pointer;
}

/* PLACEHOLDER */

#imageUploadPlaceholder, .image-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    text-align: center;
}

/* IMAGE PREVIEW — HIDDEN BY DEFAULT */

.image-preview-grid {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 8px;
}

.items-slider-arrow:disabled {
    opacity: .38;
    cursor: not-allowed;
    box-shadow: none;
}

.items-slider-arrow:disabled:hover {
    border-color: #dce3df;
    color: var(--sn-primary);
    background: #ffffff;
}

/* =====================================================
   COURIER DASHBOARD
===================================================== */

.delivery-hero { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 30px; border-radius: 20px; color: #fff; background: linear-gradient(120deg, #146c43, #198754 68%, #3aa76d); }
.delivery-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #4f9f72; font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.delivery-hero .delivery-eyebrow { color: #d7f5e2; }
.delivery-hero h2 { margin: 8px 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
.delivery-hero p { margin: 0; max-width: 600px; color: #e2f5e9; }
.delivery-availability-card { min-width: 300px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: rgba(255,255,255,.12); }
.delivery-availability-card strong, .delivery-availability-card span { display: block; }
.delivery-availability-card span { margin-top: 4px; font-size: 12px; color: #e2f5e9; }
.delivery-switch { position: relative; width: 48px; height: 26px; flex: 0 0 auto; cursor: pointer; }
.delivery-switch input { width: 0; height: 0; opacity: 0; }
.delivery-switch span { position: absolute; inset: 0; margin: 0; border-radius: 20px; background: #8c9d93; transition: .2s; }
.delivery-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s; }
.delivery-switch input:checked + span { background: #8ff0b2; }
.delivery-switch input:checked + span::after { transform: translateX(22px); }
.delivery-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.delivery-stats article { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 20px; border: 1px solid #dce9df; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px rgba(20, 73, 43, .05); }
.delivery-stats i { grid-row: span 2; padding: 10px; border-radius: 10px; color: #198754; background: #e8f8ee; font-size: 20px; }
.delivery-stats span { color: #6b7280; font-size: 13px; }
.delivery-stats strong { font-size: 27px; line-height: 1; }
.delivery-section { padding: 26px; border: 1px solid #dce9df; border-radius: 18px; background: #fff; }
.delivery-section-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
.delivery-section-heading h2 { margin: 5px 0; font-size: 22px; font-weight: 800; }
.delivery-section-heading p { margin: 0; color: #6b7280; }
.delivery-count { padding: 7px 10px; border-radius: 20px; color: #146c43; background: #e8f8ee; font-size: 13px; font-weight: 700; white-space: nowrap; }
.delivery-list { display: grid; gap: 16px; }
.delivery-card { padding: 22px; border: 1px solid #e2e9e4; border-radius: 14px; background: #fcfefd; }
.delivery-card-topline { display: flex; justify-content: space-between; gap: 14px; }
.delivery-order { color: #6b7280; font-size: 12px; font-weight: 700; }
.delivery-card h3 { margin: 4px 0 0; font-size: 18px; font-weight: 800; }
.delivery-status { height: fit-content; padding: 6px 10px; border-radius: 20px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.delivery-status-assigned { color: #805b00; background: #fff3cd; }.delivery-status-picked-up, .delivery-status-in-transit { color: #0b5d89; background: #d9f1ff; }.delivery-status-delivered { color: #146c43; background: #d9f5e3; }
.delivery-route { margin: 20px 0; padding: 16px; border-radius: 10px; background: #f5f9f6; }
.delivery-stop { display: flex; gap: 12px; align-items: flex-start; }.delivery-stop > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #198754; }.delivery-stop.dropoff > i { background: #d9534f; }
.delivery-stop span, .delivery-stop strong, .delivery-stop small { display: block; }.delivery-stop span { color: #6b7280; font-size: 12px; }.delivery-stop strong { font-size: 14px; }.delivery-stop small { color: #6b7280; font-size: 12px; }
.delivery-route-line { height: 22px; padding-left: 8px; color: #8cb99c; }
.delivery-card-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }.delivery-status-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }.delivery-status-form label { color: #58635c; font-size: 12px; font-weight: 700; }.delivery-status-form select { padding: 8px; border: 1px solid #cfdcd2; border-radius: 7px; background: #fff; font-size: 13px; }
.delivery-primary-action, .delivery-secondary-action{ padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; }.delivery-primary-action { color: #fff; background: #198754; }.delivery-secondary-action{ color: #146c43; border-color: #b9d9c4; background: #fff; }.delivery-secondary-action:disabled { opacity: .7; cursor: wait; }.delivery-complete-note { color: #198754; font-size: 13px; font-weight: 700; }
.delivery-proof-link { display: inline-flex; align-items: center; gap: 5px; color: #146c43; font-size: 12.5px; font-weight: 700; text-decoration: none; }.delivery-proof-link:hover { text-decoration: underline; }
.delivery-empty-state { padding: 44px 20px; border: 1px dashed #b6cdbd; border-radius: 12px; text-align: center; background: #fbfefc; }.delivery-empty-state > i { color: #198754; font-size: 38px; }.delivery-empty-state h3 { margin: 10px 0 5px; font-size: 19px; }.delivery-empty-state p { max-width: 500px; margin: 0 auto; color: #6b7280; }
.delivery-track-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.delivery-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 24px 0 14px; padding: 0; list-style: none; }.delivery-timeline li { position: relative; padding-top: 24px; color: #8a968e; font-size: 12px; font-weight: 700; text-align: center; }.delivery-timeline li::before { position: absolute; z-index: 1; top: 3px; left: calc(50% - 8px); width: 16px; height: 16px; border: 3px solid #d7e2da; border-radius: 50%; background: #fff; content: ''; }.delivery-timeline li:not(:last-child)::after { position: absolute; top: 10px; left: 50%; width: 100%; height: 2px; background: #d7e2da; content: ''; }.delivery-timeline li.is-complete { color: #146c43; }.delivery-timeline li.is-complete::before, .delivery-timeline li.is-complete:not(:last-child)::after { border-color: #198754; background: #198754; }

@media (max-width: 850px) { .delivery-hero { align-items: stretch; flex-direction: column; }.delivery-availability-card { min-width: 0; }.delivery-stats { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .delivery-hero, .delivery-section, .delivery-card { padding: 18px; }.delivery-section-heading, .delivery-card-topline { flex-direction: column; }.delivery-card-actions, .delivery-status-form { align-items: stretch; width: 100%; }.delivery-primary-action, .delivery-secondary-action{ text-align: center; }.delivery-status-form select { flex: 1; } }
@media (max-width: 600px) { .delivery-track-heading { flex-direction: column; }.delivery-timeline { grid-template-columns: 1fr; gap: 0; }.delivery-timeline li { padding: 5px 0 5px 30px; text-align: left; }.delivery-timeline li::before { top: 5px; left: 4px; }.delivery-timeline li:not(:last-child)::after { top: 20px; left: 11px; width: 2px; height: 22px; } }
.transaction-image:hover { outline: 3px solid #cfeeda; }.transaction-details h3 a { color: inherit; text-decoration: none; }.transaction-details h3 a:hover{ color: #146c43; }.message-item-image { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 10px; color: #94a3b8; background: #f1f5f2; }.message-item-image img { width: 100%; height: 100%; object-fit: cover; }.message-thread-status { margin-left: 8px; }.delivery-secondary-action.is-sharing { color: #fff; border-color: #b42318; background: #b42318; }.smart-match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }

/* Notification center */
.notification-menu { position: relative; }.dashboard-notification { position: relative; }.notification-badge { position: absolute; top: -6px; right: -8px; min-width: 18px; padding: 1px 4px; border: 2px solid #fff; border-radius: 20px; color: #fff; background: #dc3545; font-size: 10px; font-weight: 800; line-height: 14px; }.notification-panel { position: absolute; z-index: 1100; top: calc(100% + 12px); right: 0; width: min(390px, calc(100vw - 36px)); overflow: hidden; border: 1px solid #dce9df; border-radius: 14px; background: #fff; box-shadow: 0 16px 35px rgba(22, 36, 59, .18); }.notification-panel[hidden] { display: none; }.notification-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid #edf1ee; }.notification-panel-heading strong, .notification-panel-heading span { display: block; }.notification-panel-heading span { color: #6b7280; font-size: 12px; }.notification-panel-actions { display: flex; align-items: center; gap: 10px; }.notification-panel-heading button { border: 0; color: #146c43; background: transparent; font-size: 12px; font-weight: 700; white-space: nowrap; }.notification-panel-heading .notification-clear-button { color: #b42318; }.notification-items { max-height: min(520px, calc(100vh - 150px)); overflow-y: auto; overscroll-behavior: contain; }.notification-item { border-bottom: 1px solid #edf1ee; }.notification-item:last-child { border-bottom: 0; }.notification-item strong, .notification-item small, .notification-item time { display: block; }.notification-item strong { color: #25332a; font-size: 13px; }.notification-item small { margin: 2px 0; color: #657169; font-size: 12px; line-height: 1.35; }.notification-item time { color: #89958d; font-size: 11px; }.notification-type { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #146c43; background: #e8f8ee; }.notification-type-message { color: #0b5d89; background: #d9f1ff; }.notification-empty { padding: 30px; color: #718077; text-align: center; }.notification-empty i { font-size: 25px; }.notification-empty p { margin: 8px 0 0; font-size: 13px; }

.notification-item { display: flex; gap: 10px; padding: 13px 16px; color: inherit; text-decoration: none; background: #fff; }.notification-item:hover { color: inherit; background: #f5faf6; }.notification-item.is-unread { background: #effaf2; }
.notification-stack-count { min-width: 22px; height: 22px; margin: 4px 0 0 auto; padding: 2px 6px; border-radius: 12px; color: #fff; background: #dc3545; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }

.transaction-decision { padding: 11px; border: 1px solid #d8eee0; border-radius: 10px; background: #f5fbf6; }.transaction-decision > span { display: block; margin-bottom: 7px; color: #486153; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }.transaction-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; cursor: pointer; }.transaction-action-accept:hover { color: #fff; background: #146c43; }.transaction-action-reject:hover { background: #fff5f5; }

/* Profile photo upload */
.profile-form-card { overflow: hidden; border: 1px solid #dce9df; border-radius: 18px; background: #fff; box-shadow: 0 5px 16px rgba(20, 73, 43, .05); }.profile-photo-section { display: flex; align-items: center; gap: 24px; padding: 28px; border-bottom: 1px solid #e7eee9; background: linear-gradient(120deg, #f5fbf6, #fff); }.profile-photo-preview { display: grid; width: 116px; height: 116px; flex: 0 0 auto; overflow: hidden; place-items: center; border: 4px solid #fff; border-radius: 50%; color: #fff; background: #198754; box-shadow: 0 5px 18px rgba(20, 108, 67, .2); font-size: 40px; font-weight: 800; }.profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }.profile-photo-copy h2, .profile-details-heading h2 { margin: 4px 0 6px; color: #16243b; font-size: 22px; font-weight: 800; }.profile-photo-copy p { max-width: 600px; margin: 0; color: #66736b; }.profile-section-kicker { color: #198754; font-size: 11px; font-weight: 800; letter-spacing: .09em; }.profile-photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }.profile-photo-upload { padding: 9px 13px; border-radius: 8px; color: #fff; background: #198754; font-size: 13px; font-weight: 700; cursor: pointer; }.profile-photo-upload:hover { background: #146c43; }.profile-photo-filename { color: #6b7280; font-size: 12px; }.profile-details-section { padding: 28px; }.profile-details-heading { margin-bottom: 18px; }.profile-details-section .form-label { color: #314238; font-size: 13px; font-weight: 700; }.profile-details-section .form-control { min-height: 42px; border-color: #d5e0d8; }.profile-details-section .form-control:focus { border-color: #198754; box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .12); }.profile-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; border-top: 1px solid #e7eee9; background: #fbfdfb; }.profile-form-footer p { margin: 0; color: #748078; font-size: 13px; }.profile-form-footer .btn { padding: 9px 15px; font-weight: 700; }
@media (max-width: 600px) { .profile-photo-section { align-items: flex-start; flex-direction: column; padding: 22px; }.profile-details-section { padding: 22px; }.profile-location-section { padding: 18px 22px 22px; }.profile-form-footer { align-items: stretch; flex-direction: column; padding: 18px 22px; }.profile-form-footer .btn { width: 100%; } }

.image-preview-grid.has-previews {
    display: grid;
}

.image-preview-grid.single-preview {
    grid-template-columns: minmax(0, 1fr);
}

.image-preview-item {
    position: relative;
    min-width: 0;
    min-height: 0;
}

.image-preview-remove {
    position: absolute;
    top: 6px;
    right: 6px;

    display: grid;
    width: 24px;
    height: 24px;

    place-items: center;

    border: 2px solid #fff;
    border-radius: 50%;

    color: #fff;
    background: rgba(180, 35, 24, .85);

    font-size: 11px;
    cursor: pointer;
    transition: background .15s ease;
}

.image-preview-remove:hover {
    background: #b42318;
}

.image-preview-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f1f5f3;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

/* ONLY SHOW AFTER IMAGE IS SELECTED */

/* =========================================================
   POSTING TIPS
========================================================= */

.listing-help-card {
    background: #f8fffb;
}

.listing-help-card ul {
    margin: 16px 0 0;

    padding-left: 20px;
}

.listing-help-card li {
    color: #6b7280;

    margin-bottom: 12px;

    font-size: 14px;
}

/* =========================================================
   BUTTONS
========================================================= */

.submit-listing-btn {
    width: 100%;

    border: none;

    border-radius: 12px;

    padding: 15px 20px;

    background: #198754;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.submit-listing-btn:hover {
    background: #157347;

    transform: translateY(-1px);
}

.submit-listing-btn i {
    margin-right: 8px;
}

.cancel-listing-btn {
    display: block;

    width: 100%;

    margin-top: 12px;

    padding: 13px;

    border-radius: 12px;

    text-align: center;

    color: #6b7280;

    text-decoration: none;

    font-weight: 600;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.cancel-listing-btn:hover {
    background: #f3f4f6;

    color: #1f2937;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

    .post-listing-grid {
        grid-template-columns: 1fr;
    }

    .post-listing-side {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;
    }

    .image-upload-card,
    .listing-help-card {
        margin-bottom: 0;
    }

    .submit-listing-btn,
    .cancel-listing-btn {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {

    .post-listing-page {
        width: 100%;
    }

    .listing-form-card {
        padding: 20px;

        border-radius: 14px;
    }

    .post-listing-header h2 {
        font-size: 24px;
    }

    .post-listing-side {
        grid-template-columns: 1fr;
    }

    .submit-listing-btn,
    .cancel-listing-btn {
        grid-column: auto;
    }
}

@media (max-width: 576px) {

    .listing-type-option {
        min-height: auto;
    }

    .post-listing-header {
        margin-bottom: 20px;
    }
}

/* =====================================================
   DASHBOARD LISTINGS - FINAL FIX
===================================================== */

/* Nearby items container */
.dashboard-item-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 22px 24px 24px;
}

/* Nearby item card */
.dashboard-item-card {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e3e8e5;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(20, 40, 25, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(20, 40, 25, 0.08);
}

/* ---------------------------------------------------------
   NEARBY ITEM IMAGE
   Fixed box: the uploaded image can NEVER change the card size.
--------------------------------------------------------- */
.dashboard-item-image {
    position: relative;
    width: 100%;
    height: 180px;
    min-height: 180px;
    max-height: 180px;
    flex: 0 0 180px;
    overflow: hidden;
    background: #f1f5f3;
}

.dashboard-item-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.dashboard-item-no-image {
    width: 100%;
    height: 180px;
    min-height: 180px;
    max-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f3;
    color: #8a938d;
    font-size: 13px;
}

/* Listing type badge */

/* If the badge is inside the body instead of the image, keep it normal. */

/* ---------------------------------------------------------
   NEARBY ITEM BODY
--------------------------------------------------------- */
.dashboard-item-body {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.dashboard-item-body h4 {
    width: 100%;
    margin: 0 0 7px;
    color: #25342a;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-item-body p {
    width: 100%;
    min-height: 36px;
    margin: 0 0 12px;
    color: #7a847c;
    font-size: 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-item-location {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    color: #7a847c;
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-item-location i {
    flex: 0 0 auto;
    color: #198754;
}

.dashboard-item-price {
    display: block;
    margin-top: 8px;
    color: #198754;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
}

/* =====================================================
   MY LISTINGS
   Every thumbnail uses one fixed box.
===================================================== */

.dashboard-my-listings {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 4px 24px 18px;
}

.my-listing-row {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #edf0ed;
}

.my-listing-row:last-child {
    border-bottom: none;
}

/* Fixed thumbnail */
.my-listing-image {
    position: relative;
    width: 96px;
    height: 96px;
    min-width: 96px;
    min-height: 96px;
    max-width: 96px;
    max-height: 96px;
    flex: 0 0 96px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f3;
    border: 1px solid #e1e7e3;
    border-radius: 12px;
}

.my-listing-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.my-listing-image span {
    color: #8a938d;
    font-size: 10px;
    text-align: center;
}

.my-listing-info {
    flex: 1 1 auto;
    min-width: 0;
}

.my-listing-info h4 {
    width: 100%;
    margin: 0 0 6px;
    color: #25342a;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-listing-info p {
    width: 100%;
    margin: 0 0 8px;
    color: #7a847c;
    font-size: 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.my-listing-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 9px;
    background: #e8f5ec;
    color: #198754;
    border-radius: 20px;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}

/* =====================================================
   DASHBOARD EMPTY STATE
===================================================== */

.nearby-empty-state {
    min-height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}

.nearby-empty-state .empty-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 50%;
    background: var(--sn-primary-light);
    color: var(--sn-primary);
    font-size: 24px;
}

.nearby-empty-state h4 {
    margin: 0 0 7px;
    color: #25342a;
    font-size: 17px;
    font-weight: 700;
}

.nearby-empty-state p {
    max-width: 400px;
    margin: 0 0 18px;
    color: #7a847c;
    font-size: 13px;
    line-height: 1.6;
}

.outline-dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid var(--sn-primary);
    border-radius: 8px;
    background: transparent;
    color: var(--sn-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.outline-dashboard-btn:hover {
    background: var(--sn-primary);
    color: #ffffff;
}

/* =====================================================
   DASHBOARD RESPONSIVE
===================================================== */

@media (max-width: 1200px) {
    .dashboard-item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .dashboard-sidebar {
        width: 250px;
    }

    .dashboard-main {
        width: calc(100% - 250px);
        margin-left: 250px;
    }

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

@media (max-width: 768px) {
    .dashboard-sidebar {
        position: relative;
        width: 100%;
        height: auto;
        min-height: auto;
    }

    .dashboard-main {
        width: 100%;
        margin-left: 0;
    }

    .dashboard-topbar {
        padding: 16px 20px;
    }

    .dashboard-content {
        padding: 20px;
    }

    .dashboard-header {
        flex-direction: column;
    }

    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-item-grid {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .dashboard-item-image,
    .dashboard-item-no-image {
        height: 220px;
        min-height: 220px;
        max-height: 220px;
    }

    .dashboard-item-image {
        flex-basis: 220px;
    }

    .dashboard-my-listings {
        padding-left: 18px;
        padding-right: 18px;
    }

}

@media (max-width: 576px) {
    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-content {
        padding: 15px;
    }

    .dashboard-topbar-actions {
        gap: 8px;
    }

    .my-listing-row {
        gap: 12px;
    }

    .my-listing-image {
        width: 80px;
        height: 80px;
        min-width: 80px;
        min-height: 80px;
        max-width: 80px;
        max-height: 80px;
        flex-basis: 80px;
        border-radius: 10px;
    }

    .my-listing-info h4 {
        font-size: 14px;
    }

    .my-listing-info p {
        font-size: 11px;
    }
}

/* =========================================================
   BROWSE ITEMS
========================================================= */

.browse-page {
    max-width: 1280px;
    margin: 0 auto;
}

.transaction-page{max-width:1100px;margin:auto}.transaction-details p{margin:0;color:#6b7280}.transaction-browse-button{display:inline-flex;gap:8px;align-items:center;padding:11px 16px;border-radius:9px;background:#198754;color:#fff;text-decoration:none;font-weight:700;white-space:nowrap}.transaction-section{margin-top:28px}.transaction-list{display:grid;gap:12px}.transaction-card{display:grid;grid-template-columns:88px 1fr auto;gap:18px;align-items:center;padding:14px;border:1px solid #e5e7eb;border-radius:14px;background:#fff}.transaction-image{width:88px;height:72px;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:#f3f4f6;color:#9ca3af;font-size:24px}.transaction-image img{width:100%;height:100%;object-fit:contain}.transaction-card-topline{display:flex;gap:8px;margin-bottom:7px}.transaction-type,.transaction-status{padding:4px 8px;border-radius:99px;font-size:12px;font-weight:700}.transaction-type{background:#f3f4f6;color:#4b5563}.transaction-status-pending{background:#fff7df;color:#9a6700}.transaction-status-accepted,.transaction-status-completed{background:#e8f5ed;color:#167344}.transaction-status-rejected,.transaction-status-cancelled{background:#fcebed;color:#b42318}.transaction-details h3{margin:0 0 6px;font-size:16px}.transaction-actions form{display:flex;gap:8px}.transaction-action{border:0;border-radius:8px;padding:9px 13px;font-weight:700}.transaction-action-accept{background:#198754;color:#fff}.transaction-action-reject,.transaction-action-cancel{background:#fff;color:#b42318;border:1px solid #fecaca}.transaction-empty-state{padding:42px 22px;text-align:center;border:1px dashed #d1d5db;border-radius:14px;background:#fff}.transaction-empty-state>div{font-size:30px;color:#198754}.transaction-empty-state h3{margin:8px 0}.transaction-empty-state p{margin:0 0 18px;color:#6b7280}@media(max-width:576px){.transaction-card{display:flex;flex-direction:column;align-items:flex-start}.transaction-actions{width:100%}.transaction-actions form{width:100%}.transaction-action{flex:1}.transaction-image{width:100%;height:160px}}

.browse-filters {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr)) auto auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.browse-filters select,
.browse-search input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
}

.browse-search {
    position: relative;
}

.browse-search i {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: #6b7280;
}

.browse-search input {
    padding-left: 38px;
}

.browse-filter-button {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: #198754;
    color: #ffffff;
    font-weight: 600;
    white-space: nowrap;
}

.browse-clear-link {
    color: #374151;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.browse-results-count {
    margin: 20px 2px 12px;
    color: #6b7280;
}

.browse-item-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.browse-item-meta{
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #6b7280;
    font-size: 13px;
}

.browse-item-meta span:last-child {
    color: #167344;
    font-weight: 600;
}

.dashboard-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.browse-pagination {
    margin-top: 24px;
}

.item-detail-card { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr); overflow: hidden; border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .07); }
.item-detail-gallery { display: flex; flex-direction: column; gap: 10px; padding: 10px; align-content: start; background: #f3f4f6; }
.item-gallery-main-wrap { position: relative; width: 100%; }
.item-gallery-main { display: block; width: 100%; height: 380px; object-fit: contain; border-radius: 10px; background: #fff; }
.item-gallery-arrow { position: absolute; top: 50%; display: grid; width: 36px; height: 36px; margin-top: -18px; place-items: center; border: none; border-radius: 50%; color: #146c43; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(15, 23, 42, .18); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.item-gallery-arrow:hover { background: #fff; transform: translateY(-1px); }
.item-gallery-arrow-prev { left: 10px; }
.item-gallery-arrow-next { right: 10px; }
.item-gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; scrollbar-color: #b9d9c4 transparent; }
.item-gallery-thumbs::-webkit-scrollbar { height: 6px; }
.item-gallery-thumbs::-webkit-scrollbar-track { background: transparent; }
.item-gallery-thumbs::-webkit-scrollbar-thumb { background: #b9d9c4; border-radius: 999px; }
.item-gallery-thumbs::-webkit-scrollbar-thumb:hover { background: #8fc3a4; }
.item-gallery-thumb { flex: 0 0 60px; width: 60px; height: 60px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .15s ease; }
.item-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-gallery-thumb:hover { border-color: #b9d9c4; }
.item-gallery-thumb.is-active { border-color: #198754; }
.item-detail-placeholder { display: grid; min-height: 300px; place-content: center; gap: 10px; color: #6b7280; text-align: center; }
.item-detail-placeholder i { font-size: 44px; }
.item-detail-content { padding: 28px; }
.item-detail-content h2 { margin: 12px 0 6px; color: #18261d; font-size: 28px; }
.item-detail-content h3 { margin: 25px 0 8px; font-size: 16px; }
.item-detail-owner { color: #64748b; }
.item-detail-facts { display: grid; gap: 12px; margin: 22px 0; }
.item-detail-facts div { display: grid; grid-template-columns: 115px 1fr; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid #edf1ee; }
.item-detail-facts dt { color: #6b7280; font-weight: 500; }.item-detail-facts dd { margin: 0; color: #1f2937; font-weight: 700; }
.item-detail-description { white-space: pre-line; color: #4b5563; line-height: 1.65; }
.item-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.transaction-offer-line { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: #146c43; font-size: 13px; }
.transaction-offer-thumb { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; }
.transaction-offer-card { display: flex; align-items: center; gap: 12px; margin: 10px 0 18px; padding: 10px 14px; border: 1px solid #dce9df; border-radius: 12px; background: #f6faf7; color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
a.transaction-offer-card:hover { border-color: #198754; background: #f0faf3; }
.transaction-offer-card img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.transaction-offer-card-placeholder { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 8px; color: #198754; background: #e8f8ee; font-size: 18px; }
.transaction-offer-card strong { color: #14432b; font-size: 14px; }

.message-list { display: grid; gap: 10px; max-width: 850px; }
.message-list-item { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid #e1e9e3; border-radius: 14px; color: inherit; text-decoration: none; background: #fff; transition: background .18s ease, transform .18s ease; }.message-list-item.has-unread { border-color: #acd8b9; background: #f3fbf5; }
.message-list-item:hover { color: inherit; background: #f4faf5; transform: translateX(3px); }
.message-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #17633d; background: #dff3e5; font-weight: 800; }
.message-list-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }.message-list-copy small { color: #16804a; font-weight: 600; }.message-list-copy > span { overflow: hidden; color: #6b7280; text-overflow: ellipsis; white-space: nowrap; }
.message-list-item > i { color: #94a3b8; }
.message-unread-count { min-width: 23px; padding: 3px 7px; border-radius: 12px; color: #fff; background: #d9534f; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }
.message-thread { max-width: 850px; overflow: hidden; border: 1px solid #dce9df; border-radius: 16px; background: #fff; box-shadow: 0 10px 25px rgba(15, 23, 42, .07); }
.message-thread > header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e7eee8; }.message-thread > header small { display: block; color: #6b7280; font-size: 13px; }
.message-thread-body { display: flex; min-height: 330px; max-height: 55vh; flex-direction: column; gap: 12px; overflow-y: auto; padding: 20px; background: #fbfdfb; }
.message-bubble { max-width: min(80%, 560px); padding: 11px 14px; align-self: flex-start; border: 1px solid #e4ebe5; border-radius: 4px 15px 15px 15px; background: #fff; }.message-bubble.is-mine { align-self: flex-end; border-color: #c7e9d2; border-radius: 15px 4px 15px 15px; background: #eaf8ed; }
.message-bubble strong { display: block; margin-bottom: 3px; color: #17633d; font-size: 12px; }.message-bubble p { margin: 0; color: #25332a; white-space: pre-wrap; }.message-bubble time { display: block; margin-top: 5px; color: #809087; font-size: 11px; }.message-empty { margin: auto; color: #6b7280; }
.message-compose { display: flex; gap: 10px; padding: 14px; border-top: 1px solid #e7eee8; }.message-compose textarea { min-height: 46px; flex: 1; resize: vertical; border: 1px solid #cddbd0; border-radius: 10px; padding: 10px 12px; }.message-compose button { align-self: flex-end; }
.menu-count { display: grid; min-width: 18px; height: 18px; margin-left: auto; place-items: center; border-radius: 12px; color: #fff; background: #dc3545; font-size: 10px; font-weight: 800; }

@media (max-width: 768px) { .item-detail-card { grid-template-columns: 1fr; }.item-detail-content { padding: 20px; }.item-gallery-main { height: 260px; }.message-thread-body { min-height: 280px; }.message-compose button span { display: none; } }

/* Marketplace polish: clearer item hierarchy and stronger interactive affordances. */
.browse-page { max-width: 1320px; margin: 0 auto; }
.browse-results-count { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; color: #17633d; background: #eaf8ed; font-size: 13px; font-weight: 700; }

.browse-item-meta span { padding: 4px 8px; border-radius: 99px; background: #f1f6f2; font-size: 11px; font-weight: 700; }
.browse-item-meta span:last-child { background: #e8f8ee; }

.item-detail-card { border-color: #d9e7dc; }
.item-detail-content { position: relative; }
.item-detail-content::before { position: absolute; top: 0; left: 28px; right: 28px; height: 4px; border-radius: 0 0 10px 10px; background: linear-gradient(90deg, #198754, #65b989); content: ''; }
.item-detail-owner { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 10px; border-radius: 8px; color: #396149; background: #f1f8f3; font-size: 13px; }
.item-detail-facts div { align-items: center; }
.item-detail-facts dt { font-size: 13px; }.item-detail-facts dd { font-size: 14px; }
.item-detail-actions .btn { min-height: 44px; border-radius: 9px; padding-inline: 17px; font-weight: 700; }

/* Compact card actions stay on one clear row at every viewport size. */

/* Shared back navigation gives detail, messages, and listing pages a consistent control. */
.back-navigation { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 8px 12px; border: 1px solid #cfe0d3; border-radius: 9px; color: #17633d; background: #fff; box-shadow: 0 2px 5px rgba(15, 23, 42, .04); font-size: 13px; font-weight: 700; text-decoration: none; transition: background .18s ease, transform .18s ease, border-color .18s ease; }
.back-navigation:hover { border-color: #198754; color: #146c43; background: #edf9f0; transform: translateX(-2px); }

/* Conversation page: a focused, private chat workspace rather than a plain card. */
.message-thread { border-radius: 18px; box-shadow: 0 14px 35px rgba(15, 35, 22, .09); }
.message-thread > header { min-height: 76px; padding: 15px 20px; background: linear-gradient(135deg, #f5fcf6, #fff); }
.message-thread > header .message-avatar { box-shadow: 0 0 0 4px #eaf8ed; }
.message-thread-status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 6px 9px; border-radius: 99px; color: #39704a; background: #eaf8ed; font-size: 11px; font-weight: 700; white-space: nowrap; }
.message-thread-body { background-image: radial-gradient(#dfeee3 1px, transparent 1px); background-size: 18px 18px; }
.message-compose { padding: 16px; background: #fff; }.message-compose textarea:focus { outline: none; border-color: #198754; box-shadow: 0 0 0 3px rgba(25, 135, 84, .12); }

@media (max-width: 576px) { .message-thread-status { display: none; }.message-thread > header { padding: 14px; } }

.browse-empty-state {
    padding: 64px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    text-align: center;
}

.browse-empty-state i {
    display: block;
    margin-bottom: 14px;
    color: #198754;
    font-size: 34px;
}

.browse-empty-state h2 {
    font-size: 20px;
}

.browse-empty-state p {
    margin-bottom: 20px;
    color: #6b7280;
}

@media (max-width: 1100px) {
    .browse-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .browse-item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .browse-filters,
    .browse-item-grid {
        grid-template-columns: 1fr;
    }
}

/* Transaction action panel */
.transaction-actions {
    display: grid;
    min-width: 205px;
    gap: 8px;
}

.transaction-decision {
    padding: 10px;
    border-color: #cde8d6;
    background: #f4fbf6;
}

.transaction-decision > span {
    margin-bottom: 8px;
}

.transaction-decision-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 7px !important;
}

.transaction-decision-form .transaction-action {
    width: 100%;
    padding: 8px 9px;
}

.transaction-action-reject {
    border-color: #f3c4c4;
    background: #fff;
}

.transaction-actions > .transaction-action-accept {
    text-align: center;
}

@media (max-width: 576px) {
    .transaction-actions { min-width: 0; }

}

.delivery-map { height: 420px; overflow: hidden; border: 1px solid #dce9df; border-radius: 12px; background: #edf4ef; }
.delivery-route-planner { margin: 24px 0; padding: 26px; border: 1px solid #cde8d6; border-radius: 18px; background: linear-gradient(135deg, #f4fbf6, #fff); }.delivery-route-stops { display: grid; gap: 9px; }.delivery-route-stop { display: grid; grid-template-columns: 30px 22px 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid #dce9df; border-left: 4px solid #198754; border-radius: 10px; background: #fff; cursor: grab; }.delivery-route-stop.dropoff { border-left-color: #d9534f; }.delivery-route-stop.is-dragging { opacity: .55; }.route-stop-order { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #146c43; background: #e8f8ee; font-size: 13px; font-weight: 800; }.delivery-route-stop.dropoff .route-stop-order { color: #b42318; background: #fcebed; }.route-stop-grip { color: #9aa8a0; font-size: 19px; }@media (max-width: 576px) { .delivery-route-planner { padding: 18px; }.delivery-route-stop { grid-template-columns: 28px 18px 1fr; }.delivery-route-stop form { grid-column: 1 / -1; }.delivery-route-stop .delivery-primary-action { width: 100%; }.route-stop-grip { font-size: 16px; } }
.delivery-navigation-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 12px; border: 1px solid #dce9df; border-radius: 10px; background: #fff; }.delivery-navigation-controls label { color: #405048; font-size: 12px; font-weight: 800; }.delivery-navigation-controls select { min-width: min(100%, 310px); flex: 1; min-height: 38px; padding: 7px 10px; border: 1px solid #b9d9c4; border-radius: 8px; color: #25332a; background: #fff; }.delivery-navigation-status { min-height: 20px; margin: 10px 0 0; color: #146c43; font-size: 13px; font-weight: 700; }.delivery-route-map { height: 380px; margin-top: 10px; overflow: hidden; border: 1px solid #cde8d6; border-radius: 12px; background: #edf4ef; }.delivery-route-map-note { margin: 10px 0 0; color: #66736b; font-size: 12px; }.leaflet-routing-container { display: none; } @media (max-width: 576px) { .delivery-navigation-controls { align-items: stretch; }.delivery-navigation-controls select, .delivery-navigation-controls .delivery-primary-action { width: 100%; } }
.delivery-map-icon { border: 0; background: transparent; }.map-pin { box-sizing: border-box; position: relative; isolation: isolate; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; background: #198754; color: #fff; font-size: 15px; line-height: 1; box-shadow: 0 3px 8px rgba(15, 23, 42, .3); }.map-pin::after { content: ''; position: absolute; left: 50%; top: 100%; z-index: -1; width: 11px; height: 11px; background: inherit; border-radius: 0 0 2px; transform: translate(-50%, -62%) rotate(45deg); }.map-pin > i, .map-pin > span { display: block; line-height: 1; }.map-pin--pickup { background: #198754; }.map-pin--dropoff { background: #d9534f; }.map-pin--member { background: #7c3aed; }.map-pin--driver { width: 34px; height: 34px; border-color: #fff; background: #2878d4; font-size: 17px; }.map-pin--locked { background: #9aa3a0 !important; box-shadow: 0 2px 5px rgba(15, 23, 42, .2); }.map-pin__badge { position: absolute; top: -7px; right: -7px; z-index: 1; display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 3px; border: 2px solid #fff; border-radius: 999px; background: #0f172a; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }.profile-location-section { margin-top: 22px; padding: 22px 28px 28px; border-top: 1px solid #e7ece8; }.profile-location-section > p { margin: 8px 0 12px; color: #657169; font-size: 14px; }.profile-location-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }.profile-location-actions span { color: #146c43; font-size: 13px; font-weight: 600; }.profile-location-map { height: 320px; overflow: hidden; border: 1px solid #cde8d6; border-radius: 12px; background: #edf4ef; } @media (max-width: 576px) { .profile-location-actions .btn { width: 100%; } }
.delivery-map-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; color: #52615a; font-size: 12px; font-weight: 700; }.delivery-map-legend span { display: inline-flex; align-items: center; gap: 5px; }.delivery-map-legend i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; font-size: 12px; }.delivery-map-legend-driver i { background: #2878d4; }.delivery-map-legend-pickup i { background: #198754; }.delivery-map-legend-dropoff i { background: #d9534f; }
.delivery-map-legend-member i { background: #7c3aed; }
.delivery-marker-label { border: 0; border-radius: 5px; color: #25332a; background: rgba(255,255,255,.94); box-shadow: 0 1px 5px rgba(15,23,42,.22); font-size: 11px; font-weight: 800; }.delivery-marker-label::before { display: none; }

/* Admin console */
.admin-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px; border-radius: 20px; color: #fff; background: linear-gradient(120deg, #12355b, #2168aa 62%, #458cd1); }.admin-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #bfe0ff; font-size: 11px; font-weight: 800; letter-spacing: .09em; }.admin-hero h2 { margin: 7px 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; }.admin-hero p { margin: 0; color: #dceeff; }.admin-hero-action { display: inline-flex; align-items: center; gap: 8px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.32); border-radius: 10px; color: #fff; background: rgba(255,255,255,.13); font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; }.admin-hero-action:hover { color: #fff; background: rgba(255,255,255,.22); }.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0; }.admin-stats article { display: grid; grid-template-columns: auto 1fr; gap: 3px 11px; align-items: center; padding: 18px; border: 1px solid #dbe7f1; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px rgba(23, 57, 88, .05); }.admin-stats i { grid-row: span 2; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: #2168aa; background: #e8f3fd; font-size: 18px; }.admin-stats span { color: #667788; font-size: 12px; font-weight: 700; }.admin-stats strong { color: #1f2937; font-size: 25px; line-height: 1; }.admin-panel { padding: 23px; border: 1px solid #dbe7f1; border-radius: 16px; background: #fff; box-shadow: 0 5px 16px rgba(23,57,88,.04); }.admin-panel-heading { display: flex; justify-content: space-between; gap: 15px; align-items: start; margin-bottom: 19px; }.admin-panel-heading h2 { margin: 0 0 4px; color: #203040; font-size: 19px; font-weight: 800; }.admin-panel-heading p { margin: 0; color: #6b7785; font-size: 13px; }.admin-panel-heading > a { color: #2168aa; font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; }.admin-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.admin-activity-list { display: grid; gap: 4px; }.admin-activity-list > div { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid #edf1f5; }.admin-activity-list > div:first-child { border-top: 0; }.admin-activity-list strong, .admin-activity-list small, .admin-table strong, .admin-table small { display: block; }.admin-activity-list strong, .admin-table strong { color: #273645; font-size: 13px; }.admin-activity-list small, .admin-table small { margin-top: 2px; color: #758291; font-size: 11px; }.admin-initial, .admin-transaction-icon { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 9px; color: #2168aa; background: #e8f3fd; font-size: 13px; font-weight: 800; }.admin-transaction-icon { color: #146c43; background: #e7f7ec; }.admin-status { display: inline-flex; align-items: center; width: fit-content; padding: 4px 7px; border-radius: 20px; color: #536273; background: #edf1f5; font-size: 10px; font-style: normal; font-weight: 800; line-height: 1; text-transform: capitalize; white-space: nowrap; }.admin-status.active, .admin-status.completed, .admin-status.delivered { color: #146c43; background: #e6f6eb; }.admin-status.inactive, .admin-status.pending, .admin-status.assigned, .admin-status.picked-up, .admin-status.in-transit, .admin-status.accepted, .admin-status.reserved { color: #9a6500; background: #fff3d8; }.admin-status.banned, .admin-status.rejected, .admin-status.cancelled { color: #a5201a; background: #ffe8e6; }.admin-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-bottom: 19px; padding: 13px; border-radius: 11px; background: #f5f9fc; }.admin-filters > div { display: grid; gap: 4px; min-width: 150px; flex: 1; }.admin-filters label, .admin-category-form label { color: #586879; font-size: 11px; font-weight: 800; }.admin-filters input, .admin-filters select, .admin-inline-form select, .admin-category-form input { min-height: 37px; padding: 7px 10px; border: 1px solid #c9d8e5; border-radius: 7px; color: #2b3a49; background: #fff; font-size: 13px; }.admin-filters > a { padding: 8px 5px; color: #2168aa; font-size: 13px; font-weight: 800; text-decoration: none; }.admin-table { width: 100%; margin: 0; border-collapse: collapse; }.admin-table th { padding: 10px 9px; border-bottom: 1px solid #dbe7f1; color: #718092; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }.admin-table td { padding: 11px 9px; border-bottom: 1px solid #edf1f5; color: #435260; font-size: 13px; vertical-align: middle; }.admin-table tbody tr:last-child td { border-bottom: 0; }.admin-role { color: #2168aa; font-weight: 700; }.admin-inline-form { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 240px; }.admin-inline-form select { min-height: 31px; padding: 4px 7px; font-size: 12px; }.admin-protected { color: #687786; font-size: 12px; font-weight: 700; }.admin-listing { display: flex; align-items: center; gap: 9px; min-width: 180px; }.admin-item-image { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 8px; color: #8a98a6; background: #edf2f6; }.admin-item-image img { width: 100%; height: 100%; object-fit: cover; }.admin-report-reason { min-width: 200px; max-width: 350px; }.admin-category-form { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; padding: 14px; border-radius: 11px; background: #f5f9fc; }.admin-category-form label { display: grid; width: 100%; }.admin-category-form input { width: min(100%, 330px); }.admin-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }.admin-category-grid article { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e1eaf1; border-radius: 10px; }.admin-category-grid article > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; color: #2168aa; background: #e8f3fd; }.admin-category-grid strong, .admin-category-grid small { display: block; }.admin-category-grid strong { color: #2a3948; font-size: 13px; }.admin-category-grid small { color: #768493; font-size: 11px; }.admin-category-grid em { margin-left: auto; color: #7c8997; font-size: 11px; font-style: normal; font-weight: 700; }.admin-category-grid form { margin-left: auto; }.admin-empty { padding: 18px !important; color: #738191; text-align: center; }
@media (max-width: 980px) { .admin-stats { grid-template-columns: repeat(2, 1fr); }.admin-overview-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .admin-hero { align-items: stretch; flex-direction: column; padding: 22px; }.admin-hero-action { justify-content: center; }.admin-stats { grid-template-columns: 1fr; }.admin-panel { padding: 16px; }.admin-panel-heading { flex-direction: column; }.admin-filters > div { flex-basis: 100%; }.admin-filters .btn { width: 100%; }.admin-category-form input, .admin-category-form .btn { width: 100%; } }

/* Keep the admin workspace aligned with SwapNear's green brand palette. */
.admin-hero { background: linear-gradient(120deg, #0f5132, #198754 62%, #48a874); }.admin-eyebrow { color: #d7f5e2; }.admin-hero p { color: #e2f5e9; }.admin-stats i, .admin-initial, .admin-category-grid article > span { color: #198754; background: #e8f8ee; }.admin-panel-heading > a, .admin-filters > a, .admin-role { color: #198754; }.admin-transaction-icon { color: #146c43; background: #e8f8ee; }.admin-filters { background: #f4fbf6; }.admin-filters input, .admin-filters select, .admin-inline-form select, .admin-category-form input { border-color: #b9d9c4; }.admin-category-form { background: #f4fbf6; }.admin-hero-action { background: rgba(255,255,255,.13); }

/* Transaction detail */
.transaction-detail-card { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); overflow: hidden; margin-top: 16px; border: 1px solid #dce9df; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(20,73,43,.06); }.transaction-detail-gallery { display: flex; flex-direction: column; gap: 10px; padding: 10px; min-height: 360px; max-height: 520px; overflow: auto; background: #edf4ef; }.transaction-detail-content { padding: clamp(22px, 4vw, 38px); }.transaction-detail-content h2 { margin: 13px 0 7px; color: #21342a; font-size: clamp(23px, 3vw, 31px); font-weight: 800; }.transaction-detail-owner { margin: 0 0 22px; color: #657169; font-size: 14px; }.transaction-detail-owner i { color: #198754; }.transaction-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 22px; border-top: 1px solid #e4ece6; border-left: 1px solid #e4ece6; }.transaction-detail-facts div { min-height: 74px; padding: 12px; border-right: 1px solid #e4ece6; border-bottom: 1px solid #e4ece6; }.transaction-detail-facts dt { margin-bottom: 4px; color: #758178; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.transaction-detail-facts dd { margin: 0; color: #27372e; font-size: 13px; font-weight: 700; }.transaction-detail-content h3 { margin: 0 0 7px; color: #294034; font-size: 15px; font-weight: 800; }.transaction-detail-description { margin: 0; color: #607067; line-height: 1.65; white-space: pre-line; }.transaction-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }.transaction-detail-actions form { margin: 0; }.transaction-detail-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 760px) { .transaction-detail-card { grid-template-columns: 1fr; }.transaction-detail-gallery { min-height: 250px; max-height: 390px; }.item-gallery-main { height: 260px; }.transaction-detail-content { padding: 22px; } }
@media (max-width: 420px) { .transaction-detail-facts { grid-template-columns: 1fr; }.transaction-detail-actions .btn { width: 100%; justify-content: center; } }

/* Keep transaction card controls consistent across every request state. */
.transaction-actions { display: grid; min-width: 180px; gap: 8px; }.transaction-actions > form, .transaction-actions > a, .transaction-decision { width: 100%; margin: 0; }.transaction-actions .transaction-action { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 6px; width: 100%; text-align: center; text-decoration: none; }.transaction-action-details { border: 1px solid #b9d9c4; color: #146c43; background: #fff; }.transaction-action-details:hover { border-color: #198754; color: #0f5132; background: #f2fbf5; }.transaction-decision { display: grid; gap: 6px; }.transaction-decision > span { color: #66736b; font-size: 11px; font-weight: 800; text-align: center; }.transaction-actions .transaction-decision-form { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; }.transaction-actions form.d-flex { display: grid !important; gap: 8px !important; width: 100%; }.transaction-actions .form-select { min-width: 0; }
@media (max-width: 576px) { .transaction-actions { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }.transaction-actions > form, .transaction-actions > a, .transaction-decision { grid-column: span 1; }.transaction-actions .transaction-decision, .transaction-actions form.d-flex { grid-column: 1 / -1; } }

/* =====================================================
   CONFIRM DIALOG (replaces window.confirm everywhere)
===================================================== */

.confirm-modal-backdrop {
    position: fixed;
    inset: 0;
    /* Above the exchange/edit-listing modals (z-index 2000) — this dialog is
       often triggered from inside one of them and must never end up buried
       underneath it. */
    z-index: 2050;

    display: grid;
    place-items: center;

    padding: 20px;

    background: rgba(15, 23, 42, .45);
}

.confirm-modal-backdrop[hidden] {
    display: none;
}

.confirm-modal {
    width: min(380px, 100%);
    padding: 28px 26px 22px;

    border-radius: 18px;

    background: #fff;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .25);

    text-align: center;

    animation: confirmModalIn .16s ease-out;
}

@keyframes confirmModalIn {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to { opacity: 1; transform: none; }
}

.confirm-modal-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;

    place-items: center;

    border-radius: 50%;

    color: #198754;
    background: #e8f8ee;

    font-size: 22px;
}

.confirm-modal.is-danger .confirm-modal-icon {
    color: #b42318;
    background: #ffe2df;
}

.confirm-modal-message {
    margin: 0 0 22px;

    color: #25332a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

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

.confirm-modal-actions button {
    flex: 1;
    padding: 11px;

    border: 0;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
    transition: background .15s ease;
}

.confirm-modal-cancel {
    color: #45514a;
    background: #eef1ea;
}

.confirm-modal-cancel:hover {
    background: #e1e6db;
}

.confirm-modal-ok {
    color: #fff;
    background: #198754;
}

.confirm-modal-ok:hover {
    background: #146c43;
}

.confirm-modal.is-danger .confirm-modal-ok {
    background: #b42318;
}

.confirm-modal.is-danger .confirm-modal-ok:hover {
    background: #8f1c13;
}

@media (max-width: 420px) {
    .confirm-modal { padding: 24px 20px 18px; }
}

/* =====================================================
   EXCHANGE OFFER MODAL
===================================================== */

.exchange-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: grid;
    place-items: center;

    padding: 20px;
    overflow-y: auto;

    background: rgba(15, 23, 42, .45);
}

.exchange-modal-backdrop[hidden] {
    display: none;
}

.exchange-modal {
    position: relative;
    width: min(420px, 100%);
    margin: auto;
    padding: 26px 24px 22px;

    border-radius: 18px;

    background: #fff;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .25);

    animation: confirmModalIn .16s ease-out;
}

.exchange-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;

    display: grid;
    width: 30px;
    height: 30px;

    place-items: center;

    border: 0;
    border-radius: 50%;

    color: #6b7c72;
    background: #f1f3ec;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;
}

.exchange-modal-close:hover {
    background: #e5e9df;
}

.exchange-modal h2 {
    margin: 0 0 4px;

    color: #14432b;
    font-size: 18px;
    font-weight: 800;
}

.exchange-modal-target {
    margin: 0 0 18px;

    color: #52615a;
    font-size: 13px;
}

.exchange-modal-target strong {
    color: #146c43;
}

.exchange-modal label {
    display: block;
    margin-bottom: 5px;

    color: #314238;
    font-size: 13px;
    font-weight: 700;
}

.exchange-modal label span {
    color: #8a968e;
    font-weight: 500;
}

.exchange-modal .form-control {
    margin-bottom: 14px;

    border-color: #cfe0d4;
}

.exchange-modal-photo {
    display: grid;
    height: 120px;
    margin-bottom: 14px;

    place-items: center;
    overflow: hidden;

    border: 1px dashed #b9d9c4;
    border-radius: 10px;

    background: #f6faf7;

    cursor: pointer;
}

.exchange-modal-photo:hover {
    background: #eef8f1;
}

.exchange-modal-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.exchange-modal-photo span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;

    color: #52615a;
    font-size: 12.5px;
    font-weight: 600;
}

.exchange-modal-photo span i {
    color: #198754;
    font-size: 20px;
}

.exchange-modal-photo span span {
    color: #8a968e;
    font-weight: 500;
}

.exchange-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.exchange-modal-actions button {
    flex: 1;
    padding: 11px;

    border: 0;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.exchange-modal-cancel {
    color: #45514a;
    background: #eef1ea;
}

.exchange-modal-cancel:hover {
    background: #e1e6db;
}

.exchange-modal-submit {
    color: #fff;
    background: #198754;
}

.exchange-modal-submit:hover {
    background: #146c43;
}

@media (max-width: 420px) {
    .exchange-modal { padding: 22px 18px 18px; }
}

/* =====================================================
   MY ITEMS — click-to-edit + edit modal
===================================================== */

/* The status form, its select, and its button sit inside the same clickable
   card but must behave normally — restore the default cursor over them so
   the row doesn't look clickable where it actually isn't. */

.edit-item-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: grid;
    place-items: center;

    padding: 20px;
    overflow-y: auto;

    background: rgba(15, 23, 42, .45);
}

.edit-item-modal-backdrop[hidden] {
    display: none;
}

.edit-item-modal {
    position: relative;
    width: min(480px, 100%);
    margin: auto;
    padding: 26px 24px 22px;

    border-radius: 18px;

    background: #fff;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .25);

    animation: confirmModalIn .16s ease-out;
}

.edit-item-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;

    display: grid;
    width: 30px;
    height: 30px;

    place-items: center;

    border: 0;
    border-radius: 50%;

    color: #6b7c72;
    background: #f1f3ec;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;
}

.edit-item-modal-close:hover {
    background: #e5e9df;
}

.edit-item-modal h2 {
    margin: 0 0 18px;

    color: #14432b;
    font-size: 18px;
    font-weight: 800;
}

.edit-item-form {
    display: block;
    max-height: 72vh;
    overflow-y: auto;
}

.edit-item-form label {
    display: block;
    margin-bottom: 5px;

    color: #314238;
    font-size: 13px;
    font-weight: 700;
}

.edit-item-form label span {
    color: #8a968e;
    font-weight: 500;
}

.edit-item-form .form-control,
.edit-item-form .form-select {
    margin-bottom: 14px;

    border-color: #cfe0d4;
}

.edit-item-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Item location: a small map pin plus the address text it fills in */
.edit-item-location > p {
    margin: 0 0 8px;
    color: #657169;
    font-size: 12.5px;
}

.edit-item-location-map {
    height: 200px;
    overflow: hidden;
    border: 1px solid #cde8d6;
    border-radius: 12px;
    background: #edf4ef;
}

.edit-item-location-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 8px 0;
}

.edit-item-location-tools button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid #cde8d6;
    border-radius: 999px;
    background: #f4fbf6;
    color: #146c43;
    font-size: 12.5px;
    font-weight: 600;
}

.edit-item-location-tools span {
    color: #146c43;
    font-size: 12.5px;
    font-weight: 600;
}

.edit-item-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.edit-item-photo {
    position: relative;
    width: 64px;
    height: 64px;

    border-radius: 10px;
    background: #f1f5f3;

    cursor: pointer;
}

.edit-item-photo img {
    width: 100%;
    height: 100%;

    border-radius: 10px;

    object-fit: contain;

    transition: opacity .15s ease, filter .15s ease;
}

.edit-item-photo-remove {
    position: absolute;
    top: -6px;
    right: -6px;

    display: grid;
    width: 20px;
    height: 20px;

    place-items: center;

    border: 2px solid #fff;
    border-radius: 50%;

    color: #52615a;
    background: #eef1ea;

    font-size: 10px;
}

.edit-item-photo input:checked + img {
    opacity: .35;
    filter: grayscale(1);
}

.edit-item-photo input:checked ~ .edit-item-photo-remove {
    color: #fff;
    background: #b42318;
}

.edit-item-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.edit-item-modal-actions button {
    flex: 1;
    padding: 11px;

    border: 0;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.edit-item-modal-cancel {
    color: #45514a;
    background: #eef1ea;
}

.edit-item-modal-cancel:hover {
    background: #e1e6db;
}

.edit-item-modal-save {
    color: #fff;
    background: #198754;
}

.edit-item-modal-save:hover {
    background: #146c43;
}

@media (max-width: 420px) {
    .edit-item-modal { padding: 22px 18px 18px; }
    .edit-item-row { grid-template-columns: 1fr; }
}

/* =====================================================
   TOAST NOTIFICATIONS (replaces the plain Bootstrap
   alert banners for session('success') / $errors)
===================================================== */

.toast-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 3000;

    display: flex;
    flex-direction: column;
    gap: 10px;

    width: min(360px, calc(100vw - 32px));

    pointer-events: none;
}

.toast-stack:empty {
    display: none;
}

.toast-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 14px 14px 16px;

    border-left: 4px solid transparent;
    border-radius: 14px;

    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18);

    pointer-events: auto;
    animation: toastIn .22s ease-out;
}

.toast-card.is-leaving {
    animation: toastOut .18s ease-in forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes toastOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateX(24px); }
}

.toast-icon {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    margin-top: 1px;

    place-items: center;
    border-radius: 50%;

    font-size: 14px;
}

.toast-card.is-success { border-left-color: #198754; }
.toast-card.is-success .toast-icon { color: #198754; background: #e8f8ee; }

.toast-card.is-danger { border-left-color: #b42318; }
.toast-card.is-danger .toast-icon { color: #b42318; background: #ffe2df; }

.toast-message {
    flex: 1;
    margin: 0;
    padding-top: 2px;

    color: #25332a;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}

.toast-error-list {
    margin: 0;
    padding-left: 16px;
}

.toast-error-list li {
    margin: 2px 0;
}

.toast-close {
    flex: 0 0 auto;
    margin-top: 1px;
    padding: 0;

    border: 0;
    background: transparent;

    color: #9aa3a0;
    font-size: 18px;
    line-height: 1;

    cursor: pointer;
}

.toast-close:hover {
    color: #52615a;
}

@media (max-width: 480px) {
    .toast-stack { top: 10px; right: 10px; left: 10px; width: auto; }
}

/* =====================================================
   ADMIN — SAFE MEETUP SPOTS
===================================================== */

.admin-spot-form {
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
    padding: 16px;
    border-radius: 11px;
    background: #f4fbf6;
}

.admin-spot-form label {
    display: block;
    margin-bottom: 4px;
    color: #586879;
    font-size: 11px;
    font-weight: 800;
}

.admin-spot-form input[type="text"],
.admin-spot-form input:not([type="hidden"]) {
    width: min(100%, 380px);
    min-height: 37px;
    padding: 7px 10px;
    border: 1px solid #b9d9c4;
    border-radius: 7px;
    background: #fff;
    font-size: 13px;
}

.admin-spot-map-hint {
    margin: 0;
    color: #66736b;
    font-size: 12.5px;
}

.admin-spot-map {
    height: 280px;
    overflow: hidden;
    border: 1px solid #cde8d6;
    border-radius: 12px;
    background: #edf4ef;
    /* Keep Leaflet's z-index 400–1000 panes inside the map so the search results can overlap it. */
    isolation: isolate;
}

.admin-spot-form .btn {
    justify-self: start;
}

.admin-spot-list-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
    color: #2a3948;
    font-size: 14px;
    font-weight: 700;
}

.admin-spot-list-heading span {
    padding: 1px 8px;
    border-radius: 999px;
    color: #198754;
    background: #e8f8ee;
    font-size: 11.5px;
    font-weight: 700;
}

.admin-spot-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: 14px;
}

.admin-spot-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #e1eaf1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 50, 35, .04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.admin-spot-card:hover {
    border-color: #b9e2c8;
    box-shadow: 0 8px 22px rgba(20, 67, 43, .08);
    transform: translateY(-1px);
}

.admin-spot-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-spot-card-head > div {
    min-width: 0;
}

.admin-spot-card-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #22a565, #157347);
    font-size: 18px;
}

.admin-spot-card-head strong {
    display: block;
    overflow: hidden;
    color: #14432b;
    font-size: 14.5px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-spot-card-head small {
    display: block;
    margin-top: 2px;
    color: #8a96a3;
    font-size: 11.5px;
}

.admin-spot-card-address {
    display: flex;
    flex: 1;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    color: #44515e;
    background: #f6faf7;
    font-size: 12.5px;
    line-height: 1.45;
}

.admin-spot-card-address i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #198754;
}

.admin-spot-card-address span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.admin-spot-card-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e1eaf1;
}

.admin-spot-card-foot code {
    overflow: hidden;
    color: #8a96a3;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-spot-card-foot a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    color: #198754;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.admin-spot-card-foot a:hover {
    text-decoration: underline;
}

.admin-spot-card-foot form {
    margin: 0;
}

.admin-spot-card-remove {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid #f1d4d7;
    border-radius: 9px;
    color: #c0392b;
    background: #fff;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.admin-spot-card-remove:hover {
    border-color: #dc3545;
    color: #fff;
    background: #dc3545;
}

.admin-spot-address {
    margin: 0;
    color: #4f5f6f;
    font-size: 12.5px;
}

/* =====================================================
   EXCHANGE MEETUP LOCATION
===================================================== */

.meetup-section {
    margin-top: 20px;
    padding: 24px;
    border: 1px solid #dce9df;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(20, 73, 43, .05);
}

.meetup-section-heading h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 3px;
    color: #14432b;
    font-size: 17px;
    font-weight: 800;
}

.meetup-section-heading p {
    margin: 0 0 16px;
    color: #66736b;
    font-size: 13px;
}

.meetup-safety-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f4fbf6;
    color: #35513f;
    font-size: 13px;
    line-height: 1.5;
}

.meetup-safety-tip i {
    color: #198754;
    font-size: 15px;
    margin-top: 1px;
}

.meetup-current {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #cde8d6;
    border-radius: 10px;
    background: #f6faf7;
}

.meetup-current > i {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #198754;
}

.meetup-current strong {
    display: block;
    color: #14432b;
    font-size: 14px;
}

.meetup-current small {
    display: block;
    margin-top: 2px;
    color: #66736b;
    font-size: 12px;
}

.meetup-current-address {
    display: block;
    margin-top: 2px;
    color: #3f4f5f;
    font-size: 12.5px;
    line-height: 1.4;
}

.meetup-directions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    color: #198754;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.meetup-directions:hover {
    text-decoration: underline;
}

.meetup-missing-location {
    margin: 0 0 14px;
    color: #66736b;
    font-size: 13px;
}

.meetup-suggested-label {
    margin: 0 0 8px;
    color: #314238;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.meetup-suggestions {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.meetup-suggestion-form {
    margin: 0;
}

.meetup-suggestion-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #cde8d6;
    border-radius: 10px;
    background: #fbfefc;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.meetup-suggestion-btn:hover {
    border-color: #198754;
    background: #f2fbf5;
}

.meetup-suggestion-btn strong {
    color: #14432b;
    font-size: 13.5px;
}

.meetup-suggestion-btn span {
    color: #66736b;
    font-size: 12px;
}

.meetup-suggestion-btn .meetup-suggestion-address {
    color: #4f5f6f;
    font-size: 12px;
    line-height: 1.35;
}

.meetup-map {
    height: 260px;
    overflow: hidden;
    border: 1px solid #cde8d6;
    border-radius: 12px;
    background: #edf4ef;
}

.meetup-map-note {
    margin: 8px 0 0;
    color: #66736b;
    font-size: 12px;
}

@media (max-width: 576px) {
    .meetup-section { padding: 18px; }
}

.admin-spot-search {
    position: relative;
}

.admin-spot-search-row {
    display: flex;
    gap: 8px;
}

.admin-spot-search-row input {
    flex: 1;
}

.admin-spot-search-results {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    right: 0;

    max-height: 220px;
    margin: 4px 0 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;

    border: 1px solid #cde8d6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .14);
}

.admin-spot-search-results li {
    padding: 8px 10px;
    border-radius: 7px;
    color: #2a3948;
    font-size: 12.5px;
    line-height: 1.4;
    cursor: pointer;
}

.admin-spot-search-results li:hover {
    background: #f2fbf5;
}

.admin-spot-search-results li.is-loading,
.admin-spot-search-results li.is-empty {
    color: #768493;
    cursor: default;
}

.admin-spot-search-results li.is-loading:hover,
.admin-spot-search-results li.is-empty:hover {
    background: none;
}

.meetup-suggested-label span {
    color: #66736b;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

.meetup-auto-status {
    margin: 0 0 16px;
    color: #66736b;
    font-size: 12.5px;
}

.meetup-auto-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef3ff;
    color: #3654a3;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    vertical-align: middle;
}

.meetup-search {
    margin-bottom: 16px;
}

.meetup-search label {
    display: block;
    margin-bottom: 6px;
    color: #314238;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Delivery list → route link (the route is where stops get completed) */
.delivery-route-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #cde8d6;
    border-radius: 999px;
    color: #146c43;
    background: #f2fbf5;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.delivery-route-link:hover {
    border-color: #198754;
    color: #146c43;
    background: #e3f6ea;
}

.delivery-route-link b {
    font-weight: 800;
}

.delivery-route-stop {
    scroll-margin-top: 90px;
}

.delivery-route-stop:target {
    animation: route-stop-flash 1.6s ease;
}

@keyframes route-stop-flash {
    0%, 40% { box-shadow: 0 0 0 4px rgba(25, 135, 84, .35); background: #eefaf2; }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.delivery-route-planner) { scroll-behavior: smooth; }
}

/* =====================================================
   PROOF OF DELIVERY MODAL
===================================================== */
.proof-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2040;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
}

.proof-modal-backdrop[hidden] {
    display: none;
}

.proof-modal {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(480px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
    animation: confirmModalIn .18s ease-out;
}

.proof-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.proof-modal-head h2 {
    margin: 4px 0 2px;
    color: #14432b;
    font-size: 19px;
    font-weight: 800;
}

.proof-modal-head p {
    margin: 0;
    color: #5b6a62;
    font-size: 13px;
}

.proof-modal-head p strong {
    color: #25332a;
}

.proof-modal-close {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #45514a;
    background: #eef1ea;
    cursor: pointer;
}

.proof-modal-close:hover {
    background: #e1e6db;
}

.proof-modal-stage {
    position: relative;
    display: grid;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    background: #0f1a14;
}

.proof-modal-stage video,
.proof-modal-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proof-modal-stage video[hidden],
.proof-modal-stage img[hidden] {
    display: none;
}

.proof-modal-placeholder {
    display: grid;
    gap: 10px;
    place-content: center;
    padding: 20px;
    color: #c9d8cf;
    font-size: 13.5px;
    text-align: center;
}

.proof-modal-placeholder[hidden] {
    display: none;
}

.proof-modal-placeholder i {
    color: #7fd3a3;
    font-size: 34px;
}

.proof-modal-tips {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    color: #52615a;
    font-size: 12.5px;
    list-style: none;
}

.proof-modal-tips i {
    margin-right: 4px;
    color: #198754;
}

.proof-modal-error {
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    color: #b42318;
    background: #fdeceb;
    font-size: 13px;
}

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

.proof-modal-actions[hidden] {
    display: none;
}

.proof-modal-actions button {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}

.proof-modal-actions button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.proof-modal-secondary {
    color: #45514a;
    background: #eef1ea;
}

.proof-modal-secondary:hover {
    background: #e1e6db;
}

.proof-modal-shutter,
.proof-modal-confirm {
    color: #fff;
    background: #198754;
}

.proof-modal-shutter:hover:not(:disabled),
.proof-modal-confirm:hover:not(:disabled) {
    background: #146c43;
}

.proof-modal-shutter {
    flex: 1.4;
}

@media (max-width: 576px) {
    .proof-modal-backdrop {
        align-items: end;
        padding: 0;
    }

    .proof-modal {
        width: 100%;
        max-height: 100dvh;
        border-radius: 20px 20px 0 0;
    }

    .proof-modal-stage {
        aspect-ratio: 3 / 4;
    }
}

/* Route stop buttons: "Navigate here" + "Picked up"/"Delivered" as one aligned pair */

@media (max-width: 760px) {
    .delivery-route-stop {
        grid-template-columns: 28px 18px 1fr;
    }

}

/* Route navigation controls: each label sits above its own field, and fields + buttons share one baseline */
.delivery-navigation-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) auto;
    align-items: end;
    gap: 12px;
}

.delivery-nav-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.delivery-nav-field label {
    margin: 0;
    font-size: 11.5px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.delivery-navigation-controls .delivery-nav-field select {
    width: 100%;
    min-width: 0;
    min-height: 40px;
}

.delivery-nav-buttons {
    display: flex;
    gap: 8px;
}

.delivery-nav-buttons .delivery-primary-action,
.delivery-nav-buttons .delivery-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-height: 40px;
    white-space: nowrap;
    cursor: pointer;
}

@media (max-width: 900px) {
    .delivery-navigation-controls {
        grid-template-columns: minmax(0, 1fr) minmax(140px, 170px);
    }

    .delivery-nav-buttons {
        grid-column: 1 / -1;
    }

    .delivery-nav-buttons > * {
        flex: 1;
    }
}

@media (max-width: 520px) {
    .delivery-navigation-controls {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   REPORT LISTING — quiet link + report modal
===================================================== */
.item-detail-safety {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e6eee8;
    color: #6b7a71;
    font-size: 12.5px;
}

.item-detail-safety > span i {
    margin-right: 4px;
    color: #198754;
}

.item-report-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    border: 0;
    color: #7b8790;
    background: none;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease;
}

.item-report-link:hover,
.item-report-link:focus-visible {
    color: #b42318;
    text-decoration: underline;
}

.report-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2040;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, .5);
}

.report-modal-backdrop[hidden] {
    display: none;
}

.report-modal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(460px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 22px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    animation: confirmModalIn .18s ease-out;
}

.report-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.report-modal-icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    place-items: center;
    border-radius: 12px;
    color: #b42318;
    background: #fdeceb;
    font-size: 18px;
}

.report-modal-head h2 {
    margin: 0 0 2px;
    color: #25332a;
    font-size: 18px;
    font-weight: 800;
}

.report-modal-head p {
    margin: 0;
    color: #6b7a71;
    font-size: 13px;
}

.report-modal-close {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #45514a;
    background: #eef1ea;
    cursor: pointer;
}

.report-modal-close:hover {
    background: #e1e6db;
}

.report-reasons {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
}

.report-reasons legend,
.report-details-label {
    margin-bottom: 6px;
    color: #3d4a43;
    font-size: 13px;
    font-weight: 700;
}

.report-details-label small {
    color: #8a968e;
    font-weight: 600;
}

.report-reason {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e1e8e3;
    border-radius: 10px;
    color: #33413a;
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.report-reason:hover {
    border-color: #c9d6cd;
    background: #fafcfa;
}

.report-reason:has(input:checked) {
    border-color: #b42318;
    background: #fff6f5;
}

.report-reason input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #b42318;
}

.report-modal textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d5dfd8;
    border-radius: 10px;
    font-size: 13.5px;
    resize: vertical;
}

.report-modal textarea:focus {
    border-color: #198754;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, .15);
}

.report-error {
    margin: -4px 0 0;
    color: #b42318;
    font-size: 12.5px;
}

.report-note {
    margin: 0;
    color: #6b7a71;
    font-size: 12px;
}

.report-note i {
    margin-right: 4px;
}

.report-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.report-modal-actions button {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.report-cancel {
    color: #45514a;
    background: #eef1ea;
}

.report-cancel:hover {
    background: #e1e6db;
}

.report-submit {
    color: #fff;
    background: #b42318;
}

.report-submit:hover {
    background: #8f1c13;
}

@media (max-width: 576px) {
    .report-modal-backdrop {
        align-items: end;
        padding: 0;
    }

    .report-modal {
        width: 100%;
        max-height: 100dvh;
        border-radius: 18px 18px 0 0;
    }
}

.admin-report-category {
    display: block;
    width: fit-content;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    color: #b42318;
    background: #fdeceb;
    font-size: 11px;
    font-weight: 700;
}

/* =====================================================
   SAFE SPOT TYPES — map dots, legend, popups, admin import
===================================================== */
.safe-spot-icon {
    border: 0;
    background: transparent;
}

.safe-spot-dot {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: #f59e0b;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .3);
    font-size: 12px;
    line-height: 1;
}

.safe-spot-icon .safe-spot-dot {
    width: 100%;
    height: 100%;
}

.safe-spot-dot.is-police { background: #1d4ed8; }
.safe-spot-dot.is-municipal_hall { background: #7c3aed; }
.safe-spot-dot.is-barangay_hall { background: #0f9f6e; }
.safe-spot-dot.is-custom { background: #f59e0b; }

.safe-spot-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 8px;
    color: #52615a;
    font-size: 12px;
    font-weight: 700;
}

.safe-spot-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.safe-spot-legend .safe-spot-dot {
    width: 20px;
    height: 20px;
    border-width: 1.5px;
    font-size: 10px;
}

.safe-spot-popup {
    display: grid;
    gap: 3px;
    font-family: inherit;
}

.safe-spot-popup-type {
    color: #198754;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.safe-spot-popup strong {
    color: #14432b;
    font-size: 14px;
}

.safe-spot-popup small {
    color: #5b6a62;
    font-size: 12px;
    line-height: 1.35;
}

.safe-spot-popup small:empty {
    display: none;
}

.safe-spot-popup-distance {
    color: #3f4f5f !important;
    font-weight: 600;
}

.safe-spot-popup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #198754;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.safe-spot-popup-btn:hover {
    background: #146c43;
}

.meetup-suggestion-type-icon { margin-right: 2px; }
.meetup-suggestion-type-icon.is-police { color: #1d4ed8; }
.meetup-suggestion-type-icon.is-municipal_hall { color: #7c3aed; }
.meetup-suggestion-type-icon.is-barangay_hall { color: #0f9f6e; }
.meetup-suggestion-type-icon.is-custom { color: #f59e0b; }

/* Admin: import panel */
.admin-spot-import {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
    padding: 16px;
    border: 1px dashed #b9d9c4;
    border-radius: 14px;
    background: #f8fcf9;
}

.admin-spot-import-copy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.admin-spot-import-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    color: #198754;
    background: #e3f6ea;
    font-size: 18px;
}

.admin-spot-import-copy strong,
.admin-spot-import-copy small {
    display: block;
}

.admin-spot-import-copy strong {
    color: #14432b;
    font-size: 14px;
}

.admin-spot-import-copy small {
    margin-top: 2px;
    color: #66736b;
    font-size: 12.5px;
}

.admin-spot-import-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-spot-import-type {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #d5e5da;
    border-radius: 999px;
    background: #fff;
    color: #33413a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.admin-spot-import-type:has(input:checked) {
    border-color: #198754;
    background: #eefaf2;
}

.admin-spot-import-type input {
    accent-color: #198754;
}

.admin-spot-import .btn {
    justify-self: start;
}

/* Admin: saved spot list bar + filters + type colors */
.admin-spot-list-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.admin-spot-list-bar .admin-spot-list-heading {
    margin: 0;
}

.admin-spot-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-spot-filters button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid #dce6df;
    border-radius: 999px;
    color: #4b5a52;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.admin-spot-filters button b {
    color: #8a968e;
    font-weight: 700;
}

.admin-spot-filters button.is-active {
    border-color: #198754;
    color: #fff;
    background: #198754;
}

.admin-spot-filters button.is-active b {
    color: #d7f3e2;
}

.admin-spot-card[hidden] {
    display: none;
}

.admin-spot-card.is-police .admin-spot-card-icon { background: linear-gradient(135deg, #3b6fe0, #1d4ed8); }
.admin-spot-card.is-municipal_hall .admin-spot-card-icon { background: linear-gradient(135deg, #9461f0, #7c3aed); }
.admin-spot-card.is-barangay_hall .admin-spot-card-icon { background: linear-gradient(135deg, #22b884, #0f9f6e); }
.admin-spot-card.is-custom .admin-spot-card-icon { background: linear-gradient(135deg, #fbbf24, #f59e0b); }

/* Admin spot: "Use <found name>" suggestion, rename control, popup link */
.admin-spot-name-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    padding: 6px 12px;
    border: 1px solid #b9d9c4;
    border-radius: 999px;
    color: #146c43;
    background: #f2fbf5;
    font-size: 12.5px;
    cursor: pointer;
}

.admin-spot-name-suggestion[hidden] {
    display: none;
}

.admin-spot-name-suggestion:hover {
    border-color: #198754;
    background: #e3f6ea;
}

.admin-spot-rename summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #66736b;
    font-size: 12px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.admin-spot-rename summary::-webkit-details-marker {
    display: none;
}

.admin-spot-rename summary:hover {
    color: #146c43;
}

.admin-spot-rename form {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.admin-spot-rename input {
    flex: 1;
    min-width: 0;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid #cfdcd3;
    border-radius: 8px;
    font-size: 13px;
}

.safe-spot-popup-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    color: #198754;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

.safe-spot-popup-link:hover {
    text-decoration: underline;
}

/* Mall safe spot type */
.safe-spot-dot.is-mall { background: #db2777; }
.meetup-suggestion-type-icon.is-mall { color: #db2777; }
.admin-spot-card.is-mall .admin-spot-card-icon { background: linear-gradient(135deg, #ec4899, #db2777); }

/* =====================================================
   MY LISTINGS — header, filter tabs, listing card grid
===================================================== */
.listings-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.listings-header h2 {
    margin: 0;
    color: #14432b;
    font-size: 22px;
    font-weight: 800;
}

.listings-header p {
    margin: 3px 0 0;
    color: #6b7a71;
    font-size: 13.5px;
}

.listings-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 11px;
    color: #fff;
    background: #198754;
    box-shadow: 0 4px 12px rgba(25, 135, 84, .22);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.listings-post-btn:hover {
    color: #fff;
    background: #146c43;
    transform: translateY(-1px);
}

.listings-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.listings-tabs::-webkit-scrollbar {
    display: none;
}

.listings-tabs a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid #dce6df;
    border-radius: 999px;
    color: #4b5a52;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

.listings-tabs a span {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    color: #66736b;
    background: #eef3ef;
    font-size: 11.5px;
    text-align: center;
}

.listings-tabs a:hover {
    border-color: #b9d9c4;
}

.listings-tabs a.is-active {
    border-color: #198754;
    color: #fff;
    background: #198754;
}

.listings-tabs a.is-active span {
    color: #198754;
    background: #fff;
}

.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.listing-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e1eae4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(20, 50, 35, .05);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.listing-card:hover {
    border-color: #c9e3d3;
    box-shadow: 0 10px 26px rgba(20, 67, 43, .1);
    transform: translateY(-2px);
}

.listing-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
    background: #f1f5f2;
}

.listing-card-media[data-edit-item-trigger] {
    cursor: pointer;
}

.listing-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.listing-card:hover .listing-card-media img {
    transform: scale(1.04);
}

.listing-card.is-locked .listing-card-media img {
    filter: saturate(.85);
}

.listing-card-placeholder {
    display: grid;
    height: 100%;
    gap: 6px;
    place-content: center;
    color: #9aa8a0;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
}

.listing-card-placeholder i {
    font-size: 30px;
}

.listing-type-badge,
.listing-status-badge,
.listing-photo-count {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

.listing-type-badge {
    top: 10px;
    left: 10px;
    color: #14432b;
    background: rgba(255, 255, 255, .92);
}

.listing-status-badge {
    top: 10px;
    right: 10px;
    color: #fff;
    background: #6b7280;
}

.listing-status-badge.is-available { background: #198754; }
.listing-status-badge.is-reserved { background: #d97706; }
.listing-status-badge.is-completed { background: #2563eb; }
.listing-status-badge.is-archived { background: #374151; }

.listing-photo-count {
    right: 10px;
    bottom: 10px;
    color: #fff;
    background: rgba(15, 23, 42, .6);
}

.listing-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px 12px;
}

.listing-card-category {
    color: #198754;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.listing-card-body h3 {
    margin: 0;
    overflow: hidden;
    color: #1f2d25;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-price {
    margin: 2px 0 0;
    color: #14432b;
    font-size: 18px;
    font-weight: 800;
}

.listing-card-wish {
    display: -webkit-box;
    margin: 2px 0 0;
    overflow: hidden;
    color: #4b5a52;
    font-size: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.listing-card-wish i {
    color: #198754;
}

.listing-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: auto;
    padding-top: 8px;
    color: #8a968e;
    font-size: 12px;
}

.listing-card-meta i {
    margin-right: 3px;
}

.listing-card-lock {
    display: flex;
    gap: 6px;
    margin: 8px 0 0;
    padding: 7px 10px;
    border-radius: 9px;
    color: #92400e;
    background: #fef3c7;
    font-size: 12px;
    line-height: 1.35;
}

.listing-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #eef2ef;
    border-radius: 0 0 15px 15px;
    background: #fafcfb;
}

.listing-status-form {
    display: flex;
    gap: 6px;
    margin: 0;
}

.listing-status-form select {
    min-height: 34px;
    padding: 5px 30px 5px 10px;
    border: 1px solid #d5e1d9;
    border-radius: 9px;
    color: #33413a;
    background-color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.listing-status-form select:focus {
    border-color: #198754;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, .15);
}

.listing-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.listing-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 5px 12px;
    border: 1px solid #b9d9c4;
    border-radius: 9px;
    color: #146c43;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.listing-edit-btn:hover {
    border-color: #198754;
    background: #f2fbf5;
}

.listing-menu {
    position: relative;
}

.listing-menu summary {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #dce6df;
    border-radius: 9px;
    color: #4b5a52;
    background: #fff;
    list-style: none;
    cursor: pointer;
}

.listing-menu summary::-webkit-details-marker {
    display: none;
}

.listing-menu summary:hover,
.listing-menu[open] summary {
    border-color: #b9d9c4;
    background: #f2fbf5;
}

.listing-menu-items {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 20;
    display: grid;
    min-width: 190px;
    padding: 6px;
    border: 1px solid #e1eae4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
}

.listing-menu-items form {
    margin: 0;
}

.listing-menu-items button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    color: #33413a;
    background: none;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.listing-menu-items button:hover {
    background: #f2f6f3;
}

.listing-menu-items button.is-danger {
    color: #b42318;
}

.listing-menu-items button.is-danger:hover {
    background: #fdeceb;
}

.listings-empty {
    grid-column: 1 / -1;
    padding: 48px 20px;
    border: 1px dashed #c9dccf;
    border-radius: 16px;
    background: #fbfefc;
    text-align: center;
}

.listings-empty > i {
    color: #198754;
    font-size: 40px;
}

.listings-empty h2 {
    margin: 10px 0 6px;
    color: #14432b;
    font-size: 19px;
    font-weight: 800;
}

.listings-empty p {
    max-width: 420px;
    margin: 0 auto 16px;
    color: #6b7a71;
}

.listings-tab-reset {
    color: #198754;
    font-weight: 700;
}

/* =====================================================
   EXCHANGE — two-sided completion + outcome banners
===================================================== */
.exchange-finish {
    display: grid;
    gap: 14px;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #cde8d6;
    border-radius: 16px;
    background: linear-gradient(135deg, #f4fbf6, #fff);
}

.exchange-finish-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.exchange-finish-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #22a565, #157347);
    font-size: 19px;
}

.exchange-finish-head h3 {
    margin: 0 0 3px;
    color: #14432b;
    font-size: 17px;
    font-weight: 800;
}

.exchange-finish-head p {
    margin: 0;
    color: #5b6a62;
    font-size: 13.5px;
}

.exchange-finish-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exchange-finish-steps li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7b8790;
    font-size: 13.5px;
    font-weight: 600;
}

.exchange-finish-steps li.is-done {
    color: #146c43;
}

.exchange-finish-steps li.is-done i {
    color: #198754;
}

.exchange-finish-actions {
    display: grid;
    gap: 10px;
}

.exchange-finish-actions form {
    margin: 0;
}

.exchange-finish-confirm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 20px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: #198754;
    box-shadow: 0 4px 12px rgba(25, 135, 84, .22);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.exchange-finish-confirm:hover {
    background: #146c43;
}

.exchange-finish-waiting {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    color: #92400e;
    background: #fef3c7;
    font-size: 13.5px;
    font-weight: 600;
}

.exchange-cancel summary {
    width: fit-content;
    color: #7b8790;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.exchange-cancel summary:hover {
    color: #b42318;
}

.exchange-cancel-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #f1d4d7;
    border-radius: 12px;
    background: #fff;
}

.exchange-cancel-form label {
    color: #3d4a43;
    font-size: 13px;
    font-weight: 700;
}

.exchange-cancel-form select {
    flex: 1;
    min-width: 200px;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid #d5dfd8;
    border-radius: 9px;
    font-size: 13.5px;
}

.exchange-cancel-btn {
    min-height: 38px;
    padding: 6px 14px;
    border: 1px solid #b42318;
    border-radius: 9px;
    color: #b42318;
    background: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.exchange-cancel-btn:hover {
    color: #fff;
    background: #b42318;
}

.exchange-outcome {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 14px;
}

.exchange-outcome > i {
    font-size: 24px;
}

.exchange-outcome strong,
.exchange-outcome span {
    display: block;
}

.exchange-outcome strong {
    font-size: 14.5px;
}

.exchange-outcome span {
    margin-top: 2px;
    font-size: 13px;
    opacity: .85;
}

.exchange-outcome.is-completed {
    border: 1px solid #b9e2c8;
    color: #14432b;
    background: #eefaf2;
}

.exchange-outcome.is-completed > i {
    color: #198754;
}

.exchange-outcome.is-cancelled {
    border: 1px solid #e5e7eb;
    color: #374151;
    background: #f6f7f8;
}

.exchange-outcome.is-cancelled > i {
    color: #9ca3af;
}

/* Transaction page: "updated by the other person" bar */
.transaction-live-bar {
    position: sticky;
    top: 12px;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid #b9d9c4;
    border-radius: 12px;
    color: #14432b;
    background: #eefaf2;
    box-shadow: 0 6px 18px rgba(20, 67, 43, .12);
    font-size: 13.5px;
    font-weight: 600;
}

.transaction-live-bar[hidden] {
    display: none;
}

.transaction-live-bar button {
    padding: 6px 14px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #198754;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.transaction-live-bar button:hover {
    background: #146c43;
}

/* Transaction page: meetup place search */
.meetup-map {
    /* Keep Leaflet's high z-index panes inside the map so dropdowns can overlap it. */
    isolation: isolate;
}

.meetup-search {
    position: relative;
    margin: 14px 0 16px;
}

.meetup-search > label {
    display: block;
    margin-bottom: 6px;
    color: #3d4a43;
    font-size: 13px;
    font-weight: 700;
}

.meetup-search-row {
    display: flex;
    gap: 8px;
}

.meetup-search-field {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
}

.meetup-search-field > i {
    position: absolute;
    left: 13px;
    color: #8a968e;
    font-size: 15px;
    pointer-events: none;
}

.meetup-search-field input {
    width: 100%;
    min-height: 44px;
    padding: 10px 40px 10px 38px;
    border: 1px solid #d5e1d9;
    border-radius: 12px;
    color: #25332a;
    background: #fff;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
}

/* Hide the browser's own clear "x" — we show our own. */
.meetup-search-field input::-webkit-search-cancel-button {
    display: none;
}

.meetup-search-field input::placeholder {
    color: #9aa6a0;
}

.meetup-search-field input:focus {
    border-color: #198754;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(25, 135, 84, .14);
}

.meetup-search-field:focus-within > i {
    color: #198754;
}

.meetup-search-clear {
    position: absolute;
    right: 8px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #6b7a71;
    background: #eef2ef;
    font-size: 11px;
    cursor: pointer;
}

.meetup-search-clear[hidden] {
    display: none;
}

.meetup-search-clear:hover {
    color: #25332a;
    background: #e1e6e2;
}

.meetup-search-btn {
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: #198754;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.meetup-search-btn:hover {
    background: #146c43;
}

.meetup-search-results {
    top: calc(100% + 6px);
    z-index: 40;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
}

@media (max-width: 420px) {
    .meetup-search-btn {
        padding: 0 14px;
    }
}

/* Person reports: role tag, chat header link, admin source tag */
.report-person-role {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    color: #4b5a52;
    background: #eef3ef;
    font-size: 11px;
    font-weight: 700;
}

.report-person-single {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    color: #33413a;
    background: #f6f8f7;
    font-size: 13.5px;
}

.report-person-single i {
    margin-right: 4px;
    color: #6b7a71;
}

.message-report-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #7b8790;
    background: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.message-report-link:hover {
    border-color: #f1d4d7;
    color: #b42318;
    background: #fff6f5;
}

.admin-report-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    color: #6b7a71;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* =====================================================
   DELIVERY INSPECTION — buyer check, delivery photos,
   problem report, admin dispute evidence
===================================================== */
.delivery-check-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.delivery-check-actions form {
    margin: 0;
}

.delivery-check-problem {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 46px;
    padding: 10px 18px;
    border: 1px solid #f1c9cd;
    border-radius: 12px;
    color: #b42318;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.delivery-check-problem:hover {
    border-color: #b42318;
    background: #fff6f5;
}

.exchange-outcome.is-waiting {
    border: 1px solid #fde68a;
    color: #78350f;
    background: #fffbeb;
}

.exchange-outcome.is-waiting > i {
    color: #d97706;
}

.exchange-outcome.is-disputed {
    border: 1px solid #fecaca;
    color: #7f1d1d;
    background: #fef2f2;
}

.exchange-outcome.is-disputed > i {
    color: #dc2626;
}

.delivery-photos-note {
    margin: -4px 0 10px;
    color: #6b7a71;
    font-size: 13px;
}

.delivery-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.delivery-photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid #e1eae4;
    border-radius: 12px;
    background: #f1f5f2;
}

.delivery-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.delivery-photo span {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 23, 42, .65);
    font-size: 11.5px;
    font-weight: 700;
}

.delivery-photo.is-missing {
    display: grid;
    gap: 6px;
    place-content: center;
    color: #9aa8a0;
    font-size: 12.5px;
    text-align: center;
}

.delivery-photo.is-missing span {
    position: static;
    color: #8a968e;
    background: none;
}

.delivery-photo.is-missing i {
    font-size: 24px;
}

.delivery-problem-upload {
    display: inline-flex;
    width: fit-content;
    cursor: pointer;
}

.delivery-problem-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.delivery-problem-upload span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px dashed #b9d9c4;
    border-radius: 10px;
    color: #146c43;
    background: #f8fcf9;
    font-size: 13.5px;
    font-weight: 700;
}

.delivery-problem-upload:focus-within span,
.delivery-problem-upload:hover span {
    border-color: #198754;
    background: #eefaf2;
}

.delivery-problem-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.delivery-problem-previews:empty {
    display: none;
}

.delivery-problem-previews img {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
}

/* Admin: delivery disputes */
.dispute-count {
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    color: #fff;
    background: #dc2626;
    font-size: 12px;
    vertical-align: middle;
}

.dispute-card {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fff;
}

.dispute-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.dispute-card-head h3 {
    margin: 4px 0 2px;
    color: #1f2d25;
    font-size: 16px;
    font-weight: 800;
}

.dispute-card-head small {
    color: #6b7a71;
    font-size: 12.5px;
}

.dispute-parties {
    display: flex;
    gap: 18px;
    margin: 0;
}

.dispute-parties dt {
    color: #8a968e;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.dispute-parties dd {
    margin: 0;
    color: #25332a;
    font-size: 13.5px;
    font-weight: 700;
}

.dispute-reason {
    margin: 0;
    padding: 10px 14px;
    border-left: 3px solid #dc2626;
    border-radius: 0 10px 10px 0;
    color: #3d4a43;
    background: #fef2f2;
    font-size: 13.5px;
}

.dispute-evidence {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dispute-evidence li {
    display: grid;
    gap: 3px;
    align-content: start;
    padding: 10px;
    border: 1px solid #e6eee8;
    border-radius: 12px;
    background: #fafcfb;
}

.dispute-evidence-step {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #198754;
    font-size: 11.5px;
    font-weight: 800;
}

.dispute-evidence strong {
    color: #25332a;
    font-size: 13px;
}

.dispute-evidence small {
    color: #8a968e;
    font-size: 11.5px;
}

.dispute-evidence-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.dispute-evidence-photos a {
    display: block;
    flex: 1 1 70px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 9px;
    background: #eef2ef;
}

.dispute-evidence-photos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.dispute-evidence-photos a:hover img {
    transform: scale(1.06);
}

.dispute-evidence-missing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 18px 0;
    color: #9aa8a0;
    font-size: 12px;
}

.dispute-resolve {
    display: grid;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px dashed #e1eae4;
}

.dispute-resolve fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.dispute-resolve legend,
.dispute-resolve > label {
    margin-bottom: 4px;
    color: #3d4a43;
    font-size: 13px;
    font-weight: 700;
}

.dispute-resolve > label small {
    color: #8a968e;
    font-weight: 600;
}

.dispute-resolve textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d5dfd8;
    border-radius: 10px;
    font-size: 13.5px;
}

.dispute-resolve-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dispute-resolve-actions span {
    max-width: 560px;
    color: #6b7a71;
    font-size: 12px;
}

@media (max-width: 480px) {
    .delivery-photos {
        grid-template-columns: 1fr;
    }
}

/* Item page: status shown instead of Buy/Exchange once an item is reserved, sold, or your own */
.item-status-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding: 14px 16px;
    border: 1px solid #fde68a;
    border-radius: 14px;
    color: #78350f;
    background: #fffbeb;
}

.item-status-banner > i {
    font-size: 22px;
    color: #d97706;
}

.item-status-banner > div {
    flex: 1;
    min-width: 200px;
}

.item-status-banner strong,
.item-status-banner span {
    display: block;
}

.item-status-banner strong {
    font-size: 14.5px;
}

.item-status-banner span {
    margin-top: 2px;
    font-size: 13px;
    opacity: .85;
}

.item-status-banner.is-owner {
    border-color: #b9e2c8;
    color: #14432b;
    background: #eefaf2;
}

.item-status-banner.is-owner > i {
    color: #198754;
}

.item-unavailable {
    max-width: 560px;
    margin: 30px auto;
}

/* =====================================================
   SMOOTH PAGE SWITCHING — supported browsers (Chrome/Edge)
   keep the old page visible and cross-fade into the next
   one instead of flashing blank. The sidebar and top bar
   are matched between pages, so they stay perfectly still.
   Browsers without support simply navigate as before.
===================================================== */
@view-transition {
    navigation: auto;
}

.dashboard-sidebar {
    view-transition-name: app-sidebar;
}

.dashboard-topbar {
    view-transition-name: app-topbar;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 140ms;
}

/* Fixed parts: no fade, no movement. */
::view-transition-group(app-sidebar),
::view-transition-group(app-topbar) {
    animation: none;
}

::view-transition-old(app-sidebar),
::view-transition-old(app-topbar) {
    display: none;
}

::view-transition-new(app-sidebar),
::view-transition-new(app-topbar) {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* Chat: messages loading, and bubbles while sending / if sending failed */
.message-loading {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.message-loading span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ccfae;
    animation: chat-loading 1s ease-in-out infinite;
}

.message-loading span:nth-child(2) { animation-delay: .15s; }
.message-loading span:nth-child(3) { animation-delay: .3s; margin-right: 6px; }

@keyframes chat-loading {
    0%, 80%, 100% { opacity: .3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

.message-bubble.is-pending {
    opacity: .65;
}

.message-bubble.is-failed {
    border-color: #f1c9cd;
    background: #fff4f3;
    cursor: pointer;
}

.message-bubble.is-failed time {
    color: #b42318;
    font-weight: 700;
}

/* Instant navigation feedback: loading bar + soft fade while the next page arrives */
body.is-navigating::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #22a565, #198754);
    box-shadow: 0 0 8px rgba(25, 135, 84, .5);
    transform-origin: left;
    animation: nav-progress 2.5s cubic-bezier(.1, .7, .2, 1) forwards;
}

@keyframes nav-progress {
    from { transform: scaleX(.05); }
    to { transform: scaleX(.85); }
}

body.is-navigating .dashboard-content {
    opacity: .55;
    pointer-events: none;
    /* A short delay so pages that are already fetched switch without any flicker. */
    transition: opacity .15s ease .08s;
}

@media (prefers-reduced-motion: reduce) {
    body.is-navigating::before {
        animation: none;
        transform: scaleX(.6);
    }
}

/* =====================================================
   DASHBOARD — clickable item cards and listing rows
===================================================== */
a.dashboard-item-card.is-link,
a.my-listing-row.is-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.dashboard-item-card.is-link:hover {
    border-color: #c9e3d3;
    box-shadow: 0 10px 24px rgba(20, 67, 43, .1);
}

a.dashboard-item-card.is-link:focus-visible,
a.my-listing-row.is-link:focus-visible {
    outline: 3px solid rgba(25, 135, 84, .35);
    outline-offset: 2px;
}

.dashboard-item-image {
    position: relative;
}

.dashboard-item-image img {
    transition: transform .3s ease;
}

a.dashboard-item-card.is-link:hover .dashboard-item-image img {
    transform: scale(1.04);
}

.dashboard-item-no-image i {
    margin-right: 4px;
}

.dashboard-item-badge,
.dashboard-item-match {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.dashboard-item-badge {
    top: 8px;
    left: 8px;
    color: #14432b;
    background: rgba(255, 255, 255, .93);
}

.dashboard-item-match {
    top: 8px;
    right: 8px;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.dashboard-item-meta {
    display: block;
    overflow: hidden;
    color: #198754;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-item-body h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-item-wish {
    display: -webkit-box;
    overflow: hidden;
    color: #4b5a52;
    font-size: 12.5px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dashboard-item-wish i {
    color: #198754;
}

.dashboard-item-location {
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.dashboard-item-location span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dashboard-item-location strong {
    color: #14432b;
}

.dashboard-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #eef2ef;
    color: #8a968e;
    font-size: 11.5px;
}

.dashboard-item-footer span:first-child {
    overflow: hidden;
    color: #4b5a52;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-item-footer span:last-child {
    flex: 0 0 auto;
}

/* My Listings rows */
a.my-listing-row.is-link {
    margin: 0 -10px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 12px;
    transition: background .15s ease;
}

a.my-listing-row.is-link:hover {
    background: #f4faf6;
}

.my-listing-info h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-listing-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin-top: 3px;
    color: #6b7a71;
    font-size: 12.5px;
}

.my-listing-facts .dashboard-item-price {
    font-size: 14px;
}

.my-listing-facts .dashboard-item-wish {
    -webkit-line-clamp: 1;
}

.my-listing-side {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    color: #8a968e;
    font-size: 11.5px;
}

.my-listing-side > i {
    display: none;
}

.my-listing-status.is-available { color: #fff; background: #198754; }
.my-listing-status.is-reserved { color: #fff; background: #d97706; }
.my-listing-status.is-completed { color: #fff; background: #2563eb; }
.my-listing-status.is-archived { color: #fff; background: #4b5563; }

@media (max-width: 576px) {
    .my-listing-side small {
        display: none;
    }
}

/* =====================================================
   QUICK VIEW MODAL (dashboard item cards)
===================================================== */
.quick-view-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1990; /* below the exchange (2000) and confirm (2050) dialogs it can open */
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, .5);
}

.quick-view-backdrop[hidden] {
    display: none;
}

.quick-view {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    width: min(880px, 100%);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
    animation: confirmModalIn .18s ease-out;
}

.quick-view-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #25332a;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .15);
    cursor: pointer;
}

.quick-view-close:hover {
    background: #fff;
}

.quick-view-gallery {
    position: relative;
    display: grid;
    min-height: 320px;
    place-items: center;
    background: #f1f5f2;
}

.quick-view-gallery img {
    width: 100%;
    height: 100%;
    max-height: calc(100dvh - 32px);
    object-fit: cover;
}

.quick-view-gallery img[hidden] {
    display: none;
}

.quick-view-no-photo {
    color: #9aa8a0;
    font-size: 14px;
    font-weight: 600;
}

.quick-view-no-photo[hidden] {
    display: none;
}

.quick-view-arrow {
    position: absolute;
    top: 50%;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #25332a;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .15);
    cursor: pointer;
    transform: translateY(-50%);
}

.quick-view-arrow.is-prev { left: 10px; }
.quick-view-arrow.is-next { right: 10px; }

.quick-view-arrow[hidden],
.quick-view-counter[hidden],
.quick-view-gallery .dashboard-item-match[hidden] {
    display: none;
}

.quick-view-counter {
    position: absolute;
    bottom: 10px;
    left: 50%;
    padding: 2px 10px;
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 23, 42, .6);
    font-size: 12px;
    transform: translateX(-50%);
}

.quick-view-gallery .dashboard-item-match {
    top: auto;
    right: auto;
    bottom: 10px;
    left: 10px;
}

.quick-view-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 26px 24px 22px;
}

.quick-view-body h2 {
    margin: 0;
    padding-right: 30px;
    color: #1f2d25;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}

.quick-view-price {
    color: #14432b;
    font-size: 24px;
    font-weight: 800;
}

.quick-view-price[hidden],
.quick-view-body .dashboard-item-wish[hidden] {
    display: none;
}

.quick-view-body .dashboard-item-wish {
    -webkit-line-clamp: 3;
    font-size: 14px;
}

.quick-view-facts {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    color: #4b5a52;
    font-size: 13.5px;
    list-style: none;
}

.quick-view-facts i {
    margin-right: 4px;
    color: #198754;
}

.quick-view-description {
    margin: 4px 0 0;
    padding-top: 12px;
    border-top: 1px solid #eef2ef;
    color: #33413a;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-line;
}

.quick-view-loading {
    display: block;
    height: 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f4f1 30%, #f8fbf9 50%, #f0f4f1 70%);
    background-size: 220% 100%;
    animation: quick-view-shimmer 1.6s ease-in-out infinite;
}

.quick-view-loading.is-short {
    width: 60%;
}

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

.quick-view-unavailable {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    color: #78350f;
    background: #fffbeb;
    font-size: 13.5px;
}

.quick-view-unavailable[hidden],
.quick-view-actions[hidden] {
    display: none;
}

.quick-view-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.quick-view-actions form {
    margin: 0;
}

.quick-view-actions form[hidden],
.quick-view-actions button[hidden] {
    display: none;
}

.quick-view-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    font-weight: 700;
}

.quick-view-full {
    align-self: flex-start;
    color: #198754;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

.quick-view-full:hover {
    text-decoration: underline;
}

@media (max-width: 720px) {
    .quick-view-backdrop {
        align-items: end;
        padding: 0;
    }

    .quick-view {
        grid-template-columns: 1fr;
        width: 100%;
        max-height: 92dvh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
    }

    .quick-view-gallery {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .quick-view-body {
        overflow: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-view-loading {
        animation: none;
    }
}

/* My Listings: the listing you jumped to from the dashboard is briefly highlighted. */
.listing-card {
    scroll-margin-top: 90px;
}

.listing-card:target {
    animation: listing-target 2s ease;
}

@keyframes listing-target {
    0%, 40% { border-color: #198754; box-shadow: 0 0 0 4px rgba(25, 135, 84, .25); }
    100% { box-shadow: 0 1px 3px rgba(20, 50, 35, .05); }
}

/* Dashboard: Recent Activity feed (clickable, from the member's notifications) */
a.activity-row.is-link {
    position: relative;
    margin: 0 -10px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
}

a.activity-row.is-link:hover {
    background: #f4faf6;
}

a.activity-row.is-link:focus-visible {
    outline: 3px solid rgba(25, 135, 84, .35);
    outline-offset: 2px;
}

.activity-icon i {
    font-size: 15px;
}

.activity-icon.is-message {
    color: #0b5d89;
    background: #d9f1ff;
}

.activity-copy {
    flex: 1;
    min-width: 0;
}

.activity-copy p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.activity-copy time {
    display: block;
    margin-top: 2px;
    color: #8a968e;
    font-size: 11.5px;
}

a.activity-row.is-unread .activity-copy strong {
    color: #14432b;
}

.activity-unread-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #198754;
}

.activity-chevron {
    flex: 0 0 auto;
    color: #a3b0a8;
}

.activity-view-all {
    padding: 0;
    border: 0;
    color: #198754;
    background: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.activity-view-all:hover {
    text-decoration: underline;
}

.activity-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 24px 12px;
    color: #6b7a71;
    text-align: center;
}

.activity-empty > i {
    color: #198754;
    font-size: 28px;
}

.activity-empty strong {
    color: #25332a;
}

.activity-empty p {
    margin: 0 0 6px;
    font-size: 13.5px;
}

/* =====================================================
   MOBILE & TABLET (under 992px)
   The sidebar becomes a slide-out drawer opened by the
   burger in the top bar. Kept last in this file so it
   overrides the older small-screen sidebar rules.
===================================================== */
.dashboard-burger,
.dashboard-sidebar-close {
    display: none;
}

.dashboard-sidebar-overlay {
    display: none;
}

.dashboard-topbar-title {
    min-width: 0;
}

@media (max-width: 991.98px) {
    /* ---- Drawer ---- */
    .dashboard-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1600;
        width: min(300px, 86vw);
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
        transform: translateX(-102%);
        transition: transform .32s cubic-bezier(.22, .8, .24, 1), box-shadow .32s ease;
        visibility: hidden;
    }

    body.sidebar-open .dashboard-sidebar {
        transform: translateX(0);
        box-shadow: 12px 0 40px rgba(0, 0, 0, .28);
        visibility: visible;
    }

    /* Hidden but not "display:none", so the slide can animate; visibility is delayed on close. */
    body:not(.sidebar-open) .dashboard-sidebar {
        transition: transform .28s cubic-bezier(.4, 0, .6, 1), box-shadow .28s ease, visibility 0s linear .28s;
    }

    .dashboard-sidebar.is-dragging {
        transition: none;
    }

    .dashboard-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 1590;
        display: block;
        background: rgba(10, 20, 14, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }

    body.sidebar-open .dashboard-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    /* Undo the old horizontal-strip menu: a normal vertical menu inside the drawer. */
    .dashboard-menu {
        flex-direction: column;
        overflow: visible;
        padding-bottom: 0;
    }

    .dashboard-menu-link {
        flex-shrink: 1;
        min-height: 46px;
    }

    .dashboard-sidebar-bottom {
        display: block;
        margin-top: auto;
    }

    .dashboard-brand {
        justify-content: space-between;
        min-height: 72px;
        padding: 16px 16px 16px 20px;
    }

    .dashboard-sidebar-close {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 0;
        border-radius: 50%;
        color: #f4f7f4;
        background: rgba(255, 255, 255, .08);
        font-size: 16px;
        cursor: pointer;
    }

    .dashboard-sidebar-close:hover {
        background: rgba(255, 255, 255, .16);
    }

    /* ---- Main area takes the full width ---- */
    .dashboard-main {
        width: 100%;
        margin-left: 0;
    }

    /* ---- Top bar: burger · title · bell ---- */
    .dashboard-topbar {
        position: sticky;
        top: 0;
        z-index: 1000;
        min-height: 64px;
        gap: 12px;
        padding: 10px 16px;
    }

    .dashboard-burger {
        display: grid;
        width: 42px;
        height: 42px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid #e3e0d8;
        border-radius: 12px;
        color: #14432b;
        background: #fff;
        font-size: 24px;
        cursor: pointer;
    }

    .dashboard-burger:active {
        background: #f2f7f3;
    }

    .dashboard-topbar-title {
        flex: 1;
    }

    .dashboard-topbar h1 {
        overflow: hidden;
        font-size: 20px;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-topbar p {
        display: -webkit-box;
        margin: 2px 0 0;
        overflow: hidden;
        font-size: 12.5px;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .dashboard-content {
        padding: 20px 18px;
    }
}

/* ---- Phones ---- */
@media (max-width: 575.98px) {
    .dashboard-body {
        font-size: 15px;
    }

    .dashboard-topbar {
        min-height: 58px;
        padding: 8px 12px;
    }

    .dashboard-burger {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }

    .dashboard-topbar h1 {
        font-size: 17px;
    }

    .dashboard-topbar p {
        font-size: 12px;
    }

    .dashboard-content {
        padding: 14px 12px 24px;
    }

    /* Headings scaled for small screens */
    .dashboard-content h2 {
        font-size: clamp(18px, 5.2vw, 21px);
        line-height: 1.25;
    }

    .dashboard-content h3 {
        font-size: clamp(15.5px, 4.4vw, 17px);
        line-height: 1.3;
    }

    .dashboard-content h4 {
        font-size: 15px;
    }

    .dashboard-content p,
    .dashboard-content li {
        font-size: 14px;
    }

    /* 16px form fields: anything smaller makes iPhones zoom in when tapped. */
    .dashboard-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .dashboard-content select,
    .dashboard-content textarea,
    .report-modal textarea,
    .proof-modal textarea {
        font-size: 16px;
    }

    /* Comfortable tap targets */
    .dashboard-content .btn {
        min-height: 42px;
    }

    .dashboard-content img {
        max-width: 100%;
    }

    /* Cards and panels use the width better */
    .member-dashboard-card,
    .admin-panel,
    .delivery-section,
    .delivery-route-planner,
    .meetup-section,
    .exchange-finish {
        padding: 16px;
        border-radius: 16px;
    }

    .card-heading {
        flex-wrap: wrap;
        gap: 8px;
    }

    .listings-header h2 {
        font-size: 20px;
    }

    .listing-card-body h3 {
        font-size: 15px;
    }

    .listing-card-price {
        font-size: 16.5px;
    }

    .quick-view-body {
        padding: 20px 16px 18px;
    }

    .quick-view-body h2 {
        font-size: 19px;
    }

    .quick-view-price {
        font-size: 20px;
    }

    .notification-panel {
        right: -8px;
        width: calc(100vw - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-sidebar,
    .dashboard-sidebar-overlay {
        transition: none !important;
    }
}

/* The top bar has a view-transition name (smooth page switches), which makes it its own
   stacking layer — without a z-index that layer sat at the base, so maps further down the
   page painted over the notification panel inside it. Lift it above the page content
   (but below the mobile drawer, modals, and dialogs). */
.dashboard-topbar {
    position: relative;
    z-index: 1100;
}

@media (max-width: 991.98px) {
    .dashboard-topbar {
        position: sticky;
        z-index: 1100;
    }
}

/* Keep every map's own layers (tiles, markers, zoom buttons use z-index 400–1000) inside the map,
   so no map can cover menus, panels, or dropdowns elsewhere on the page. */
.leaflet-container {
    isolation: isolate;
    z-index: 0;
}

@media (max-width: 991.98px) {
    /* Sit just below the sticky top bar instead of sliding under it. */
    .transaction-live-bar {
        top: 72px;
    }
}

@media (max-width: 575.98px) {
    .transaction-live-bar {
        top: 64px;
    }
}

/* =====================================================
   MOBILE TOP BAR: ☰ · SwapNear · 🔔
   The page title moves into the page as its first heading.
   (Desktop keeps the title in the top bar; these extras stay hidden.)
===================================================== */
.dashboard-topbar-brand,
.dashboard-mobile-heading {
    display: none;
}

@media (max-width: 991.98px) {
    .dashboard-topbar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 8px;
    }

    .dashboard-burger {
        justify-self: start;
    }

    .dashboard-topbar-brand {
        display: block;
        justify-self: center;
        color: #14432b;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -.3px;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
    }

    .dashboard-topbar-brand:hover {
        color: #198754;
    }

    .dashboard-topbar-title {
        display: none;
    }

    .dashboard-topbar-actions {
        justify-self: end;
    }

    .dashboard-mobile-heading {
        display: block;
        margin: 0 0 16px;
    }

    .dashboard-mobile-heading h1 {
        margin: 0;
        color: #1f2d25;
        font-size: 23px;
        font-weight: 800;
        line-height: 1.2;
    }

    .dashboard-mobile-heading p {
        margin: 4px 0 0;
        color: #66736b;
        font-size: 13.5px;
        line-height: 1.45;
    }
}

@media (max-width: 575.98px) {
    .dashboard-topbar-brand {
        font-size: 22px;
    }

    .dashboard-mobile-heading {
        margin-bottom: 14px;
    }

    .dashboard-mobile-heading h1 {
        font-size: 20px;
    }

    .dashboard-mobile-heading p {
        font-size: 13px;
    }
}

/* =====================================================
   PHONES & TABLETS — dark top bar (matches the sidebar)
===================================================== */
@media (max-width: 991.98px) {
    .dashboard-topbar {
        border-bottom: 0;
        background: #0f2419;
        box-shadow: 0 2px 14px rgba(5, 15, 9, .18);
    }

    .dashboard-topbar-brand {
        color: #f5f1e8;
    }

    .dashboard-topbar-brand:hover {
        color: #fff;
    }

    .dashboard-burger,
    .dashboard-notification {
        border: 1px solid rgba(255, 255, 255, .12);
        color: #f5f1e8;
        background: rgba(255, 255, 255, .07);
    }

    .dashboard-burger:active,
    .dashboard-notification:hover,
    .dashboard-notification:active {
        background: rgba(255, 255, 255, .15);
    }

    .dashboard-notification i {
        color: #f5f1e8;
    }

    /* The red unread badge gets a dark ring so it stands out on the dark bar. */
    .dashboard-topbar .notification-badge {
        border-color: #0f2419;
    }
}

/* =====================================================
   DASHBOARD on phones — one clear text scale, compact stats
   welcome 22 · section titles 17 · text 14 · details 12
===================================================== */
.stat-symbol i,
.empty-icon i,
.match-icon i,
.quick-action-icon i {
    line-height: 1;
}

@media (max-width: 767.98px) {
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 16px;
    }

    .dashboard-eyebrow {
        margin-bottom: 4px;
        font-size: 10.5px;
        letter-spacing: .08em;
    }

    .dashboard-header h1 {
        margin: 0;
        font-size: 22px;
        line-height: 1.25;
    }

    .dashboard-header p {
        margin: 4px 0 0;
        font-size: 13.5px;
        line-height: 1.45;
    }

    .create-listing-btn {
        justify-content: center;
        width: 100%;
        min-height: 46px;
        font-size: 14.5px;
    }

    /* 2 × 2 stat cards instead of four tall rows */
    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 16px;
    }

    .member-stat-card {
        padding: 14px;
        border-radius: 14px;
    }

    .member-stat-card .stat-top {
        align-items: flex-start;
        gap: 8px;
    }

    .stat-label {
        display: block;
        font-size: 12px;
        line-height: 1.3;
    }

    .member-stat-card h2 {
        margin: 4px 0 0;
        font-size: 26px;
        line-height: 1.1;
    }

    .member-stat-card p {
        margin: 6px 0 0;
        font-size: 11.5px;
        line-height: 1.35;
    }

    .stat-symbol {
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        font-size: 16px;
    }

    /* Section cards */
    .dashboard-grid {
        gap: 14px;
    }

    .card-heading {
        align-items: flex-start;
        margin-bottom: 14px;
    }

    .card-heading h3 {
        margin: 0;
        font-size: 17px;
        line-height: 1.3;
    }

    .card-heading p {
        margin: 3px 0 0;
        font-size: 12.5px;
        line-height: 1.4;
    }

    .card-heading a,
    .activity-view-all {
        font-size: 13px;
        white-space: nowrap;
    }

    /* Item cards: two per row on phones */
    .dashboard-item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dashboard-item-body {
        gap: 4px;
        padding: 10px;
    }

    .dashboard-item-body h4 {
        font-size: 14px;
    }

    .dashboard-item-meta {
        font-size: 9.5px;
    }

    .dashboard-item-price {
        font-size: 14.5px;
    }

    .dashboard-item-wish,
    .dashboard-item-location {
        font-size: 11.5px;
    }

    .dashboard-item-footer {
        font-size: 10.5px;
    }

    .dashboard-item-badge,
    .dashboard-item-match {
        padding: 2px 7px;
        font-size: 10px;
    }

    /* My Listings rows and Recent Activity */
    .my-listing-info h4,
    .activity-row strong {
        font-size: 14px;
    }

    .my-listing-facts,
    .activity-copy p {
        font-size: 12.5px;
    }

    .activity-copy time,
    .my-listing-side {
        font-size: 11px;
    }

    .empty-icon,
    .match-icon {
        font-size: 20px;
    }
}

/* Very narrow phones: item cards back to one per row so text isn't cramped. */
@media (max-width: 359.98px) {
    .dashboard-item-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   QUICK VIEW — calmer size
   Desktop: a compact window. Phones: a bottom sheet (max 80% of the
   screen) with a short photo strip; details scroll, buttons stay put.
===================================================== */
.quick-view {
    width: min(760px, 100%);
    max-height: min(86dvh, 640px);
}

.quick-view-gallery {
    max-height: min(86dvh, 640px);
}

@media (max-width: 720px) {
    .quick-view {
        display: flex;
        flex-direction: column;
        max-height: 80dvh;
        overflow: hidden;
    }

    /* Grab handle */
    .quick-view::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        z-index: 4;
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .85);
        box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
        transform: translateX(-50%);
    }

    .quick-view-gallery {
        flex: 0 0 auto;
        height: clamp(170px, 32dvh, 250px);
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;
    }

    .quick-view-gallery img {
        max-height: none;
    }

    .quick-view-close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .quick-view-arrow {
        width: 32px;
        height: 32px;
    }

    .quick-view-body {
        flex: 1 1 auto;
        min-height: 0;
        gap: 8px;
        overflow-y: auto;
        padding: 14px 16px 0;
    }

    .quick-view-body h2 {
        padding-right: 0;
        font-size: 18px;
    }

    .quick-view-price {
        font-size: 19px;
    }

    .quick-view-facts {
        font-size: 13px;
    }

    .quick-view-description {
        padding-top: 10px;
        font-size: 13.5px;
    }

    /* Buttons pinned to the bottom of the sheet */
    .quick-view-actions {
        position: sticky;
        bottom: 0;
        margin: 4px -16px 0;
        padding: 10px 16px 6px;
        border-top: 1px solid #eef2ef;
        background: #fff;
    }

    .quick-view-actions form,
    .quick-view-actions > .btn {
        flex: 1;
    }

    .quick-view-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .quick-view-full {
        align-self: center;
        padding: 8px 0 14px;
    }
}

/* Dashboard: "See all nearby items" under the nearest few */
.dashboard-see-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 16px;
    border: 1px solid #cde8d6;
    border-radius: 12px;
    color: #146c43;
    background: #f4fbf6;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.dashboard-see-all:hover {
    border-color: #198754;
    color: #146c43;
    background: #e9f7ee;
}

.dashboard-see-all span {
    padding: 1px 8px;
    border-radius: 999px;
    color: #fff;
    background: #198754;
    font-size: 11.5px;
}

/* =====================================================
   ALL PAGES ON PHONES — consistent, compact layouts
===================================================== */

/* ---- Browse filters: search + "Filters" button; the rest folds away on phones ---- */
.browse-filter-toggle {
    display: none;
}

@media (min-width: 768px) {
    /* Desktop keeps the original one-row filter layout. */
    .browse-filter-options {
        display: contents;
    }
}

@media (max-width: 767.98px) {
    .browse-filters {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 12px;
    }

    .browse-search {
        min-width: 0;
    }

    .browse-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid #d5e1d9;
        border-radius: 12px;
        color: #14432b;
        background: #fff;
        font-size: 14px;
        font-weight: 700;
    }

    .browse-filter-toggle span {
        min-width: 18px;
        padding: 0 6px;
        border-radius: 999px;
        color: #fff;
        background: #198754;
        font-size: 11px;
        text-align: center;
    }

    .browse-filter-options {
        display: none;
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .browse-filters.is-open .browse-filter-options {
        display: grid;
    }

    .browse-filter-options select {
        width: 100%;
        min-width: 0;
    }

    .browse-filter-options select[name="sort"] {
        grid-column: 1 / -1;
    }

    .browse-filter-button {
        width: 100%;
        min-height: 44px;
    }

    .browse-clear-link {
        align-self: center;
        justify-self: center;
    }

    .browse-results-count {
        margin: 14px 0 10px;
    }
}

/* ---- Shared item card grid (Browse, Smart Matches, Dashboard) ---- */
.browse-item-grid.dashboard-item-grid,
.smart-match-grid.dashboard-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 16px;
}

@media (max-width: 767.98px) {
    .browse-item-grid.dashboard-item-grid,
    .smart-match-grid.dashboard-item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (max-width: 359.98px) {
    .browse-item-grid.dashboard-item-grid,
    .smart-match-grid.dashboard-item-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- My Listings: two compact cards per row ---- */
@media (max-width: 767.98px) {
    .listings-header {
        margin-bottom: 12px;
    }

    .listings-header h2 {
        font-size: 20px;
    }

    .listings-post-btn {
        padding: 9px 14px;
        font-size: 13.5px;
    }

    .listings-tabs {
        margin-bottom: 14px;
    }

    .listings-tabs a {
        padding: 6px 11px;
        font-size: 12.5px;
    }

    .listings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .listing-card-body {
        gap: 3px;
        padding: 10px 10px 8px;
    }

    .listing-card-category {
        overflow: hidden;
        font-size: 9.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .listing-card-body h3 {
        font-size: 14px;
    }

    .listing-card-price {
        font-size: 14.5px;
    }

    .listing-card-wish {
        font-size: 12px;
    }

    .listing-card-meta {
        gap: 2px 8px;
        font-size: 11px;
    }

    .listing-card-lock {
        margin-top: 6px;
        padding: 5px 7px;
        font-size: 10.5px;
    }

    .listing-type-badge,
    .listing-status-badge,
    .listing-photo-count {
        padding: 2px 7px;
        font-size: 10px;
    }

    .listing-card-footer {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
    }

    .listing-status-form,
    .listing-status-form select {
        width: 100%;
    }

    .listing-status-form select {
        min-height: 32px;
        font-size: 13px;
    }

    .listing-card-actions {
        width: 100%;
        justify-content: space-between;
    }

    .listing-edit-btn {
        flex: 1;
        justify-content: center;
        min-height: 32px;
    }

    .listing-menu summary {
        width: 32px;
        height: 32px;
    }
}

/* ---- Transactions list: compact rows (small photo beside the details) ---- */
@media (max-width: 767.98px) {

    .transaction-section {
        margin-top: 4px;
    }

    .transaction-card {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 12px;
    }

    .transaction-card .transaction-image {
        width: 76px;
        height: 76px;
        margin: 0;
        overflow: hidden;
        border-radius: 12px;
    }

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

    .transaction-card .transaction-details {
        min-width: 0;
    }

    .transaction-card .transaction-details h3 {
        margin: 4px 0 2px;
        overflow: hidden;
        font-size: 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .transaction-card .transaction-details p {
        font-size: 12.5px;
    }

    .transaction-offer-line {
        font-size: 12px;
    }

    .transaction-card .transaction-action,
    .transaction-card .transaction-decision{
        grid-column: 1 / -1;
    }

    .transaction-card .transaction-action {
        min-height: 40px;
        font-size: 13.5px;
    }
}

/* ---- Transaction / item details ---- */
@media (max-width: 767.98px) {
    .transaction-detail-gallery,
    .item-detail-gallery {
        padding: 8px;
    }

    .transaction-detail-content,
    .item-detail-content {
        padding: 16px;
    }

    .transaction-detail-content h2,
    .item-detail-content h2 {
        font-size: 20px;
    }

    /* Facts as a 2-column grid instead of a tall single column */
    .transaction-detail-facts,
    .item-detail-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .transaction-detail-facts > div,
    .item-detail-facts > div {
        min-width: 0;
        padding: 10px 12px;
    }

    .transaction-detail-facts dt,
    .item-detail-facts dt {
        font-size: 10.5px;
    }

    .transaction-detail-facts dd,
    .item-detail-facts dd {
        overflow-wrap: anywhere;
        font-size: 13.5px;
    }

    /* Buttons: equal widths, two per row */
    .transaction-detail-actions,
    .item-detail-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .transaction-detail-actions form,
    .item-detail-actions form {
        margin: 0;
    }

    .transaction-detail-actions .btn,
    .item-detail-actions .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        min-height: 44px;
        font-size: 14px;
    }

    /* A lone last button spans the full row */
    .transaction-detail-actions > :last-child:nth-child(odd),
    .item-detail-actions > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* ---- Chat: fills the screen, tidy header ---- */
@media (max-width: 767.98px) {
    .message-thread {
        display: flex;
        flex-direction: column;
        height: calc(100dvh - 58px - 74px);
        min-height: 380px;
        border-radius: 16px;
    }

    .message-thread > header {
        flex-wrap: nowrap;
        gap: 10px;
        min-height: 0;
        padding: 10px 12px;
    }

    .message-thread > header > div {
        min-width: 0;
        flex: 1;
    }

    .message-thread > header strong {
        font-size: 15px;
    }

    .message-thread > header small {
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .message-thread > header .message-avatar {
        width: 36px;
        height: 36px;
    }

    /* Icon-only header actions */
    .message-thread > header .message-report-link {
        display: grid;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        place-items: center;
        border: 1px solid #e3ebe6;
        border-radius: 10px;
        font-size: 0;
    }

    .message-thread > header .message-report-link i {
        font-size: 15px;
    }

    .message-thread > header .message-report-link span {
        display: none;
    }

    .message-thread-body {
        flex: 1;
        min-height: 0;
        max-height: none;
        padding: 14px 12px;
    }

    .message-bubble {
        max-width: 85%;
        padding: 9px 12px;
    }

    .message-bubble p {
        font-size: 14.5px;
    }

    .message-compose {
        gap: 8px;
        padding: 10px;
    }

    .message-compose textarea {
        min-height: 44px;
        max-height: 120px;
        resize: none;
    }
}

/* ---- Courier workspace & admin: compact stat grids ---- */
@media (max-width: 767.98px) {
    .delivery-hero,
    .admin-hero {
        padding: 18px;
        border-radius: 18px;
    }

    .delivery-hero h2,
    .admin-hero h2 {
        font-size: 19px;
        line-height: 1.3;
    }

    .delivery-hero p,
    .admin-hero p {
        font-size: 13px;
    }

    .delivery-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .delivery-stats article {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px;
    }

    .delivery-stats article span {
        font-size: 11.5px;
        line-height: 1.25;
    }

    .delivery-stats article strong {
        font-size: 22px;
    }

    .delivery-stats article i {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .admin-stats article {
        padding: 12px;
    }

    .admin-stats article span {
        font-size: 12px;
    }

    .admin-stats article strong {
        font-size: 22px;
    }

    .admin-panel-heading h2 {
        font-size: 18px;
    }

    .admin-table {
        font-size: 12.5px;
    }

    .admin-table th,
    .admin-table td {
        padding: 10px 8px;
    }

    .admin-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .admin-filters > div:first-child {
        grid-column: 1 / -1;
    }
}

/* Transactions list on phones: the buttons share the row evenly */
@media (max-width: 767.98px) {
    .transaction-card .transaction-actions {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin-top: 2px;
    }

    .transaction-card .transaction-actions > *,
    .transaction-card .transaction-actions form,
    .transaction-card .transaction-actions .transaction-action {
        width: 100%;
        margin: 0;
    }

    .transaction-card .transaction-actions .transaction-action {
        justify-content: center;
    }

}

/* Item page facts on phones: label above value inside each grid cell
   (on desktop they sit side by side, which doesn't fit half a phone width). */
@media (max-width: 767.98px) {
    .item-detail-facts > div {
        display: block;
        border-bottom: 1px solid #e8eee9;
    }

    .item-detail-facts dt {
        margin: 0 0 3px;
        color: #6b7a71;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .item-detail-facts dd {
        margin: 0;
        color: #1f2d25;
        font-weight: 700;
        writing-mode: horizontal-tb;
        word-break: normal;
    }

    /* A lone last fact spans the full row */
    .item-detail-facts > div:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* =====================================================
   ITEM CARDS — proportioned, not tall & thin
   The grid's inner padding is only for inside a dashboard
   section; on Browse / Smart Matches it squeezed the cards.
   Photos follow the card width (4:3) instead of a fixed 180px.
===================================================== */
.browse-item-grid.dashboard-item-grid,
.smart-match-grid.dashboard-item-grid {
    padding: 0;
}

@media (max-width: 767.98px) {
    .member-dashboard-card .dashboard-item-grid {
        padding: 4px 0 0;
    }

    .dashboard-item-card .dashboard-item-image {
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: 4 / 3;
    }

    .dashboard-item-card .dashboard-item-body {
        gap: 3px;
        padding: 9px 10px 10px;
    }

    .dashboard-item-card .dashboard-item-body h4 {
        margin: 0;
    }

    .dashboard-item-card .dashboard-item-price {
        margin: 1px 0 0;
    }

    .dashboard-item-card .dashboard-item-location span {
        -webkit-line-clamp: 1;
    }

    .dashboard-item-card .dashboard-item-footer {
        padding-top: 6px;
    }
}

/* =====================================================
   SMART MATCHES — header explaining the page
===================================================== */
.match-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px 22px;
    border: 1px solid #e3d9fb;
    border-radius: 18px;
    background: linear-gradient(135deg, #f6f2ff, #fff 60%);
}

.match-intro-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    font-size: 22px;
}

.match-intro-copy h2 {
    margin: 0;
    color: #1f2d25;
    font-size: 19px;
    font-weight: 800;
}

.match-intro-copy p {
    margin: 3px 0 10px;
    color: #5b6a62;
    font-size: 13.5px;
}

.match-intro-factors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.match-intro-factors li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid #e3d9fb;
    border-radius: 999px;
    color: #4c3a8a;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
}

.match-intro-factors i {
    color: #7c3aed;
}

.match-intro-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid #d6c8fb;
    border-radius: 11px;
    color: #5b21b6;
    background: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.match-intro-link:hover {
    border-color: #7c3aed;
    color: #5b21b6;
    background: #f6f2ff;
}

@media (max-width: 767.98px) {
    .match-intro {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 16px;
    }

    .match-intro-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .match-intro-copy h2 {
        font-size: 16.5px;
    }

    .match-intro-copy p {
        margin-bottom: 8px;
        font-size: 12.5px;
    }

    .match-intro-factors li {
        padding: 3px 8px;
        font-size: 11px;
    }

    .match-intro-link {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

/* =====================================================
   DELIVERY TRACKING — horizontal progress on phones too
   (an older rule turned the 4 steps into a vertical list)
===================================================== */
@media (max-width: 600px) {
    .delivery-timeline {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        margin: 18px 0 12px;
    }

    .delivery-timeline li {
        padding: 26px 2px 0;
        font-size: 11px;
        line-height: 1.25;
        text-align: center;
    }

    .delivery-timeline li::before {
        top: 2px;
        left: calc(50% - 9px);
        width: 18px;
        height: 18px;
    }

    .delivery-timeline li:not(:last-child)::after {
        top: 10px;
        left: calc(50% + 9px);
        width: calc(100% - 18px);
        height: 3px;
        border-radius: 2px;
    }
}

/* "See all matches" uses the Smart Matches purple */
.dashboard-see-all.is-matches {
    border-color: #e3d9fb;
    color: #5b21b6;
    background: #f6f2ff;
}

.dashboard-see-all.is-matches:hover {
    border-color: #7c3aed;
    color: #5b21b6;
    background: #efe8ff;
}

.dashboard-see-all.is-matches span {
    background: #7c3aed;
}

/* =====================================================
   SMART MATCHES — theme colors (dark green, green, cream)
   instead of purple. Overrides the earlier purple rules.
===================================================== */

/* Match % badge on item cards / quick view */
.dashboard-item-match {
    border: 1px solid rgba(245, 241, 232, .18);
    color: #f5f1e8;
    background: #14432b;
    box-shadow: 0 2px 6px rgba(15, 36, 25, .25);
}

.dashboard-item-match i {
    color: #f2c14e; /* small gold accent on the star */
}

/* Header on the Smart Matches page */
.match-intro {
    border-color: #cde8d6;
    background: linear-gradient(135deg, #eef8f1, #fbf9f4 65%);
}

.match-intro-icon {
    color: #f5f1e8;
    background: linear-gradient(135deg, #1f6b45, #0f2419);
}

.match-intro-icon i {
    color: #f2c14e;
}

.match-intro-factors li {
    border-color: #cde8d6;
    color: #14432b;
}

.match-intro-factors i {
    color: #198754;
}

.match-intro-link {
    border-color: #b9d9c4;
    color: #146c43;
}

.match-intro-link:hover {
    border-color: #198754;
    color: #146c43;
    background: #eef8f1;
}

/* Dashboard "See all matches" — same green as "See all nearby" */
.dashboard-see-all.is-matches {
    border-color: #cde8d6;
    color: #146c43;
    background: #f4fbf6;
}

.dashboard-see-all.is-matches:hover {
    border-color: #198754;
    color: #146c43;
    background: #e9f7ee;
}

.dashboard-see-all.is-matches span {
    background: #198754;
}

/* Item cards: the match % sits bottom-left on the photo so it never collides with the
   Resell/Exchange badge (top-left) on narrow cards. */
.dashboard-item-card .dashboard-item-match {
    top: auto;
    right: auto;
    bottom: 8px;
    left: 8px;
}

/* =====================================================
   CHAT — fits the screen (no scrolling to reach the box),
   back arrow in the header, and the item bar (like Shopee)
===================================================== */
.message-thread {
    display: flex;
    flex-direction: column;
    max-width: 850px;
    /* screen height minus the top bar and the page's padding */
    height: calc(100vh - 142px);
    height: calc(100dvh - 142px);
    min-height: 420px;
}

.message-thread-body {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.chat-back {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    margin-right: -2px;
    border-radius: 10px;
    color: #14432b;
    font-size: 18px;
    text-decoration: none;
}

.chat-back:hover {
    color: #14432b;
    background: #eef5f0;
}

/* The item this chat is about */
.chat-item-bar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #e7eee8;
    color: inherit;
    background: #fbfcfb;
    text-decoration: none;
    transition: background .15s ease;
}

a.chat-item-bar[href]:hover {
    color: inherit;
    background: #f2f8f4;
}

.chat-item-bar.is-static {
    cursor: default;
}

.chat-item-thumb {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e3ebe6;
    border-radius: 10px;
    color: #9aa8a0;
    background: #f1f5f2;
}

.chat-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-item-thumb img[hidden],
.chat-item-thumb i[hidden],
.chat-item-view[hidden] {
    display: none;
}

.chat-item-copy {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

.chat-item-copy strong {
    overflow: hidden;
    color: #1f2d25;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-item-copy small {
    color: #14432b;
    font-size: 12.5px;
    font-weight: 700;
}

.chat-item-state {
    color: #8a968e;
    font-weight: 600;
}

.chat-item-state.is-available {
    color: #198754;
}

.chat-item-state.is-reserved {
    color: #b45309;
}

.chat-item-view {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border: 1px solid #cde8d6;
    border-radius: 999px;
    color: #146c43;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* An open chat on the Messages page doesn't need the page heading above it. */
body.chat-open .dashboard-mobile-heading {
    display: none;
}

@media (max-width: 991.98px) {
    .message-thread {
        height: calc(100vh - 104px);
        height: calc(100dvh - 104px);
    }
}

@media (max-width: 767.98px) {
    .message-thread {
        height: calc(100vh - 96px);
        height: calc(100dvh - 96px);
        min-height: 360px;
    }

    .message-thread > header {
        gap: 8px;
        padding: 8px 10px;
    }

    .chat-item-bar {
        gap: 10px;
        padding: 8px 12px;
    }

    .chat-item-thumb {
        width: 40px;
        height: 40px;
    }

    .chat-item-copy strong {
        font-size: 13.5px;
    }

    .chat-item-copy small {
        font-size: 12px;
    }
}

/* ---- Transactions page: tabs instead of two stacked sections ---- */

.transaction-toolbar {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.transaction-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #e3e8e4;
    border-radius: 12px;
    background: #fff;
}

.transaction-tab {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #4b5a51;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.transaction-tab:hover {
    background: #f2f6f3;
    color: #14432b;
}

.transaction-tab[aria-selected="true"] {
    background: #14432b;
    color: #fff;
}

.transaction-tab-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 99px;
    background: #e8f0ea;
    color: #14432b;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.transaction-tab[aria-selected="true"] .transaction-tab-count {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* Something on your items is waiting for your answer */
.transaction-tab-count.has-pending,
.transaction-tab[aria-selected="true"] .transaction-tab-count.has-pending {
    background: #f5b301;
    color: #2b1d00;
}

.transaction-section {
    margin-top: 0;
}

.transaction-section-hint {
    margin: 0 0 12px;
    color: #6b7a71;
    font-size: 13px;
}

[data-transactions-list][data-tab="incoming"] .transaction-section[data-group="outgoing"],
[data-transactions-list][data-tab="outgoing"] .transaction-section[data-group="incoming"] {
    display: none;
}

@media (max-width: 767.98px) {
    .transaction-toolbar {
        margin-bottom: 10px;
    }

    .transaction-toolbar .transaction-browse-button {
        display: none; /* Browse is one tap away in the menu */
    }

    .transaction-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .transaction-tab {
        gap: 6px;
        padding: 9px 6px;
        font-size: 13.5px;
    }

    .transaction-tab .bi {
        display: none;
    }

    .transaction-section-hint {
        margin-bottom: 10px;
        font-size: 12.5px;
    }

    /* Buttons side by side; a lone button takes the full row */
    .transaction-card .transaction-actions {
        grid-template-columns: 1fr 1fr;
    }

    .transaction-card .transaction-actions > * {
        grid-column: auto;
    }

    .transaction-card .transaction-actions > :only-child,
    .transaction-card .transaction-actions > .transaction-decision {
        grid-column: 1 / -1;
    }
}

/* Tracking map: the Follow courier button */
.delivery-follow-button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 7px 11px;
    border: 0;
    border-radius: 9px;
    background: #fff;
    color: #14432b;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .2);
}

.delivery-follow-button[hidden] {
    display: none;
}

/* Courier map: Pin a place (custom destination on purpose only) */
.delivery-pin-button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 7px 11px;
    border: 0;
    border-radius: 9px;
    background: #fff;
    color: #14432b;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .2);
}

.delivery-pin-button.is-active {
    background: #d9534f;
    color: #fff;
}

.delivery-route-map.is-pinning {
    cursor: crosshair;
}

/* Icon-only pin button */
.leaflet-control .delivery-pin-button {
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 17px;
}

.delivery-pin-popup {
    display: grid;
    gap: 8px;
}

.delivery-pin-popup button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fff;
    color: #b42318;
    font-weight: 700;
}

/* Maps: no box flashing around a route line or the map when tapped (the phone's tap highlight
   covers a line's whole bounding rectangle); keyboard users still get the map's focus outline. */
.leaflet-container,
.leaflet-container .leaflet-interactive {
    -webkit-tap-highlight-color: transparent;
}

.leaflet-container path.leaflet-interactive:focus,
.leaflet-container:focus:not(:focus-visible) {
    outline: none;
}

/* ---- Item delivery size (post / edit listing) + courier vehicle chip ---- */
.delivery-size-picker {
    margin-top: 16px;
}

.delivery-size-picker legend {
    margin-bottom: 2px;
    font-size: 1rem;
    font-weight: 600;
}

.delivery-size-picker > p {
    margin: 0 0 10px;
    color: #6b7a71;
    font-size: 13px;
}

.delivery-size-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.delivery-size-option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.delivery-size-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.delivery-size-card {
    position: relative;
    display: grid;
    gap: 6px;
    justify-items: center;
    height: 100%;
    padding: 12px 10px;
    border: 2px solid #e3e8e4;
    border-radius: 14px;
    background: #fff;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}

.delivery-size-card > i {
    color: #14432b;
    font-size: 24px;
}

.delivery-size-card strong {
    color: #17231c;
    font-size: 15px;
}

.delivery-size-card small {
    color: #6b7a71;
    font-size: 12.5px;
    line-height: 1.35;
}

.delivery-size-option:hover .delivery-size-card {
    border-color: #b9d9c4;
}

.delivery-size-option input:checked + .delivery-size-card {
    border-color: #198754;
    background: #f1faf4;
}

.delivery-size-option input:focus-visible + .delivery-size-card {
    outline: 3px solid rgba(25, 135, 84, .35);
    outline-offset: 2px;
}

.delivery-vehicle-chip {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-top: 12px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 99px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.delivery-vehicle-chip span {
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, .35);
    opacity: .85;
    text-decoration: underline;
}

.delivery-vehicle-chip:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.delivery-plate {
    padding: 1px 6px;
    border: 1px solid #cfd8d2;
    border-radius: 5px;
    color: #17231c;
    font-size: 12.5px;
    letter-spacing: .04em;
}

.admin-vehicle {
    display: block;
    margin-top: 4px;
    color: #6b7a71;
}

@media (max-width: 767.98px) {
    .delivery-size-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* One row per size on phones: icon on the left, words on the right */
    .delivery-size-card {
        grid-template-columns: 42px 1fr;
        justify-items: start;
        align-items: center;
        column-gap: 12px;
        row-gap: 0;
        padding: 12px 14px;
        text-align: left;
    }

    .delivery-size-card > i {
        grid-row: span 2;
        font-size: 26px;
    }
}

/* Courier onboarding: vehicle step */
.onboarding-vehicle-option strong i {
    margin-right: 6px;
    color: #14432b;
    font-size: 18px;
    vertical-align: -2px;
}

.onboarding-plate {
    text-transform: uppercase;
}

.onboarding-plate::placeholder {
    text-transform: none;
}

.onboarding-hint {
    margin-top: 14px;
    color: #6b7a71;
    font-size: 13px;
}

.onboarding-next:disabled {
    opacity: .5;
}

/* ---- Site footer (landing + register): one slim bar ---- */
.site-footer {
    margin-top: 40px;
    background: #0f2419;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    align-items: center;
    justify-content: space-between;
    max-width: 1140px;
    margin: 0 auto;
    padding: 18px 24px;
}

.site-footer-logo {
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    text-decoration: none;
}

.site-footer-logo:hover {
    color: #fff;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
}

.site-footer-links a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
}

.site-footer-links a:hover {
    color: #7ee2a8;
}

.site-footer-copy {
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
}

/* Phones: two short lines, the links in one dotted row, then the copyright. The navbar already
   shows the logo, so it's left out here. */
@media (max-width: 575.98px) {
    .site-footer {
        margin-top: 28px;
        font-size: 13px;
    }

    .site-footer-inner {
        flex-direction: column;
        gap: 4px;
        padding: 14px 16px;
        text-align: center;
    }

    .site-footer-logo {
        display: none;
    }

    .site-footer-links {
        justify-content: center;
        gap: 0;
    }

    .site-footer-links a + a::before {
        content: "·";
        margin: 0 10px;
        color: rgba(255, 255, 255, .4);
    }

    .site-footer-copy {
        font-size: 12px;
    }
}

/* Courier map: navigation arrow (a dot until the direction is known), turned to face the way they're going. */
.driver-puck {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
}

.driver-puck::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: rgba(25, 135, 84, .18);
}

.driver-puck::after {
    content: "";
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #198754;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .35);
}

.driver-puck__arrow {
    display: none;
    position: relative;
    width: 30px;
    height: 30px;
    fill: #198754;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .35));
    transform: rotate(var(--heading, 0deg));
    transition: transform .6s ease;
}

.driver-puck.has-heading::after {
    display: none;
}

.driver-puck.has-heading .driver-puck__arrow {
    display: block;
}

/* Shown on the map once you drag it away from yourself. */
.delivery-recenter-button {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #14432b;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .25);
    cursor: pointer;
}

.delivery-recenter-button.is-visible {
    display: inline-flex;
}

.delivery-recenter-button i {
    color: #198754;
}

/* Buyer/seller tracking map: the courier as a badge with their vehicle, and a pointer on its edge
   that turns to face the way they're going (the vehicle itself stays upright). */
.courier-badge {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
}

.courier-badge > i {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #198754;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .35);
}

.courier-badge__dial {
    position: absolute;
    inset: 0;
    display: none;
    transform: rotate(var(--heading, 0deg));
    transition: transform .6s ease;
}

.courier-badge__dial::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    border-right: 7px solid transparent;
    border-bottom: 10px solid #198754;
    border-left: 7px solid transparent;
    transform: translateX(-50%);
    filter: drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 2px rgba(15, 23, 42, .3));
}

.courier-badge.has-heading .courier-badge__dial {
    display: block;
}

/* Sign-up email code and password reset pages. */
.auth-code-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #e8f5ee;
    color: #198754;
    font-size: 28px;
}

.auth-code-input {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 10px;
    text-align: center;
}

.auth-code-input::placeholder {
    color: #c5d2ca;
}

.auth-code-help {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e6ece8;
}

.auth-code-help .btn-link:disabled {
    color: #8a958f !important;
    opacity: 1;
}

.auth-test-code {
    margin-left: 4px;
    font-size: 18px;
    letter-spacing: 3px;
}

.register-email-suggestion {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: #146c43;
    font-size: 13px;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}

.register-email-suggestion[hidden] {
    display: none;
}

/* Settings: confirm a new email with its code. */
.email-change-card {
    max-width: 480px;
    margin: 0 auto;
}

/* Password guide: requirements that tick green as they're met, with a strength bar. */
.password-guide {
    margin: 4px 0 18px;
    padding: 14px 16px;
    border: 1px solid #e1e9e4;
    border-radius: 12px;
    background: #f8fbf9;
    text-align: left;
}

.password-guide__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.password-guide__title {
    color: #1f2a24;
    font-size: 13px;
    font-weight: 700;
}

.password-guide__strength {
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
}

.password-guide__meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 12px;
}

.password-guide__meter span {
    height: 4px;
    border-radius: 999px;
    background: #dfe6e2;
    transition: background-color .2s ease;
}

.password-guide[data-strength="1"] .password-guide__meter .is-filled { background: #dc3545; }
.password-guide[data-strength="2"] .password-guide__meter .is-filled { background: #f0ad4e; }
.password-guide[data-strength="3"] .password-guide__meter .is-filled { background: #3aa76d; }
.password-guide[data-strength="4"] .password-guide__meter .is-filled { background: #146c43; }
.password-guide[data-strength="1"] .password-guide__strength { color: #dc3545; }
.password-guide[data-strength="2"] .password-guide__strength { color: #b7791f; }
.password-guide[data-strength="3"] .password-guide__strength,
.password-guide[data-strength="4"] .password-guide__strength { color: #146c43; }

.password-guide__rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.password-guide__rules li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #5b6b62;
    font-size: 12.5px;
    transition: color .15s ease;
}

.password-guide__rules li i {
    flex: none;
    color: #b6c3bb;
    font-size: 13px;
}

.password-guide__rules li.is-met {
    color: #146c43;
}

.password-guide__rules li.is-met i {
    color: #198754;
}

.password-guide__rules li.is-failed,
.password-guide__rules li.is-failed i {
    color: #dc3545;
}

.password-guide__tip {
    display: flex;
    gap: 7px;
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid #e6ece8;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.45;
}

.password-guide__tip i {
    flex: none;
    color: #198754;
}

@media (max-width: 520px) {
    .password-guide__rules {
        grid-template-columns: 1fr;
    }
}

/* Register: short notes inside a label ("optional for members"), so every field in a row lines up. */
.register-label-note {
    margin-left: 4px;
    color: #7a8580;
    font-weight: 500;
}

.register-label-note::before {
    content: "· ";
}

/* Only takes up room once there's a message ("Location detected…"). */
.detect-location-status:empty {
    display: none;
}

/* Order page: the cash-on-delivery reminder under the order message. */
.order-payment-note {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: 9px;
    background: #fff8e6;
    color: #6b4e12;
    font-size: 13.5px;
}

.order-payment-note i {
    color: #b7791f;
}

/* Checkout: "Buy now" opens this order summary before anything is reserved. */
.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.checkout-main {
    display: grid;
    gap: 16px;
}

.checkout-card {
    padding: 18px 20px;
    border: 1px solid #e3e9e5;
    border-radius: 14px;
    background: #fff;
}

.checkout-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: #1f2a24;
    font-size: 15px;
    font-weight: 800;
}

.checkout-card-title i {
    color: #198754;
}

.checkout-address {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.checkout-address p {
    margin: 4px 0 0;
    color: #3f4a44;
}

.checkout-muted {
    color: #6b7280;
}

.checkout-link {
    color: #146c43;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.checkout-link:hover {
    text-decoration: underline;
}

.checkout-warning {
    display: flex;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff8e6;
    color: #6b4e12;
    font-size: 13px;
}

.checkout-warning i {
    color: #b7791f;
}

.checkout-item {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
}

.checkout-photo {
    display: block;
    width: 180px;
    height: 180px;
    border-radius: 12px;
    background: #f1f5f2;
    object-fit: cover;
}

.checkout-no-photo {
    display: grid;
    place-items: center;
    color: #9aa7a0;
    font-size: 34px;
}

.checkout-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.checkout-thumb {
    width: 40px;
    height: 40px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

.checkout-thumb.is-active {
    border-color: #198754;
}

.checkout-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-item-info h3 {
    margin: 0 0 8px;
    color: #1f2a24;
    font-size: 18px;
    font-weight: 800;
}

.checkout-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.checkout-tags li {
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef6f1;
    color: #2f5a42;
    font-size: 12px;
    font-weight: 600;
}

.checkout-description {
    margin: 0 0 12px;
    color: #5b6b62;
    font-size: 13.5px;
    line-height: 1.5;
}

.checkout-item-price {
    color: #146c43;
    font-size: 20px;
    font-weight: 800;
}

.checkout-item-price span {
    margin-left: 6px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
}

.checkout-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1.5px solid #dfe6e2;
    border-radius: 12px;
}

.checkout-option.is-selected {
    border-color: #198754;
    background: #f3fbf6;
}

.checkout-option > i {
    color: #198754;
    font-size: 22px;
    line-height: 1;
}

.checkout-option input {
    margin-top: 4px;
    accent-color: #198754;
}

.checkout-option strong {
    display: block;
    color: #1f2a24;
}

.checkout-option span {
    color: #5b6b62;
    font-size: 13px;
}

.checkout-notes {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    color: #5b6b62;
    font-size: 13px;
}

.checkout-notes i {
    margin-right: 6px;
    color: #198754;
}

.checkout-summary {
    position: sticky;
    top: 20px;
}

.checkout-totals {
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
}

.checkout-totals div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.checkout-totals dt {
    color: #5b6b62;
    font-weight: 500;
}

.checkout-totals dd {
    margin: 0;
    color: #1f2a24;
    font-weight: 600;
}

.checkout-total {
    padding-top: 12px;
    border-top: 1px solid #e6ece8;
}

.checkout-total dt {
    color: #1f2a24;
    font-weight: 700;
}

.checkout-total dd {
    color: #146c43;
    font-size: 22px;
    font-weight: 800;
}

.checkout-place-btn {
    padding: 12px;
    border-radius: 999px;
    font-weight: 700;
}

.checkout-fine-print {
    margin: 8px 0 4px;
    color: #6b7280;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 991px) {
    .checkout {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }
}

@media (max-width: 560px) {
    .checkout-item {
        grid-template-columns: 1fr;
    }

    .checkout-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

/* Checkout: meeting the courier at the seller's (pricier items), and who gets paid when. */
.checkout-pickup-meet {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #eef4ff;
    color: #24375a;
}

.checkout-pickup-meet > i {
    color: #2f5bd3;
    font-size: 20px;
}

.checkout-pickup-meet strong {
    display: block;
}

.checkout-pickup-meet span {
    font-size: 13px;
}

.checkout-pay-steps {
    display: grid;
    gap: 6px;
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f3fbf6;
    list-style: none;
    font-size: 13px;
}

.checkout-pay-steps li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #2f5a42;
}

/* Courier: the cash at each stop, the "paid / collected" tick, and cash for pickups. */

.route-stop-paid {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: #1f2a24;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.route-stop-paid input {
    width: 17px;
    height: 17px;
    accent-color: #198754;
}

.delivery-cash {
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 1px solid #e3e9e5;
    border-radius: 14px;
    background: #fff;
}

.delivery-cash-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    color: #1f2a24;
    font-size: 14px;
}

.delivery-cash-head i {
    color: #198754;
}

.delivery-cash-bar {
    height: 8px;
    margin: 10px 0;
    overflow: hidden;
    border-radius: 999px;
    background: #e6ece8;
}

.delivery-cash-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #198754;
}

.delivery-cash p {
    margin: 0;
    color: #5b6b62;
    font-size: 12.5px;
}

/* Order record: every handoff of a sale, with both sides' confirmations. */
.order-timeline {
    margin: 20px 0;
    padding: 18px 20px;
    border: 1px solid #e3e9e5;
    border-radius: 14px;
    background: #fff;
}

.order-timeline-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: #1f2a24;
    font-size: 15px;
    font-weight: 800;
}

.order-timeline-title i {
    color: #198754;
}

.order-timeline-issue {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fdecec;
    color: #7a1f1f;
    font-size: 13.5px;
}

.order-timeline-issue > i {
    color: #dc3545;
    font-size: 18px;
}

.order-timeline-issue.is-resolved {
    background: #eef8f2;
    color: #1f5a3a;
}

.order-timeline-issue.is-resolved > i {
    color: #198754;
}

.order-timeline-issue span {
    display: block;
}

.order-timeline-steps {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-timeline-steps li {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}

.order-timeline-steps li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 26px;
    bottom: 0;
    left: 12px;
    width: 2px;
    background: #e3e9e5;
}

.order-timeline-steps li.is-done:not(:last-child)::before {
    background: #9fd3b6;
}

.order-timeline-dot {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 2px solid #d5ddd8;
    border-radius: 50%;
    background: #fff;
    color: #b6c3bb;
    font-size: 12px;
}

.is-done .order-timeline-dot {
    border-color: #198754;
    background: #198754;
    color: #fff;
}

.is-partly .order-timeline-dot {
    border-color: #f0ad4e;
    color: #f0ad4e;
}

.order-timeline-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.order-timeline-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
}

.order-timeline-line strong {
    color: #1f2a24;
    font-size: 14px;
}

li:not(.is-done) .order-timeline-line strong {
    color: #7a8580;
    font-weight: 600;
}

.order-timeline-line time,
.order-timeline-detail {
    color: #6b7280;
    font-size: 12.5px;
}

.order-timeline-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.order-timeline-checks span {
    padding: 2px 9px;
    border-radius: 999px;
    background: #f1f3f2;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

.order-timeline-checks span.is-confirmed {
    background: #e7f6ee;
    color: #146c43;
}

.order-timeline-photo {
    color: #146c43;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

/* Admin: one order in full. */
.admin-order-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 20px;
    margin: 0;
}

.admin-order-facts dt {
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

.admin-order-facts dd {
    margin: 2px 0 0;
    color: #1f2a24;
    font-weight: 600;
}

.admin-order-facts small {
    display: block;
    color: #6b7280;
    font-weight: 400;
}

.payment-issue-link {
    margin: 12px 0;
}

.delivery-route-stop.return {
    border-left: 4px solid #b7791f;
}

/* Courier stops: will the buyer be home, a call button, and the failed-delivery choices. */

/* "Will you be there?" card for the seller (before pickup) and the buyer (before drop-off). */
.availability-check {
    margin-top: 14px;
    padding: 14px;
    border-radius: 12px;
    background: #f3fbf6;
}

.availability-check-head {
    display: flex;
    gap: 10px;
}

.availability-check-head > i {
    color: #198754;
    font-size: 20px;
}

.availability-check-head strong,
.availability-check-head span {
    display: block;
}

.availability-check-head span {
    color: #5b6b62;
    font-size: 13px;
}

.availability-check-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 12px 0 4px;
}

/* "Turn on notifications": a small card in the bottom corner, shown once at the right moment. */
.push-ask {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 2500;
    display: flex;
    gap: 14px;
    width: min(380px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid #dce9df;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 36, 25, .18);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
}

.push-ask[hidden] {
    display: none;
}

.push-ask.is-visible {
    opacity: 1;
    transform: none;
}

.push-ask-icon {
    display: grid;
    flex: none;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #e7f6ee;
    color: #198754;
    font-size: 19px;
}

.push-ask-body {
    flex: 1;
    min-width: 0;
}

.push-ask-body strong {
    display: block;
    color: #16243b;
    font-size: 15px;
}

.push-ask-body p {
    margin: 4px 0 12px;
    color: #5b6b62;
    font-size: 13px;
    line-height: 1.45;
}

.push-ask-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.push-ask-actions .btn-success {
    padding: 7px 14px;
    font-weight: 700;
}

.push-ask-actions .btn-link {
    color: #5b6b62;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 600px) {
    .push-ask {
        right: 16px;
        bottom: 16px;
    }
}

/* Profile: this device's notification switch. */
.push-setting {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #e3ece6;
    border-radius: 14px;
    background: #fbfdfb;
}

.push-setting-icon {
    display: grid;
    flex: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: #e7f6ee;
    color: #198754;
    font-size: 18px;
}

.push-setting-copy {
    flex: 1;
    min-width: 0;
}

.push-setting-copy label {
    display: block;
    margin: 0;
    color: #16243b;
    cursor: pointer;
}

.push-setting-copy span {
    display: block;
    color: #66736b;
    font-size: 13px;
}

.push-setting-switch {
    flex: none;
    margin: 0;
    padding-left: 2.75em;
}

.push-setting-switch .form-check-input {
    width: 2.75em;
    height: 1.5em;
    cursor: pointer;
}

.push-setting-switch .form-check-input:checked {
    border-color: #198754;
    background-color: #198754;
}

.push-setting-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f1f5f3;
    color: #3f4a44;
    font-size: 13px;
}

.push-setting-note[data-tone="success"] {
    background: #e7f6ee;
    color: #146c43;
}

.push-setting-note[data-tone="warning"] {
    background: #fff4e5;
    color: #8a4b0f;
}

.push-setting-hint {
    margin: 12px 0 0;
    color: #7a8580;
    font-size: 12.5px;
}

/* Courier: "Couldn't deliver" button on a drop-off, and its dialog. */
.delivery-failed-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 1.5px solid #f1b5b0;
    border-radius: 10px;
    background: #fff;
    color: #b42318;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.delivery-failed-action:hover {
    border-color: #b42318;
    background: #fef3f2;
}

.failed-modal .delivery-eyebrow {
    color: #b42318;
}

.failed-reasons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.failed-reasons legend {
    margin-bottom: 8px;
    color: #1f2a24;
    font-size: 14px;
    font-weight: 700;
}

.failed-reason {
    margin: 0;
    cursor: pointer;
}

.failed-reason input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.failed-reason span {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 12px;
    border: 1.5px solid #dfe6e2;
    border-radius: 12px;
    color: #1f2a24;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color .15s ease, background-color .15s ease;
}

.failed-reason span i {
    flex: none;
    color: #7a8580;
    font-size: 18px;
}

.failed-reason input:checked + span {
    border-color: #b42318;
    background: #fef3f2;
}

.failed-reason input:checked + span i {
    color: #b42318;
}

.failed-reason input:focus-visible + span {
    outline: 2px solid #b42318;
    outline-offset: 2px;
}

.failed-call {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f3fbf6;
    color: #146c43;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.failed-call span {
    margin-left: auto;
    font-weight: 700;
}

.failed-note {
    display: grid;
    gap: 6px;
    margin: 0;
    color: #1f2a24;
    font-size: 14px;
    font-weight: 700;
}

.failed-note small {
    color: #7a8580;
    font-weight: 500;
}

.failed-note textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #dfe6e2;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    resize: vertical;
}

.failed-retry-note {
    margin: -4px 0 0;
    color: #6b7280;
    font-size: 12.5px;
}

.failed-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.failed-actions button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
}

.failed-actions button i {
    font-size: 20px;
}

.failed-actions button strong,
.failed-actions button small {
    display: block;
}

.failed-actions button small {
    font-size: 12px;
    font-weight: 500;
    opacity: .85;
}

.failed-retry {
    border: 1.5px solid #198754;
    background: #fff;
    color: #146c43;
}

.failed-retry:disabled {
    border-color: #dfe6e2;
    color: #a3ada7;
    cursor: not-allowed;
}

.failed-return {
    border: 1.5px solid #b42318;
    background: #b42318;
    color: #fff;
}

.failed-return:hover {
    background: #912018;
}

@media (max-width: 480px) {
    .failed-reasons,
    .failed-actions {
        grid-template-columns: 1fr;
    }
}

/* Courier route stop: a card in three parts — header (what and whether they'll be there),
   details (one per line), and actions (tools, then the main step). */
.delivery-route-planner .delivery-route-stop {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* the old one-row card centred its parts */
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.route-stop-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.route-stop-head .route-stop-order {
    flex: none;
}

.route-stop-title {
    flex: 1;
    min-width: 0;
}

/* The order's progress under its title: ● Pick up ── ○ Deliver (one card per item). */
.route-stop-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.route-stop-steps li > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.route-stop-steps li {
    display: inline-flex;
    align-items: center;
    color: #9aa59f;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* The line joining one step to the next. */
.route-stop-steps li + li::before {
    content: "";
    width: 22px;
    height: 2px;
    margin: 0 8px;
    border-radius: 2px;
    background: #dfe6e2;
}

.route-stop-steps li.is-done { color: #198754; }
.route-stop-steps li.is-failed { color: #b42318; }

.route-stop-steps li.is-done + li::before,
.route-stop-steps li.is-failed + li::before {
    background: #9fd3b5;
}

/* The step to do now stands out as a filled pill in the stop's colour. */
.route-stop-steps li.is-now > span {
    padding: 3px 10px 3px 7px;
    border-radius: 999px;
    background: #198754;
    color: #fff;
}

.delivery-route-stop.dropoff .route-stop-steps li.is-now > span { background: #b42318; }
.delivery-route-stop.return .route-stop-steps li.is-now > span { background: #b7791f; }

.route-stop-facts li small.route-stop-role {
    color: #7a8580;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.route-stop-title strong {
    display: block;
    overflow: hidden;
    color: #1f2a24;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.route-stop-status {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.route-stop-status.is-yes { background: #e7f6ee; color: #146c43; }
.route-stop-status.is-later { background: #eef4ff; color: #24375a; }
.route-stop-status.is-unknown { background: #fdecec; color: #9b1c1c; }

.route-stop-facts {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border-top: 1px solid #eef2ef;
    list-style: none;
}

.route-stop-facts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #3f4a44;
    font-size: 13.5px;
}

.route-stop-facts li > i {
    flex: none;
    width: 18px;
    margin-top: 1px;
    color: #7a8580;
    font-size: 15px;
    text-align: center;
}

.route-stop-facts li strong,
.route-stop-facts li small {
    display: block;
}

.route-stop-facts li strong {
    color: #1f2a24;
}

.route-stop-facts li small {
    color: #6b7280;
    font-size: 12.5px;
}

.route-stop-facts li.is-cash {
    color: #6b4e12;
    font-weight: 700;
}

.route-stop-facts li.is-cash > i {
    color: #b7791f;
}

.route-stop-facts li.is-next {
    padding-top: 8px;
    border-top: 1px dashed #e3e9e5;
    color: #6b7280;
    font-size: 12.5px;
}

.route-stop-facts li.is-next strong {
    display: inline;
    color: #3f4a44;
}

.route-stop-facts li.is-warning {
    color: #9b1c1c;
    font-weight: 600;
}

.route-stop-facts li.is-warning > i {
    color: #b42318;
}

.route-stop-foot {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid #eef2ef;
    background: #fafcfb;
}

.route-stop-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.route-stop-tools form {
    margin: 0;
}

.route-stop-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #d5ddd8;
    border-radius: 999px;
    background: #fff;
    color: #1f2a24;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.route-stop-tool i {
    color: #198754;
}

.route-stop-tool:hover {
    border-color: #198754;
}

.route-stop-complete {
    display: grid;
    gap: 8px;
    margin: 0;
}

.route-stop-complete .route-stop-paid {
    margin: 0;
}

.route-stop-main-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.route-stop-main-actions .delivery-primary-action {
    display: inline-flex;
    flex: 1 1 160px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
}

.route-stop-main-actions .delivery-failed-action {
    flex: 0 1 auto;
    min-height: 42px;
}

@media (max-width: 480px) {
    .route-stop-head {
        flex-wrap: wrap;
    }

    /* The title takes the line; the status drops beneath it. */
    .route-stop-title {
        flex: 1 1 calc(100% - 80px);
    }

    .route-stop-status {
        order: 3;
        margin-left: 72px;
    }

    .route-stop-tools {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .route-stop-tools form,
    .route-stop-tools form .route-stop-tool {
        width: 100%;
    }

    /* An older rule makes every form in a stop span the whole row. */
    .route-stop-tools form {
        grid-column: auto;
    }

    .route-stop-tool {
        justify-content: center;
        padding: 0 6px;
        font-size: 12px;
        white-space: nowrap;
    }

    .route-stop-main-actions .delivery-failed-action {
        flex: 1 1 100%;
    }
}

/* Wider screens: the stop's details on the left, its actions in a column on the right
   (the stacked layout above is for phones). */
@media (min-width: 768px) {
    .delivery-route-planner .delivery-route-stop {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
        grid-template-areas:
            "head  foot"
            "facts foot";
        align-items: start;
    }

    .route-stop-head {
        grid-area: head;
        padding: 14px 16px 6px;
    }

    .route-stop-facts {
        grid-area: facts;
        padding: 4px 16px 14px 54px; /* lines up under the title, past the step number */
        border-top: 0;
    }

    .route-stop-foot {
        grid-area: foot;
        align-self: stretch;
        align-content: center;
        padding: 14px 16px;
        border-top: 0;
        border-left: 1px solid #eef2ef;
    }

    .route-stop-tools {
        flex-wrap: wrap;
    }

    .route-stop-tool {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0 10px;
        white-space: nowrap;
    }
}

/* "On my way" already sent for this stop. */
.route-stop-tool.is-sent {
    border-color: #b7dfc8;
    background: #e7f6ee;
    color: #146c43;
}

/* Dashboard on phones: the card already has 16px padding, so its heading and lists
   don't add their own on the sides (it pushed everything in twice). Stat cards fit
   their content instead of keeping the desktop height. */
@media (max-width: 575.98px) {
    .member-dashboard-card .card-heading {
        padding: 0 0 14px;
    }

    .member-dashboard-card .activity-list,
    .member-dashboard-card .account-info,
    .member-dashboard-card .quick-actions {
        padding-right: 0;
        padding-left: 0;
    }

    .member-dashboard-card .quick-action-item {
        padding-right: 4px;
        padding-left: 4px;
    }
}

@media (max-width: 767.98px) {
    .member-stat-card {
        min-height: 0;
    }
}

/* Dashboard "Needs your attention" (and "Finish your profile"): rows that open what's waiting. */
.attention-count {
    display: inline-grid;
    flex: none;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    place-items: center;
    border-radius: 999px;
    background: #fdecec;
    color: #b42318;
    font-size: 13px;
    font-weight: 800;
}

.member-dashboard-card .quick-action-item > div:not(.quick-action-icon) {
    flex: 1;
    min-width: 0;
}

.quick-action-item:last-child {
    border-bottom: 0;
}

.attention-go {
    flex: none;
    color: #9aa59f;
}

.attention-clear {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 28px 24px 32px;
    text-align: center;
}

.attention-clear i {
    margin-bottom: 4px;
    color: #198754;
    font-size: 30px;
}

.attention-clear strong {
    color: #1f2a24;
}

.attention-clear span {
    color: #6b7280;
    font-size: 13px;
}

/* Phones: what's waiting on you comes first, right under the numbers. */
@media (max-width: 991.98px) {
    .dashboard-side-column {
        order: -1;
    }
}

/* Delivery schedule: buyer and seller pick the same window before a courier is sent. */
.schedule-picker {
    margin: 0 0 4px;
    padding: 0;
    border: 0;
}

.schedule-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.schedule-option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.schedule-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.schedule-option span {
    display: block;
    padding: 9px 12px;
    border: 1px solid #d5ddd8;
    border-radius: 12px;
    background: #fff;
    color: #3f4a44;
    font-size: 13px;
    line-height: 1.35;
    transition: border-color .15s ease, background .15s ease;
}

.schedule-option span b {
    display: block;
    color: #1f2a24;
    font-size: 13.5px;
}

.schedule-option:hover span {
    border-color: #9fd3b5;
}

.schedule-option input:checked + span {
    border-color: #198754;
    background: #e7f6ee;
    box-shadow: 0 0 0 1px #198754;
}

.schedule-option input:focus-visible + span {
    outline: 2px solid #198754;
    outline-offset: 2px;
}

.schedule-panel {
    display: grid;
    gap: 12px;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid #cfe8da;
    border-radius: 16px;
    background: #f6fbf8;
}

.schedule-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.schedule-head > i {
    color: #198754;
    font-size: 22px;
    line-height: 1;
}

.schedule-head strong,
.schedule-head span {
    display: block;
}

.schedule-head strong {
    color: #16243b;
    font-size: 15.5px;
}

.schedule-head span {
    margin-top: 2px;
    color: #5b6b62;
    font-size: 13.5px;
}

.schedule-proposal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #9fd3b5;
    border-radius: 12px;
    background: #fff;
}

.schedule-proposal small {
    display: block;
    color: #6b7280;
}

.schedule-proposal strong {
    color: #146c43;
    font-size: 15px;
}

.schedule-proposal form {
    margin: 0;
}

.schedule-passed,
.schedule-waiting,
.schedule-note {
    margin: 0;
    color: #5b6b62;
    font-size: 13px;
}

.schedule-form {
    margin: 0;
}

.schedule-form-label {
    margin: 0 0 8px;
    color: #314238;
    font-size: 13px;
    font-weight: 700;
}

@media (min-width: 768px) {
    .schedule-panel .schedule-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.schedule-picker legend {
    margin-bottom: 8px;
    color: #314238;
    font-size: 14px;
    font-weight: 700;
}

/* Admin view of a listing (instead of Buy / Swap): status, owner, reports, orders. */
.admin-listing-panel {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #dce5ee;
    border-radius: 16px;
    background: #f8fafc;
}

.admin-listing-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-listing-panel-head form {
    margin: 0;
}

.admin-listing-facts {
    display: grid;
    gap: 10px;
    margin: 14px 0 4px;
}

.admin-listing-facts dt {
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.admin-listing-facts dd {
    margin: 2px 0 0;
    color: #1f2a24;
    font-weight: 600;
}

.admin-listing-facts small {
    display: block;
    color: #6b7280;
    font-weight: 400;
}

.admin-listing-panel h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 8px;
    color: #16243b;
    font-size: 15px;
    font-weight: 800;
}

.admin-listing-count {
    padding: 1px 8px;
    border-radius: 999px;
    background: #e5e9ef;
    color: #3f4a44;
    font-size: 12px;
}

.admin-listing-count.has-open {
    background: #fdecec;
    color: #b42318;
}

.admin-listing-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e9ef;
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.admin-listing-row + .admin-listing-row {
    margin-top: 6px;
}

.admin-listing-row.is-link:hover {
    border-color: #9fd3b5;
}

.admin-listing-row strong,
.admin-listing-row small {
    display: block;
}

.admin-listing-row small {
    color: #6b7280;
}

.admin-listing-row p {
    margin: 4px 0 0;
    color: #3f4a44;
    font-size: 13px;
}

.admin-listing-empty {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

.admin-listing-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #198754;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.admin-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-row-actions form {
    margin: 0;
}

/* Admin Listings: a whole row opens the listing in a pop-up. */
.admin-row-clickable {
    cursor: pointer;
}

.admin-row-clickable:hover td,
.admin-row-clickable:focus-visible td {
    background: #f3faf6;
}

.admin-row-clickable:focus-visible {
    outline: 2px solid #198754;
    outline-offset: -2px;
}

.admin-listing-dialog {
    width: min(920px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(15, 36, 25, .28);
    overflow: auto;
}

.admin-listing-dialog::backdrop {
    background: rgba(15, 23, 20, .55);
}

.admin-listing-dialog-close {
    position: sticky;
    top: 12px;
    z-index: 2;
    float: right;
    display: grid;
    width: 36px;
    height: 36px;
    margin: 12px 12px 0 0;
    place-items: center;
    border: 1px solid #dce5ee;
    border-radius: 50%;
    background: #fff;
    color: #3f4a44;
}

.admin-listing-modal-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 24px;
    padding: 24px;
}

.admin-listing-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    object-fit: cover;
    background: #f1f5f3;
}

.admin-listing-photo.is-empty {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 6px;
    color: #9aa59f;
    font-size: 13px;
}

.admin-listing-photo.is-empty i {
    font-size: 32px;
}

.admin-listing-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.admin-listing-thumbs button {
    width: 56px;
    height: 56px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: none;
}

.admin-listing-thumbs button.is-active {
    border-color: #198754;
}

.admin-listing-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-listing-info h2 {
    margin: 6px 0 4px;
    color: #16243b;
    font-size: 22px;
    font-weight: 800;
}

.admin-listing-price {
    margin: 0 0 12px;
    color: #146c43;
    font-size: 18px;
    font-weight: 800;
}

.admin-listing-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 12px;
}

.admin-listing-details dt {
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.admin-listing-details dd {
    margin: 2px 0 0;
    color: #1f2a24;
    font-size: 13.5px;
    font-weight: 600;
}

.admin-listing-description {
    margin: 0;
    color: #3f4a44;
    font-size: 14px;
    white-space: pre-line;
}

.admin-listing-modal-body .admin-listing-panel {
    margin-top: 16px;
}

@media (max-width: 767.98px) {
    .admin-listing-modal-body {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .admin-listing-details {
        grid-template-columns: 1fr 1fr;
    }
}

/* Listing pop-up, final layout: a compact top (photo beside the details), then the admin
   panel across the full width with Reports and Orders side by side. */
.admin-listing-dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    float: none;
    margin: 0;
}

.admin-listing-modal-body {
    display: block;
    padding: 24px;
}

.admin-listing-top {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding-right: 36px; /* room for the close button */
}

.admin-listing-top .admin-listing-photo {
    aspect-ratio: 1 / 1;
}

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

.admin-listing-tags span {
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef6f1;
    color: #146c43;
    font-size: 12px;
    font-weight: 700;
}

.admin-listing-info h2 {
    margin: 8px 0 2px;
}

.admin-listing-details {
    margin-bottom: 10px;
}

.admin-listing-modal-body .admin-listing-panel {
    margin-top: 20px;
}

.admin-listing-modal-body .admin-listing-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-listing-sections {
    display: grid;
}

@media (min-width: 768px) {
    .admin-listing-modal-body .admin-listing-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 767.98px) {
    .admin-listing-top {
        grid-template-columns: 1fr;
        padding-right: 0;
    }

    .admin-listing-top .admin-listing-photo {
        aspect-ratio: 4 / 3;
    }

    .admin-listing-modal-body {
        padding: 56px 16px 16px; /* the close button sits above the photo */
    }

    .admin-listing-modal-body .admin-listing-facts {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    /* Owner/Listed line up with Reports/Orders below them. */
    .admin-listing-modal-body .admin-listing-facts {
        column-gap: 24px;
    }
}

/* A listing the admin hid: shown to its owner with the reason. */
.listing-status-badge.is-admin-hidden {
    background: #b42318;
    color: #fff;
}

.listing-card-hidden {
    display: flex;
    gap: 8px;
    margin: 10px 0 0;
    padding: 9px 11px;
    border-radius: 10px;
    background: #fdecec;
    color: #8a1c13;
    font-size: 12.5px;
    line-height: 1.4;
}

.listing-card-hidden i {
    flex: none;
    margin-top: 1px;
}

/* Admin: hiding a listing asks for a reason the owner sees. */
.admin-hidden-reason {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fdecec;
    color: #8a1c13;
    font-size: 13px;
}

.admin-hide-form {
    margin: 12px 0 0;
}

.admin-hide-form .form-label {
    margin-bottom: 6px;
    color: #314238;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-hide-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
    gap: 8px;
}

@media (max-width: 575.98px) {
    .admin-hide-fields {
        grid-template-columns: 1fr;
    }
}

/* Checkout: SwapNear courier or pick it up yourself. */
.checkout-fulfillment {
    cursor: pointer;
}

.checkout-fulfillment + .checkout-fulfillment {
    margin-top: 10px;
}

.checkout-fulfillment input {
    flex: none;
    margin-top: 4px;
    accent-color: #198754;
}

.checkout-fulfillment:not(.is-selected) {
    border-color: #e3e9e5;
    background: #fff;
}

/* No courier for the agreed time: offer pickup instead. */
.schedule-fallback {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid #f3d9a8;
    border-radius: 12px;
    background: #fff8eb;
    color: #6b4e12;
    font-size: 13.5px;
}

.schedule-fallback strong {
    color: #8a5a0f;
}

.schedule-fallback form {
    margin: 4px 0 0;
}

/* Post an item: choose photos from the gallery, or take one with the camera. */
.photo-source-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.photo-source-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #198754;
    border-radius: 12px;
    background: #fff;
    color: #146c43;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.photo-source-btn:hover {
    background: #eef8f2;
}

/* Item pop-up photo: it fills the photo area exactly and never grows with the photo's own size
   (a tall portrait photo used to stretch the area and spill over the details below). The whole
   photo is shown, fitted inside, so buyers see the entire item. */
.quick-view-gallery {
    overflow: hidden;
}

.quick-view-gallery img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

@media (min-width: 721px) {
    .quick-view-gallery {
        min-height: 360px;
    }
}

/* Admin listing pop-up: the whole photo, fitted, so nothing the admin reviews is cropped off. */
.admin-listing-photo:not(.is-empty) {
    object-fit: contain;
    background: #eef2ef;
}

/* Landing page: the two hero buttons keep a gap; on phones each takes the full width. */
.landing-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 575.98px) {
    .landing-hero-buttons .btn {
        width: 100%;
    }
}

/* The app's top bar stays pinned on computers too, so an open notification panel stays in view
   while the page scrolls (phones already pin it). */
@media (min-width: 992px) {
    .dashboard-topbar {
        position: sticky;
        top: 0;
    }
}

/* "overflow-x: hidden" stops sideways scrolling but also stops the top bar from staying pinned;
   "clip" stops sideways scrolling without that side effect. */
.dashboard-main {
    overflow-x: clip;
}

/* Success and error messages stay at the top, but stop just left of the bell instead of covering
   it (they used to sit on it for a few seconds after every action, so it couldn't be tapped). */
.toast-stack {
    right: 76px;
}

@media (max-width: 480px) {
    .toast-stack {
        right: 60px;
    }
}

/* Landing navigation. Computers: Login and Register side by side. Phones (the menu opens under
   the logo): each link a full-width row, the current one softly highlighted, and Login and
   Register as two equal buttons at the bottom. */
.navbar-guest-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-collapse {
        margin-top: 10px;
        padding: 10px 0 14px;
        border-top: 1px solid #eef2ef;
    }

    .navbar .navbar-nav {
        gap: 2px;
    }

    .navbar .nav-link {
        padding: 11px 14px !important;
        border-radius: 10px;
    }

    .navbar .nav-link.active {
        background: #eef8f2;
    }

    /* The underline lines up with the link text on computers; on phones the row highlight shows it. */
    .navbar .nav-link.active::after {
        display: none;
    }

    .navbar-guest-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 12px;
        padding-top: 14px;
        border-top: 1px solid #eef2ef;
    }

    .navbar-guest-actions .btn {
        padding: 10px 14px;
        border-radius: 999px;
        font-weight: 600;
    }

    .navbar-guest-actions .navbar-login {
        border: 1px solid #cfd8d2;
    }
}

/* Admin on phones: filters stack without overlapping, and each table row becomes a card
   (labels come from the column headings, see script.js) instead of a squeezed, cut-off table. */
@media (max-width: 767.98px) {
    .admin-filters > div {
        min-width: 0;
    }

    /* Search gets its own line; with only two fields, both do. */
    .admin-filters > div:first-of-type,
    .admin-filters:not(:has(> div:nth-of-type(3))) > div {
        grid-column: 1 / -1;
    }

    .admin-filters input,
    .admin-filters select {
        width: 100%;
        min-width: 0;
    }

    .admin-filters .btn {
        width: 100%;
    }

    .admin-filters > a {
        align-self: center;
        text-align: center;
    }

    .admin-panel .table-responsive {
        overflow: visible;
    }

    .admin-table,
    .admin-table tbody,
    .admin-table tr,
    .admin-table td {
        display: block;
        width: 100%;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table tbody tr {
        margin-bottom: 10px;
        padding: 6px 12px;
        border: 1px solid #e1eae4;
        border-radius: 12px;
        background: #fff;
    }

    .admin-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .admin-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;
        max-width: none;
        padding: 8px 0;
        border-bottom: 1px solid #f0f3f1;
        text-align: right;
    }

    /* (the desktop rule drops the last row's borders; inside a card they're still needed) */
    .admin-table tbody tr:last-child td:not(:last-child) {
        border-bottom: 1px solid #f0f3f1;
    }

    .admin-table td:last-child {
        border-bottom: 0;
    }

    .admin-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: #758291;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .04em;
        text-align: left;
        text-transform: uppercase;
    }

    /* The first cell names the row (user, listing, item): shown as the card's title. */
    .admin-table td:first-child {
        display: flex;
        justify-content: flex-start;
        padding: 10px 0;
        text-align: left;
    }

    .admin-table td:first-child::before {
        display: none;
    }

    .admin-table td:first-child > strong,
    .admin-table td:first-child > span:not(.admin-item-image):not(.admin-report-source) {
        min-width: 0;
    }

    .admin-table td:first-child {
        flex-wrap: wrap;
    }

    .admin-table td:first-child > strong,
    .admin-table td:first-child > small {
        flex-basis: 100%;
        margin: 0;
    }

    .admin-table td:first-child strong {
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    .admin-table td small {
        overflow-wrap: anywhere;
    }

    .admin-table .admin-listing {
        flex-wrap: nowrap;
    }

    .admin-table .admin-listing .admin-item-image {
        width: 48px;
        height: 48px;
    }

    /* Cells holding a few lines (courier vehicle, report reason) keep them stacked on the right. */
    .admin-table td > :not(:first-child) {
        margin-top: 0;
    }

    .admin-table td:has(> small.admin-vehicle) {
        flex-wrap: wrap;
    }

    .admin-table td:has(> small.admin-vehicle) .admin-vehicle {
        flex-basis: 100%;
    }

    .admin-table .admin-report-reason {
        flex-wrap: wrap;
    }

    /* Controls (role/status + Save, report status, View) take the card's full width. */
    .admin-table td:has(form, .btn) {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        text-align: left;
    }

    .admin-table td:not([data-label]):has(.btn)::before {
        display: none;
    }

    .admin-inline-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        min-width: 0;
        width: 100%;
    }

    .admin-inline-form select {
        width: 100%;
        min-height: 40px;
        font-size: 13px;
    }

    .admin-inline-form .btn,
    .admin-table td .btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 40px;
    }

    .admin-inline-form:has(> select:only-of-type) {
        grid-template-columns: 1fr;
    }

    .admin-table .admin-empty {
        justify-content: center;
        text-align: center;
    }

    .admin-table tr:has(.admin-empty) {
        border-style: dashed;
    }
}

@media (max-width: 767.98px) {
    /* A report's reason can run long: label, category and text read top to bottom. */
    .admin-table .admin-report-reason {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        text-align: left;
    }
}

/* Scrollbars: thin and rounded in SwapNear's soft green instead of the browser's grey bar
   (phones already use their own overlay bars). Chrome/Edge/Safari use the ::-webkit rules;
   Firefox only understands scrollbar-color/width. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #b9d3c3 padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #8fbfa2 padding-box;
}

::-webkit-scrollbar-thumb:active {
    background: var(--sn-primary) padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* On the dark green menu, a light see-through bar. */
.dashboard-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22) padding-box;
}

.dashboard-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .38) padding-box;
}

@-moz-document url-prefix() {
    html,
    * {
        scrollbar-width: thin;
        scrollbar-color: #b9d3c3 transparent;
    }

    .dashboard-sidebar,
    .dashboard-sidebar * {
        scrollbar-color: rgba(255, 255, 255, .25) transparent;
    }
}

/* Phone number on sign-up: a fixed "+63" joined to the box where the 10 digits are typed. */
.phone-field {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #bdcbbf;
    border-radius: 6px;
    background: #fbfcff;
}

.phone-field:focus-within {
    border-color: var(--sn-primary);
    box-shadow: 0 0 0 2px rgba(25, 135, 84, .10);
}

.phone-field.input-error {
    border-color: #dc3545;
}

.phone-field-prefix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-right: 1px solid #dfe7e1;
    color: #26352f;
    background: #eef6f1;
    font-size: 11px;
    font-weight: 700;
}

.register-field .phone-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.phone-input-group .input-group-text {
    color: #26352f;
    background: #eef6f1;
    font-weight: 700;
}

/* A pickup someone reported a problem with: on hold until the admin decides. */
.exchange-finish-waiting.is-on-hold {
    color: #8a5a00;
}

.exchange-finish-waiting.is-on-hold i {
    color: #d08700;
}

/* Swap offers: the offered item's name with a hint under it, and the gallery/camera buttons in the offer box. */
.transaction-offer-card > span:not(.transaction-offer-card-placeholder) { display: grid; gap: 2px; min-width: 0; }
.transaction-offer-card small { color: #6b7d71; font-size: 12px; }
.transaction-offer-line .transaction-offer-thumb { width: 28px; height: 28px; vertical-align: middle; }
.exchange-modal-photo-sources { margin: 10px 0 14px; }

/* The offered item opens in a pop-up, so its card and the list line are buttons. */
button.transaction-offer-card { width: 100%; font: inherit; text-align: left; cursor: pointer; }
button.transaction-offer-card:hover { border-color: #198754; background: #f0faf3; }
button.transaction-offer-card img { width: 64px; height: 64px; }
.transaction-offer-view { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.transaction-offer-view:hover strong { color: #198754; text-decoration: underline; }
.offer-view-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; color: #198754; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.offer-view-image { width: 100%; max-height: min(60dvh, 480px); border-radius: 14px; background: #f3f6f4; object-fit: contain; }
.offer-view-no-image { display: grid; gap: 6px; padding: 36px 16px; place-items: center; border: 1px dashed #cfdcd3; border-radius: 14px; color: #6b7d71; background: #f6faf7; font-size: 14px; }
.offer-view-no-image i { font-size: 28px; }
.offer-view-note { margin: 0; padding: 10px 12px; border-radius: 10px; color: #33443a; background: #f6faf7; font-size: 14px; white-space: pre-line; }
button.photo-source-btn { font-family: inherit; }
/* The offer box styles every label as a block form label; its gallery button is a label too. */
.exchange-modal .photo-source-btn { display: inline-flex; margin: 0; padding: 0 10px; color: #146c43; font-size: 14px; white-space: nowrap; }
.exchange-modal-actions button { white-space: nowrap; }

/* Login: "Remember Me" and "Forgot Password?" share one row, a little smaller on narrow phones. */
@media (max-width: 400px) {
    .login-remember-row { font-size: 13.5px; }
    .login-remember-row .form-check { margin-bottom: 0; }
}

/* ===== Courier face check ===== */
.face-check h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #14432b; }
.face-check > p { color: #5b6b61; font-size: 14px; }
.face-check-rejected { padding: 10px 12px; border-radius: 10px; color: #8a2c1f !important; background: #fdeceb; }
.face-check-later { display: block; margin-top: 10px; color: #5b6b61; font-size: 13px; text-align: center; }
.face-check-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid #f3d27a; border-radius: 16px; background: #fff8e6; }
.face-check-banner.is-pending { border-color: #cde8d6; background: #f4fbf6; }
.face-check-banner > i { color: #b7791f; font-size: 24px; }
.face-check-banner.is-pending > i { color: #198754; }
.face-check-banner > div { display: grid; flex: 1 1 220px; gap: 2px; }
.face-check-banner strong { color: #25332a; }
.face-check-banner span { color: #5b6b61; font-size: 14px; }
.courier-photo { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 12px 8px 0; color: #146c43; font-size: 12px; font-weight: 700; text-decoration: none; vertical-align: top; }
.courier-photo img { width: 64px; height: 64px; border: 2px solid #198754; border-radius: 50%; object-fit: cover; }
.admin-face-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.admin-face-status.is-approved { color: #146c43; background: #e8f8ee; }
.admin-face-status.is-pending { color: #8a5a00; background: #fff4d6; }
.admin-face-status.is-rejected { color: #b42318; background: #fdeceb; }
.admin-face-status.is-missing { color: #5b6b61; background: #eef1ea; }
.admin-face-link { display: block; text-decoration: none; }
.profile-face-check { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Face check camera: a round mirrored view with a progress ring, the pose to make, and an arrow for the way to turn. */
.face-check-intro { margin-bottom: 14px; }
.face-check-stage { position: relative; width: min(72vw, 270px); aspect-ratio: 1; margin: 6px auto 14px; }
.face-check-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.face-check-ring circle { fill: none; stroke-width: 3; }
.face-check-ring-track { stroke: #e3ece6; }
.face-check-ring-progress { stroke: #198754; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; transition: stroke-dasharray .4s ease; }
.face-check-ring-progress.has-progress { opacity: 1; }
.face-check-circle { position: absolute; inset: 7%; overflow: hidden; border-radius: 50%; background: #0f1d16; }
.face-check-circle video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.face-check-flash { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(25, 135, 84, .55); font-size: 64px; animation: faceCheckPop .3s ease-out; }
@keyframes faceCheckPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.face-check-arrow { position: absolute; top: 50%; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: #fff; background: #198754; box-shadow: 0 6px 16px rgba(25, 135, 84, .35); font-size: 22px; translate: 0 -50%; }
.face-check-arrow.is-left { left: -14px; animation: faceCheckLeft 1s ease-in-out infinite; }
.face-check-arrow.is-right { right: -14px; animation: faceCheckRight 1s ease-in-out infinite; }
@keyframes faceCheckLeft { 50% { transform: translateX(-8px); } }
@keyframes faceCheckRight { 50% { transform: translateX(8px); } }
.face-check .face-check-instruction { margin: 0; color: #14432b; font-size: 22px; font-weight: 800; text-align: center; }
.face-check .face-check-step { margin: 2px 0 6px; color: #6b7d71; font-size: 13px; text-align: center; }
.face-check .face-check-hint { min-height: 1.4em; margin: 0 0 12px; color: #8a5a00; font-size: 14px; font-weight: 600; text-align: center; }
@media (prefers-reduced-motion: reduce) { .face-check-arrow { animation: none !important; } }
/* Vehicle step: the back camera, not mirrored, in a wide frame so the whole plate fits. */
.face-check-stage.is-vehicle { width: min(100%, 320px); aspect-ratio: 4 / 3; }
.face-check-stage.is-vehicle .face-check-ring { display: none; }
.face-check-stage.is-vehicle .face-check-circle { inset: 0; border-radius: 18px; }
.face-check-stage.is-vehicle video { transform: none; }
/* Admin: reviewing a courier's face check. */
.face-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.face-review-head > div { flex: 1 1 180px; min-width: 0; }
.face-review-head h2 { margin: 0; font-size: 20px; font-weight: 800; color: #14432b; }
.face-review-head p { margin: 0; color: #6b7d71; font-size: 14px; overflow-wrap: anywhere; }
.face-review-head .admin-face-status { margin-top: 0; }
.face-review-avatar { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #198754; background: #e8f8ee; font-size: 22px; }
.face-review-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: #f6faf7; }
.face-review-facts dt { color: #6b7d71; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.face-review-facts dd { margin: 2px 0 0; color: #25332a; font-weight: 600; }
.face-review-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); justify-content: center; gap: 14px; margin-bottom: 16px; }
.face-review-photos a { display: grid; gap: 6px; color: #25332a; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; }
.face-review-photos img { width: 100%; aspect-ratio: 3 / 4; border: 1px solid #dce9df; border-radius: 14px; object-fit: cover; background: #f3f6f4; transition: transform .15s ease, box-shadow .15s ease; }
.face-review-photos a:hover img { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 67, 43, .15); }
.face-review-vehicle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; margin-bottom: 16px; padding: 14px; border: 1px solid #dce9df; border-radius: 14px; background: #f8fbf9; }
.face-review-vehicle a { flex: 0 1 280px; }
.face-review-vehicle img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; object-fit: cover; background: #f3f6f4; }
.face-review-vehicle > div { display: grid; gap: 2px; text-align: center; }
.face-review-vehicle > div span { color: #6b7d71; font-size: 13px; }
.face-review-vehicle > div strong { color: #14432b; font-size: 24px; font-weight: 800; letter-spacing: .06em; }
.face-review-vehicle-missing { color: #6b7d71; font-size: 14px; }
.face-review-checklist { display: grid; gap: 6px; margin: 0; padding: 12px 14px; border: 1px dashed #cde8d6; border-radius: 12px; list-style: none; color: #33443a; font-size: 14px; }
.face-review-checklist i { margin-right: 6px; color: #198754; }
.face-review-decision h3 { margin: 0 0 12px; font-size: 17px; font-weight: 800; color: #14432b; }
.face-review-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.face-review-choice { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; }
.face-review-choice.is-approve { border: 1px solid #cde8d6; background: #f4fbf6; }
.face-review-choice.is-reject { border: 1px solid #f3d0cc; background: #fff7f6; }
.face-review-choice strong, .face-review-choice label { color: #25332a; font-weight: 800; }
.face-review-choice p { flex: 1; margin: 0; color: #5b6b61; font-size: 14px; }
.face-review-choice .btn { margin-top: auto; }
.face-review-outcome { display: flex; align-items: center; gap: 12px; }
.face-review-outcome > i { font-size: 26px; }
.face-review-outcome.is-approved > i { color: #198754; }
.face-review-outcome.is-rejected > i { color: #b42318; }
.face-review-outcome div { display: grid; }
.face-review-outcome span { color: #5b6b61; font-size: 14px; }
@media (max-width: 575.98px) {
    .face-review-photos { gap: 8px; }
    .face-review-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .face-review-choices { grid-template-columns: 1fr; }
}
.face-review + .admin-panel { margin-top: 18px; }

/* ---- Terms of Service and Privacy Policy pages ---- */
.legal-page { max-width: 760px; margin: 32px auto 0; padding: 32px 36px; border: 1px solid #dce9df; border-radius: 20px; background: #fff; color: #33433a; font-size: 15.5px; line-height: 1.65; }
.legal-head { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid #e3ece6; }
.legal-kicker { margin: 0 0 2px; color: #198754; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.legal-head h1 { margin: 0 0 6px; color: #14432b; font-size: 30px; font-weight: 800; }
.legal-head p { margin: 0; color: #6b7d71; font-size: 14px; }
.legal-lead { color: #25332a; font-size: 16.5px; }
.legal-page h2 { margin: 26px 0 8px; color: #14432b; font-size: 18px; font-weight: 800; }
.legal-page ul { margin: 0 0 8px; padding-left: 20px; }
.legal-page li + li { margin-top: 6px; }
.legal-page a { color: #198754; }
@media (max-width: 575.98px) {
    .legal-page { margin: 16px 16px 0; padding: 22px 18px; font-size: 15px; }
    .legal-head h1 { font-size: 25px; }
}

/* Sign-up consent, and the Terms · Privacy lines on login and Profile. */
.register-terms { margin: 4px 0 18px; font-size: 14px; }
.register-terms a, .login-legal a, .profile-legal a { color: #198754; }
.login-legal a { color: #6b7d71; text-decoration: none; }
.login-legal a:hover { color: #198754; }
.profile-legal { margin: 24px 0 8px; color: #8a978f; font-size: 13px; text-align: center; }

/* Landing page: the item cards open the quick view (a link, so no underline or link colour). */
a.home-item-card { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.home-item-card:hover { color: inherit; }
a.home-item-card:focus-visible { outline: 3px solid rgba(25, 135, 84, .45); outline-offset: 2px; }

/* Quick view for visitors: log in or sign up to buy, swap or message. */
.quick-view-guest { margin-top: 4px; padding: 14px; border: 1px solid #cde8d6; border-radius: 14px; background: #f4fbf6; }
/* Visitors have no "View full details" link under the box, so the box itself keeps clear of the sheet's bottom edge. */
@media (max-width: 720px) { .quick-view-guest { margin-bottom: max(16px, env(safe-area-inset-bottom)); } }
.quick-view-guest p { margin: 0 0 10px; color: #33433a; font-size: 14px; }
/* Inside the green box, not the dashboard's sticky white action bar used on phones. */
.quick-view-guest .quick-view-actions { position: static; margin: 0; padding: 0; border: 0; background: none; }
.quick-view-guest .quick-view-actions > .btn { flex: 1; justify-content: center; }