/*
 * The partner's five-step form (premiumDesign) — its OWN stylesheet.
 *
 * The form is one partial (partials/partner/registration-form) rendered by two
 * screens that sit in different shells: the public registration page (layouts/app,
 * which loads frontend.css) and the partner area's Company Profile → Update Details
 * (partner/layouts/master, which does not). These rules used to live in
 * frontend.css, so the partner-area copy rendered with an unskinned select2 and a
 * dead step rail. The partial pushes this file itself now — the same rule its
 * scripts already follow — so wherever the form is rendered next, it arrives dressed.
 *
 * Everything below was written for the design's own markup: it themes what select2
 * REPLACES and adds the affordances the JS classes imply. The design's delivery
 * (premiumDesign/css/*) is untouched.
 */

/* Editing — Save Changes sits beside Next for the whole form (a complete record can
 * be saved from any step), so the pair needs a gap the design's single footer button
 * never needed, and room to stack when the column is narrow. */
.partner-registration-white-main-div .button-footer #btn-save {
  margin-left: 12px;
}
@media screen and (max-width: 575px) {
  .partner-registration-white-main-div .button-footer #btn-save {
    margin-left: 0;
    margin-top: 10px;
  }
}

/* Partner registration — "Services Offered" select2 multi-select.
 * The site loads select2 globally but only themes it for the booking widget, so
 * give the partner form its own theme that matches .partner-registration-form
 * .form-select (54px box, #DADADA border, 5px radius) and grows for multiple
 * chips. Scoped to the partner form so the home/booking select2 is untouched. */
.partner-registration-form .select2-container {
  width: 100% !important;
}

/* Partner registration — "Country of Registration" select2 single-select
 * (the shared <x-geo-select> picker). select2 REPLACES the native control with its
 * own box, so without this the field would drop the .form-select theming and sit
 * shorter/thinner than the inputs beside it. Every value below is the one
 * .partner-registration-form .form-select / .form-control already use, so the
 * field looks identical to its neighbours in every state.
 * 52px = the 54px box minus its 1px borders, which vertically centres the text. */
.partner-registration-form .select2-container--default .select2-selection--single {
  height: 54px;
  background-color: #FFFFFF;
  border: 1px solid #DADADA;
  border-radius: 5px;
}
.partner-registration-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 52px;
  /* 12px left matches .form-select's padding; 30px right keeps the value clear of
     the caret (select2's arrow column is 20px wide). */
  padding-left: 12px;
  padding-right: 30px;
  color: #000;
  font-size: 18px;
  font-weight: 500;
}
.partner-registration-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #A3A3A3;
}
.partner-registration-form .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 52px;
}
/* Focus/open ring: the same one .form-control:focus / .form-select:focus use, so
   focusing the country field looks like focusing any other field on this form. */
.partner-registration-form .select2-container--default.select2-container--focus .select2-selection--single,
.partner-registration-form .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #8B6E3C;
  box-shadow: 0 0 0 0.25rem rgba(139, 110, 60, 0.25);
  outline: 0;
}
.partner-registration-form .select2-container--default .select2-selection--multiple {
  min-height: 54px;
  background-color: #FFFFFF;
  border: 1px solid #DADADA;
  border-radius: 5px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.partner-registration-form .select2-container--default.select2-container--focus .select2-selection--multiple,
.partner-registration-form .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: #B78E56;
  outline: 0;
}
.partner-registration-form .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  width: 100%;
}
.partner-registration-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
  /* Flex lays the remove button + label side by side so they never overlap
     (select2 4.1 absolutely-positions the remove button by default). */
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 10px;
  background-color: #FBFAF6;
  border: 1px solid #B78E56;
  border-radius: 4px;
  color: #000;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}
.partner-registration-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: static;
  order: 1;            /* show the × after the label */
  margin: 0 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #B78E56;
  font-size: 16px;
  line-height: 1;
}
.partner-registration-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: transparent;
  color: #8a6a3e;
}
.partner-registration-form .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding: 0;          /* default leaves room for the absolute × — not needed with flex */
}
.partner-registration-form .select2-container--default .select2-search--inline .select2-search__field {
  margin: 0;
  height: 28px;
  font-size: 16px;
}
.partner-registration-form .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: #A3A3A3;
  font-size: 18px;
  font-weight: 500;
}
/* Invalid state — JS adds .select2-invalid to the container (see highlight()). */
.partner-registration-form .select2-container.select2-invalid .select2-selection--multiple,
.partner-registration-form .select2-container.select2-invalid .select2-selection--single {
  border-color: #dc3545;
}

/* Partner registration — after a successful submit the application is read-only,
 * so the step sidebars (desktop + mobile) are locked: no clicking back to a step,
 * default cursor so it no longer looks interactive. JS adds .steps-locked and also
 * guards the click handler (see partner-registration.js). */
.partner-registration-white-main-div .sidebar-steps.steps-locked,
.partner-registration-white-main-div .sidebar-steps-mobile.steps-locked {
  pointer-events: none;
}
.partner-registration-white-main-div .sidebar-steps.steps-locked .step-item,
.partner-registration-white-main-div .sidebar-steps-mobile.steps-locked .sidebar-steps-mobile-box {
  cursor: default;
}

/* Partner registration footer — mobile.
 * On the final step the "View My Application" button (#view-application-btn) is
 * shown while "Previous" is hidden (see partner-registration.js), leaving the
 * long-label anchor stuck in a .col-6 (50% width) where the text wrapped/broke.
 * Give that column the footer's full width and centre the button so the label
 * stays on one line. Scoped with :has() so it only triggers when the button is
 * visible — the Prev/Next side-by-side layout on other steps is untouched. */
@media screen and (max-width: 767px) {
  .partner-registration-white-main-div .button-footer .col-6:has(#view-application-btn:not(.d-none)) {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center !important;
  }
  .partner-registration-white-main-div #view-application-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
  }
}

/* Partner registration — clickable step indicators.
 * Steps the user has already reached are click-jumpable (partner-registration.js
 * adds the `clickable` class). Show that affordance with a pointer + a subtle hover
 * so users know they can jump straight to a completed step instead of clicking Next
 * repeatedly. Locked once the application is submitted (.steps-locked). */
.partner-registration-white-main-div .step-item.clickable,
.partner-registration-white-main-div .sidebar-steps-mobile-box.clickable {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.partner-registration-white-main-div .step-item.clickable:hover,
.partner-registration-white-main-div .sidebar-steps-mobile-box.clickable:hover {
  opacity: 0.85;
}
.partner-registration-white-main-div .step-item.clickable:hover .step-icon {
  background-color: #b89243;
  border-color: #b89243;
  color: #fff;   /* keep the check (fa-check) visible — white on gold, like active */
}
.partner-registration-white-main-div .steps-locked .step-item,
.partner-registration-white-main-div .steps-locked .sidebar-steps-mobile-box {
  cursor: default;
  opacity: 1;
}