/**
 * Styling for the "Link as Modal" variant of the add_block paragraph
 * (paragraph--add-block--default.html.twig).
 *
 * Everything here is scoped under .wso2-block-modal--styled, a marker class
 * only ever added by that one Twig branch, and the block_modal_form library
 * is only attached from that same branch. This lets a specific instance of
 * this paragraph (e.g. the "Request Training" modal on
 * /training/instructor-led-new-new) get a nicer look without affecting any
 * other place the same underlying block/form is reused (e.g. the Banner
 * paragraph's own "Request Training" modal on /training/instructor-led,
 * rendered by partials/banner/partners.html.twig instead of this file).
 *
 * Visually modeled on css/component/workshop-v2.css's
 * .contact-form-section.cWso2WorkshopRegisterForm rules, but targeting the
 * markup that Drupal\wsoform\Form\wso2TrainingRegistration actually renders
 * (.training-registration-form / .has-normal-label / default submit button)
 * rather than requiring changes to that shared form class.
 */

.wso2-block-modal--styled .modal-content {
  border: 0;
  border-radius: 15px;
  overflow: hidden;
}

/*
 * This modal doesn't use Bootstrap's own "modal-dialog-scrollable" class, so
 * with "modal-dialog-centered" a tall form simply overflows equally above
 * and below viewport center - pushing the top (heading + close button)
 * behind the fixed site header. Instead: stop vertical-centering, pin the
 * dialog a fixed distance below the header, and let only the body scroll
 * internally so the header/close button stay reachable.
 */
.wso2-block-modal--styled .modal-dialog.modal-dialog-centered {
  display: flex;
  align-items: flex-start;
  min-height: 0;
  margin-top: 6rem;
  margin-bottom: 1rem;
}

.wso2-block-modal--styled .modal-body {
  padding: 0.25rem 2.5rem 1.5rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}

/* Modal heading: "Request WSO2 Training" */
.wso2-block-modal--styled .modal-header {
  border-bottom: 0;
  padding: 1rem 2.5rem 0;
  align-items: center;
  min-height: 0;
}

.wso2-block-modal--styled .cFormTitle {
  margin: 0;
}

.wso2-block-modal--styled .cFormTitle h4 {
  font-size: 1.5rem !important;
  line-height: 2.5rem !important;
  margin: 10px 0 15px !important;
}

.wso2-block-modal--styled .form_title {
  font-weight: 500 !important;
}

.wso2-block-modal--styled .training-registration-form {
  padding: 0;
}

.wso2-block-modal--styled .training-registration-form .cWhiteBG {
  padding: 0;
}

.wso2-block-modal--styled .training-registration-form .form-control {
  width: 100%;
  color: #494848 !important;
  border: 1px solid #c2c3cb !important;
  height: 42px !important;
  border-radius: 0.25rem !important;
  background: #fff;
  box-shadow: none;
  padding-left: 0.75rem !important;
  font-size: 1rem !important;
}

.wso2-block-modal--styled .training-registration-form textarea.form-control {
  height: 68px !important;
  min-height: 0;
  padding-top: 0.4rem !important;
}

.wso2-block-modal--styled .training-registration-form .form-control:focus,
.wso2-block-modal--styled .training-registration-form select.form-control:focus {
  border-color: #86b7fe !important;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
}

/*
 * Floating labels, matching /contact's ".has-float-label" behavior
 * (css/component/contact.css lines ~140-160) rather than this form's own
 * plain ".has-normal-label" styling.
 *
 * contact.css relies on the CSS sibling combinator (input, then label,
 * then `~label` selects it) because the /contact form renders the <input>
 * before the <label>. wso2TrainingRegistration.php renders <label> before
 * <input> (Drupal's default field order), and that markup is shared with
 * the untouched old page, so it can't be reordered here. `:has()` gets the
 * same visual result without depending on DOM order or touching the PHP.
 */
.wso2-block-modal--styled .training-registration-form .error_parent {
  margin-bottom: 1.15rem;
}

/* Only expand the gap when this field actually has a validation error
   showing - keeps the default (no-error) layout tight enough to avoid a
   scrollbar on normal desktop screens, while still giving the error text
   enough room to clear the floated label of the row below it. A scrollbar
   appearing once errors are showing is fine. */
.wso2-block-modal--styled .training-registration-form .error_parent:has(label.error) {
  margin-bottom: 1.75rem;
}

.wso2-block-modal--styled .training-registration-form .has-normal-label .form-item {
  position: relative;
  margin-top: 0.9rem;
}

.wso2-block-modal--styled .training-registration-form .has-normal-label label:not(.error) {
  position: absolute;
  cursor: text;
  font-size: 85%;
  top: -0.9rem;
  left: 0.75rem;
  z-index: 3;
  line-height: 1;
  padding: 4px 1px 1px 1px;
  color: #999999;
  background-color: #ffffff;
  transition: all 0.2s;
  margin: 0;
  white-space: nowrap;
}

/* Required fields: "Label *" with a real space before the star, instead of
   relying on however core's ".form-required:after" content/spacing renders
   inside an absolutely-positioned, nowrap label. */
.wso2-block-modal--styled .training-registration-form .form-required::after {
  content: " *";
  color: #000000;
}

/* Empty + unfocused text/email/tel fields: sit like a placeholder inside
   the field instead of floating above it. :placeholder-shown never
   matches <select>, so select fields (Country, Training Mode, etc.) stay
   in the floated state above, same as on /contact. */
.wso2-block-modal--styled .training-registration-form .has-normal-label .form-item:has(.form-control:placeholder-shown:not(:focus)) label:not(.error) {
  font-size: 1rem;
  color: #494848;
  top: 0.7em;
}

.wso2-block-modal--styled .training-registration-form .cFieldError,
.wso2-block-modal--styled .training-registration-form label.error {
  display: block;
  color: #ff0000;
  font-size: 0.85rem;
  text-align: left !important;
  margin: 4px 0 0 !important;
  padding: 0 0 0 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

.wso2-block-modal--styled .training-registration-form .form-check-input {
  margin-top: 0.3rem;
}

.wso2-block-modal--styled .training-registration-form .form-check-input + label {
  font-size: 14.4px;
}

.wso2-block-modal--styled .training-registration-form .form-actions,
.wso2-block-modal--styled .training-registration-form [data-drupal-selector="edit-actions"] {
  margin-top: 0.5rem;
}

.wso2-block-modal--styled .training-registration-form input[type="submit"] {
  background-color: #ff6700 !important;
  color: #000 !important;
  padding: 10px 45px !important;
  border-radius: 320px !important;
  text-decoration: none !important;
  text-transform: none !important;
  width: auto;
  border: 0;
  margin-top: 0.5rem;
  display: inline-block;
  font-size: 1rem !important;
  font-weight: 400 !important;
  cursor: pointer;
}

.wso2-block-modal--styled .training-registration-form input[type="submit"]:hover {
  color: #fff !important;
  transition: all 0.3s ease;
}

.wso2-block-modal--styled .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}