DataScope26/WEB

1.invite-popup-backdrop {2  position: fixed;3  inset: 0;4  /* match other modal overlays */5  background: rgba(0, 0, 0, 0.7);6  backdrop-filter: blur(0.125rem);7  z-index: 1000;8}9 10.invite-popup {11  /* match .cs-modal styles for consistent popup appearance */12  background: var(--surface-3);13  border: 0.0625rem solid var(--color-border);14  border-radius: 0.5rem;15  padding: 2rem;16  max-width: 28rem;17  width: 90%;18  color: var(--color-text);19  font-family: var(--font-body);20  position: fixed;21  top: 50%;22  left: 50%;23  transform: translate(-50%, -50%);24  z-index: 1000;25  box-shadow: 0 1.25rem 1.5625rem -0.3125rem rgba(0, 0, 0, 0.5);26}27 28.invite-popup h1 {29  text-align: center;30  font-size: 1.125rem;31  margin-bottom: 0.75rem;32  font-weight: 600;33  color: var(--color-text);34}35.area-step__title {36  color: var(--color-text);37  font-family: var(--font-display);38}39 40.invite-popup__input-group input[name="email"]::placeholder {41  color: var(--muted);42}43 44 45.area-step__label {46  display: block;47  color: var(--muted);48  font-size: 0.625rem;49  letter-spacing: 0.0625rem;50  margin-bottom: 0.375rem;51}52 53.invite-popup__input-group {54  margin-bottom: 1.125rem;55  position: relative;56}57 58.invite-popup__suggestions {59  position: absolute;60  left: 0;61  right: 0;62  top: calc(100% + 0.375rem);63  background: var(--surface-2);64  border: 0.0625rem solid var(--surface-3);65  color: var(--muted);66  max-height: 13.75rem;67  overflow-y: auto;68  border-radius: 0.5rem;69  z-index: 1500;70  box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.5);71  padding: 0.375rem 0.25rem;72  list-style: none;73  margin: 0;74}75 76.invite-popup__suggestions li {77  padding: 0.625rem 0.75rem;78  cursor: pointer;79  font-size: 0.8125rem;80  color: var(--color-text);81  border-radius: 0.375rem;82}83 84.invite-popup__suggestions li:hover,85.invite-popup__suggestions li:active {86  background: var(--surface-3);87  color: var(--white);88}89 90.invite-popup__input-group label {91  display: block;92  font-size: 0.625rem;93  color: var(--muted);94  margin-bottom: 0.375rem;95  letter-spacing: 0.0625rem;96}97 98.invite-popup__input-group input,99.invite-popup__input-group select,100.invite-popup__select,101.invite-popup__select-button {102  width: 100%;103  background: var(--bg);104  border: 0.0625rem solid var(--color-border);105  color: var(--color-text);106  padding: 0.875rem;107  border-radius: 8px;108  box-sizing: border-box;109  outline: none;110  transition: border-color 0.2s ease;111}112 113.invite-popup__select-wrap {114  position: relative;115}116 117.invite-popup__select-button:hover{118  transform: translateY(0px);119}120 121.invite-popup__select-button {122  display: flex;123  align-items: center;124  justify-content: space-between;125}126 127.invite-popup__select-caret {128  position: relative;129  width: 8px;130  height: 8px;131  margin-left: 12px;132  border-right: 2px solid #ffffff;133  border-bottom: 2px solid #ffffff;134  transform: rotate(45deg) translateY(-2px);135  flex-shrink: 0;136}137 138.invite-popup__select-menu {139  background: #000000;140  border: 1px solid #000000;141  border-radius: 8px;142  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);143  overflow: hidden;144}145 146.invite-popup__select-menu li {147  background: #000000;148  color: #ffffff;149  padding: 10px 12px;150  cursor: pointer;151  font-size: 14px;152  transition: background 0.15s ease, color 0.15s ease, font-weight 0.15s ease;153}154 155.invite-popup__select-menu li:hover,156.invite-popup__select-menu li:focus {157  background: #2ee88a;158  color: #000000;159  font-weight: 500;160}161 162.invite-popup__select-menu li.active {163  background: #2ee88a;164  color: #000000;165  font-weight: 700;166}167 168.invite-popup__input-group input:focus,169.invite-popup__input-group select:focus,170.invite-popup__select:focus,171.invite-popup__select-button:focus {172  border-color: #2ee88a;173}174 175.invite-popup__input-group input::placeholder {176  color: var(--surface-2);177}178 179.invite-popup__input-group > select > option,180.invite-popup__select option {181  background: #000000;182  color: #ffffff;183  border: none;184}185 186.invite-popup__input-group > select > option:hover,187.invite-popup__select option:hover,188.invite-popup__input-group > select > option:focus,189.invite-popup__select option:focus,190.invite-popup__input-group > select > option:checked,191.invite-popup__select option:checked,192.invite-popup__input-group > select > option[selected],193.invite-popup__select option[selected] {194  background: #2ee88a;195  color: #000000;196  font-weight: 700;197}198 199.invite-popup__input-group > select > option:checked,200.invite-popup__select option:checked {201  font-size: 15px;202}203 204.invite-popup__input-group > select > option{205  color: var(--muted);206}207 208.invite-popup__error {209  color: var(--color-danger);210  font-size: 0.8125rem;211  margin-bottom: 0.75rem;212}213 214.invite-popup__submit {215  width: 100%;216  padding: 0.875rem;217  font-size: 1.375rem;218}219 220.invite-popup__input-group input:-webkit-autofill,221.invite-popup__input-group input:-webkit-autofill:hover,222.invite-popup__input-group input:-webkit-autofill:focus,223.invite-popup__input-group input:-webkit-autofill:active {224  -webkit-box-shadow: 0 0 0 62.5rem var(--bg) inset;225  box-shadow: 0 0 0 62.5rem var(--bg) inset;226  -webkit-text-fill-color: var(--white);227  caret-color: var(--white);228  transition: background-color 5000s ease-in-out 0s;229}230 231.invite-popup__no-areas {232  display: flex;233  flex-direction: column;234  gap: 1rem;235  text-align: center;236}237 238.invite-popup__no-areas p {239  margin: 0;240  color: var(--muted);241  line-height: 1.5;242}243 244.invite-popup__cta-button,245.invite-popup__secondary-button {246  width: 100%;247  padding: 0.625rem 0;248}249 250