/* HRMS-specific additions on top of the extracted Saasbox stylesheet. */

/* Split-screen layout for the standalone Get Started / auth-style pages
   (website.layouts.auth), which render outside the normal navbar/footer
   chrome so the sign-up flow reads as a focused, full-height screen. */
html:has(.auth-split), .auth-body {
  height: 100%;
}
.auth-body {
  margin: 0;
  overflow-x: hidden;
}
@media only screen and (min-width: 992px) {
  html:has(.auth-split), .auth-body {
    overflow: hidden;
  }
}
.auth-split {
  display: flex;
  min-height: 100vh;
}
@media only screen and (min-width: 992px) {
  .auth-split {
    height: 100vh;
  }
}
.auth-split-visual {
  position: relative;
  flex: 0 0 45%;
  display: none;
  overflow: hidden;
}
@media only screen and (max-width: 991.98px) {
  .auth-split-visual {
    display: none !important;
  }
}
@media only screen and (min-width: 992px) {
  .auth-split-visual {
    display: block;
  }
}

/* Plain (image-free) visual panel: dark navy/black – same tone as the
   admin login page left panel – with soft glow circles, white headline
   copy, and a frosted icon feature list. */
.auth-split-visual-plain {
  background: linear-gradient(160deg, #0d0d1a 0%, #14122e 55%, #1c1a3a 100%);
  padding: 2rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.auth-split-visual-plain::before,
.auth-split-visual-plain::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.auth-split-visual-plain::before {
  width: 24rem;
  height: 24rem;
  right: -9rem;
  top: -8rem;
}
.auth-split-visual-plain::after {
  width: 16rem;
  height: 16rem;
  left: -6rem;
  bottom: -4rem;
  background: rgba(255, 193, 7, 0.12);
}
.auth-split-visual-plain .hrms-brand-dark,
.auth-split-visual-plain .hrms-brand-dark:hover {
  color: #fff;
}
.auth-split-visual-plain .ai-badge {
  align-self: flex-start;
  margin-bottom: 0 !important;
}
.auth-split-heading {
  position: relative;
  font-size: 2.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-top: 0.85rem;
  margin-bottom: 0.5rem;
}
.auth-split-heading span {
  color: #ffc107;
}
.auth-split-subheading {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  max-width: 26rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.auth-feature-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.auth-feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.auth-feature-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}
.auth-feature-list h4 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.2rem;
}
.auth-feature-list p {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.58);
  margin-bottom: 0;
}
.auth-feature-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.auth-feature-icon-purple { color: #c9bfff; }
.auth-feature-icon-blue { color: #a8d0ff; }
.auth-feature-icon-green { color: #a8f0d1; }
.auth-feature-icon-orange { color: #ffc107; }
.auth-split-form {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  overflow-y: auto;
  min-width: 0;
}
@media only screen and (min-width: 576px) {
  .auth-split-form {
    padding: 3rem 1.5rem;
  }
}
.auth-split-form-inner {
  width: 100%;
  max-width: 420px;
}

/* Below the 992px breakpoint the gradient feature panel is hidden entirely,
   so a compact brand mark takes its place at the top of the form panel
   (the full-size wordmark link further down in the form stays hidden here
   to avoid showing the HRMS logo twice on small screens). */
.hrms-brand.auth-desktop-brand {
  display: none !important;
}
.hrms-brand.auth-mobile-brand {
  display: inline-flex;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 992px) {
  .hrms-brand.auth-mobile-brand {
    display: none !important;
  }
  .hrms-brand.auth-desktop-brand {
    display: none !important;
  }
}
.auth-split-form-inner .form-label {
  font-weight: 700;
  color: #17153b;
}
.text-accent-purple {
  color: #6a4beb;
}

/* Leading-icon inputs on the Get Started form. */
.input-icon-group {
  position: relative;
}
.input-icon-group > i {
  position: absolute;
  left: 0.9rem;
  top: 1.35rem;
  transform: translateY(-50%);
  color: #9a97b8;
  pointer-events: none;
  z-index: 5;
}
.input-icon-group .form-control,
.input-icon-group .form-select {
  padding-left: 2.5rem;
  border-color: #a8a4c9;
}
.input-icon-group .form-control:focus,
.input-icon-group .form-select:focus {
  border-color: #6a4beb;
  box-shadow: 0 0 0 0.2rem rgba(106, 75, 235, 0.15);
}

/* Phone field: searchable country-code picker fused to the number input. */
.phone-input-group {
  display: flex;
}
.phone-input-group .form-control {
  flex: 1;
  min-width: 0;
  border-left: 0;
  border-color: #a8a4c9;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.phone-input-group .form-control:focus {
  border-color: #6a4beb;
  box-shadow: 0 0 0 0.2rem rgba(106, 75, 235, 0.15);
  z-index: 1;
  position: relative;
}

.country-code-picker {
  position: relative;
  flex: 0 0 auto;
}
.country-code-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  padding: 0 0.75rem;
  border: 1px solid #a8a4c9;
  border-right: 0;
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  background: #fff;
  color: #17153b;
  font-size: 0.9rem;
  white-space: nowrap;
}
.country-code-toggle i {
  font-size: 0.7rem;
  color: #9a97b8;
  margin-left: 0.1rem;
}
.country-code-toggle[aria-expanded="true"] {
  border-color: #6a4beb;
  box-shadow: 0 0 0 0.2rem rgba(106, 75, 235, 0.15);
  position: relative;
  z-index: 1;
}
.country-code-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  width: 18rem;
  max-width: 80vw;
  background: #fff;
  border: 1px solid #e6e8f7;
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2.5rem rgba(23, 21, 59, 0.15);
  z-index: 20;
  overflow: hidden;
}
.country-code-search {
  position: relative;
  padding: 0.6rem;
  border-bottom: 1px solid #eef0fb;
}
.country-code-search i {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9a97b8;
  font-size: 0.85rem;
}
.country-code-search input {
  width: 100%;
  border: 1px solid #e6e8f7;
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem 0.4rem 2rem;
  font-size: 0.85rem;
  outline: none;
}
.country-code-search input:focus {
  border-color: #6a4beb;
}
.country-code-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  max-height: 15rem;
  overflow-y: auto;
}
.country-code-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.country-code-option:hover {
  background: #f1f0fb;
}
.country-code-option-name {
  flex: 1;
  color: #17153b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.country-code-option-dial {
  color: #6a6a8a;
}
.country-code-empty {
  padding: 0.75rem;
  text-align: center;
  color: #9a97b8;
  font-size: 0.85rem;
}

/* .service-area ships with no padding of its own anywhere in the extracted
   stylesheet — every page that uses it relies on padding that was never
   actually defined, leaving content flush against the section edges (most
   visible on .bg-gray variants like the "Related modules" block, where the
   heading sits hard against the top of the gray band). */
.service-area {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.module-screenshot-frame {
  padding: 0.75rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1rem 3rem rgba(15, 30, 150, 0.125);
}
.module-screenshot-frame img {
  width: 100%;
  display: block;
  border: 1px solid #eef0fb;
}

.module-pager-link {
  border-color: #eef0fb !important;
  transition: all 250ms ease;
}
.module-pager-link:hover {
  border-color: #0d6efd !important;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 30, 150, 0.1);
}

/* Offsets #anchor jumps so content doesn't land underneath the sticky header. */
.scroll-anchor {
  scroll-margin-top: 6rem;
}

/* The template's base .footer-area ships with no background color (only the
   unused .footer-2 modifier has one), so it renders transparent and the
   preceding CTA section's fixed background image shows through, making the
   two sections look like they overlap. Give the footer its own opaque
   background so it sits cleanly below the CTA in normal document flow. */
.footer-area {
  position: relative;
  z-index: 1;
  background-color: #f1f4fd;
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.page-header-area {
  height: auto !important;
  min-height: 380px !important;
  padding-top: 130px !important;
  padding-bottom: 60px !important;
}
@media only screen and (min-width: 768px) {
  .page-header-area {
    min-height: 340px !important;
    padding-top: 140px !important;
  }
}
@media only screen and (min-width: 992px) {
  .page-header-area {
    min-height: 380px !important;
    padding-top: 150px !important;
  }
}

.page-header-area .background-animation {
  display: none;
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1rem;
  border-radius: 50rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ai-badge i {
  color: #ffc107;
}

/* HRMS wordmark, replacing the template's raster logo images. */
.hrms-brand {
  display: inline-flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.hrms-brand:hover {
  color: #fff;
}
.hrms-brand-dark,
.hrms-brand-dark:hover {
  color: #17153b;
}
.hrms-brand-mark {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: #ffc107;
}

/* Neutral placeholder standing in for a real customer logo. */
.partner-logo-placeholder {
  width: 96px;
  height: 40px;
  border-radius: 8px;
  background: #eef0fb;
  color: #6a67a3;
  border: 1px solid #e6e8f7;
}

/* Neutral placeholders standing in for real HRMS screenshots. */
.screenshot-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: repeating-linear-gradient(135deg, #eef0fb, #eef0fb 10px, #e6e8f7 10px, #e6e8f7 20px);
  color: #6a67a3;
  text-align: center;
}

.avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #e6e8f7;
  color: #6a67a3;
  font-weight: 700;
}

/* .feedback-card .client-info .client-thumb span (style.css) targets every
   span inside the thumb, including this placeholder avatar, and applies
   16px absolute-positioned "badge" styling meant for a small overlay icon.
   Override so the placeholder fills its circle instead of shrinking to a
   corner badge. Also override the template's fixed 40px thumb sizing so it
   matches the 48px circle set inline in the markup. */
.feedback-card .client-info .client-thumb {
  flex: 0 0 48px;
  max-width: 48px;
  width: 48px;
  background-color: transparent;
  overflow: hidden;
}
.feedback-card .client-info .client-thumb span.avatar-placeholder {
  position: static;
  width: 100%;
  height: 100%;
  top: auto;
  right: auto;
}

/* Modules mega menu (desktop only — falls back to the template's plain
   dropdown list behaviour on mobile via the collapse nav). */
@media only screen and (min-width: 992px) {
  .header-area .navbar-nav li.mega-dropdown.sb-dropdown .sb-dropdown-menu.mega-menu {
    width: 56rem;
    max-width: 92vw;
    padding: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .mega-menu-inner {
    display: flex;
    padding: 1.5rem;
    gap: 1.5rem;
    max-height: 26rem;
  }

  .mega-menu-col.mega-menu-list {
    flex: 0 0 13rem;
    border-right: 1px solid #eef0fb;
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
  }

  .mega-menu-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #17153b;
    cursor: pointer;
    outline: none;
  }
  .mega-menu-list-item i {
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 200ms;
  }
  .mega-menu-list-item:hover,
  .mega-menu-list-item.active {
    background-color: #fdeeea;
    color: #ff6a4d;
  }
  .mega-menu-list-item:hover i,
  .mega-menu-list-item.active i {
    opacity: 1;
  }

  .mega-menu-col.mega-menu-grid.mega-menu-panel {
    display: none;
    flex: 1;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
    align-content: start;
    overflow-y: auto;
  }
  .mega-menu-col.mega-menu-grid.mega-menu-panel.active {
    display: grid;
  }

  .mega-menu-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.5rem;
  }
  .mega-menu-feature:hover {
    background-color: #f7f8fd;
  }
  .mega-menu-feature-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    background: #eef0fb;
    color: #0d6efd;
    font-size: 1.1rem;
  }
  .mega-menu-feature-title {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: #17153b;
  }
  .mega-menu-feature-desc {
    display: block;
    font-size: 0.75rem;
    color: #8480ae;
    line-height: 1.3;
  }

  .mega-menu-footer {
    border-top: 1px solid #eef0fb;
    padding: 0.85rem 1.5rem;
    text-align: right;
  }
  .mega-menu-footer a {
    font-weight: 600;
    font-size: 0.85rem;
    color: #0d6efd;
  }
}

/* Header Navbar Login Button */
.btn-nav-login {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 700;
  padding: 0.38rem 1.1rem;
  border-radius: 50rem;
  transition: all 250ms ease;
  backdrop-filter: blur(4px);
  font-size: 0.875rem;
}
.btn-nav-login:hover {
  color: #17153b !important;
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

/* Sticky Navbar state */
.header-area.sticky .btn-nav-login {
  color: #17153b !important;
  background: #f1f4fd;
  border-color: #e2e8f0;
}
.header-area.sticky .btn-nav-login:hover {
  color: #ffffff !important;
  background: #170c3a;
  border-color: #170c3a;
}

/* User Font Weight Override */
.fw-bold {
  font-weight: 700 !important;
}

/* Legal Portal Styling */
.bg-soft-primary { background-color: rgba(13, 110, 253, 0.08) !important; }
.bg-soft-info { background-color: rgba(13, 202, 240, 0.1) !important; }
.bg-soft-warning { background-color: rgba(255, 193, 7, 0.12) !important; }
.font-size-14 { font-size: 0.875rem !important; }
.font-size-13 { font-size: 0.8125rem !important; }
.font-size-12 { font-size: 0.75rem !important; }
.font-size-11 { font-size: 0.6875rem !important; }
.space-y-2 > * + * { margin-top: 0.5rem; }

.legal-control-card {
  border-color: #e2e8f0 !important;
  background: #ffffff;
}

.legal-tab-btn {
  transition: all 200ms ease;
  font-size: 0.875rem;
}
.legal-tab-btn:hover {
  transform: translateY(-1px);
}

.legal-toc-nav {
  max-height: calc(80vh - 120px);
  overflow-y: auto;
  padding: 0.5rem 0;
}
.legal-toc-nav .nav-link {
  padding: 0.6rem 1rem;
  color: #4a5568;
  font-size: 0.85rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 150ms ease;
}
.legal-toc-nav .nav-link:hover {
  color: #0d6efd;
  background-color: #f8fafc;
}
.legal-toc-nav .nav-link.active {
  color: #0d6efd;
  font-weight: 700;
  border-left-color: #0d6efd;
  background-color: rgba(13, 110, 253, 0.06);
}
.legal-toc-nav .toc-num {
  font-family: monospace;
  font-weight: 600;
  color: #a0aec0;
  margin-right: 0.4rem;
}
.legal-toc-nav .nav-link.active .toc-num {
  color: #0d6efd;
}

.legal-document-body {
  line-height: 1.7;
  color: #2d3748;
}
.legal-document-body p {
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}
.legal-section {
  position: relative;
}
.section-anchor-icon {
  opacity: 0;
  transition: opacity 150ms ease;
}
.legal-section:hover .section-anchor-icon {
  opacity: 1;
}

/* Live Search Match Highlight */
mark.highlight-search-term {
  background-color: #fff3cd;
  color: #856404;
  padding: 0.1em 0.3em;
  border-radius: 0.25em;
  font-weight: 700;
}

/* Print Styles */
@media print {
  .header-area, .footer-area, .legal-control-card, .legal-toc-wrapper, #scrollTopButton, .cookiealert {
    display: none !important;
  }
  .col-lg-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .legal-document-body {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* Enhanced Footer Newsletter Box & Social Buttons */
.footer-newsletter-box {
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  background: #ffffff;
  border: 1px solid #dce2f0 !important;
}
.footer-newsletter-box:focus-within {
  border-color: #f59e0b !important;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.22) !important;
  transform: translateY(-1px);
}
.footer-newsletter-box .form-control {
  color: #1e293b;
}
.footer-newsletter-box .form-control::placeholder {
  color: #94a3b8;
}

/* Social Buttons */
.footer-social-icon {
  gap: 0.5rem;
}
.footer-social-icon .social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  color: #475569;
  font-size: 1.05rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none !important;
}

.footer-social-icon .social-btn:hover {
  transform: translateY(-3px) scale(1.06);
  color: #ffffff;
}

/* Social Button Brand Color Overrides */
.footer-social-icon .social-fb:hover {
  background: #1877f2;
  border-color: #1877f2;
  box-shadow: 0 6px 16px rgba(24, 119, 242, 0.35);
}
.footer-social-icon .social-tw:hover {
  background: #0f1419;
  border-color: #0f1419;
  box-shadow: 0 6px 16px rgba(15, 20, 25, 0.35);
}
.footer-social-icon .social-ig:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: #dc2743;
  box-shadow: 0 6px 16px rgba(220, 39, 67, 0.35);
}
.footer-social-icon .social-li:hover {
  background: #0a66c2;
  border-color: #0a66c2;
  box-shadow: 0 6px 16px rgba(10, 102, 194, 0.35);
}

/* Enhanced Module Card Explore Button & Global Button Styling */
.btn-explore-module {
  background: linear-gradient(135deg, #170c3a 0%, #2b1464 50%, #4338ca 100%);
  color: #ffffff !important;
  border: none;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(23, 12, 58, 0.25) !important;
}

.btn-explore-module:hover,
.btn-explore-module:focus {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #4338ca 100%);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.38) !important;
}

.btn-explore-module .btn-arrow-icon {
  transition: transform 200ms ease;
}

.btn-explore-module:hover .btn-arrow-icon {
  transform: translateX(4px);
}

/* Global Outline Primary Button Polish */
.btn-outline-primary {
  color: #2563eb;
  border: 1.5px solid #2563eb !important;
  font-weight: 700;
  background-color: transparent;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.3) !important;
}