/* ===== CONTACT FORM ===== */
/* Replaces Contact Form 7 styling on preserved Divi pages */
/* Review fix 2026-07-13 (round 2): no slate box anywhere — forms sit directly on
   their section background, like the old site's CF7 forms did. */
.contact-form-wrapper {
  background-color: transparent;
  border: none;
  padding: 30px;
  border-radius: 5px;
}

.contact-form {
  max-width: 100%;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 0;
}

.form-row .form-group {
  flex: 1;
}

.form-group {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  width: 100%;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: 'Lora', 'Open Sans', sans-serif;
  font-style: italic;
  font-size: 14px;
  color: #2d3e4f;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  line-height: 1.8;
  margin: 10px auto 20px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #21c2f8;
  box-shadow: 0 0 0 2px rgba(33, 194, 248, 0.15);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #999;
  font-style: italic;
}

/* Checkbox */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
}

.form-checkbox input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.contact-form-wrapper .form-checkbox label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

/* Contact Us is the one page whose form sits on a WHITE module —
   the default white checkbox label would vanish there. */
.page-id-115 .contact-form-wrapper .form-checkbox label {
  color: #666;
}

.form-checkbox label {
  font-size: 13px;
  color: #666;
  cursor: pointer;
}

.form-checkbox a {
  color: #21c2f8;
}

/* Submit button */
.form-submit {
  margin-top: 10px;
}

.form-submit .btn-submit {
  background-color: #2d3e4f;
  color: #21c2f8;
  border: 2px solid #21c2f8;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 15px 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 180px;
}

.form-submit .btn-submit:hover {
  background-color: #21c2f8;
  color: #fff;
}

.contact-form-wrapper .form-submit .btn-submit {
  background-color: transparent;
  border-color: #21c2f8;
  color: #21c2f8;
}

.contact-form-wrapper .form-submit .btn-submit:hover {
  background-color: #21c2f8;
  color: #fff;
}

/* Form messages */
.form-message {
  padding: 12px 16px;
  border-radius: 3px;
  margin-top: 15px;
  font-size: 14px;
  display: none;
}

.form-message.success {
  display: block;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.form-message.error {
  display: block;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* ===== REVIEW FIXES 2026-07-13 ===== */

/* Scroll-to-top arrow: match the site's light-blue accent (page CSS ships #0065fd).
   NB: this lives here, not in main.css — main.css is not linked on preserved pages. */
.et_pb_scroll_top.et-pb-icon {
  background: #2ea3f2 !important;
}

/* Accordion/FAQ toggle titles → Poppins sitewide (page CSS sets Raleway with
   module-level specificity, e.g. .et_pb_toggle_0.et_pb_toggle h6.et_pb_toggle_title). */
.et_pb_toggle .et_pb_toggle_title,
.et_pb_toggle h5.et_pb_toggle_title,
.et_pb_toggle h6.et_pb_toggle_title {
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
}

/* Social follow icons: uniform 32px boxes with an even 8px gap.
   Divi's legacy CSS gives facebook/twitter anchors a wider (52px) box. */
.et_pb_social_media_follow li a.icon {
  width: 32px !important;
  padding: 0 !important;
  margin-right: 8px !important;
}

.et_pb_social_media_follow li:last-child a.icon {
  margin-right: 0 !important;
}

/* X (formerly Twitter): ETmodules has no X glyph — draw it with a mask so it
   inherits the same color the other icon glyphs use (currentColor). */
.et_pb_social_media_follow li.et-social-x a.icon::before {
  /* Divi icon anchors are 0px tall — glyphs overflow via font metrics, so a
     %-sized box collapses. A 16px inline-block on the baseline matches the
     other 16px font glyphs' size and vertical placement. */
  content: '' !important;
  display: inline-block;
  width: 16px;
  height: 16px;
  /* neighbor glyph ink runs 1px below the baseline (measured); match it */
  vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/></svg>") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/></svg>") center / 16px 16px no-repeat;
}

/* Affiliate page: "Why partner with us?" blurbs — transparent boxes, Poppins text
   (page CSS paints them white via .et_pb_blurb_N.et_pb_blurb). */
.page-id-238592 .et_pb_section_1 .et_pb_blurb {
  background-color: transparent !important;
}

.page-id-238592 .et_pb_section_1 .et_pb_blurb .et_pb_module_header,
.page-id-238592 .et_pb_section_1 .et_pb_blurb .et_pb_blurb_description,
.page-id-238592 .et_pb_section_1 .et_pb_blurb .et_pb_blurb_description * {
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
}

/* Affiliate page FAQ accordion — built by build-preserve.js from the old flat text
   block; styled to match the Trade Copier page FAQ (white, blue bottom border,
   ETmodules +/− glyphs). Interactivity: delegated toggle handler in main.js. */
.affiliate-faq .et_pb_toggle {
  background-color: #fff;
  border-width: 0 0 1px;
  border-style: solid;
  border-bottom-color: #0c71c3;
  padding: 20px;
  margin-bottom: 10px;
}

.affiliate-faq .et_pb_toggle_title {
  cursor: pointer;
  position: relative;
  padding: 0 50px 0 0;
  font-weight: 500;
  color: #666;
}

.affiliate-faq .et_pb_toggle_open .et_pb_toggle_title {
  color: #333;
}

.affiliate-faq .et_pb_toggle_title::before {
  content: '\e050';
  font-family: 'ETmodules';
  font-weight: 400;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -0.5em;
  font-size: 16px;
  color: #ccc;
}

.affiliate-faq .et_pb_toggle_open .et_pb_toggle_title::before {
  content: '\e04f';
}

.affiliate-faq .et_pb_toggle_close .et_pb_toggle_content {
  display: none;
}

.affiliate-faq .et_pb_toggle_content {
  padding-top: 20px;
}

/* ===== LOADING SPINNER ===== */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
