/* Rounded FAQ card style for the WPBakery Toggle Panels element. */
div[data-style="rounded_faq"] {
  --rounded-faq-accent: #1267d6;
  --rounded-faq-border: #dce6f4;
  --rounded-faq-text: #0b2347;
}

body div[data-style="rounded_faq"] .toggle {
  position: relative;
  margin-bottom: 13px;
  overflow: hidden;
  border: 1px solid var(--rounded-faq-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(11, 35, 71, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body div[data-style="rounded_faq"] .toggle.open {
  border-color: #bcd4ff;
  box-shadow: 0 5px 14px rgba(18, 103, 214, 0.06);
}

body div[data-style="rounded_faq"] .toggle > .toggle-title a {
  min-height: 64px;
  padding: 20px 62px 20px 20px;
  color: var(--rounded-faq-text);
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

body div[data-style="rounded_faq"] .toggle > .toggle-title a:hover,
body div[data-style="rounded_faq"] .toggle.open > .toggle-title a {
  color: var(--rounded-faq-text);
  background: transparent;
}

body div[data-style="rounded_faq"] .toggle > .toggle-title a i {
  position: absolute;
  top: 50%;
  right: 19px;
  left: auto;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border: 0;
  border-radius: 9px;
  color: var(--rounded-faq-accent);
  background: #f0f5fd;
  font-size: 0;
}

body div[data-style="rounded_faq"] .toggle > .toggle-title a i:before,
body div[data-style="rounded_faq"] .toggle > .toggle-title a i:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  background: currentColor;
  transition: transform 0.2s ease;
}

body div[data-style="rounded_faq"] .toggle > .toggle-title a i:after {
  transform: rotate(90deg);
}

body div[data-style="rounded_faq"] .toggle.open > .toggle-title a i {
  color: #fff;
  background: var(--rounded-faq-accent);
}

body div[data-style="rounded_faq"] .toggle.open > .toggle-title a i:before {
  transform: rotate(45deg);
}

body div[data-style="rounded_faq"] .toggle.open > .toggle-title a i:after {
  transform: rotate(135deg);
}

body div[data-style="rounded_faq"] .toggle[data-inner-wrap="true"] > div {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body div[data-style="rounded_faq"] .toggle[data-inner-wrap="true"] > div .inner-toggle-wrap {
  padding: 0 62px 20px 20px;
  color: #5b7092;
  font-size: 16px;
  line-height: 1.7;
}

@media only screen and (max-width: 690px) {
  body div[data-style="rounded_faq"] .toggle > .toggle-title a {
    padding: 17px 55px 17px 16px;
  }

  body div[data-style="rounded_faq"] .toggle > .toggle-title a i {
    right: 15px;
  }

  body div[data-style="rounded_faq"] .toggle[data-inner-wrap="true"] > div .inner-toggle-wrap {
    padding: 0 16px 17px;
  }
}