@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

/* ─────────────────────────────────────────────────────────
   Color variables and base typography
   ───────────────────────────────────────────────────────── */
:root {
  --md-primary-fg-color:    #0C162D;
  --md-accent-fg-color:     #3FB6F7;
  --md-default-bg-color:    #FFFFFF;
  --md-typeset-color:       #000000;
  --md-footer-bg-color:     #F5F6FA;
}

body {
  font-family: 'DM Sans', sans-serif;
}

/* ─────────────────────────────────────────────────────────
   Tab bar styling only (we no longer force a white header)
   ───────────────────────────────────────────────────────── */
.md-tabs {
  background-color: #FFFFFF !important;
  color:            #0C162D !important;
}

/* ─────────────────────────────────────────────────────────
   Links, Buttons, Code blocks
   ───────────────────────────────────────────────────────── */
.md-typeset a {
  color: #3FB6F7;
}

.md-button {
  background-color: #0C162D;
  color:            #ffffff;
  border-radius:    4px;
}

.md-button:hover {
  background-color: #222;
}

.md-typeset code {
  background-color: rgba(12, 22, 45, 0.05);
  color:            #E54787;
}

/* ─────────────────────────────────────────────────────────
   Logo size in header (we’ll swap the src in JS)
   ───────────────────────────────────────────────────────── */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  display: block;
  height: 2.6rem;
  width:  auto;
}

/* ─────────────────────────────────────────────────────────
   Sidebar nav tweaks
   ───────────────────────────────────────────────────────── */
.md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item {
  padding:     5px;
  margin-left: 15px;
  font-size:   13px;
}

/* ─────────────────────────────────────────────────────────
   Custom UnoLock Footer Styles
   ───────────────────────────────────────────────────────── */
.unolock-footer-section {
  background-color: #1e1e28 !important;
  color:            #ffffff !important;
  padding:          3rem 0 2rem 0;
  margin-top:       1rem;
  border-top:       1px solid #333;
}

.unolock-footer-container {
  max-width: 1280px;
  margin:    0 auto;
  padding:   0 10px;
}

.unolock-footer-row {
  display:              grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:                   2rem;
  margin-bottom:         2rem;
}

.unolock-footer-col {
  display:        flex;
  flex-direction: column;
  align-items:    center !important; /* ← horizontally center everything */
  text-align:     center !important; /* ← center text */
}

.unolock-footer-brand {
  text-align: center;
}

.unolock-footer-logo {
  height:       60px;
  width:        auto;
  margin-bottom: 1rem;
}

.unolock-footer-divider {
  border:      none;
  border-top:  1px solid #ffffff;
  margin:      1rem 0;
  width:       100%;
}

.unolock-footer-social-title {
  font-weight: 600;
  margin-bottom: 1rem;
  color:       #ffffff;
}

.unolock-footer-social {
  display:       flex;
  justify-content: center;
  gap:           0.2rem;
  flex-wrap:     wrap;
}

.unolock-footer-social a {
  transition: opacity 0.3s ease;
}

.unolock-footer-social a:hover {
  opacity: 0.7;
}

.unolock-footer-social img {
  width:        30px;
  height:       30px;
  border-radius: 4px;
}

.unolock-footer-links {
  height: 100%;
}

.unolock-footer-list {
  display:      inline-block !important;
  margin:       0 auto !important;
  list-style: none;
  padding:    0;
  margin:     0;
}

.unolock-footer-list li {
  margin-bottom: 0.8rem;
}

.unolock-footer-list a {
  color:           #ffffff !important;
  text-decoration: none;
  transition:      color 0.3s ease;
  font-size:       14px;
  line-height:     1.5;
}

.unolock-footer-list a:hover {
  color: #3FB6F7 !important;
}

.unolock-footer-bottom {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  padding-top:      2rem;
  border-top:       1px solid #ffffff;
  flex-wrap:        wrap;
  gap:              1rem;
}

