/* Shared UI primitives. Imported by dropdown.css, which is loaded after feature CSS.
   Feature CSS owns geometry; this layer owns surfaces and interaction states. */
:root {
  --rs-ui-accent: #0c29ab;
  --rs-ui-accent-hover: #08218f;
  --rs-ui-ink: #22334b;
  --rs-ui-muted: #586a82;
  --rs-ui-line: #d5deea;
  --rs-ui-soft: #f3f6ff;
  --rs-ui-radius: 9px;
  --rs-ui-focus: #0c29ab;
  --rs-ui-error: #b5473a;
  --rs-ui-duration: .16s;
  --rs-picker-max-inline-size: 420px;
  --rs-picker-row-size: 34px;
  --rs-page-title-size: clamp(28px, 2.5vw, 36px);
}

/* Lightweight navigation and the primary workspace title share the same language
   as the public and dashboard shells without changing their navigation layouts. */
.rs-simple-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 65px;
  padding: 12px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--rs-ui-line);
  background: #fff;
}
.rs-simple-header .rs-brand, .rs-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 9px;
  text-decoration: none;
  color: var(--rs-ui-accent);
}
.rs-brand img { display: block; width: 136px; height: auto; }
.rs-brand .rs-brand-symbol { display: none; width: 32px; height: 32px; }
.top.rs-simple-header { width: 100%; margin: 0; }
.rs-simple-header .cc-brand img { width: 136px; height: auto; }
.rs-brand small { font: 650 12px/1.3 Inter, Arial, sans-serif; }
[data-rs-select-scope] .rs-page-title {
  margin-block: 0;
  color: var(--rs-page-title-color, var(--rs-ui-ink));
  font: 800 var(--rs-page-title-size)/1.2 Manrope, Inter, Arial, sans-serif;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.condition-hero { --rs-page-title-color: #fff; }
.rs-input, .rs-textarea { padding: 10px 12px; }

/* Native choices retain their native checked, mixed and keyboard semantics. */
:is(.rs-check, .rs-radio, [data-rs-select-scope] input[type="checkbox"], [data-rs-select-scope] input[type="radio"]) {
  accent-color: var(--rs-ui-accent);
  cursor: pointer;
  transition: outline-color var(--rs-ui-duration), opacity var(--rs-ui-duration);
}
:is(.rs-check, .rs-radio) {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin: 0;
  vertical-align: middle;
}
:is(.rs-check, .rs-radio, [data-rs-select-scope] input[type="checkbox"], [data-rs-select-scope] input[type="radio"]):focus-visible {
  outline: 3px solid var(--rs-ui-focus);
  outline-offset: 3px;
}
:is(.rs-check, .rs-radio, [data-rs-select-scope] input[type="checkbox"], [data-rs-select-scope] input[type="radio"]):is([aria-invalid="true"], :user-invalid):not(:disabled) {
  accent-color: var(--rs-ui-error);
  outline: 2px solid var(--rs-ui-error);
  outline-offset: 2px;
}
:is(.rs-check, .rs-radio, [data-rs-select-scope] input[type="checkbox"], [data-rs-select-scope] input[type="radio"]):disabled {
  cursor: not-allowed;
  opacity: .6;
}

/* Project state onto the visible surface of existing custom choices/switches.
   Never unhide or resize their underlying native input. */
[data-rs-select-scope] :is(.choice-grid, .rental-type-choices, .choice-pair, .condition-choice, .condition-sign-method, .structured-options, .lease-types, .amenity-option, .sc-choice-card, .layout-picker, .featured-control, .switch, .address-privacy-toggle, .pricing-v2__billing-switch, .pricing-v2__plan-choice) input:focus-visible + :is(span, i, label) {
  outline: 3px solid var(--rs-ui-focus);
  outline-offset: 3px;
}
[data-rs-select-scope] :is(.choice-grid, .rental-type-choices, .choice-pair, .condition-choice, .condition-sign-method, .structured-options, .lease-types, .amenity-option, .sc-choice-card, .layout-picker, .featured-control, .switch, .address-privacy-toggle, .pricing-v2__billing-switch, .pricing-v2__plan-choice) input:is([aria-invalid="true"], :user-invalid):not(:disabled) + :is(span, i, label) {
  outline: 2px solid var(--rs-ui-error);
  outline-offset: 2px;
}
[data-rs-select-scope] :is(.choice-grid, .rental-type-choices, .choice-pair, .condition-choice, .condition-sign-method, .structured-options, .lease-types, .amenity-option, .sc-choice-card, .layout-picker, .featured-control, .switch, .address-privacy-toggle, .pricing-v2__billing-switch, .pricing-v2__plan-choice) input:disabled + :is(span, i, label) {
  cursor: not-allowed;
  opacity: .6;
}
[data-rs-select-scope] :is(.role-option, .rs-choice):has(input:focus-visible) {
  outline: 3px solid var(--rs-ui-focus);
  outline-offset: 3px;
}
[data-rs-select-scope] :is(.role-option, .rs-choice):has(input[aria-invalid="true"]) { outline: 2px solid var(--rs-ui-error); }
[data-rs-select-scope] :is(.role-option, .rs-choice):has(input:disabled) { opacity: .6; cursor: not-allowed; }
[data-rs-select-scope] :is(.choice-grid, .rental-type-choices, .choice-pair, .condition-choice, .condition-sign-method, .structured-options, .lease-types, .amenity-option, .sc-choice-card, .layout-picker) input + span { transition: border-color var(--rs-ui-duration), background-color var(--rs-ui-duration), color var(--rs-ui-duration); }
[data-rs-select-scope] :is(.choice-grid, .rental-type-choices, .choice-pair, .condition-choice, .condition-sign-method, .structured-options, .lease-types, .amenity-option, .sc-choice-card, .layout-picker) label:hover input:not(:checked):not(:disabled) + span { border-color: #9eafc5; background-color: #f7f9ff; }

/* Visible file fields and drop zones opt in through reusable classes. */
:is(.rs-file, [data-rs-select-scope] input.rs-file[type="file"]) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 5px;
  border: 1px solid var(--rs-ui-line);
  border-radius: var(--rs-ui-radius);
  background: #fff;
  color: var(--rs-ui-muted);
  font: 500 13px/1.5 Inter, Arial, sans-serif;
  cursor: pointer;
  transition: border-color var(--rs-ui-duration), background-color var(--rs-ui-duration);
}
.rs-file::file-selector-button {
  min-height: 34px;
  margin-inline-end: 10px;
  padding: 6px 12px;
  border: 1px solid #cbd6f1;
  border-radius: 6px;
  background: var(--rs-ui-soft);
  color: var(--rs-ui-accent);
  font: 650 12px/1.4 Inter, Arial, sans-serif;
  cursor: pointer;
  transition: background-color var(--rs-ui-duration), border-color var(--rs-ui-duration);
}
.rs-file:hover:not(:disabled) { border-color: #9eafc5; }
.rs-file:hover:not(:disabled)::file-selector-button { background: #e7edff; border-color: #a7b9ea; }
.rs-file:focus-visible { outline: 3px solid var(--rs-ui-focus); outline-offset: 1px; }
.rs-file:is([aria-invalid="true"], :user-invalid):not(:disabled) { border-color: var(--rs-ui-error); outline-color: rgba(181,71,58,.22); background: #fffafa; }
.rs-file:disabled { background: #f1f4f7; cursor: not-allowed; opacity: .65; }
.rs-file:disabled::file-selector-button { color: var(--rs-ui-muted); background: #e8edf3; cursor: not-allowed; }
[data-rs-select-scope] :is(.rs-upload, .document-dropzone, .media-upload-dropzone, .upload-drop, .editor-upload) {
  border-color: var(--rs-ui-line);
  border-radius: 12px;
  transition: border-color var(--rs-ui-duration), background-color var(--rs-ui-duration), box-shadow var(--rs-ui-duration);
}
[data-rs-select-scope] :is(.rs-upload, .document-dropzone, .media-upload-dropzone, .upload-drop, .editor-upload):is(:hover, .is-dragover):not([aria-disabled="true"]):not(:has(input:disabled)) { border-color: var(--rs-ui-accent); background-color: #f7f9ff; }
[data-rs-select-scope] :is(.rs-upload, .document-dropzone, .media-upload-dropzone, .upload-drop, .editor-upload, .file-picker, .condition-photo-button):focus-within { outline: 3px solid var(--rs-ui-focus); outline-offset: 3px; }
[data-rs-select-scope] :is(.rs-upload, .document-dropzone, .media-upload-dropzone, .upload-drop, .editor-upload):is([aria-invalid="true"], :has(input[aria-invalid="true"])) { border-color: var(--rs-ui-error); background-color: #fffafa; outline-color: rgba(181,71,58,.22); }
[data-rs-select-scope] :is(.rs-upload, .document-dropzone, .media-upload-dropzone, .upload-drop, .editor-upload):is([aria-disabled="true"], :has(input:disabled)) { opacity: .6; cursor: not-allowed; }

/* Shared button API works for every role. Legacy aliases are assigned in markup
   and controls.js; tabs, menu options, map controls and chips retain their layout. */
:where(.rs-button) { display: inline-flex; }
:is(.rs-button, [data-rs-select-scope] .rs-button) {
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--rs-ui-line);
  border-radius: var(--rs-ui-radius);
  background: #fff;
  color: var(--rs-ui-ink);
  font: 700 13px/1.4 Inter, Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background-color var(--rs-ui-duration), border-color var(--rs-ui-duration), color var(--rs-ui-duration), box-shadow var(--rs-ui-duration), transform .12s ease;
}
.rs-button[hidden] { display: none !important; }
:is(.rs-button, [data-rs-select-scope] .rs-button):hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { background: var(--rs-ui-soft); border-color: #aab9d5; color: var(--rs-ui-accent); transform: none; }
:is(.rs-button--primary, [data-rs-select-scope] .rs-button--primary) { border-color: var(--rs-ui-accent); background: var(--rs-ui-accent); color: #fff; box-shadow: 0 3px 10px rgba(12,41,171,.12); }
:is(.rs-button--primary, [data-rs-select-scope] .rs-button--primary):hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { background: var(--rs-ui-accent-hover); border-color: var(--rs-ui-accent-hover); color: #fff; }
:is(.rs-button--danger, [data-rs-select-scope] .rs-button--danger) { border-color: #e5b9b2; background: #fff7f5; color: #a43a2e; box-shadow: none; }
:is(.rs-button--danger, [data-rs-select-scope] .rs-button--danger):hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { background: #a43a2e; border-color: #a43a2e; color: #fff; }
:is(.rs-button--compact, [data-rs-select-scope] .rs-button--compact) { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.rs-button:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { transform: scale(.98); box-shadow: none; }
.rs-button[data-state="error"] { border-color: var(--rs-ui-error); background: #fff2f0; color: #9f352a; }
.rs-button[data-state="success"] { border-color: #14734b; background: #e9f7f0; color: #14734b; }
.rs-button.rs-button--secondary { box-shadow: none; }

/* All interactive controls receive a state treatment even when their geometry
   is deliberately specific (navigation, autocomplete, icon buttons, pickers). */
[data-rs-select-scope] :is(button, a[href], summary, [role="button"]):focus-visible,
.rs-brand:focus-visible, .rs-button:focus-visible {
  outline: 3px solid var(--rs-ui-focus);
  outline-offset: 3px;
}
[data-rs-select-scope] :is(button, [role="button"], a):is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: .6;
  transform: none;
  box-shadow: none;
}
[data-rs-select-scope] :is(button, .rs-button):is([aria-busy="true"], [data-busy="true"], [data-state="loading"], .is-loading) { cursor: wait; transform: none; }
[data-rs-select-scope] :is(button, summary) { -webkit-tap-highlight-color: transparent; }
[data-rs-select-scope] :is(button, [role="option"], [role="menuitem"], summary) { transition: background-color var(--rs-ui-duration), border-color var(--rs-ui-duration), color var(--rs-ui-duration), box-shadow var(--rs-ui-duration), opacity var(--rs-ui-duration); }
[data-rs-select-scope] :is([role="listbox"], .location-results, .location-suggestions) { border-radius: 12px; scrollbar-width: thin; }
[data-rs-select-scope] :is([role="option"]:hover, [role="option"][aria-selected="true"]) { background-color: var(--rs-ui-soft); color: var(--rs-ui-accent); }

/* Date, colour and range retain platform pickers. Multiple/size selects retain
   their native listbox keyboard behavior and never enter base-select mode. */
:is(.rs-range, [data-rs-select-scope] input[type="range"]) { accent-color: var(--rs-ui-accent); cursor: pointer; max-width: 100%; min-height: 32px; }
:is(.rs-color, [data-rs-select-scope] input[type="color"]) { box-sizing: border-box; min-height: 42px; width: 54px; padding: 4px; border: 1px solid var(--rs-ui-line); border-radius: var(--rs-ui-radius); background: #fff; cursor: pointer; }
:is(.rs-range, .rs-color, [data-rs-select-scope] input[type="range"], [data-rs-select-scope] input[type="color"]):focus-visible { outline: 3px solid var(--rs-ui-focus); outline-offset: 2px; }
:is(.rs-range, .rs-color, [data-rs-select-scope] input[type="range"], [data-rs-select-scope] input[type="color"]):disabled { opacity: .6; cursor: not-allowed; }
:is(.rs-range, .rs-color, [data-rs-select-scope] input[type="range"], [data-rs-select-scope] input[type="color"])[aria-invalid="true"] { outline: 2px solid var(--rs-ui-error); outline-offset: 2px; }
[data-rs-select-scope] :is(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; transition: opacity var(--rs-ui-duration); }
[data-rs-select-scope] :is(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-calendar-picker-indicator:hover { opacity: 1; }
:is(.rs-select, [data-rs-select-scope] select):is([multiple], [size]) { width: 100%; padding: 6px; border: 1px solid var(--rs-ui-line); border-radius: var(--rs-ui-radius); background: #fff; color: var(--rs-ui-ink); font: 500 13px/1.5 Inter, Arial, sans-serif; }
:is(.rs-select, [data-rs-select-scope] select):is([multiple], [size]):focus-visible { outline: 3px solid var(--rs-ui-focus); outline-offset: 1px; }
:is(.rs-select, [data-rs-select-scope] select):is([multiple], [size]):disabled { background: #f1f4f7; opacity: .6; }
:is(.rs-select, [data-rs-select-scope] select):is([multiple], [size])[aria-invalid="true"] { border-color: var(--rs-ui-error); outline-color: rgba(181,71,58,.22); }

/* Progressive enhancement of the actual native picker. controls.js performs a
   rendering probe; CSS.supports alone must never turn this on. */
@supports (appearance: base-select) and selector(select::picker(select)) {
  @media (hover: hover) and (pointer: fine) and (forced-colors: none) {
    .rs-native-picker-ready :is(.rs-select, [data-rs-select-scope] select):not([multiple]):not([size]):not([data-rs-native-picker]) {
      appearance: base-select;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      background-image: none;
      padding: 10px 12px;
      overflow: hidden;
      white-space: nowrap;
    }
    .rs-native-picker-ready :is(.rs-select, [data-rs-select-scope] select):not([multiple]):not([size]):not([data-rs-native-picker])::picker(select) {
      appearance: base-select;
      box-sizing: border-box;
      width: anchor-size(width);
      min-width: min(160px, calc(100vw - 24px));
      max-width: min(var(--rs-picker-max-inline-size), calc(100vw - 24px));
      max-height: min(320px, 50dvh);
      overflow: auto;
      overscroll-behavior: contain;
      margin-block: 5px;
      padding: 5px;
      border: 1px solid var(--rs-ui-line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(20,39,76,.14);
      scrollbar-width: thin;
      color: var(--rs-ui-ink);
    }
    .rs-native-picker-ready :is(.rs-select, [data-rs-select-scope] select):not([multiple]):not([size]):not([data-rs-native-picker])::picker-icon {
      content: "";
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      margin-inline-start: auto;
      border-right: 1.7px solid currentColor;
      border-bottom: 1.7px solid currentColor;
      color: var(--rs-ui-accent);
      rotate: 45deg;
      transition: rotate var(--rs-ui-duration);
    }
    .rs-native-picker-ready :is(.rs-select, [data-rs-select-scope] select):not([multiple]):not([size]):not([data-rs-native-picker]):open::picker-icon { rotate: 225deg; }
    .rs-native-picker-ready :is(.rs-select, [data-rs-select-scope] select):not([multiple]):not([size]):not([data-rs-native-picker]) option {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: var(--rs-picker-row-size);
      padding: 7px 9px;
      border: 0;
      border-radius: 6px;
      background: #fff;
      color: var(--rs-ui-ink);
      font: 500 13px/1.4 Inter, Arial, sans-serif;
      white-space: normal;
      overflow-wrap: anywhere;
      cursor: pointer;
    }
    .rs-native-picker-ready :is(.rs-select, [data-rs-select-scope] select):not([multiple]):not([size]):not([data-rs-native-picker]) option[hidden] { display: none; }
    .rs-native-picker-ready :is(.rs-select, [data-rs-select-scope] select):not([multiple]):not([size]):not([data-rs-native-picker]) option:is(:hover, :focus, :checked) { background: var(--rs-ui-soft); color: var(--rs-ui-accent); }
    .rs-native-picker-ready :is(.rs-select, [data-rs-select-scope] select):not([multiple]):not([size]):not([data-rs-native-picker]) option:disabled { color: var(--rs-ui-muted); opacity: .55; cursor: not-allowed; }
    .rs-native-picker-ready :is(.rs-select, [data-rs-select-scope] select):not([multiple]):not([size]):not([data-rs-native-picker]) option::checkmark { width: 14px; color: var(--rs-ui-accent); font-size: 12px; }
    .rs-native-picker-ready :is(.rs-select, [data-rs-select-scope] select):not([multiple]):not([size]):not([data-rs-native-picker]) optgroup { padding-block: 4px; color: var(--rs-ui-muted); font: 700 11px/1.4 Inter, Arial, sans-serif; }
    .rs-native-picker-ready :is(.rs-select, [data-rs-select-scope] select):not([multiple]):not([size]):not([data-rs-native-picker]) optgroup > legend { padding: 6px 9px; color: var(--rs-ui-muted); font: 700 11px/1.4 Inter, Arial, sans-serif; }
  }
}

@media (max-width: 600px) {
  :root { --rs-control-font-size: 16px; }
  .rs-brand img { width: 124px; }
  .rs-simple-header { flex-wrap: wrap; }
  [data-rs-select-scope] .rs-button:not(.rs-button--compact) { min-height: 44px; }
  [data-rs-select-scope] .rs-file { font-size: 16px; }
  [data-rs-select-scope] :is(.checkbox, .settings-check, .remember-me, .rs-choice) { min-height: 44px; }
}
@media (max-width: 600px), (pointer: coarse) {
  :is(.rs-input--compact, .rs-select--compact, [data-rs-select-scope] input.rs-input--compact, [data-rs-select-scope] select.rs-select--compact) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-rs-select-scope] :is(button, input, select, textarea, summary, [role="button"], [role="option"], [role="menuitem"]),
  .rs-button, .rs-file, .rs-file::file-selector-button, .rs-native-picker-ready select::picker-icon { transition: none !important; }
  .rs-button:active { transform: none !important; }
  [data-rs-select-scope] :is(.rs-choice, .switch, .featured-control, .address-privacy-toggle) :is(span, i)::before { transition: none !important; }
  [data-rs-select-scope] :is(.rs-choice, .switch, .featured-control, .address-privacy-toggle) :is(span, i)::after { transition: none !important; }
  [data-rs-select-scope] :is(.choice-grid, .rental-type-choices, .choice-pair, .condition-choice, .condition-sign-method, .structured-options, .lease-types, .amenity-option, .sc-choice-card, .layout-picker) input + span { transition: none !important; }
}
@media (forced-colors: active) {
  [data-rs-select-scope] :is(button, input, select, textarea, a[href], summary, [role="button"]):focus-visible, .rs-brand:focus-visible { outline-color: Highlight; }
  .rs-button, .rs-file, .rs-file::file-selector-button, .rs-upload { border-color: ButtonText; box-shadow: none; }
  [data-rs-select-scope] :is(input, select, textarea)[aria-invalid="true"] { outline: 2px solid Mark; outline-offset: 2px; }
}
