/*
 * Customer-facing layout styles — moved out of
 * resources/views/components/layouts/customer-layout.blade.php's inline
 * <style> block. This is a public, mobile-first storefront surface, not the
 * HighDmin admin theme (see store-layout.blade.php/admin-layout.blade.php),
 * so it keeps its own small stylesheet instead of the Bootstrap admin chrome.
 */
:root {
    --ink: #18332c;
    --ink-soft: #70817c;
    --ink-faint: #94a39d;
    --bg: #ffffff;
    --panel: #ffffff;
    --line: #e6eeeb;
    --teal: #0d9488;
    --teal-soft: #ccfbf1;
    --indigo: #4f46e5;
    --blue: #2563eb;
    --blue-soft: #dbeafe;
    --amber: #d97706;
    --amber-soft: #fef3c7;
    --green: #087f5b;
    --green-soft: #e7f5ee;
    --red: #dc2626;
    --red-soft: #fee2e2;
    --radius: 14px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Segoe UI', Figtree, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
}
a { color: inherit; }

.topbar {
    position: relative; z-index: 20;
    background: #073d31;
    color: #eafff7;
}
.topbar::before { content: "Your health essentials, delivered with care · Secure mobile OTP"; display: block; padding: 8px 16px; text-align: center; font-size: 12px; background: #073d31; color: #eafff7; }
.topbar .wrap {
    max-width: 1180px; margin: 0 auto; padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background:#fff; color:var(--ink); border-bottom:1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 850; font-size: 23px; letter-spacing:-1px; color:var(--green); text-decoration:none; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.brand .brand-name span { color:var(--ink); }
.topbar nav { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.topbar nav a { text-decoration: none; color: var(--ink-soft); font-weight: 600; }
.topbar nav a:hover { color: var(--ink); }
.topbar form { margin: 0; }
.topbar button.link-btn {
    display: inline-flex; align-items: center;
    background: none; border: none; padding: 0; font: inherit; cursor: pointer;
    color: var(--ink-soft); font-weight: 600; font-size: 13px;
}
.topbar button.link-btn:hover { color: var(--red); }
.topbar nav a { position: relative; }
.nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; margin-left: 3px;
    border-radius: 999px; background: var(--red); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 16px; vertical-align: 2px;
}
.bell-link { display: inline-flex; align-items: center; }
.bell-dot {
    position: absolute; top: -3px; right: -3px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red); border: 1.5px solid var(--bg);
}

main.wrap { max-width: 1180px; margin: 0 auto; padding: 42px 20px 60px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 34px; box-shadow:0 16px 45px #153e3010; }
.login-card { width:min(100%, 500px); margin:0 auto; }
.login-card h2 { font-size:30px; line-height:1.2; letter-spacing:-.8px; color:var(--ink); }
.login-eyebrow { color:var(--green); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1.4px; }
.card + .card { margin-top: 16px; }

.alert { border-radius: 10px; padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px; }
.alert-success { background: var(--green-soft); color: #166534; }
.alert-error { background: var(--red-soft); color: #991b1b; }
.alert-info { background: var(--blue-soft); color: #1d4ed8; }

label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 14px 0 6px; }
label:first-of-type { margin-top: 0; }
input[type=text], input[type=tel], input[type=number], textarea, select {
    width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px;
    font-size: 14px; font-family: inherit; color: var(--ink); background: #fff;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
textarea { resize: vertical; min-height: 80px; }
.field-error { color: var(--red); font-size: 12.5px; margin-top: 5px; }
.hint { color: var(--ink-faint); font-size: 12.5px; margin-top: 5px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--green); color: #fff; border: none; border-radius: 9px;
    padding: 12px 20px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none;
    width: 100%; margin-top: 18px;
}
.btn:hover { background: #05684b; }
.btn.btn-soft { background: var(--blue-soft); color: var(--blue); }
.btn.btn-soft:hover { background: #c7d9fb; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.status-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.status-pending { background: var(--amber-soft); color: #92400e; }
.status-reviewing, .status-contacted, .status-awaiting_confirmation { background: var(--blue-soft); color: #1d4ed8; }
.status-confirmed, .status-dispatched { background: var(--green-soft); color: #166534; }
.status-rejected { background: var(--red-soft); color: #991b1b; }

footer { max-width: 1180px; margin: 0 auto; padding: 10px 20px 40px; font-size: 12px; color: var(--ink-faint); text-align: center; }
@media (max-width:620px) { .topbar .wrap { padding:14px 16px; } .brand { font-size:20px; } main.wrap { padding:28px 16px 44px; } .card { padding:24px 20px; } }