/* BraveMeet V1.1 control polish r01.
   Shared button, filter and icon states for the main system only.
   City Guide remains intentionally out of scope. */

body.visitor-mode:has(#visitor-experience),
body.member-mode {
  --bm-control-height: 44px;
  --bm-control-radius: 12px;
  --bm-control-line: #d7e1f0;
  --bm-control-ink: #17315f;
  --bm-control-blue: #1f45e8;
  --bm-control-blue-soft: #edf3ff;
}

/* One icon family: the existing BraveMeet symbol sprite, consistently sized. */
body.visitor-mode:has(#visitor-experience) .visitor-icon,
body.member-mode .visitor-icon,
body.member-mode .member-route-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
  color: currentColor;
}
body.visitor-mode:has(#visitor-experience) .visitor-icon,
body.member-mode .visitor-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Shared controls: quiet at rest, precise on hover, tactile on press. */
body.visitor-mode:has(#visitor-experience) :is(.visitor-primary-action, .visitor-home-city-action,
  .visitor-card-actions button, .visitor-privacy-control button, .visitor-expiry-options button,
  .outline-button, .primary),
body.member-mode :is(#discover, #plans, #tools, #inbox, #profile) :is(.outline-button, .primary,
  .join, .send-button, .profile-save, .member-text-action, .member-you-action) {
  min-height: var(--bm-control-height) !important;
  border-radius: var(--bm-control-radius) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease,
    box-shadow .16s ease, transform .16s ease;
}

body.member-mode :is(#discover, #plans, #tools, #inbox, #profile) :is(.outline-button, .member-text-action),
body.visitor-mode:has(#visitor-experience) :is(.outline-button, .visitor-home-city-action) {
  border: 1px solid var(--bm-control-line) !important;
  background: #fff !important;
  color: var(--bm-control-ink) !important;
  box-shadow: 0 2px 7px rgba(19, 51, 101, .05) !important;
}

body.member-mode :is(#discover, #plans, #tools, #inbox, #profile) :is(.outline-button, .member-text-action):hover,
body.visitor-mode:has(#visitor-experience) :is(.outline-button, .visitor-home-city-action):hover {
  border-color: #a9c2ec !important;
  background: var(--bm-control-blue-soft) !important;
  color: var(--bm-control-blue) !important;
  box-shadow: 0 7px 17px rgba(31, 69, 232, .10) !important;
}

body.member-mode :is(#discover, #plans, #tools, #inbox, #profile) :is(.primary, .join, .send-button, .profile-save),
body.visitor-mode:has(#visitor-experience) :is(.visitor-primary-action, .primary) {
  border: 1px solid var(--bm-control-blue) !important;
  background: var(--bm-control-blue) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(31, 69, 232, .18) !important;
}

body.member-mode :is(#discover, #plans, #tools, #inbox, #profile) :is(.primary, .join, .send-button, .profile-save):hover,
body.visitor-mode:has(#visitor-experience) :is(.visitor-primary-action, .primary):hover {
  background: #1640d6 !important;
  border-color: #1640d6 !important;
  box-shadow: 0 12px 24px rgba(31, 69, 232, .24) !important;
}

body.member-mode :is(#discover, #plans, #tools, #inbox, #profile) :is(button, a):focus-visible,
body.visitor-mode:has(#visitor-experience) :is(button, a):focus-visible {
  outline: 3px solid rgba(31, 69, 232, .28) !important;
  outline-offset: 3px !important;
}
body.member-mode :is(#discover, #plans, #tools, #inbox, #profile) :is(button, a):active,
body.visitor-mode:has(#visitor-experience) :is(button, a):active {
  transform: translateY(1px) scale(.985);
}
body.member-mode :is(#discover, #plans, #tools, #inbox, #profile) button:disabled,
body.visitor-mode:has(#visitor-experience) button:disabled {
  cursor: not-allowed;
  opacity: .48;
  box-shadow: none !important;
}

/* Filters are a single control family, with an unmistakable selected state. */
body.visitor-mode:has(#visitor-experience) :is(.filter, .discovery-category-row button),
body.member-mode :is(#discover, #plans, #tools, #inbox) :is(.filter, .inbox-lanes button,
  .member-circle-quick-filters button, .member-circle-filter-toggle, .member-plan-filter-trigger) {
  min-height: 44px !important;
  padding: 0 15px !important;
  border: 1px solid var(--bm-control-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #52627e !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(19, 51, 101, .04) !important;
}
body.visitor-mode:has(#visitor-experience) :is(.filter.active, .discovery-category-row button.active),
body.member-mode :is(#discover, #plans, #tools, #inbox) :is(.filter.active, .inbox-lanes button.active,
  .member-circle-quick-filters button.active, .member-circle-filter-toggle[aria-expanded="true"],
  .member-plan-filter-trigger.active) {
  border-color: var(--bm-control-blue) !important;
  background: var(--bm-control-blue-soft) !important;
  color: var(--bm-control-blue) !important;
  box-shadow: inset 0 0 0 1px rgba(31, 69, 232, .08), 0 6px 15px rgba(31, 69, 232, .10) !important;
}
body.member-mode :is(#discover, #plans, #tools, #inbox) :is(.filter, .inbox-lanes button,
  .member-circle-quick-filters button, .member-circle-filter-toggle, .member-plan-filter-trigger) .visitor-icon,
body.visitor-mode:has(#visitor-experience) :is(.filter, .discovery-category-row button) .visitor-icon {
  width: 17px !important;
  height: 17px !important;
  margin-right: 7px;
}

/* Meet's large navigation and action rail get visual hierarchy, not mystery arrows. */
body.member-mode #discover .member-meet-person-navigation button {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 13px !important;
  border: 1px solid var(--bm-control-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--bm-control-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
body.member-mode #discover .member-meet-person-navigation button:hover {
  border-color: #a9c2ec !important;
  color: var(--bm-control-blue) !important;
  background: var(--bm-control-blue-soft) !important;
}
body.member-mode #discover .member-meet-person-navigation button .visitor-icon {
  width: 16px !important;
  height: 16px !important;
}
body.member-mode #discover .member-meet-action-rail .member-meet-action {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}
body.member-mode #discover .member-meet-action-rail .member-meet-action .visitor-icon {
  width: 19px !important;
  height: 19px !important;
}

/* Zero-state route cards use the product icon language instead of emoji glyphs. */
body.member-mode :is(#plans, #tools) .member-route-icon {
  display: grid !important;
  place-items: center;
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px;
  background: var(--bm-control-blue-soft);
  color: var(--bm-control-blue);
  font-size: 0 !important;
}
body.member-mode :is(#plans, #tools) .member-route-icon .visitor-icon {
  width: 20px !important;
  height: 20px !important;
}
body.member-mode #plans .member-plan-overview-icon {
  display: grid !important;
  place-items: center;
  font-size: 0 !important;
}
body.member-mode #plans .member-plan-overview-icon .visitor-icon {
  width: 18px !important;
  height: 18px !important;
}

@media (max-width: 640px) {
  body.member-mode :is(#discover, #plans, #tools, #inbox, #profile) :is(.outline-button, .primary,
    .join, .send-button, .profile-save, .member-text-action),
  body.visitor-mode:has(#visitor-experience) :is(.visitor-primary-action, .visitor-home-city-action,
    .outline-button, .primary) {
    min-height: 44px !important;
  }
  body.member-mode :is(#discover, #plans, #tools, #inbox) :is(.filter, .inbox-lanes button,
    .member-circle-quick-filters button, .member-circle-filter-toggle, .member-plan-filter-trigger) {
    min-height: 44px !important;
    padding-inline: 13px !important;
  }
}

/* Cascade guard: legacy iOS rules use higher specificity for the Meet toolbar. */
@media (min-width: 821px) {
  body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice {
    min-height: 42px !important;
    font-size: 15px !important;
  }
  body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice.active {
    border: 1px solid var(--bm-control-blue) !important;
    border-radius: 999px !important;
    background: var(--bm-control-blue-soft) !important;
    color: var(--bm-control-blue) !important;
    box-shadow: inset 0 0 0 1px rgba(31, 69, 232, .08), 0 6px 15px rgba(31, 69, 232, .10) !important;
  }
  body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice > .visitor-icon {
    width: 20px !important;
    height: 20px !important;
  }
  body.member-mode #discover .member-meet-filterbar .member-meet-filter-chevron {
    width: 16px !important;
    height: 16px !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-person-navigation button {
    min-height: 44px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-person-navigation button .visitor-icon {
    width: 16px !important;
    height: 16px !important;
  }
}

body.member-mode #discover .member-meet-action-rail .member-meet-action .visitor-icon {
  width: 19px !important;
  height: 19px !important;
}