.unolock-footer-copyright p {
  margin: 0;
  color:  #ffffff;
  font-size: 14px;
}

.unolock-footer-copyright a {
  color:           #7163f1 !important;
  text-decoration: none;
}

.unolock-footer-copyright a:hover {
  text-decoration: underline;
}

.unolock-footer-payments {
  display:      flex;
  gap:          0.5rem;
  align-items:  center;
}

.unolock-footer-payments img {
  height: 24px;
  width:  auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .unolock-footer-row {
    grid-template-columns: 1fr;
    text-align:           center;
  }
  
  .unolock-footer-bottom {
    flex-direction: column;
    text-align:     center;
    gap:            1.5rem;
  }
  
  .unolock-footer-social {
    justify-content: center;
  }
}
/* always use a responsive grid with equal-width columns */
.unolock-footer-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

/* center every column’s content */
.unolock-footer-col {
  text-align: center;
}

/* medium screens: force exactly 2 columns per row */
@media (max-width: 992px) {
  .unolock-footer-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* small screens: stack into a single column */
@media (max-width: 576px) {
  .unolock-footer-row {
    grid-template-columns: 1fr !important;
  }
}


/* ─────────────────────────────────────────────────────────
   Sticky header + icon colour inversion
   ───────────────────────────────────────────────────────── */

/* 1) Header dark background by default */
.md-header {
  position:         sticky !important;
  top:              0;
  z-index:          1000;
  background-color: #1e1e28 !important;
  transition:       background-color 0.3s ease;
}

/* 2) Default (dark header) → invert icons white */
.md-header:not(.scrolled) .md-header__button.md-icon {
  filter: invert(1) !important;
}

/* 3) On scroll (light header) → switch BG to white */
.md-header.scrolled {
  background-color: #ffffff !important;
}

/* 4) On scroll (light header) → undo invert → icons black */
.md-header.scrolled .md-header__button.md-icon {
  filter: invert(0) !important;
}

/* ─────────────────────────────────────────────────────────
   Hide the “Knowledge Base” title in the header
   ───────────────────────────────────────────────────────── */
.md-header__title[data-md-component="header-title"] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────
   Dark‐mode search panel (when header is NOT scrolled)
   ───────────────────────────────────────────────────────── */
.md-header:not(.scrolled) .md-search {
  background-color: #1e1e28 !important;
}

.md-header:not(.scrolled) .md-search__inner {
  background-color: transparent !important;
}

/* input field styling */
.md-header:not(.scrolled) .md-search__input {
  background-color: rgba(255,255,255,0.1) !important;
  color:            #ffffff              !important;
  border:           1px solid rgba(255,255,255,0.6) !important;
}

/* placeholder text */
.md-header:not(.scrolled) .md-search__input::placeholder {
  color: rgba(255,255,255,0.7) !important;
}

/* search & clear icons in search panel */
.md-header:not(.scrolled) .md-search__icon.md-icon,
.md-header:not(.scrolled) .md-search__icon.md-icon svg,
.md-header:not(.scrolled) .md-search__icon.md-icon svg * {
  color: #ffffff !important;
  fill:  currentColor !important;
  stroke: currentColor !important;
  filter: none !important;
}
/* ─────────────────────────────────────────────────────────
   Logo inversion: white on dark header, black on light
   ───────────────────────────────────────────────────────── */

/* 1) Default (dark header) → invert the logo to white */
.md-header:not(.scrolled) .md-header__button.md-logo img {
  filter: brightness(0) invert(1) !important;
}

/* 2) Scrolled (light header) → remove the invert → original black logo */
.md-header.scrolled .md-header__button.md-logo img {
  filter: none !important;
}
/* ─────────────────────────────────────────────────────────
   Hide the logo in the mobile drawer & push content down
   ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  /* 1) Remove that logo button */
  .md-sidebar--primary .md-logo {
    display: none !important;
  }

  /* 2) Push the drawer’s inner content down by the header height */
  .md-sidebar--primary .md-sidebar__inner {
    padding-top: 4rem !important; /* match your header height */
  }
}
/* ─────────────────────────────────────────────────────────
   Align theme‐changer & search to the far right
   ───────────────────────────────────────────────────────── */
