/** Shopify CDN: Minification failed

Line 188:0 Expected "}" to go with "{"

**/

/* =======================================================================
   SureCust – Contact Form (Dark/Glassy)
   Scoped to .SureCust-App so it only affects this app’s form
   ======================================================================= */

:root {
  /* Tweak these to match your brand */
  --sc-bg-blur: rgba(255, 255, 255, 0.06);    /* subtle glass fill */
  --sc-stroke: #2E8BC0;     /* light blue stroke */
  --sc-stroke-hover: #2E8BC0;
  --sc-text: #ffffff;                          /* field & header text */
  --sc-placeholder: #ffffff; /* placeholder/label tone */
  --sc-radius: 10px;
  --sc-fill: rgba(46, 139, 192, .2);   /* input background (semi-opaque) */
  --sc-fill-focus: rgba(46, 139, 192, 0.28);


  /* Button palette */
  --sc-btn-bg: #2E8BC0;                        /* light blue */
  --sc-btn-text: #ffffff;

  /* Spacing */
  --sc-gap: 16px;
  --sc-input-pad: 14px 16px;
}

/* Container around the form (your screenshot shows a dark image behind) */
.onst-registration-form-container-box.SureCust-App {
  color: var(--sc-text);
  background: transparent;        /* let theme background show through */
  border: none;
  max-width: 640px;
  margin: 0;                      /* align with section layout */
  padding: 0px;
  box-sizing: border-box;
}

/* Header: "Contact Us" + thin divider to the right */
.onst-registration-form-container-box.SureCust-App h2,
.onst-registration-form-container-box.SureCust-App .title {
  display: block !important;       /* Remove flex */
  text-align: left !important;     /* Align text left */
  justify-content: flex-start !important; /* Override any flex centering */
  margin-left: 0 !important;       /* Remove any auto margins */

}

.onst-registration-form-container-box.SureCust-App h2::after,
.onst-registration-form-container-box.SureCust-App .title::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(1px);
}

.onst-registration-form-container-box.SureCust-App {
  text-align: left !important;
}

/* Fields grid: single column (matches mockup) */
.onst-register-form-fields.SureCust-App {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sc-gap);
}

/* Hide default labels if you are using placeholders for "Name", "Company", etc. */
.SureCust-App .onst-field label,
.SureCust-App label {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Glassy inputs/textarea/select to match the screenshot */
.SureCust-App input[type="text"],
.SureCust-App input[type="email"],
.SureCust-App input[type="tel"],
.SureCust-App input[type="number"],
.SureCust-App input[type="url"],
.SureCust-App textarea,
.SureCust-App select {
  width: 100%;
  padding: 14px 16px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  color: #ffffff !important;
  background: var(--sc-fill) !important;                 /* removes the brown fill */
  border: 1px solid #2E8BC0 !important;               /* your blue */
  border-radius: 10px !important;    

}

/* Textarea taller */
.SureCust-App textarea {
  min-height: 150px;
  resize: vertical;
}

.SureCust-App ::placeholder {
  color: var(--sc-placeholder);
}

/* Focus glow */
.SureCust-App input:focus,
.SureCust-App textarea:focus,
.SureCust-App select:focus {
  outline: none;
  border-color: var(--sc-stroke-hover); 
  background: var(--sc-fill-focus);
}

/* Submit button (light-blue pill) */
.onst-custom-form-submit.button.btn {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding: 10px 18px;
  border-radius: 12px 0px 12px 0px !important;
  background: var(--sc-btn-bg);
  color: var(--sc-btn-text);
  box-shadow: var(--sc-shadow);
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
  font-size: 16px !important;
  cursor: pointer;
  transition: background .2s ease, transform .06s ease, box-shadow .2s ease;
}


.onst-custom-form-submit.button.btn {
  margin-left: auto !important; /* if the row is already flex, this alone can work */
}

.onst-custom-form-submit.button.btn:hover {
  background: var(--sc-btn-bg-hover);
}

.onst-custom-form-submit.button.btn:active {
  transform: translateY(1px);
}

/* Success message (subtle, not dominant) */
.onst-success-message {
  margin-top: 12px;
  color: #2E8BC0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(173, 197, 220, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
}

/* Make the heading left-aligned */
.onst-registration-form h2.title {
  display: block !important;      /* ensure it's a block, not flex */
  text-align: left !important;    /* align text left */
  margin-top: 0px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  align-self: flex-start !important; /* if a flex parent is centering children */
  font-family: 'Maven Pro', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important
}

/* If the parent container is centering everything, cancel that */
.onst-registration-form {
  text-align: left !important;
}

@media (max-width: 640px) {
  .onst-registration-form h2.title {
    margin-top: 0px !important;
  }