/* sidebar-form.css - robust floating label + autofill fixes */

/* Root wrapper */
.sidebar-form-wrapper {
  background: #0a1a44;
  /* background: #223c81; */
  color: #fff;
  border-radius: 15px;
  overflow: hidden;
  max-width: 350px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  padding: 0;
}

/* image */
.sidebar-form-image img {
  width: 100%;
  display: block;
}

/* body */
.sidebar-form-body {
  padding: 16px 20px 22px;
}

/* heading */
.sidebar-form-wrapper h3 {
  color: #e6eefc;
  font-size: 20px;
  margin: 0 0 14px;
}

/* form-group base */
.sidebar-form-wrapper .form-group {
  position: relative;
  margin-bottom: 18px;
}

/* Inputs - force transparent + no UA boxes */
.sidebar-form-wrapper input,
.sidebar-form-wrapper textarea,
.sidebar-form-wrapper select {
  width: 100%;
  background: transparent !important;
  -webkit-appearance: none;
  appearance: none;
  color: #fff !important;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 10px 10px; /* more top padding so label sits above text */
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
  position: relative;
  z-index: 1;
}

/* placeholder visually hidden but available to screen readers */
.sidebar-form-wrapper input::placeholder,
.sidebar-form-wrapper textarea::placeholder {
  color: transparent;
}

/* label base */
.sidebar-form-wrapper label {
  position: absolute;
  left: 10px;
  top: 20px; /* aligns with input text baseline */
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  transition: all 0.18s ease;
  z-index: 4;
  background: transparent;
  padding: 0 6px;
}

/* floated state (works if wrapper has .filled or .focused OR input focus) */
.sidebar-form-wrapper .form-group.filled label,
.sidebar-form-wrapper .form-group.focused label,
.sidebar-form-wrapper input:focus + label,
.sidebar-form-wrapper textarea:focus + label,
.sidebar-form-wrapper input:not(:placeholder-shown) + label,
.sidebar-form-wrapper textarea:not(:placeholder-shown) + label {
  top: 6px;
  font-size: 12px;
  color: #2563eb;
}

/* also support floating when the label has .floating class (set by JS) */
.sidebar-form-wrapper label.floating {
  top: 6px;
  font-size: 12px;
  color: #2563eb;
}

/* textarea */
.sidebar-form-wrapper textarea {
  min-height: 88px;
  resize: vertical;
}

/* remove white autofill boxes and text color issues for Chrome/Edge/Safari */
.sidebar-form-wrapper input:-webkit-autofill,
.sidebar-form-wrapper textarea:-webkit-autofill,
.sidebar-form-wrapper select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  box-shadow: 0 0 0px 1000px transparent inset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-clip: padding-box !important;
}

/* take care of some vendor internal selectors */
.sidebar-form-wrapper input:-internal-autofill-selected,
.sidebar-form-wrapper input:-webkit-autofill,
.sidebar-form-wrapper textarea:-webkit-autofill {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* error messaging */
.sidebar-form-wrapper .wpcf7-not-valid-tip,
.sidebar-form-wrapper .wpcf7-response-output {
  color: #ff4d4f;
  font-size: 13px;
  margin-top: 6px;
  display: block;
}

/* responsive */
@media (max-width: 420px) {
  .sidebar-form-body {
    padding: 12px 14px 18px;
  }
  .sidebar-form-wrapper {
    max-width: 100%;
    border-radius: 0;
  }
  .sidebar-form-wrapper label {
    left: 8px;
    top: 16px;
  }
  .sidebar-form-wrapper input {
    padding-top: 16px;
  }
}
.form-group br {
  display: none;
}
/*white box*/
/* ---------- Floating label higher + autofill & selection fixes ---------- */

/* Adjust this if you want the floated label even higher/lower */
:root {
  --float-top: -15px; /* how high the label floats (smaller -> higher) */
  --input-top: 20px; /* normal label baseline (matches input padding-top) */
  --accent: #2563eb;
  --navy: #0a1a44;
}

/* ensure inputs/selects/textarea use brand bg when autofilled */
.sidebar-form-wrapper input,
.sidebar-form-wrapper textarea,
.sidebar-form-wrapper select {
  background: transparent !important;
  color: #fff !important;
  caret-color: #fff;
}

/* base label position */
.sidebar-form-wrapper .form-group label {
  left: 10px;
  top: var(--input-top);
  transition: all 0.16s ease;
}

/* Floated / active state (higher than before) */
.sidebar-form-wrapper .form-group.filled label,
.sidebar-form-wrapper .form-group.focused label,
.sidebar-form-wrapper input:focus + label,
.sidebar-form-wrapper textarea:focus + label,
.sidebar-form-wrapper label.floating {
  top: var(--float-top);
  font-size: 12px;
  color: var(--accent);
}

/* strong visual when focus (if you want label white while typing change color) */
.sidebar-form-wrapper .form-group.focused label {
  color: var(--accent);
}

/* remove native autofill background (Chrome/Edge/Safari) and force navy background */
.sidebar-form-wrapper input:-webkit-autofill,
.sidebar-form-wrapper input:-webkit-autofill:focus,
.sidebar-form-wrapper input:-webkit-autofill:hover,
.sidebar-form-wrapper textarea:-webkit-autofill,
.sidebar-form-wrapper textarea:-webkit-autofill:focus,
.sidebar-form-wrapper textarea:-webkit-autofill:hover,
.sidebar-form-wrapper select:-webkit-autofill,
.sidebar-form-wrapper select:-webkit-autofill:focus,
.sidebar-form-wrapper select:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0px 1000px var(--navy) inset !important; /* apply navy as inset */
  box-shadow: 0 0 0px 1000px var(--navy) inset !important;
  -webkit-text-fill-color: #ffffff !important; /* ensure text is white */
  background-clip: padding-box !important;
  transition: background-color 5000s ease-in-out 0s !important; /* prevent color flash */
}

