:root {
    --primary-color: #D98C28;
    /* The specific gold/mustard from screens */
    --primary-dark: #b57218;
    --bg-color: #f7f9fa;
    --card-bg: #ffffff;
    --text-main: #1a1a1a;
    --text-secondary: #666666;
    --border-color: #eeeeee;
    --danger-color: #dc3545;
    --success-color: #28a745;

    --font-family: 'Inter', system-ui, -apple-system, sans-serif;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --radius-md: 12px;
    --radius-lg: 16px;

    --container-max-width: 480px;
    /* Mobile first constrained view on desktop */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-family);
    background-color: #eef2f5;
    /* Outer background for desktop */
    color: var(--text-main);
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.app-container {
    width: 100%;
    max-width: var(--container-max-width);
    background-color: var(--bg-color);
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

/* Header */
.app-header {
    background-color: #E2A602;
    /* Brighter gold for header background */
    color: #1a1a1a;
    padding: 24px 20px 60px;
    /* Extra padding bottom for overlap effect */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.app-header h1 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.app-header p {
    font-size: 13px;
    opacity: 0.8;
}

/* Main Content */
main {
    flex: 1;
    position: relative;
    /* Negative margin to pull first card up */
    margin-top: -40px;
    padding: 0 16px;
    overflow-y: auto;
    padding-bottom: 80px;
    /* Space for nav */
}

.view {
    display: none;
    animation: fadeIn 0.2s ease;
}

.view.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stats Card (Home) */
.stats-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    box-shadow: var(--shadow-md);
    margin-bottom: 24px;
}

.stat-item {
    text-align: center;
    flex: 1;
}

.icon-box {
    background: #fff8e6;
    color: var(--primary-color);
    padding: 8px;
    border-radius: 50%;
    font-size: 20px;
    margin-bottom: 8px;
    display: inline-block;
}

.stat-value {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 2px;
}

.stat-label {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Controls */
.feed-controls {
    background: white;
    padding: 4px;
    border-radius: 50px;
    display: flex;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.pill-btn {
    flex: 1;
    border: none;
    background: none;
    padding: 8px;
    font-weight: 600;
    font-size: 13px;
    border-radius: 40px;
    cursor: pointer;
    color: var(--text-secondary);
}

.pill-btn.active {
    background-color: var(--primary-color);
    color: white;
    /* Contrast maybe better with black on this specific gold? keeping white for now */
    color: #1a1a1a;
}

/* Adjust Pill Active Color based on screenshot looks darker orange/gold */
.pill-btn.active {
    background-color: #E2A602;
    color: #000;
}

/* Section Headers */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-header h2,
.section-header h3 {
    font-size: 16px;
    font-weight: 700;
}

.badge-subtle {
    background: #FFF4D6;
    color: #9C6800;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* Cards */
.card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.donation-card {
    cursor: pointer;
    transition: transform 0.2s;
}

.donation-card:active {
    transform: scale(0.98);
}

.donation-card .card-image {
    height: 140px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.badge-urgent {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e60000;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.card-content {
    padding: 16px;
}

.card-content h3 {
    font-size: 16px;
    margin-bottom: 4px;
}

.card-content .subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.card-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.card-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-meta i {
    font-size: 14px;
}

/* Buttons */
.btn-primary {
    background-color: #d17d15;
    /* More brownish-orange per screenshots */
    color: white;
    border: none;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    margin-top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-secondary {
    background-color: #E2A602;
    color: #1a1a1a;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    margin-top: 12px;
}

.full-width {
    width: 100%;
}

/* Forms */
.section-title-wrap {
    margin-top: 60px;
    /* Compensate for header absence or just spacing */
    margin-bottom: 20px;
    padding: 0 4px;
}

/* If using the shared header, adjusting padding */
#view-donate .section-title-wrap,
#view-routes .section-title-wrap,
#view-impact .section-title-wrap {
    margin-top: 48px;
    /* Push down below the fixed/absolute header overlay if any, or just aesthetic spacing */
}

/* Override for consistent header look */
/* Actually the screenshots have "Post a Donation" inside the yellow area? No, looks like White card on Yellow BG or Title on Yellow BG. 
   Let's stick to the shared header for simplicity, but update title via JS ideally. 
   For now, I'll just let the header stay "HDB Food Rescue Network" constant, and use page titles in content. 
   Screenshots show specific headers per page styling (Yellow bar at top).
   So I will make the header text generic or change it via JS. 
*/

.form-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.photo-upload-area {
    border: 2px dashed #ddd;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    color: var(--text-secondary);
    margin-top: 12px;
    cursor: pointer;
}

.camera-icon {
    font-size: 32px;
    color: #666;
    margin-bottom: 8px;
}

.tiny-text {
    font-size: 11px;
    margin-top: 4px;
    color: #999;
}

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

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

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
}

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

.input-icon-wrap {
    position: relative;
}

.input-icon-wrap .material-icons-round {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 18px;
}

.input-icon-wrap input {
    padding-left: 36px;
}

/* Routes View */
.route-summary-card {
    padding: 16px;
}

.route-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.route-time {
    text-align: right;
}

.big-time {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #d17d15;
}

.est-label {
    font-size: 11px;
    color: #666;
}

.route-meta {
    font-size: 12px;
    color: #666;
    display: flex;
    gap: 16px;
}

.efficiency {
    color: var(--success-color);
    font-weight: 600;
}

.map-placeholder {
    background-color: #fcfcfc;
    padding: 30px;
    text-align: center;
    border: 1px dashed #ddd;
    border-radius: var(--radius-md);
}

.nav-icon {
    font-size: 40px;
    color: #E2A602;
    transform: rotate(45deg);
    margin-bottom: 12px;
}

.stops-list {
    position: relative;
}

/* .stops-list::before removed to fix vertical line glitch */

.stop-card {
    display: flex;
    padding: 16px;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.stop-number {
    width: 24px;
    height: 24px;
    background: #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.stop-content {
    flex: 1;
}

.stop-content h4 {
    font-size: 15px;
    margin-bottom: 4px;
}

.stop-content p {
    font-size: 12px;
    color: #666;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stop-content i {
    font-size: 14px;
}

/* Impact View */
.hero-impact-card {
    padding: 24px;
    text-align: center;
}

.massive-number {
    font-size: 32px;
    font-weight: 800;
    display: block;
    margin-bottom: 4px;
}

.hero-substats {
    display: flex;
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.substat {
    flex: 1;
}

.substat .number {
    display: block;
    font-weight: 700;
    font-size: 18px;
    color: #d17d15;
}

.impact-row {
    display: flex;
    justify-content: space-between;
    padding: 16px 16px 8px;
    align-items: center;
}

.leaf-icon {
    color: var(--success-color);
}

.impact-value {
    padding: 0 16px;
    margin-bottom: 8px;
}

.big-orange {
    font-size: 24px;
    font-weight: 700;
    color: #d17d15;
}

.impact-desc {
    padding: 0 16px 16px;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.tags {
    padding: 0 16px 16px;
    display: flex;
    gap: 8px;
}

.tag {
    background: #FFF4D6;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    color: #8a5e00;
}

.stats-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.center-content {
    text-align: center;
    padding: 20px;
}

.icon-circle {
    width: 40px;
    height: 40px;
    background: #FFF4D6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: #d17d15;
}

.achievement-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #eee;
    gap: 16px;
}

.achievement-item:last-child {
    border-bottom: none;
}

.ach-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ach-icon.gold {
    background: #fff8e1;
    color: #ffc107;
}

.ach-icon.red {
    background: #ffebee;
    color: #f44336;
}

.ach-icon.heart {
    background: #fce4ec;
    color: #e91e63;
}

.ach-text h4 {
    font-size: 14px;
    margin-bottom: 2px;
}

.ach-text p {
    font-size: 12px;
    color: #888;
}

/* Bottom Nav */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: var(--container-max-width);
    margin: 0 auto;
    background: white;
    display: flex;
    padding: 8px 0 24px;
    /* safe area padding */
    border-top: 1px solid #eee;
    z-index: 100;
}

.nav-item {
    flex: 1;
    border: none;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #999;
    cursor: pointer;
    padding: 8px;
}

.nav-item.active {
    color: #d17d15;
    /* Active Orange */
}

.nav-item .material-icons-round {
    font-size: 24px;
}

.nav-item .label {
    font-size: 10px;
    font-weight: 500;
}

/* Schedule View Styles */
.location-select-wrap {
    margin-bottom: 20px;
    padding: 0 4px;
}

.location-select-wrap label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
}

.select-wrapper {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.select-wrapper select {
    width: 100%;
    padding: 14px 40px 14px 44px;
    /* Space for icons */
    border: 1px solid transparent;
    border-radius: 12px;
    appearance: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-main);
    cursor: pointer;
}

.select-wrapper select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.select-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 20px;
    pointer-events: none;
}

.arrow-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 20px;
    pointer-events: none;
}

.map-card {
    overflow: hidden;
    padding: 0;
}

.map-card iframe {
    display: block;
}

.map-actions {
    padding: 12px;
}

.pill-tabs {
    display: flex;
    gap: 8px;
    padding: 0 4px;
    margin-bottom: 20px;
    background: #e0e0e0;
    padding: 4px;
    border-radius: 40px;
}

.pill-tab {
    flex: 1;
    border: none;
    background: none;
    padding: 8px;
    border-radius: 32px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.pill-tab.active {
    background: white;
    color: #1a1a1a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.accept-action-card {
    padding: 40px 24px;
    text-align: center;
}

.hero-icon-circle {
    width: 80px;
    height: 80px;
    background: #FFF4D6;
    border-radius: 50%;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-icon-circle .material-icons-round {
    font-size: 40px;
    color: #d17d15;
}

.hero-icon-circle.success {
    background: #e6f4ea;
}

.hero-icon-circle.success .material-icons-round {
    color: #1e8e3e;
}

.big-btn {
    padding: 16px;
    font-size: 16px;
    margin-top: 24px;
}

/* Route/Collection Card Statuses */
.route-card.completed {
    opacity: 0.7;
    background: #f8f9fa;
}

.route-status.pending {
    color: #d17d15;
    font-weight: 600;
    font-size: 12px;
}

.route-status.completed {
    color: #4CAF50;
    font-weight: 600;
    font-size: 12px;
}

/* Removing detached code */

.icon-btn:hover {
    background-color: #f5f5f5;
}

.days-row {
    display: flex;
    justify-content: space-between;
}

.day-item {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.day-item.active {
    background-color: #E2A602;
    color: #1a1a1a;
    box-shadow: 0 4px 10px rgba(226, 166, 2, 0.3);
}

.day-name {
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 4px;
}

.day-num {
    font-size: 16px;
    font-weight: 700;
}

.slots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.slot-card {
    padding: 16px;
    text-align: center;
    border: 2px solid transparent;
}

.slot-time {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1a1a1a;
}

.slot-status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
}

.slot-status.available {
    background-color: #e6f4ea;
    color: #1e8e3e;
}

.status-badge.reserved {
    background-color: #fce4ec;
    color: #c2185b;
}

.slot-status.booked {
    background-color: #fce8e6;
    color: #d93025;
}

/* Disabled button state override for clarity */
.btn-secondary.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #e0e0e0;
    color: #9e9e9e;
}

.btn-disabled {
    background-color: #eee;
    color: #999;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    width: 100%;
    cursor: not-allowed;
    margin-top: 12px;
}

.info-card {
    padding: 20px;
    background-color: #FFF8E1;
    /* Light yellow tint */
    border: none;
}

/* Fully Booked Card Logic */
.card.fully-booked {
    opacity: 0.7;
    pointer-events: none;
    /* Disable clicking */
    filter: grayscale(0.8);
    position: relative;
    border: 1px solid #ddd;
}

.card.fully-booked::after {
    content: "FULLY BOOKED";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 8px;
    z-index: 10;
}

/* Route Item Styling */
.route-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.route-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.route-card.completed {
    opacity: 0.6;
    background: #f9f9f9;
}

.route-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.route-header h4 {
    margin: 0;
    color: #333;
    font-size: 1.1rem;
}

.route-status {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.route-status.pending {
    background: #e3f2fd;
    color: #1976d2;
}

.route-status.completed {
    background: #e8f5e9;
    color: #2e7d32;
}

.btn-complete {
    background: #2e7d32;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

.empty-state {
    text-align: center;
    color: #888;
    padding: 40px 20px;
}

/* Autocomplete Dropdown */
.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
    display: none;
}

.autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: #1e293b;
    transition: background 0.2s;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background-color: #f8fafc;
}

.autocomplete-item strong {
    display: block;
    color: #475569;
    font-size: 13px;
    margin-top: 2px;
}