/* =========
   Forms
   ========= */
.form{
  display: grid;
  gap: 12px;
}
.label{ font-weight: 800; color: var(--text); font-size: .95rem; }
.input, textarea{
  width: 100%;
  padding: .9rem .95rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  outline: none;
}
textarea{ min-height: 140px; resize: vertical; max-height: 200px; }
.input:focus, textarea:focus{
  border-color: rgba(74,163,255,.55);
  box-shadow: 0 0 0 4px rgba(74,163,255,.16);
}


.field { display: grid; gap: .35rem; margin-bottom: 1rem; }


.error {
  display: none;
  color: #ff5a5f;
  font-size: .85rem;
}

.input.is-touched:invalid,
textarea.is-touched:invalid {
  border-color: #ff5a5f;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 90, 95, .18);
}


.input.is-touched:invalid + .error,
textarea.is-touched:invalid + .error {
  display: block;
}


.input.is-touched:valid,
textarea.is-touched:valid {
  border-color: rgba(25, 195, 125, .8);
}


.form.is-disabled {
  opacity: .6;
  pointer-events: none;
}

.btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.field--check .error { margin-top: 6px; }

.check{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
  color: var(--text);
}
.check__input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.check__box{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  flex: 0 0 22px;
  margin-top: 2px;
}
.check__input:checked + .check__box{
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
  border-color: rgba(255,255,255,.18);
}
.check__text a{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.field--check:has(.check__input.is-touched:invalid) .error{
  display: block;
}

.check__input.is-touched:invalid + .check__box{
  border-color: #ff5a5f;
  box-shadow: 0 0 0 3px rgba(255, 90, 95, .18);
}

.calendly-wrap {
  position: relative;
  border-radius: var(--radius);

  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}

.calendly-placeholder {
  display: none;
  padding: 18px;
  background: linear-gradient(120deg, var(--surface), rgba(44, 51, 48, 1));
  color: var(--text);
}

.calendly-placeholder h3{
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.calendly-placeholder p{
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.5;
}

.notice[hidden]{ display:none; }

.notice{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 3000;
  width: min(520px, calc(100% - 32px));
}

.notice__inner{
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 14px;
  border-radius: var(--radius-sm, 12px);
  border: 1px solid var(--border, rgba(255,255,255,.12));
  background: rgba(10, 16, 28, .92);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.notice__icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(74,163,255,.16);
  border: 1px solid rgba(74,163,255,.25);
  position: relative;
}

.notice__icon::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 10px;
  background: rgba(74,163,255,.35);
}

.notice__content{ min-width: 0; }

.notice__title{
  display:block;
  font-weight: 700;
  color: var(--text, #eaf1ff);
  margin-bottom: 2px;
}

.notice__text{
  margin: 0;
  color: var(--muted, #b8c6e6);
  line-height: 1.45;
  word-wrap: break-word;
}

.notice__close{
  border: 0;
  background: transparent;
  color: var(--muted, #b8c6e6);
  font-size: 18px;
  line-height: 1;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
}

.notice__close:hover{
  background: rgba(255,255,255,.06);
  color: var(--text, #eaf1ff);
}

/* states */
.notice.is-success .notice__icon{
  background: rgba(25,195,125,.16);
  border-color: rgba(25,195,125,.25);
}
.notice.is-success .notice__icon::after{ background: rgba(25,195,125,.35); }

.notice.is-error .notice__icon{
  background: rgba(255,90,95,.16);
  border-color: rgba(255,90,95,.25);
}
.notice.is-error .notice__icon::after{ background: rgba(255,90,95,.35); }

/* animation */
.notice.is-open .notice__inner{
  animation: notice-in .18s ease-out both;
}
.notice.is-closing .notice__inner{
  animation: notice-out .16s ease-in both;
}

@keyframes notice-in{
  from{ transform: translateY(10px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
@keyframes notice-out{
  from{ transform: translateY(0); opacity: 1; }
  to{ transform: translateY(10px); opacity: 0; }
}