/*************************************************************************
 *  Copyright (C) 2026 SecureFlag Limited
 *  All Rights Reserved.
 *
 * NOTICE: All information contained herein is, and remains the property
 * of SecureFlag Limited. The intellectual and technical concepts contained
 * herein are proprietary to SecureFlag Limited and may be covered by EU
 * and Foreign Patents, patents in process, and are protected by trade secret
 * or copyright law. Dissemination of this information or reproduction of this
 * material is strictly forbidden unless prior written permission is obtained
 * from SecureFlag Limited.
 */

/* ------------------------------------------------------------------ *
 * SMB signup redesign (dark theme).
 * Builds on login.css (shared .sfl-* design system). Adds only the
 * signup-specific pieces: two-column grid, dark country dropdown
 * (nya-bs-select), multi-line terms checkbox, password hints and the
 * reCAPTCHA. All AngularJS hooks (ng-model / ng-show / ng-click /
 * directives / form + field names) are untouched in the markup.
 * ------------------------------------------------------------------ */

/* AngularJS visibility helpers (guaranteed present even under ng-csp) */
[ng-cloak],
.ng-cloak,
.ng-hide {
  display: none !important;
}

/* Wider card to comfortably hold the multi-field form */
.sfl-card--wide {
  max-width: 560px;
}

/* Two-column field rows (name + password), collapse on small screens */
.sfl-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.sfl-grid2 .sfl-field {
  margin-bottom: 0;
}

/* Inline validation hint under a field */
.sfl-hint {
  margin-top: 8px;
  font-size: 13px;
  line-height: 18px;
  color: #ff9b9b;
}

/* Multi-line terms & conditions checkbox */
.sfl-terms.control {
  display: block;
  position: relative;
  margin: 0;
  padding: 2px 0 2px 34px;
  min-height: 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--sfl-text-subdued);
  cursor: pointer;
}
.sfl-terms .control_indicator {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.24);
}
.sfl-terms.control:hover input:not([disabled]):not(:checked) ~ .control_indicator {
  background: #ffffff;
}
.sfl-terms input:checked ~ .control_indicator,
.sfl-terms.control:hover input:not([disabled]):checked ~ .control_indicator {
  background: var(--sfl-blue);
  border-color: var(--sfl-blue);
}
.sfl-terms.control-checkbox .control_indicator:after {
  left: 9px;
  top: 5px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
}
.sfl-terms a {
  color: var(--sfl-blue);
}

/* reCAPTCHA */
.sfl-recaptcha {
  margin: 8px 0 20px;
}

/* Disabled submit button */
.sfl-btn:disabled,
.sfl-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.sfl-btn:disabled:hover,
.sfl-btn[disabled]:hover {
  background: var(--sfl-blue);
}

/* Small footer link inside the card */
.sfl-card-foot {
  margin: 20px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--sfl-text-subdued);
}
.sfl-card-foot a {
  color: var(--sfl-blue);
  font-weight: 500;
  text-decoration: none;
}
.sfl-card-foot a:hover {
  text-decoration: underline;
}

/* ---- Country dropdown (nya-bs-select) dark theme ---- *
 * Overrides the light styling from auth.min.css / lib.css. Scoped to
 * the card and marked !important because the base rules use !important. */
.sfl-card .nya-bs-select {
  display: block;
  width: 100% !important;
  padding: 0;
  margin: 0;
  list-style: none;
}
.sfl-card .nya-bs-select > .btn,
.sfl-card .nya-bs-select button.dropdown-toggle,
.sfl-card .nya-bs-select button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  min-height: 40px !important;
  height: auto !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  background-image: none !important;
  color: var(--sfl-text) !important;
  font-size: 16px !important;
  line-height: 24px !important;
  text-align: left !important;
  box-shadow: none !important;
}
.sfl-card .nya-bs-select button:hover,
.sfl-card .nya-bs-select button:focus,
.sfl-card .nya-bs-select.open > button {
  border-color: var(--sfl-blue) !important;
  background-color: rgba(255, 255, 255, 0.09) !important;
  outline: none !important;
}
.sfl-card .nya-bs-select .caret {
  border-top-color: rgba(255, 255, 255, 0.7);
}
/* Placeholder (nothing selected) */
.sfl-card .nya-bs-select button .filter-option:empty::before,
.sfl-card .nya-bs-select button > .pull-left:empty::before {
  content: "Select your country";
  color: var(--sfl-text-muted);
}
/* Dropdown menu */
.sfl-card .nya-bs-select .dropdown-menu {
  width: 100%;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #0b0e14;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  max-height: 280px;
  overflow-y: auto;
}
/* nya-bs-select nests the options as .dropdown-menu > ul.dropdown-menu.inner >
   li > a, so target li as a descendant (not a direct child) and strip the
   inner menu's own chrome so it doesn't paint Bootstrap's white background. */
.sfl-card .nya-bs-select .dropdown-menu .dropdown-menu.inner {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sfl-card .nya-bs-select .dropdown-menu li > a {
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--sfl-text-subdued);
  white-space: normal;
}
.sfl-card .nya-bs-select .dropdown-menu li > a:hover,
.sfl-card .nya-bs-select .dropdown-menu li > a:focus,
.sfl-card .nya-bs-select .dropdown-menu li.selected > a,
.sfl-card .nya-bs-select .dropdown-menu li.active > a {
  background: rgba(47, 111, 214, 0.24) !important;
  color: var(--sfl-text) !important;
}
.sfl-card .nya-bs-select .dropdown-menu .check-mark {
  color: var(--sfl-blue);
}
/* Live-search box inside the dropdown. Uses an opaque fill and !important so
   it can't fall through to Bootstrap's white .form-control (which rendered as
   white text on white). form-control is included to match the raised base
   specificity. */
.sfl-card .nya-bs-select .bs-searchbox {
  padding: 4px 4px 8px;
}
.sfl-card .nya-bs-select .bs-searchbox input,
.sfl-card .nya-bs-select .bs-searchbox input.form-control {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px;
  background: var(--sfl-input-bg-solid) !important;
  color: var(--sfl-text) !important;
  box-shadow: none !important;
  outline: none;
}
.sfl-card .nya-bs-select .bs-searchbox input::placeholder,
.sfl-card .nya-bs-select .bs-searchbox input.form-control::placeholder {
  color: var(--sfl-text-muted) !important;
}

/* ---- Responsive ---- */
@media screen and (max-width: 520px) {
  .sfl-grid2 {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 400px) {
  .sfl-recaptcha {
    transform: scale(0.9);
    transform-origin: left center;
  }
}