.md-header__inner {
  display:       flex !important;
  align-items:   center;
  /* let flex handle the spacing instead of the default grid */
}

/* push everything after the nav links to the right edge */
.md-header__option {
  margin-left:   auto !important;
}

/* add a little gap between the palette toggle and the search icon */
.md-header__button[for="__search"] {
  margin-left:   0.5rem !important;
}
/* ───────────────────────────────────────────────────────────────────
   Force white icons on the un-scrolled (dark) header
   ─────────────────────────────────────────────────────────────────── */
.md-header:not(.scrolled) label.md-header__button.md-icon,
.md-header:not(.scrolled) label.md-header__button.md-icon svg,
.md-header:not(.scrolled) label.md-header__button.md-icon svg path {
  /* Make sure nothing else can override these */
  fill:   #ffffff !important;
  stroke: #ffffff !important;
  color:  #ffffff !important;
  filter: none        !important;
}
/* ───────────────────────────────────────────────────────────────────
   Force black icons on the scrolled (light) header
   ─────────────────────────────────────────────────────────────────── */
.md-header.scrolled label.md-header__button.md-icon,
.md-header.scrolled label.md-header__button.md-icon svg,
.md-header.scrolled label.md-header__button.md-icon svg path {
  fill:   #0C162D !important;
  stroke: #0C162D !important;
  color:  #0C162D !important;
  filter: none        !important;
}
/* Language selector button - white on dark header, black on light header */
.md-header:not(.scrolled) .md-select__button.md-icon,
.md-header:not(.scrolled) .md-select__button.md-icon svg,
.md-header:not(.scrolled) .md-select__button.md-icon svg * {
  fill:   #ffffff !important;
  stroke: #ffffff !important;
  color:  #ffffff !important;
  filter: none !important;
  margin-right: 5px;
}

.md-header.scrolled .md-select__button.md-icon,
.md-header.scrolled .md-select__button.md-icon svg,
.md-header.scrolled .md-select__button.md-icon svg * {
  fill:   #0C162D !important;
  stroke: #0C162D !important;
  color:  #0C162D !important;
  filter: none !important;
  margin-right: 5px;
}
/* When header is dark (not scrolled), force the search icon black */
.md-header:not(.scrolled) .md-search__icon.md-icon,
.md-header:not(.scrolled) .md-search__icon.md-icon svg,
.md-header:not(.scrolled) .md-search__icon.md-icon svg * {
  color: #ffffff !important;
  fill:  currentColor !important;
  stroke: currentColor !important;
  filter: none !important;
}
/* Dark header → black search input */
.md-header:not(.scrolled) .md-search__input {
  background-color: rgba(0, 0, 0, 0.5) !important;
  color:            #000000 !important;
  border:           1px solid rgba(0, 0, 0, 0.6) !important;
}

/* Hide the palette (theme) toggle */
.md-header__option[data-md-component="palette"] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────
   Navigation drawer title link styling
   ───────────────────────────────────────────────────────── */
.md-nav__title-link {
  color: inherit !important;
  text-decoration: none !important;
  display: inline-block;
  transition: color 0.3s ease;
}

.md-nav__title-link:hover {
  color: #3FB6F7 !important;
}

.md-nav__title-link:focus {
  outline: none;
}

/* Hide scrollbars in modals */
.modal p::-webkit-scrollbar {
  display: none;
}

/* Partner Program Modal Specific Styles */
.partner-modal {
  height: auto !important;
  max-height: 600px !important;
  min-height: 500px !important;
}

.partner-modal-logo {
  width: 125px !important;
}