/* also target edge / internal autofill selectors for robustness */
.sidebar-form-wrapper input:-internal-autofill-selected,
.sidebar-form-wrapper textarea:-internal-autofill-selected {
  background: transparent !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 0 0px 1000px var(--navy) inset !important;
}

/* Remove white background when user selects text (selection) — keeps selection subtle on navy */
.sidebar-form-wrapper input::selection,
.sidebar-form-wrapper textarea::selection,
.sidebar-form-wrapper select::selection {
  background: rgba(37, 99, 235, 0.18);
  color: #fff;
}

/* Force selects to look transparent (prevents native white background on some browsers) */
.sidebar-form-wrapper select {
  background: transparent !important;
  color: #fff !important;
  -webkit-appearance: none;
  appearance: none;
}

/* If a UA/extension still sets background on focus, override with !important */
.sidebar-form-wrapper input:focus,
.sidebar-form-wrapper textarea:focus,
.sidebar-form-wrapper select:focus {
  background: transparent !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/* small responsive tweak to keep label placement sane on small screens */
@media (max-width: 420px) {
  :root {
    --input-top: 16px;
    --float-top: 2px;
  }
  .sidebar-form-wrapper .form-group label {
    left: 8px;
  }
  .sidebar-form-wrapper input {
    padding-top: 16px;
  }
}
/* when the first field is floated, bump the heading down */
.sidebar-form-wrapper.first-field-floated h3,
.sidebar-form-wrapper.first-field-floated h3.side-form-heading {
  margin-bottom: 34px; /* adjust 28/32/36 px if you want smaller/larger gap */
  transition: margin-bottom 0.18s ease;
}

.wpcf7 input.wpcf7-form-control:not([type="submit"]):focus {
  border-top: none;
}
.sidebar-form-image img {
  margin-left: -20px;
}
.sidebar-form-wrapper h3 {
  text-align: center;
}

/* Submit button - full width, rounded, subtle shadow */
/* Strong override for the sidebar submit button — put this at end of your CSS file */
.sidebar-form-wrapper .submit-wrap .submit-btn,
.sidebar-form-wrapper .submit-btn,
.sidebar-form-wrapper input[type="submit"].submit-btn {
  background: #2563eb !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.14) !important;
}

/* Hover */
.sidebar-form-wrapper .submit-btn:hover {
  background: #1e40af !important;
}

.sidebar-form-wrapper .submit-wrap {
  margin-top: 14px;
}
.sidebar-form-wrapper .submit-btn,
.sidebar-form-wrapper input.submit-btn[type="submit"] {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: #2563eb !important; /* accent blue */
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.14);
  transition: background 0.18s ease, transform 0.06s ease, box-shadow 0.18s ease;
}

/* hover / active / focus */
.sidebar-form-wrapper .submit-btn:hover {
  background: #1e40af !important;
  transform: translateY(-1px);
}
.sidebar-form-wrapper .submit-btn:active {
  transform: translateY(0);
}
.sidebar-form-wrapper .submit-btn:focus {
  outline: none;
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.18),
    0 0 0 5px rgba(37, 99, 235, 0.08);
}

