/* Shared WagMate glass theme: quiet color, soft depth, readable controls. */
:root {
  --ink: #f4f6f3;
  --cream: #090b0c;
  --sage: #dce8df;
  --orange: #e99a73;
  --tan: #cda27f;
  --muted: #aab5ae;
  --line: rgba(255,255,255,.16);
}

* { box-sizing: border-box; }
body {
  color: var(--ink) !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(214,135,105,.18), transparent 30%),
    radial-gradient(circle at 92% 16%, rgba(110,157,145,.16), transparent 32%),
    radial-gradient(circle at 72% 94%, rgba(119,105,158,.13), transparent 34%),
    linear-gradient(135deg, #050606, #121617 58%, #070909) !important;
  background-attachment: fixed;
}

a { color: var(--ink); }
nav {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(20,23,23,.58) !important;
  backdrop-filter: blur(26px) saturate(125%);
  -webkit-backdrop-filter: blur(26px) saturate(125%);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}
.brand, .brand em, .brand small, .signout, .back { color: #f1f4f1 !important; }
.brand em, .brand small { opacity: .68; }
.mark { background: linear-gradient(145deg, #dfaa7c, #ad7c78) !important; box-shadow: 0 8px 22px rgba(184,128,108,.25); }
h1, h2, h3, h4, strong, b { color: #f5f7f5; }
.eyebrow, .kicker, .step { color: #b6c1ba !important; }
.lead, .lede, .sub, .note, .card p, .form-top p, .footer, .bio, .schedule, .age, .summary { color: #aeb9b2 !important; }
.card, .form-card, .form-box, .service, .choice, .tag, .modal-card, .menu, .account-menu {
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.075) !important;
  color: var(--ink);
  backdrop-filter: blur(28px) saturate(125%);
  -webkit-backdrop-filter: blur(28px) saturate(125%);
  box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.07);
}
.hero, .about, .start, .services { background: transparent !important; }
.sun { background: rgba(214,143,111,.24) !important; filter: blur(5px); }
.dog, .about-photo, .photo { border-radius: 28px !important; }
.service, .choice { min-height: 190px; }
.service:hover, .choice:hover, .card:hover { border-color: rgba(255,255,255,.22) !important; }
.choice.active { border-color: rgba(233,154,115,.7) !important; background: rgba(233,154,115,.16) !important; }
.service p, .choice small, .choice b, .service h3, .service strong { color: #f0f4f0 !important; }
.icon, .arrow, .hero h1 i, h1 i, .heart, .hero h1 i, .age { color: #e6aa82 !important; }
.button, .dark, .submit, .primary, .small-button, .request-btn, .request-submit {
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(135deg, #edf2ef, #b8ccc4) !important;
  color: #0d1311 !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}
.cta, .edit-profile, .switch-account, .view-requests {
  border: 1px solid rgba(255,255,255,.23) !important;
  background: rgba(255,255,255,.1) !important;
  color: #f5f7f5 !important;
  backdrop-filter: blur(18px);
}
.nav-actions { position: relative; z-index: 10; }
.menu, .account-menu {
  z-index: 30 !important;
  background: rgba(25,29,29,.94) !important;
  color: #f5f7f5 !important;
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: 0 24px 65px rgba(0,0,0,.45);
}
.menu h3, .account-menu h4 { color: #fff !important; }
.menu p, .account-menu p { color: #b9c3bd !important; }
.menu a, .account-menu a { color: #f5f7f5 !important; background: rgba(255,255,255,.1) !important; border: 1px solid rgba(255,255,255,.12); }
.menu a:hover, .account-menu a:hover { background: rgba(233,154,115,.2) !important; }
input, select, textarea {
  color: #f5f7f5 !important;
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.2) !important;
  border-radius: 12px !important;
}
input::placeholder, textarea::placeholder { color: #94a19a !important; }
.status, .verified, .pill, .badge { background: rgba(255,255,255,.1) !important; color: #eef5ef !important; border: 1px solid rgba(255,255,255,.14); }
.availability, .date-list, .schedule, .walk-item, .stats { border-color: rgba(255,255,255,.14) !important; }
.modal { background: rgba(0,0,0,.58) !important; backdrop-filter: blur(18px); }
.close { color: #f5f7f5; }
.illustration, .avatar { background: rgba(219,232,223,.18) !important; }
.message, .success, .sent, .messages { background: rgba(255,255,255,.08) !important; color: #eaf0ec !important; }
.message p, .success p, .sent p { color: #b8c3bc !important; }
.footer { opacity: .72; }

/* Theme control */
.brand-tools { display:flex; align-items:center; gap:11px; }
.theme-toggle { border:1px solid rgba(255,255,255,.22); border-radius:999px; width:34px; height:34px; display:grid; place-items:center; padding:0; color:#f5f7f5; background:rgba(255,255,255,.1); cursor:pointer; font-size:16px; line-height:1; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.theme-toggle:hover { background:rgba(255,255,255,.18); transform:translateY(-1px); }
.floating-theme-toggle { position:absolute; top:24px; left:28px; z-index:5; }

/* Soft white glass mode */
body.light-mode {
  color:#26332d !important;
  background:radial-gradient(circle at 8% 8%,rgba(221,157,120,.23),transparent 30%),radial-gradient(circle at 92% 16%,rgba(136,180,165,.2),transparent 32%),linear-gradient(135deg,#f7f5ef,#e9f0eb) !important;
}
body.light-mode nav { background:rgba(255,255,255,.56) !important; border-color:rgba(82,103,91,.14) !important; }
body.light-mode .brand, body.light-mode .brand em, body.light-mode .brand small, body.light-mode .signout, body.light-mode .back { color:#26332d !important; }
body.light-mode .brand em, body.light-mode .brand small { color:#6f7e74 !important; }
body.light-mode .theme-toggle { color:#26332d; background:rgba(255,255,255,.64); border-color:rgba(82,103,91,.18); }
body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4, body.light-mode strong, body.light-mode b { color:#26332d; }
body.light-mode .eyebrow, body.light-mode .kicker, body.light-mode .step { color:#718076 !important; }
body.light-mode .lead, body.light-mode .lede, body.light-mode .sub, body.light-mode .note, body.light-mode .card p, body.light-mode .form-top p, body.light-mode .footer, body.light-mode .bio, body.light-mode .schedule, body.light-mode .summary { color:#6d7b71 !important; }
body.light-mode .card, body.light-mode .form-card, body.light-mode .form-box, body.light-mode .service, body.light-mode .choice, body.light-mode .tag, body.light-mode .modal-card { background:rgba(255,255,255,.6) !important; border-color:rgba(82,103,91,.16) !important; box-shadow:0 24px 70px rgba(74,83,76,.14),inset 0 1px rgba(255,255,255,.8); }
body.light-mode .hero, body.light-mode .about, body.light-mode .start, body.light-mode .services { background:transparent !important; }
body.light-mode .service p, body.light-mode .choice small, body.light-mode .choice b, body.light-mode .service h3, body.light-mode .service strong { color:#26332d !important; }
body.light-mode .button, body.light-mode .dark, body.light-mode .submit, body.light-mode .primary, body.light-mode .small-button, body.light-mode .request-btn, body.light-mode .request-submit { background:linear-gradient(135deg,#263a32,#405b4d) !important; color:#fff !important; }
body.light-mode .cta, body.light-mode .edit-profile, body.light-mode .switch-account, body.light-mode .view-requests { color:#26332d !important; background:rgba(255,255,255,.58) !important; border-color:rgba(82,103,91,.2) !important; }
body.light-mode .menu, body.light-mode .account-menu { background:rgba(255,255,255,.94) !important; color:#26332d !important; border-color:rgba(82,103,91,.18) !important; }
body.light-mode .menu h3, body.light-mode .account-menu h4 { color:#26332d !important; }
body.light-mode .menu p, body.light-mode .account-menu p { color:#6d7b71 !important; }
body.light-mode .menu a, body.light-mode .account-menu a { color:#26332d !important; background:rgba(220,232,223,.7) !important; }
body.light-mode input, body.light-mode select, body.light-mode textarea { color:#26332d !important; background:rgba(255,255,255,.66) !important; border-color:rgba(82,103,91,.22) !important; }
body.light-mode input::placeholder, body.light-mode textarea::placeholder { color:#819087 !important; }
body.light-mode .status, body.light-mode .verified, body.light-mode .pill, body.light-mode .badge { background:rgba(255,255,255,.62) !important; color:#496056 !important; border-color:rgba(82,103,91,.15); }
body.light-mode .request-list .request { background:rgba(255,255,255,.5); border-color:rgba(82,103,91,.15); box-shadow:0 14px 38px rgba(74,83,76,.12),inset 0 1px rgba(255,255,255,.8); }
body.light-mode .request-name { color:#26332d; }
body.light-mode .request-name:hover { background:rgba(220,232,223,.55); }
body.light-mode .request-detail small, body.light-mode .request-status, body.light-mode .date-item span { color:#6d7b71; }
body.light-mode .message, body.light-mode .success, body.light-mode .sent, body.light-mode .messages { background:rgba(235,242,236,.75) !important; color:#26332d !important; }
body.light-mode .message p, body.light-mode .success p, body.light-mode .sent p { color:#6d7b71 !important; }
body.light-mode .modal { background:rgba(28,42,35,.35) !important; }
body.light-mode .close { color:#26332d; }

/* Keep profile editing controls visible in both palettes. */
.edit-avatar, .walker-edit { background:#26332d !important; color:#fff !important; border-color:#e3b18c !important; box-shadow:0 5px 14px rgba(0,0,0,.28); }
.edit-avatar:hover, .walker-edit:hover { background:#3c5b4b !important; }
body.light-mode .edit-avatar, body.light-mode .walker-edit { background:#26332d !important; color:#fff !important; border-color:#d89b72 !important; }
body.light-mode .status { color:#31543e !important; background:rgba(226,244,231,.82) !important; }
body.light-mode .dot { background:#4d9b6a; box-shadow:0 0 8px rgba(77,155,106,.35); }
body.light-mode .switch.on { background:#4d9b6a !important; }
body.light-mode .profile, body.light-mode .hero-card { background:linear-gradient(135deg,rgba(239,190,151,.72),rgba(255,255,255,.48)) !important; }

/* Owner home cards and walk guide need their own contrast because they are injected after load. */
.owner-hub { border:1px solid rgba(255,255,255,.14) !important; border-radius:26px !important; background:rgba(255,255,255,.075) !important; backdrop-filter:blur(28px) saturate(125%); -webkit-backdrop-filter:blur(28px) saturate(125%); box-shadow:0 24px 70px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.07) !important; }
.owner-hub h3, .owner-hub .hub-kicker, .owner-hub .hub-grid b { color:#f5f7f5 !important; }
.owner-hub .hub-grid a { background:rgba(255,255,255,.085) !important; border-color:rgba(255,255,255,.18) !important; color:#f5f7f5 !important; border-radius:20px !important; }
.owner-hub .hub-grid span { color:#c1cbc4 !important; }
.owner-hub .hub-grid em { color:#e6aa82 !important; }
.walk-guide { border-color:rgba(255,255,255,.16) !important; border-radius:22px !important; background:rgba(255,255,255,.075) !important; color:#f5f7f5 !important; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.walk-guide strong, .walk-guide b { color:#f5f7f5 !important; }
.walk-guide span { color:#b8c3bc !important; }
body.light-mode .owner-hub { background:rgba(255,255,255,.68) !important; border-color:rgba(82,103,91,.16) !important; box-shadow:0 24px 70px rgba(74,83,76,.14),inset 0 1px rgba(255,255,255,.85) !important; }
body.light-mode .owner-hub h3, body.light-mode .owner-hub .hub-kicker, body.light-mode .owner-hub .hub-grid b { color:#26332d !important; }
body.light-mode .owner-hub .hub-grid a { background:rgba(226,238,229,.62) !important; border-color:rgba(82,103,91,.18) !important; color:#26332d !important; }
body.light-mode .owner-hub .hub-grid span { color:#65756a !important; }
body.light-mode .owner-hub .hub-grid em { color:#b66f4e !important; }
body.light-mode .walk-guide { background:rgba(255,255,255,.72) !important; border-color:rgba(82,103,91,.18) !important; color:#26332d !important; }
body.light-mode .walk-guide strong, body.light-mode .walk-guide b { color:#26332d !important; }
body.light-mode .walk-guide span { color:#65756a !important; }