/*
  Algo First Fluent Forms theme
  Targets existing forms:
  - Contact form: ID 3  -> .fluent_form_3
  - Marketing form: ID 5 -> .fluent_form_5
*/

/* AlgoFirst Fluent Forms skin: choices-root-v2-2026-05-05 */

.algo-form-shell{
  border:1px solid rgba(255,255,255,0.16);
  border-radius:22px;
  background:linear-gradient(165deg,#1a1b35 0%,#0f1024 100%);
  padding:28px;
}

.algo-form-shell.light{
  border:1px solid rgba(10,10,26,0.12);
  background:#ffffff;
}

.algo-form-shell .ff-el-group{
  margin-bottom:14px;
}

.algo-form-shell .ff-el-input--label label{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  line-height:1.2;
}

.algo-form-shell:not(.light) .ff-el-input--label label{
  color:rgba(255,255,255,0.86);
}

.algo-form-shell.light .ff-el-input--label label{
  color:#2a2f4a;
}

.algo-form-shell .ff-el-form-control{
  width:100%;
  border-radius:10px;
  padding:13px 14px;
  font-size:15px;
  line-height:1.35;
  transition:border-color .2s, box-shadow .2s, background .2s;
}

.algo-form-shell:not(.light) .ff-el-form-control{
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  color:#ffffff;
}

.algo-form-shell.light .ff-el-form-control{
  border:1px solid rgba(10,10,26,0.16);
  background:#f5f6ff;
  color:#0a0a1a;
}

.algo-form-shell .ff-el-form-control:focus{
  border-color:#7f8dff;
  box-shadow:0 0 0 3px rgba(79,99,232,0.18);
}

.algo-form-shell .ff-btn-submit{
  border:0;
  border-radius:999px;
  padding:12px 22px;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.01em;
  cursor:pointer;
}

.algo-form-shell:not(.light) .ff-btn-submit{
  background:#ffffff !important;
  color:#0a0a1a !important;
}

.algo-form-shell.light .ff-btn-submit{
  background:#0a0a1a !important;
  color:#ffffff !important;
}

.algo-form-shell .ff-message-success{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid rgba(61,220,132,0.4);
  font-weight:600;
  line-height:1.45;
}

.algo-form-shell .ff_form_success,
.algo-form-shell .ff-success-msg,
.algo-form-shell .ff-form-success-message{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid rgba(61,220,132,0.4);
  font-weight:600;
  line-height:1.45;
}

.algo-form-shell:not(.light) .ff-message-success{
  background:linear-gradient(135deg, rgba(61,220,132,0.2), rgba(40,170,98,0.18));
  color:#d8ffe9;
  box-shadow:0 8px 26px rgba(10,10,26,0.25);
}

.algo-form-shell:not(.light) .ff_form_success,
.algo-form-shell:not(.light) .ff-success-msg,
.algo-form-shell:not(.light) .ff-form-success-message{
  background:linear-gradient(135deg, rgba(61,220,132,0.2), rgba(40,170,98,0.18));
  color:#d8ffe9;
  box-shadow:0 8px 26px rgba(10,10,26,0.25);
}

.algo-form-shell.light .ff-message-success{
  background:rgba(61,220,132,0.14);
  color:#0e5b2b;
}

/* Improve Fluent multi-select chips on form ID 5 */
.algo-form-shell .choices[data-type*="select-multiple"]{
  margin-bottom:0;
  font-size:15px;
}

.algo-form-shell:not(.light) .choices__inner{
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  color:#fff;
  border-radius:10px;
  min-height:48px;
  padding:0 42px 0 14px;
  display:flex;
  align-items:center;
  position:relative;
}

.algo-form-shell:not(.light) .choices[data-type*="select-multiple"].has-items .choices__inner{
  padding:8px 42px 8px 14px;
  align-items:flex-start;
}
.algo-form-shell:not(.light) .choices__list--multiple{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  flex-wrap:wrap;
  width:100%;
  min-height:0;
  margin:0;
  padding:0;
  gap:8px;
}

.algo-form-shell:not(.light) .choices__list--multiple .choices__item{
  background:#52575e;
  border:1px solid #3f444a;
  color:#fff;
  border-radius:22px;
  padding:6px 12px;
  font-size:14px;
  font-weight:600;
  margin:0;
  line-height:1.2;
  cursor:pointer;
}

.algo-form-shell:not(.light) .choices[data-type*="select-multiple"] .choices__input,
.algo-form-shell:not(.light) .choices[data-type*="select-multiple"] .choices__input--cloned{
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
  line-height:0 !important;
  text-align:left;
  color:transparent !important;
  caret-color:transparent !important;
  background:transparent !important;
  width:0 !important;
  min-width:0 !important;
  flex:0 0 0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.algo-form-shell:not(.light) .choices[data-type*="select-multiple"] .choices__list--multiple .choices__placeholder,
.algo-form-shell:not(.light) .choices[data-type*="select-multiple"] .choices__list--multiple .choices__item.choices__placeholder{
  display:none !important;
}
.algo-form-shell:not(.light) .choices[data-type*="select-multiple"] .choices__list--single{
  display:none !important;
}
.algo-form-shell:not(.light) .choices[data-type*="select-multiple"] .choices__list--multiple .choices__item[data-value=""],
.algo-form-shell:not(.light) .choices[data-type*="select-multiple"] .choices__list--multiple .choices__item[data-id="-1"]{
  display:none !important;
}
.algo-form-shell:not(.light) .choices[data-type*="select-multiple"] .choices__list--multiple .choices__item{
  color:#fff !important;
}
.algo-form-shell:not(.light) .choices[data-type*="select-multiple"].is-empty .choices__inner::before{
  content:"Please select all that apply";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  right:auto !important;
  color:rgba(255,255,255,0.65) !important;
  font-size:15px;
  line-height:1;
  pointer-events:none;
  z-index:2;
}

.algo-form-shell:not(.light) .choices__list--dropdown{
  background:#1c1f3f;
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
}

.algo-form-shell:not(.light) .choices__list[aria-expanded]{
  background:#1c1f3f;
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
}

.algo-form-shell:not(.light) .choices__list--dropdown .choices__item,
.algo-form-shell:not(.light) .choices__list[aria-expanded] .choices__item{
  color:rgba(255,255,255,0.94);
}

.algo-form-shell:not(.light) .choices__list--dropdown .choices__item--selectable.is-highlighted,
.algo-form-shell:not(.light) .choices__list[aria-expanded] .choices__item--selectable.is-highlighted{
  background:rgba(255,255,255,0.18);
  color:#ffffff;
}

.algo-form-shell:not(.light) .choices__list--dropdown .choices__item--selectable.is-highlighted::after,
.algo-form-shell:not(.light) .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after{
  color:rgba(255,255,255,0.72);
}

@media (max-width:767px){
  .algo-form-shell{
    padding:18px;
  }
}