.elementor-357 .elementor-element.elementor-element-42d4ce3{--display:flex;}.elementor-357 .elementor-element.elementor-element-b3b4bc7{--display:flex;}.elementor-357 .elementor-element.elementor-element-20b5275{--display:flex;}.elementor-357 .elementor-element.elementor-element-e788210{--display:flex;}.elementor-357 .elementor-element.elementor-element-1c2261c{--display:flex;}.elementor-357 .elementor-element.elementor-element-bcd4d59{--display:flex;}/* Start custom CSS for post-comments, class: .elementor-element-830ab45 *//* FSL Specs - Metallic Purple Comment Section */
#comments,
.comments-area,
.comment-respond {
  background: linear-gradient(145deg, #ffffff 0%, #f7f3ff 45%, #efe7ff 100%);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 22px;
  padding: 30px;
  margin-top: 35px;
  box-shadow:
    0 18px 45px rgba(91, 33, 182, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.95);
  position: relative;
  overflow: hidden;
}

#comments::before,
.comments-area::before,
.comment-respond::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.75) 45%,
    rgba(168,85,247,0.18) 55%,
    transparent 100%
  );
  pointer-events: none;
}

/* Heading */
.comment-reply-title,
.comments-title,
#reply-title {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 18px;
  background: linear-gradient(90deg, #3b0764, #8b5cf6, #c084fc, #4c1d95);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .3px;
}

/* Logged in text */
.logged-in-as,
.comment-notes {
  color: #4c1d95;
  font-weight: 600;
  margin-bottom: 15px;
}

.logged-in-as a {
  color: #7c3aed;
  font-weight: 700;
  text-decoration: none;
}

.logged-in-as a:hover {
  color: #4c1d95;
  text-decoration: underline;
}

/* Textarea */
.comment-form-comment textarea,
#comment {
  width: 100%;
  min-height: 190px;
  background: linear-gradient(145deg, #ffffff, #f3ecff);
  border: 2px solid rgba(124, 58, 237, 0.35);
  border-radius: 18px;
  padding: 18px 20px;
  color: #2e1065;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  box-shadow:
    inset 0 2px 10px rgba(76, 29, 149, 0.08),
    0 8px 24px rgba(139, 92, 246, 0.12);
  transition: all .35s ease;
}

.comment-form-comment textarea:focus,
#comment:focus {
  border-color: #8b5cf6;
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(139, 92, 246, 0.18),
    0 14px 35px rgba(91, 33, 182, 0.22);
}

#comment::placeholder {
  color: #8b5cf6;
}

/* Input fields */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%;
  background: #ffffff;
  border: 2px solid rgba(139, 92, 246, 0.28);
  border-radius: 14px;
  padding: 14px 16px;
  color: #2e1065;
  font-weight: 600;
  outline: none;
}

.comment-form input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

/* Metallic Button */
.form-submit input[type="submit"],
#submit {
  background: linear-gradient(
    135deg,
    #2e1065 0%,
    #6d28d9 25%,
    #a855f7 45%,
    #ffffff 50%,
    #8b5cf6 58%,
    #4c1d95 100%
  ) !important;
  background-size: 220% 220% !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 14px !important;
  padding: 14px 34px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 12px 28px rgba(91, 33, 182, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition: all .35s ease;
}

.form-submit input[type="submit"]:hover,
#submit:hover {
  background-position: right center !important;
  transform: translateY(-3px);
  box-shadow:
    0 18px 36px rgba(91, 33, 182, 0.45),
    0 0 20px rgba(168, 85, 247, 0.45);
}

/* Existing comments cards */
.comment-list .comment,
.comment-body {
  background: linear-gradient(145deg, #ffffff, #f5efff);
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 10px 26px rgba(91, 33, 182, 0.12);
}

.comment-author,
.comment-meta {
  color: #4c1d95;
  font-weight: 700;
}

.comment-content {
  color: #2e1065;
  font-size: 16px;
  line-height: 1.7;
}

/* Reply link */
.reply a {
  display: inline-block;
  background: linear-gradient(135deg, #ede9fe, #ffffff, #ddd6fe);
  color: #6d28d9;
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 800;
  text-decoration: none;
}

.reply a:hover {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #ffffff;
}

/* Mobile Fix */
@media (max-width: 768px) {
  #comments,
  .comments-area,
  .comment-respond {
    padding: 20px;
    border-radius: 18px;
  }

  .comment-reply-title,
  #reply-title {
    font-size: 22px;
  }

  .form-submit input[type="submit"],
  #submit {
    width: 100%;
    padding: 15px !important;
  }
}/* End custom CSS */