.partner-modal-text {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex-grow: 1 !important;
  padding: 0 30px !important;
  margin: 15px 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.partner-modal-text::-webkit-scrollbar {
  display: none !important;
}

.partner-modal-buttons {
  margin-bottom: 20px !important;
  text-align: center !important;
  display: block !important;
}

.partner-modal-buttons .modal-close-button {
  display: inline-block !important;
  margin: 0 5px !important;
  vertical-align: top !important;
}

/* ─────────────────────────────────────────────────────────
   Bluesky Modal Styles
   ───────────────────────────────────────────────────────── */

/* Bootstrap-like utility classes */
.bg-default-black {
  background-color: #1e1e28 !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.text-white {
  color: #fff !important;
}

.border-0 {
  border: 0 !important;
}

/* Modal overlay */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Modal content structure */
.modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  height: 345px;
  pointer-events: auto;
  background-color: #1e1e28;
  background-clip: padding-box;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

/* Modal header */
.modal h2 {
  font-size: 20px;
  margin: 0 0 15px 0;
  color: #fff;
  padding: 20px 30px 0 30px;
}

/* Modal icon */
.modal-icon {
  margin: 10px 0;
  text-align: center;
}

/* Modal body/content */
.modal p {
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
  margin: 15px 0;
  padding: 0 30px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal footer/close button */
.modal-close-button {
  z-index: 1;
  height: 45px;
  border: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 45px;
  padding: 0px 30px;
  border-radius: 0px;
  position: relative;
  text-align: center;
  font-family: 'DM Sans';
  background-color: #000000;
  transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  margin: 20px auto 30px auto;
  display: block;
  width: auto;
  min-width: fit-content;
}

.modal-close-button:hover {
  background-color: #ffffff;
  color: #000000;
}

.modal-close-button:not(:disabled) {
  cursor: pointer;
}

/* Close button (X) */
.close-button {
  position: absolute;
  top: 15px;
  right: 20px;
  background: transparent;
  color: #fff;
  font-size: 24px;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  opacity: 0.7;
}

/* Responsive modal */
@media (max-width: 768px) {
  .modal {
    max-width: 90vw;
    height: auto;
    min-height: 300px;
    margin: 20px;
  }
}

@media screen and (max-width: 767px) {
  .modal-close-button {
    height: 40px;
    font-size: 13px;
    line-height: 40px;
    padding: 0px 22px;
  }
}

@media screen and (max-width: 580px) {
  .modal-close-button {
    height: 35px;
    font-size: 12px;
    line-height: 35px;
    padding: 0px 20px;
  }
}

@media (max-width: 576px) {
  .modal {
    max-width: 95vw;
    height: auto;
    min-height: 280px;
    margin: 15px;
  }
  
  .modal h2 {
    font-size: 18px;
    padding: 15px 20px 0 20px;
  }
  
  .modal p {
    padding: 0 20px;
    font-size: 13px;
  }
  
  .modal-close-button {
    margin: 15px 20px 20px 20px;
  }
}

/* ─────────────────────────────────────────────────────────
   Navigation drawer title link styling
   ───────────────────────────────────────────────────────── */
.md-nav__title-link {
  color: inherit !important;
  text-decoration: none !important;
  display: inline-block;
  transition: color 0.3s ease;
}

.md-nav__title-link:hover {
  color: #3FB6F7 !important;
}

.md-nav__title-link:focus {
  outline: none;
}

/* Hide scrollbars in modals */
.modal p::-webkit-scrollbar {
  display: none;
}

/* Partner Program Modal Specific Styles */
.partner-modal {
  height: auto !important;
  max-height: 600px !important;
  min-height: 500px !important;
}

.partner-modal-logo {
  width: 225px !important;
}

.partner-modal-text {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex-grow: 1 !important;
  padding: 0 30px !important;
  margin: 15px 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.partner-modal-text::-webkit-scrollbar {
  display: none !important;
}

.partner-modal-buttons {
  margin-bottom: 20px !important;
  text-align: center !important;
  display: block !important;
}

.partner-modal-buttons .modal-close-button {
  display: inline-block !important;
  margin: 0 5px !important;
  vertical-align: top !important;
}