* { box-sizing:border-box; }
:root { --green-dark:#1a7a42; --green-mid:#22a356; --green-pale:#edfaf3; --border:#d4e8dc; --white:#ffffff; --radius:16px; --radius-sm:10px; --text-dark:#1a1f1c; --text-mid:#4a5550; --text-light:#8a9e95; --shadow-sm:0 1px 3px rgba(0,0,0,.06); }
body { font-family:'DM Sans',sans-serif; color:var(--text-dark); background:#f4f6f8; }
.top-banner { background:linear-gradient(90deg,var(--green-dark),var(--green-mid)); color:#fff; text-align:center; padding:9px 16px; font-size:12px; font-weight:500; }
.site-navbar { background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.brand-name { font-family: 'DM Serif Display', serif; font-size: 28px; color: var(--green-mid); letter-spacing: -.3px; }

/* Location strip — sits directly under the navbar, matching every other page */
.location-bar { border-bottom: 1px solid var(--border); background: #f7fcf9; color: var(--text-light); font-size: 13px; }
.location-bar .bi { color: var(--green-mid); }
.location-strong { color: var(--text-dark); font-weight: 700; }

.nav-action { display: inline-flex; align-items: center; color: var(--text-mid); font-weight: 600; font-size: 14px; transition: color .2s ease; white-space: nowrap; }
.nav-action:hover { color: var(--green-mid); }

/* Icon-only nav button (bell) — round tap target with room for
   the unread badge to sit cleanly, instead of a bare icon. */
.nav-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--text-mid); font-size: 16px; position: relative; margin: 0 -6px; transition: background .15s ease, color .15s ease; }
.nav-icon-btn:hover { background: var(--green-pale); color: var(--green-dark); }
.nav-icon-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; border: 2px solid var(--white); }

/* Plain separator before Logout/Login */
.nav-divider { width: 1px; height: 18px; background: var(--border); }
.hero { background:linear-gradient(135deg,var(--green-pale),#e3f2fd); padding:48px 0 36px; text-align:center; }
.hero h1 { font-family:'DM Serif Display',serif; font-size:36px; color:var(--green-dark); }
.hero p { color:var(--text-mid); font-size:15px; margin-top:8px; }
.card-shell { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:0; margin-bottom:12px; overflow:hidden; }
.faq-q { padding:18px 22px; font-weight:700; font-size:15px; color:var(--text-dark); cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:background .15s; }
.faq-q:hover { background:var(--green-pale); }
.faq-a { padding:0 22px 18px; font-size:14px; color:var(--text-mid); line-height:1.7; display:none; border-top:1px solid var(--border); padding-top:14px; }
.faq-a.open { display:block; }
.footer-mini { text-align:center; font-size:11px; color:var(--text-light); padding:24px 0; border-top:1px solid var(--border); margin-top:40px; background:#fff; }

/* ── Sign-in required modal — same pattern as Add_to_cart.php ── */
.signin-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 1100;
    background: rgba(20,30,25,.55); align-items: center; justify-content: center;
    padding: 20px;
}
.signin-modal-overlay.open { display: flex; }
.signin-modal-box {
    background: var(--white); border-radius: 16px; max-width: 380px; width: 100%;
    padding: 28px 26px; text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.signin-modal-icon {
    width: 52px; height: 52px; border-radius: 50%; background: var(--green-pale);
    color: var(--green-mid); font-size: 22px; display: flex; align-items: center;
    justify-content: center; margin: 0 auto 14px;
}
.signin-modal-box h3 { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--text-dark); margin-bottom: 8px; }
.signin-modal-box p { font-size: 13.5px; color: var(--text-mid); margin-bottom: 20px; line-height: 1.5; }
.signin-modal-actions { display: flex; flex-direction: column; gap: 8px; }
.signin-modal-actions a.signin-btn-primary {
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
    color: #fff; padding: 12px 20px; font-weight: 600; font-size: 14px;
    text-decoration: none; box-shadow: 0 4px 14px rgba(34,163,86,.28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.signin-modal-actions a.signin-btn-primary:hover {
    color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(34,163,86,.36);
}
.signin-modal-actions a.signin-btn-secondary {
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); border: 1.5px solid var(--border);
    background: var(--white); color: var(--text-dark); padding: 12px 20px;
    font-weight: 600; font-size: 14px; text-decoration: none; transition: all .15s ease;
}
.signin-modal-actions a.signin-btn-secondary:hover {
    color: var(--green-dark); border-color: var(--green-mid); background: var(--green-pale);
}
.signin-modal-dismiss { margin-top: 12px; background: none; border: none; color: var(--text-light); font-size: 12.5px; cursor: pointer; text-decoration: underline; }