/* disabled state */
.sidebar-form-wrapper .submit-btn[disabled],
.sidebar-form-wrapper .submit-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* small screen tweak */
@media (max-width: 420px) {
  .sidebar-form-wrapper .submit-btn {
    padding: 12px;
    font-size: 15px;
    border-radius: 8px;
  }
}

.submit-wrap p {
  text-align: center;
}
.sidebar-form-wrapper .submit-btn,
.sidebar-form-wrapper input.submit-btn[type="submit"] {
  width: 80%;
}
.sidebar-form-wrapper .wpcf7-not-valid-tip {
  margin-left: 5%;
}
/* Strong override for the sidebar submit button — put this at end of your CSS file */
/* .sidebar-form-wrapper .submit-wrap .submit-btn,
.sidebar-form-wrapper .submit-btn,
.sidebar-form-wrapper input[type="submit"].submit-btn {
  background: #2563eb !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.14) !important;
}

.sidebar-form-wrapper .submit-btn:hover {
  background: #1e40af !important;
} */

/* keep error/success message inside the wrapper look */
.sidebar-form-wrapper .wpcf7-response-output {
  margin: 16px 20px !important;
  padding: 12px 14px !important;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
}

/* Error (orange/red border by default)
.sidebar-form-wrapper .wpcf7-not-valid-tip,
.sidebar-form-wrapper .wpcf7-response-output.wpcf7-validation-errors,
.sidebar-form-wrapper .wpcf7-response-output.wpcf7-acceptance-missing {
  background: rgba(255, 77, 79, 0.08);
  border: 1px solid #ff4d4f !important;
  color: #ff4d4f !important;
} */

/* Success */
.sidebar-form-wrapper .wpcf7-response-output.wpcf7-mail-sent-ok {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid #2563eb !important;
  color: #2563eb !important;
}
/*test css*/
/* Reduce field height (inputs + textarea) */
.sidebar-form-wrapper .form-group input,
.sidebar-form-wrapper .form-group textarea {
  padding-top: 10px; /* was ~18px */
  padding-bottom: 6px; /* was ~10px */
  font-size: 13px; /* slightly smaller text */
  margin-bottom: 10px; /* less vertical spacing */
}

/* Reduce textarea min height */
.sidebar-form-wrapper .form-group textarea {
  min-height: 60px; /* was 88px */
}

/* Shrink the image on top */
.sidebar-form-wrapper .sidebar-form-image img {
  max-height: 180px; /* shrink overall height */
  object-fit: cover; /* crop if necessary */
}

/* Field-specific error under inputs */
.sidebar-form-wrapper .wpcf7-not-valid-tip {
  color: #ff4d4f;
  font-size: 13px;
  margin-top: 6px;
  display: block;
}

/* General error/validation box */
.sidebar-form-wrapper .wpcf7-response-output.wpcf7-validation-errors,
.sidebar-form-wrapper .wpcf7-response-output.wpcf7-acceptance-missing {
  color: #ff4d4f;
  font-size: 13px;
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid #ff4d4f;
  border-radius: 6px;
  background: rgba(255, 77, 79, 0.08);
}

/* Success message */
.sidebar-form-wrapper .wpcf7-response-output.wpcf7-mail-sent-ok {
  color: #fff; /* white text */
  font-size: 13px;
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid #2563eb;
  border-radius: 6px;
  background: rgba(
    37,
    99,
    235,
    0.3
  ); /* blue background with some transparency */
}
.wpcf7 form.sent .wpcf7-response-output {
  color: white;
}
.sidebar-form-wrapper .wpcf7-not-valid-tip {
  margin-bottom: 10px;
}
.widget_block .form-group p:has(*) {
  margin-bottom: 0px !important;
}
.sidebar-form-wrapper .form-group input,
.sidebar-form-wrapper .form-group textarea {
  margin-bottom: 0px;
}
.sidebar-form-wrapper .form-group textarea {
  min-height: 50px;
}
.sidebar-form-wrapper .form-group {
  margin-bottom: 16px;
}
/* CF7 spinner adjustments */
.sidebar-form-wrapper .wpcf7-spinner {
  display: inline-block; /* keep it inline */
  vertical-align: middle; /* align with button */
  margin-left: 8px; /* small gap from button */
  position: relative;
  top: -1px; /* tiny adjust for vertical centering */
}

/* Hide spinner when not visible */
.sidebar-form-wrapper .wpcf7-spinner:not(.is-active) {
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
}
.sidebar-form-wrapper .sidebar-form-image img {
  margin-top: 10px;
}

