/* cnx-wa-form.css */
:root {
  --waf-green:      #25D366;
  --waf-green-dark: #128C7E;
  --waf-w:          300px;
  --waf-r:          16px;
}

/* Sidebar — block container; sticky is handled by the parent template column */
.cnx-waf-sidebar {
  width: 100%;
  max-width: var(--waf-w);
  display: block;
}

.cnx-waf-sidebar.cnx-waf--align-left {
  margin-right: auto;
  margin-left: 0;
}

.cnx-waf-sidebar.cnx-waf--align-right {
  margin-left: auto;
  margin-right: 0;
}

.cnx-waf-page-sidebar .cnx-waf-sidebar {
  max-width: none;
  margin: 0;
}

.cnx-waf-card {
  border-radius: var(--waf-r);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
}

/* Toggle header */
.cnx-waf-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--waf-green);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  direction: rtl;
}
.cnx-waf-toggle:hover { background: var(--waf-green-dark); }
.cnx-waf-toggle-label { flex: 1; }
.cnx-waf-chevron {
  transition: transform .25s;
  display: inline-block;
  font-size: 1rem;
}

/* Body */
.cnx-waf-body {
  background: #F5EDE4;
  padding: 1rem;
  overflow: hidden;
  max-height: 600px;
  transition: max-height .25s, opacity .25s;
  opacity: 1;
}
.cnx-waf-body.is-collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0 1rem;
}

.cnx-waf-subtitle {
  font-size: .82rem;
  color: #666;
  margin: 0 0 .85rem;
  direction: rtl;
}

/* Fields */
.cnx-waf-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: .75rem;
}
.cnx-waf-label {
  font-size: .8rem;
  font-weight: 600;
  direction: rtl;
}
.cnx-waf-input {
  width: 100%;
  padding: .55rem .8rem;
  border: 1.5px solid #D4B5A0;
  border-radius: 10px;
  font-size: .9rem;
  direction: rtl;
  background: #FAF6F1;
  box-sizing: border-box;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.cnx-waf-input:focus {
  outline: none;
  border-color: var(--waf-green);
  box-shadow: 0 0 0 3px rgba(37,211,102,.15);
}
.cnx-waf-input.has-error { border-color: #c0392b; }
.cnx-waf-textarea { resize: vertical; min-height: 70px; }
.cnx-waf-error { font-size: .72rem; color: #c0392b; min-height: 1em; }

/* Submit */
.cnx-waf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .7rem;
  background: var(--waf-green);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  direction: rtl;
  font-family: inherit;
}
.cnx-waf-submit:hover { background: var(--waf-green-dark); }
.cnx-waf-submit:active { transform: scale(.97); }

.cnx-waf-privacy {
  display: flex;
  align-items: center;
  gap: .3rem;
  justify-content: center;
  font-size: .7rem;
  color: #888;
  margin: .6rem 0 0;
  direction: rtl;
}

/* FAB */
.cnx-waf-fab {
  position: fixed;
  bottom: 1.5rem;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--waf-green);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,.45);
  z-index: 999;
}
.cnx-waf-fab:hover { background: var(--waf-green-dark); }
.cnx-waf-fab.cnx-waf--align-left  { left: 1.25rem; right: auto; }
.cnx-waf-fab.cnx-waf--align-right { right: 1.25rem; left: auto; }

/* Backdrop */
.cnx-waf-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 998;
}
.cnx-waf-backdrop.is-visible { display: block; }

/* Mobile */
@media (max-width: 650px) {
  .cnx-waf-sidebar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    z-index: 999;
    border-radius: var(--waf-r) var(--waf-r) 0 0;
    overflow: hidden;
    margin: 0;
  }
  .cnx-waf-sidebar.is-mobile-open { display: block; }
  .cnx-waf-fab { display: flex !important; }
  .cnx-waf-body.is-collapsed {
    max-height: 600px;
    opacity: 1;
    padding: 1rem;
  }
}
@media (min-width: 651px) {
  .cnx-waf-fab { display: none !important; }
}