.sidebar-form-wrapper .sidebar-form-image img {
  max-height: 150px;
  object-fit: cover;
  margin-top: 0px;
  margin-left: 0px;
}
.sidebar-form-wrapper h3 {
  text-align: center;
  margin-top: -10px;
  margin-bottom: 10px;
}

/*sticky sideabr*/
/* Make the entire right sidebar (image + form) sticky */
.sidebar-column {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 60px; /* adjust to sit below your fixed header */
  z-index: 60;
  /* align-self: start; if the parent is a grid/flex container */
  max-height: calc(100vh - 40px); /* avoid covering the whole viewport */
  overflow-y: auto; /* vertical scrolling only if needed */
  -webkit-overflow-scrolling: touch; /* smooth touch scrolling on iOS */
}

/* Don’t use sticky on smaller screens */
@media (max-width: 991px) {
  .sidebar-column {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* If you see overlap when logged in (WP admin bar) */
/* Custom scrollbar for sidebar */
.sidebar-column {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #999 #f1f1f1; /* thumb color | track color */
}

/* Chrome, Edge, Safari */
.sidebar-column::-webkit-scrollbar {
  width: 6px; /* adjust width here */
}

.sidebar-column::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.sidebar-column::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 10px;
}

/* Left Sidebar (Table of Content) scrollbar */
.toc-column {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #0073e6 #f1f1f1; /* thumb | track */
  scrollbar-color: #548fca #f1f1f1;
}

.toc-column::-webkit-scrollbar {
  width: 6px;
}

.toc-column::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.toc-column::-webkit-scrollbar-thumb {
  background-color: #0073e6; /* blue thumb */

  background-color: #548fca; /* blue thumb */
  border-radius: 10px;
}

/* Right Sidebar (Form) scrollbar */

.sidebar-column::-webkit-scrollbar {
  width: 6px;
}

.sidebar-column::-webkit-scrollbar-track {
  background: #f1f1f1;
  background: #315981;
}

.sidebar-column::-webkit-scrollbar-thumb {
  background-color: #ff6600; /* orange thumb */
  border-radius: 10px;
}
.sidebar-column {
  scrollbar-width: thin;
  scrollbar-color: #315981 #f1f1f1;
}

body.single-post .sidebar-column {
  position: sticky;
  top: var(--toc-top, 10px); /* 👈 same as TOC */
  max-height: calc(100vh - var(--toc-top, 120px) - 20px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 60;
}
body.single-post .sidebar-column {
  border-radius: 10px;
}

/* -------- SimpleBar on form wrapper ONLY -------- */

/* Ensure aside doesn't create native scrollbar */
.sidebar-column {
  /* allow natural flow; no overflow on aside itself */
  overflow: visible !important;
}

/* SimpleBar container = the form wrapper */
.sidebar-form-wrapper[data-simplebar] {
  /* this controls the visible scroll area for the form */
  max-height: calc(100vh - var(--toc-top, 120px) - 20px);
  overflow: visible !important; /* SimpleBar will handle internal scrolling */
  /* keep visual styling */
  border-radius: 12px;
}

/* Style SimpleBar track + thumb for the form */
.sidebar-form-wrapper .simplebar-track.simplebar-vertical {
  width: 6px;
  background: #315981; /* track color for form */
  border-radius: 6px;
}
.sidebar-form-wrapper .simplebar-scrollbar::before {
  background-color: #ff6600; /* form thumb color */
  border-radius: 6px;
  opacity: 1;
}

/* Make sure TOC still uses SimpleBar (if you keep it there) */
.toc-column .simplebar-track.simplebar-vertical {
  width: 6px;
  background: #f1f1f1;
  border-radius: 6px;
}
.toc-column .simplebar-scrollbar::before {
  background-color: #548fca;
  border-radius: 6px;
  opacity: 1;
}

/* Responsive: disable sticky / scrolling where needed */
@media (max-width: 991px) {
  .sidebar-column {
    position: static;
    max-height: none;
  }
  .sidebar-form-wrapper[data-simplebar] {
    max-height: none;
  }
}

/*new colro for scroll*/
/* Right form scrollbar */
.sidebar-form-wrapper .simplebar-track.simplebar-vertical {
  background: #000103; /* darker track */
}
.sidebar-form-wrapper .simplebar-scrollbar::before {
  background-color: #3ba9ff; /* bright blue thumb */
  background: #24364d; /* darker track */
}